bootstrap 類 歸類

bootstrap類總結

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 -->須要結合組件：

　 　   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（副內容）

　  (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