http://www.bootcss.com/
http://www.runoob.com/bootstrap/bootstrap-panels.html 查找基本的没问题
https://www.cnblogs.com/clschao/articles/10387580.html 阿里云iconfont使用
http://www.fontawesome.com.cn/ fontawesome 图标库 比较全
大概使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="iconfontfile/iconfont.css"> <link rel="stylesheet" href="iconfontfile/demo.css"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> </head> <body> <img src="meinv.png" alt="..." class="img-rounded"> <img src="meinv.png" alt="..." class="img-circle"> <img src="meinv.png" alt="..." class="img-thumbnail"> <!--图标叉号--> <br> <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> <!--点赞图标--> <div class="glyphicon glyphicon-thumbs-up" style="color:blue;font-size: 50px"></div> <!--Bootstrap框架和inconfont、font-awesome使用--> <span class="iconfont icon-icon_xinlang-chunselogo"></span> <i class="fa fa-camera-retro fa-5x fa-spin"></i> <i class="fa fa-bath"></i> <div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> 首页</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> 关于我们</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 后台应用编辑</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 系统设置</a> </div> <input type="text" value="" class="iconfont"> <script src="jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>