bootstrap小結

bootstrap總結

　　

bootstrap總結

 

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

　 　 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 

　 　 (2)標記觸發 

　 　 <a #mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打開對話框</a> 

　 　 (3)javascript 

　 　 a)初始化： 

　 　 $("#mymodal").modal({ 
　 　 　 dropback:true, 
　 　 　 keyboard:true, 
　 　 　 show:true 
　 　 }); 

　 　 b) 觸發 

　 　 $("#mymodal").modal(