看完使用手冊后所作的筆記,，可以當做簡易使用指南使用,。

1.框架

1.1全局樣式

使用HTML5的doctype，scaffolding.less中定義全局樣式,，從2開始使用normalize.css,，并使用reset.less進行簡化

1.2默認柵格系統(tǒng)

940px寬12列柵格，使用row與span[NUM]的class來控制,，使用offset[NUM]來控制偏移,，于non-fluid可以直接嵌套，提供了四種響應式方案

1.3流動柵格系統(tǒng)

基于百分比,，將row改為row-fluid即可使用,，內嵌注意寬度是按照父列的百分比進行計算的

1.4自定義柵格

于variables.css中改變變量，默認列12,，寬60px,，間隔20px，要保證響應性還得修改responsive.less中內容

1.5布局

container為940px居中,，container-fluid則為流體布局

1.6 響應式設計

responsive.less中提供了一組media query：

智能手機《=480px,；流式列，非固定寬度

垂直平板《=767px,；流式列,，非固定寬度

水平平板》=768px；42px 20px

默認》=980px,； ? ? ?60px ?20px

大分辨率》=1200px,；70px 30px

要求添加meta標簽，<meta name=”viewport” content=”width=device-width, initail-scale=1.0″>

有諸如.visible-phone等支持類

2.基礎CSS

2.1 排版

整個排版單位基于variables.less中@baseFontSize與@baseLineHeight兩個變量,；

強調：string加粗,，em傾斜，abbr縮寫【title屬性存放顯示信息,，.initialism會減小縮略詞字體】,，address【使用br換行】

引用：blockquote【cite屬性存放來源URL，.pull-left或right決定內容居左右】,，small用于引言作者【會在內容前加入破折號】

列表：ul無序號有黑點，ul.unstyled無樣式,，ol有數字序號,，dl描述，dl.dl-horizontal水平描述

2.2代碼

code行級代碼,，pre塊級【<>需要轉義,，.pre-scrollable可以設置350px最大高度】，應用.prettyprint和.linenums來美化代碼【使用google prettify】

2.3表格

table thead【tr】 tbody【tr】tr【td或th】th【必須在thead之內】 caption,；

.table行之間有水平線分割【2.0開始為默認】 .table-borderd 【邊角為圓角】.table-striped 奇偶分開【使用:nth-child ie7-8不支持】 .table-condensed 緊湊豎直方向padding減半 幾個可以組合使用

2.4表單

四種表單：.form-vertical【2.0后默認,，控件標簽文字左對齊】.form-inline【左對齊,，控件inline-block】 .form-search【文本框圓化】 .form-horizontal【左浮動，標簽與控件居于同一行且文字右對齊】

支持控件：文本輸入框,，單選,，復選，下拉,，多選,，上傳，文本域

控件組：.control-group .control-label以及.controls【默認label應該與控件在同一行,？】

設計了各種控件狀態(tài)【如focus,，disabled，去除webkit的outline】,，包含.error .warning .success驗證樣式

擴張控件：.span*來指定輸入框大小,，使用.input-mini或small或medium或big來指定input和select控件大小，2.0開始對.checkbox或.radio應用.inline即可實現(xiàn)行級,，用label.checkbox包含input[type=checkbox]即可羅列,，前置或后置文本保證.add-on與input在同行, .help-inline與.help-block設置幫助文本

2.5 按鈕

可以應用到a button及input標簽上，.btn .btn-primary .btn-info等樣式【ie9不兼容】,，.btn-large small mini等尺寸,，.disabled類或disabled屬性可以禁用

2.6 圖標

使用.icon-前綴設置，用<i>x顯示圖標,，用.icon-white顯示反白圖標,，圖標定義在sprites.less中

3.組件

3.1按鈕

3.1.1按鈕組

建議一個組里只用一種元素<a>或<button>，使用.btn-group,，組合.btn-toolbar包裝.btn-group即可合成工具條組件

3.1.2按鈕下拉菜單

下拉菜單也得嵌套在.btn-group中,，使用dropdown-toggle與ul.dropdown-menu類，支持Bootstrap下拉插件,，箭頭使用.caret,，.dropdown-menu最近父標簽應用.dropup即可變?yōu)樯蠌棽藛巍緯淖?caret箭頭方向】

3.2導航

3.2.1默認項

基類.nav，對齊使用.pull-left或.pull-right【依賴float】,，標簽頁ul.nav-tabs,，膠囊鏈接ul.nav-pills

3.2.2疊放式導航

指豎直疊放ul.nav-stacked

3.2.3下拉項

綜合使用下拉按鈕【js下拉項插件】，參考3.1.2

3.2.4導航列表

<i>使用標簽,，.pider空表項顯示為水平間隔,，.active選中項，.nav-header列表頭

3.2.5 標簽頁切換導航

用.tabbale的p嵌套.nav-tabs,，存放容器為.tab-content,，內容頁使用.tab-pane，標簽置底用.tabs-below,，標簽居左.tabs-left,，居右.tabs-right

3.2.6 導航條

固定導航條div.navbar與.navbar-fixed-top【必須預留40px或更多padding】,，導航項ul.nav，li.pider-vertical分隔條,，項目名稱a.brand,，表單.navbar-form，對form.navbar-search中輸入框使用.search-query得到搜索框,，下拉菜單參考3.2.3,，導航條文本使用<p>，響應式嵌套在.nav-collapse.collapse并對按鈕都應有.btn-navbar【需要js切換插件】

3.2.7面包屑導航

ul.breadcrumb

3.2.8頁碼

div.pagination>ul,，同樣使用.active與.disabled,，頁碼對齊使用.pagination-centered或.pagination-right，前后頁ul.pager【居于左右端li.previous與li.next】

3.3行內標簽

span.label默認樣式,，span.label.label-success成功等

3.4 標號

span.badge默認樣式,，span.badge.badge-success等

3.5 排版

主角單元div.hero-unit中嵌套，標題h1,，可以嵌入small,，

3.6 縮略項

ul.thumbnails>li.span*>a.thumbnail>img鏈接圖像，div.thumbnail塊狀內容

3.7通知

基類div.alert【2.0開始替代.alert-message】,，例子：div.alert>a.close+strong,，加強.alert-block提供更大的padding而.alert-heading修飾標題，語義強化.alert-error或success或info

3.8進度條

基本div.progress>div.bar[style="width:60%"],，條紋效果div.progress.progress-striped【動畫效果加上.active,，使用css3漸變動畫，不支持ie】,，語義加強.progress-info或success等

3.9雜項

消息墻div.well,，關閉圖標a.close

4 JQUERY插件

4.1對話框【bootstrap-modal.js】

$().modal({backdrop:true背景,keyboard:true支持ESC,show:true初始化顯示}) ，

觸發(fā)設置data-toggle=”modal”然后data-target=”#foo”或href=“#foo”,，

對話框設置div.modal#foo即可：div.modal-header>a.close[data-dismiss="modal"]+div.modal-body+div.modal-footer【顯示動畫效果bootstrap-transition.js,，對.modal應用.fade即可】，方法.modal(“toggle”)或.modal(“show”)或.modal(“hide”),，事件show,shown,hide,hidden

4.2 下拉項【bootstrap-dropdown.js】

樣式應用導航欄與膠囊鏈接,，方法$().dropdown()，設置data-toggle=”dropdown”【也可以使用data-target=”#foo”或href=“#foo”來關聯(lián)下拉項與鏈接】

4.3 滾動偵測【bootstrap-scrollspy.js】

$(‘#navbar’).scrollspy()

標記添加data-spy=”scroll”【導航鏈接必須有href=”#id”且對應有dom#id】,，選項offset【默認為10】

4.4 可切換的標簽頁【bootstrap-tab.js】

方法$(‘#myTab’).tab(‘show’) 標簽頁需要設置data-target=’#id’或href=’#id’

標記添加data-toggle=”tab”或data-toggle=”pill”,，

事件show與shown 【event.target指向激活標簽，event.relatedTarget指向之前激活的標簽】

4.5 工具提示【bootstrap-tooltips.js】

$(‘#example’).tooltip(options) 中選項animation:true,，placement:’top’，selector,，title,，trigger:’hover’,，delay:{show:num, hide:100}

工具提示可以單獨設置data-屬性實現(xiàn)與js調用同樣的功能，指定一個selector即可【設置rel=”tooltip”】

方法：.tooltip(‘show’)?.tooltip(‘hide’)?.tooltip(‘toggle’)

4.6 彈出提示【bootstrap-popover.js】

$(‘#example’).popover(options)中選項animation:true,，placement:’top’,，selector，trigger:’hover’,，title,，content，delay

同樣可以單獨設置data-屬性,，方法也相同

4.7 通知消息【bootstrap-alert.js】

$(“.alert”).alert()

用在通知,，對關閉按鈕設置data-dismiss=”alert”即可定時關閉

方法$(“.alert”).alert(‘close’)，事件close closed

4.8 按鈕【bootstrap-button.js】

應用在btn與btn-group,，設置data-toggle=”button”與data-toggle=”button-checkbox”與data-toggle=”button-radio”樣式

方法$().button(‘toggle’) 按下

$().button(‘loading’) 載入文本data-loading-text屬性中

$().button(‘reset’)重置按鈕狀態(tài)

4.9 折疊手風琴【bootstrap-collapse.js】

$().collapse({toggle:false}),，事件show，shown,，hide,，hidden

設置data-toggle=“collapse”和data-target即可變?yōu)檎郫B式，data-target接收一個css選擇器以選取元素添加,，元素上需要添加.collapse,，默認打開用.in

4.10 輪播【bootstrap-carousel.js】

$().carousel({interval:5000, pause:’hover’})

標記用data-屬性提供前后翻頁，data-slide=”prev或next” 方法.carousel(‘cycle或pause或number或prev或next’) 事件slide,，slid

4.11 輸入提醒【bootstrap-typeahead.js】

$().typeahead({source:[]數據源, items:8列表顯示個數, matcher:fn, sorter:fn, highlighter:fn}),，

設置data-provide=”typeahead”

5. LESS

mixins.less中保存所有混合，編譯安裝npm intall -g less uglify-js lessc ./lib/bootstrap.less > bootstrap.css壓縮使用–compress,，引用less.js 也可以重新編譯.less文件并進行本地存儲