最近看了bootstrap的一个小的视频，快速的做出一个后台界面；介绍了一些典型的用法；
里面涉及了：
下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、
图片样式、输入组、折叠菜单panel、面包屑、表格样式、分页组件样式；
下面将跟着项目做出的小例子贴出来：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link type="text/css" href="https://www.jb51.net/bootstrap/bootstrap.min.css" /> <title>bootstrap小例子</title> <style type="text/css"></style> </head> <body> <!-- 导航栏部分 --> <div> <div> <div> <div> <small></small> MicroSoft </div> </div> <ul> <li> <a href="#"> <span></span> <i>2</i> </a> </li> <li> <a href="#"> <span></span> <i>1</i> </a> </li> <li> <a href="#"> <span></span> <i>1</i> </a> </li> <li> <a href="#" data-toggle="dropdown"> <img src="https://www.jb51.net/user_photo.png"/> <small>Welcome</small> admin <span></span> </a> <ul> <li> <a href="#"> <span></span> Setting </a> </li> <li></li> <li> <a href="#"> <span></span> Profile </a> </li> <li></li> <li> <a href="#"> <span></span> Logout </a> </li> </ul> </li> </ul> </div> </div> <!-- 页面部分 --> <div> <div> <div> <div> <input type="text" /> <div> <a href="#"> <span></span> </a> </div> </div> </div> <div> <div> <div> <a href="#collapseA" data-parent="#box" data-toggle="collapse">用户管理</a> </div> <div> <div> <ul> <li><a href="#">用户列表</a></li> <li><a href="#">用户添加</a></li> <li><a href="#">用户删除</a></li> </ul> </div> </div> </div> <div> <div> <a href="#collapseB" data-parent="#box" data-toggle="collapse">产品管理</a> </div> <div> <div> <ul> <li><a href="#">产品列表</a></li> <li><a href="#">产品添加</a></li> <li><a href="#">产品删除</a></li> </ul> </div> </div> </div> </div> </div> <div> <div> <ul> <li><span></span><a href="#">Home</a></li> <li><a href="#">User</a></li> <li>Add</li> </ul> </div> <div> <div> <a>用户管理</a> </div> <div> <table> <thead> <tr> <th>ID</th> <th>brand</th> <th>name</th> <th>channel</th> <th>inventory</th> <th>price</th> <th>isSale</th> <th>operation</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> <tr> <td>2</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> <tr> <td>3</td> <td>Apple</td> <td>Plus 6</td> <td>4G</td> <td>10</td> <td>4500</td> <td>yes</td> <td>add</td> </tr> </tbody> <tfoot> <tr> <td colspan="8"> <ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </td> </tr> </tfoot> </table> </div> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/bootstrap/bootstrap.min.js"></script> </body> </html>
作为例子参考还是非常不错的。不记得的时候查下。
效果图：
