1、BootStrap組件——按鈕組：
.btn-group>.btn*5；
.btn-group-justified；
.btn-group-lg/sm/xs；
.btn-group-vertical——豎直按鈕組；
2、BootStrap組件——下拉菜單：
下拉菜單必須三級結構：
<div class="dropdown">
<a data-toggle="dropdown">觸發元素</a>
<ul class="dropdown-menu">
...
</ul>
</div>
3、BootStrap組件——導航：
①標簽頁式導航：
<ul class="nav nav-tabs">
<li calss="active">
<a data-toggle="tab"></a>
</li>
</ul>
②膠囊式導航：
<ul class="nav nav-pills [nav-justified nav-stacked]">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
③導航條中的導航：
<ul class="nav navbar-nav">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
4、BootStrap組件——警告框：
<div class="alert alert-danger/warning/... alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
<p>...</p>
</div>
5、BootStrap組件——進度條：
<div class="progress">
<div class="progress-bar" style="width:30%"></div>
</div>
* 可以使用定時器修改進度條寬度，讓它動起來；
6、BootStrap組件——列表組：
①使用ul>li實現：
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
②使用div>a實現:
<div class="list-group">
<a class="list-group-item"></a>
</div>
7、BootStrap組件——縮略圖：
* 配合柵格系統使用，實現批量展示；
<a class="thumbnail">
<img src="">
</a>
<div class="thumbnail">
<img>
<div class="caption"></div>
</div>
8、BootStrap組件——面板和面板組：
* 多個面板組實現"手風琴"組件：
<div class="panel panel-danger/warning/.../default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<div class="panel-footer"></div>
</div>
9、BootStrap中JS插件——折疊效果：
<button data-toggle="collapse" data-target="#b"></buttn>
<a data-toggle="collapse" href="#b"></a>
...
<div id="b" class="collapse in"></div>
10、BootStrap組件——響應式導航條：
* 響應式導航條必須配合折疊效果插件使用；
導航條分類：
①按顏色分：
白底黑字——.navbar-default；
黑底白字——.navbar-inverse；
②按定位方式分：
相對定位——默認；
固定定位——.navbar-fixed；
③按所在位置分：
固定在頂部——.navbar-fixed-top；
固定在底部——.navbar-fixed-bottom；
實現：
<div class="navbar navbar-default">
<div class="container">
<!--導航條頭部=brand+toggle-->
<div class="navbar-header">
...
</div>
<!--導航條折疊部分=導航+鏈接+表單+按鈕...-->
<div id="my-menu" class="collpase navbar-collpase">
...
</div>
</div>
</div>
【 微信掃一掃 】
