`bootstrap總結(jié)
base css 我分為了幾大類
1碧查，列表
.unstyled(無樣式列表),.dl-horizontal（dl列表水平排列）
2坑资，代碼
code（行級）,pre（塊級）耗帕，.pre-scrollable(顯示滾動條), 顯示行號和美化： .prettyprint,.linenums
3，表格
.table(基礎樣式) .table-bordered(樣式邊框) , .table-striped(間隔效果) , .table-condensed(縮小表格)
4袱贮，表單
.from-inline(所有元素在一列) , .form-horizontal（沒一橫排一個表單項）
.form-horizontal -->需要結(jié)合組件：
fieldset.control-group
|
|-->label.control-label
|
|-->.controls
5仿便，按鈕
.btn(基礎樣式) , .btn-primary(重要，藍色) , .btn-info(信息攒巍，淺藍), .btn-success(成功嗽仪，綠色)， .btn-warning(警告,黃色) .btn-danger(危險柒莉，紅色) , .btn-inverse（相反闻坚，黑色)
6，標簽
.label(基礎樣式), .label-important(重要兢孝，紅色) 窿凤， .label-success(成功仅偎， 藍色), .label-warning(警告,黃色), .label-info(信息，淺藍色) .label-inverse(相反雳殊，黑色)
7橘沥，標記
.badge(基礎樣式), .badge-success(成功，綠色), .badge-warning(警告夯秃，黃色)座咆，badge-error(錯誤，紅色)仓洼， .badge-info(信息介陶，淺藍色)
8，警告
.alert(基礎樣式), .alert-success(成功衬潦，綠色), .alert-error(錯誤斤蔓，紅色), .alert-info(信息，藍色) , .alert-block（獲得更多的padding）, 里面可以 .alert-heading（標題） 镀岛， <a class="close" data-dismiss="alert"$amp;>amp;$amp;times;</a>（關閉按鈕）
9弦牡，圖標
.icon-user（用戶）, .icon-drash（刪除）, .icon-refrash(刷新), .icon-cog(齒輪) icon-white(反白)
10,手風琴
.accordion
|
|->.accordion-group
| |
| |->.accordion-heading
| | |
| | |->.accordion-toggle (data-toggle="collapse" #demo1" data-parent="#accordion2")
| |
| |->accordion-body
| | |
| | |->accordion-inner
組件。
1漂羊，導航
.navbar (.navbar-fixed-top|.navbar-fixed-bottom)
|
|-->.navbar-inner
|
|->container
|
|->brand (項目名)
|
|->ul.nav (菜單)
| |
| |->li.divider-vertical 豎分割線
|
|->form.navbar-form(搜索框)
| |
| |->search-query
|
|->.dropdown (下拉菜單)
|
|->pull-right(使元素有右浮動)
2驾锰，面包屑
ul.breadcrumb
|
|->li
|
|->a
|
|->span.divider(分割線<span class="divider">/</div>)
3，排版
(1) 主角元素
.hero-unit
|
|->h1(主標題)
|
|->p（副內(nèi)容）
(2) 頁面標題走越，有下邊框
.page-header
|
|->h1
|->small
4椭豫，tab頁
div.tabbable (tabs-below|tabs-left|tabs-bottom)
|
|->ul.nav (nav-tabs|nav-pills|nav-list) nav-stracked(豎立折疊式)
| |
| |->li.active
| | |
| | |->a--> #id", data-toggle="tab"
| |
| |->li.nav-header (nav-list時用，表示一個菜單頭)
| |
| |->li.divider（nav-list時用旨指，分割線）
| |
| |->li.dropdown
|
|->tab-content
| |
| |->div#id .tab-pane (active)
5赏酥，縮略列表
ul.thumbnails
|
|->li.span*
|
|->.thumbnail
|
|->(.caption) 詳情描述
6，按鈕組
.btn-toolbar
|
|->.btn-group
|
|->.btn
7谆构，下拉菜單
.btn-group | .dropdown |.dropup
|
|->.btn .dropdown-toggle (data-toggle="dropdown")
| |
| |->span.caret
|
|->ul.dropdown-menu
|
|->li.divider
8裸扶，進度條
.progress (.progress-striped| .actvie)
|
|->.bar ()
9，頁碼
.pagination (.pagination-centered|.paginaction-right)
|
|->ul
|
|->li(.active)
javascript：
1搬素，對話框
（1）對話框組件：
.modal (設置寬度)
|
|->.modal-header
| |
| |->.close (data-dismiss="modal") [注呵晨，.close必須放在前面]
| |
| |->h3
|
|->.modal-body
|
|->.modal-footer
| |
| |->.btn
(2)標記觸發(fā)
<a #mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打開對話框</a>
(3)javascript
a)初始化：
$("#mymodal").modal({
dropback:true,
keyboard:true,
show:true
});
b) 觸發(fā)
$("#mymodal").modal(
