bootstrap中文手冊指南解析

1、Bootstrap簡易指南看完使用手冊后所作的筆記，可以當(dāng)做簡易使用指南使用。1. 框架i.i全局樣式使用HTML5的doctype ，scaffolding.less 中定義全局樣式，從 2開始使用normalize.css ， 并使用reset.less進(jìn)行簡化1.2默認(rèn)柵格系統(tǒng)940px寬12列柵格，使用row與spanNUM的class來控制，使用offsetNUM來控制偏移,于non-fluid可以直接嵌套，提供了四種響應(yīng)式方案1.3流動?xùn)鸥裣到y(tǒng)基于百分比，將row改為row-fluid即可使用，內(nèi)嵌注意寬度是按照父列的百分比進(jìn)行計算的1.4自定義柵格于variables.css中改

2、變變量，默認(rèn)列12，寬60px，間隔20px，要保證響應(yīng)性還得修改respon sive .l ess 中內(nèi)容1.5布局contain er 為 940px 居中，con tai ner-fluid 則為流體布局1.6響應(yīng)式設(shè)計 respon sive .l ess 中提供了一組 media query 智能手機(jī)=480px ;流式列，非固定寬度垂直平板=767px ;流式列，非固定寬度水平平板=768px ; 42px 20px默認(rèn)=980px ;? ? ?60px ?20px大分辨率=1200px ； 70px 30px要求添力口 meta 標(biāo)簽，有諸如.visible-phone等支持類

3、2. 基礎(chǔ)CSS2.1排版整個排版單位基于 variables.less 中 baseFo ntSize 與 baseLi neHeight 兩個變量；強(qiáng)調(diào)：string加粗，em傾斜，abbr縮寫【title屬性存放顯示信息，.initialism會減小縮略詞 字體】，address【使用br換行】引用：blockquote【cite屬性存放來源 URL, .pull-left或right決定內(nèi)容居左右】，small用 于引言作者【會在內(nèi)容前加入破折號】列表：ul無序號有黑點(diǎn)，ul.unstyled無樣式，ol有數(shù)字序號，dl描述，dl.dl-horizontal水平描述2.2代碼code行

4、級代碼，pre塊級【 需要轉(zhuǎn)義，.pre-scrollable 可以設(shè)置350px最大高度】，應(yīng) 用.prettyprint 禾口 .linenums 來美化代碼【使用 google prettify 】2.3表格 table thead【tr】tbody【tr】tr【td或th】 th【必須在thead之內(nèi)】 caption ；.table行之間有水平線分割【2.0開始為默認(rèn)】.table-borderd【邊角為圓角】.table-striped奇偶分開【使用：nth-child ie7-8不支持】.table-condensed緊湊豎直方向 padding減半幾個可以組合使用2.4表單四種

5、表單：.form-vertical【2.0后默認(rèn)，控件標(biāo)簽文字左對齊】.form-i nline【左對齊，控件inline-block】.form-search【文本框圓化】.form-horizontal【左浮動，標(biāo)簽與控件居于同 一行且文字右對齊】支持控件：文本輸入框，單選，復(fù)選，下拉，多選，上傳，文本域控件組：.control-group .control-label以及.controls【默認(rèn)label應(yīng)該與控件在同一行？】設(shè)計了各種控件狀態(tài)【如 focus， disabled，去除webkit的outline】，包含.error .war ning .success驗證樣式擴(kuò)張控件：

6、.spa n*來指定輸入框大小，使用.in put-mi ni或small或medium 或big來指定in put 和select控件大小，2.0開始對.checkbox或.radio應(yīng)用.inline即可實(shí)現(xiàn)行級，用 label.checkbox 包含in puttype=checkbox即可羅列，前置或后置文本保證.add-o n與in put在同行,.help-inline與.help-block設(shè)置幫助文本2.5按鈕可以應(yīng)用到a butt on及input標(biāo)簽上，.btn .bt n-primary .bt n-info等樣式【ie9不兼容】，.btn-large small min

7、i等尺寸，.disabled 類或disabled屬性可以禁用2.6圖標(biāo)使用.icon-前綴設(shè)置，用x顯示圖標(biāo)，用.icon-white顯示反白圖標(biāo)，圖標(biāo)定義在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 最近

8、父標(biāo)簽應(yīng)用.dropup即可變?yōu)?上彈菜單【會改變.caret箭頭方向】3.2導(dǎo)航3.2.1默認(rèn)項基類.nav ,對齊使用.pull-left或.pull-right【依賴float】，標(biāo)簽頁ul.nav-tabs，膠囊鏈接ul. nav-pills3.2.2疊放式導(dǎo)航指豎直疊放ul.nav-stacked3.2.3下拉項綜合使用下拉按鈕【js下拉項插件】，參考.4導(dǎo)航列表i使用標(biāo)簽，.pider空表項顯示為水平間隔，.active選中項，.nav-header列表頭3.2.5標(biāo)簽頁切換導(dǎo)航用.tabbale的p嵌套.nav-tabs，存放容器為.tab-content，內(nèi)容頁

9、使用.tab-pane，標(biāo)簽置底 用.tabs-below，標(biāo)簽居左.tabs-left，居右.tabs-right3.2.6 導(dǎo)航條固定導(dǎo)航條 div.navbar與.navbar-fixed-top【必須預(yù)留40px或更多padding】，導(dǎo)航項ul.nav , li.pider-vertical 分隔條，項目名稱a.brand，表單.navbar-form，對 form.navbar-search中輸入框使用.search-query得到搜索框，下拉菜單參考3.2.3，導(dǎo)航條文本使用，響應(yīng)式嵌套在.nav-collapse.collapse并對按鈕都應(yīng)有.btn-navbar【需要js切

10、換插件】3.2.7面包屑導(dǎo)航ul.breadcrumb3.2.8頁碼div.paginationul ，同樣使用.active 與.disabled，頁碼對齊使用 .pagination-centered或.pagination-right ，前后頁 ul.pager 【居于左右端.previous 與 li.next 】3.3行內(nèi)標(biāo)簽span.label 默認(rèn)樣式，span.label.label-success成功等3.4標(biāo)號span.badge 默認(rèn)樣式，span.badge.badge-success等3.5排版主角單元div.hero-unit中嵌套，標(biāo)題 h1，可以嵌入small，

11、3.6縮略項ul.thumbnailsli.span*a.thumbnailimg鏈接圖像，div.thumbnail 塊狀內(nèi)容3.7通知 基類 div.alert【2.0 開始替代.alert-message 】，例子：div.alerta.close+strong ，加強(qiáng).alert-block提供更大的 padding 而.alert-heading 修飾標(biāo)題，語義強(qiáng)化.alert-error 或success 或info3.8進(jìn)度條基本 gressdiv.barstyle=width:60%，條紋效果 gress-striped 【動畫效果

12、加上.active，使用css3漸變動畫，不支持 ie】語義加強(qiáng).progress-info 或success 等3.9雜項消息墻div.well，關(guān)閉圖標(biāo) a.close4 jQuery 插件4.1 對話框【bootstrap-modal.js 】$().modal(backdrop:true 背景，keyboard:true 支持 ESC,show:true 初始化顯示)，觸發(fā)設(shè)置 data-toggle= modal 然后 data-target= #foo 或 href= “foo ”對話框設(shè)置div.modal#foo即可：div.modal-headera.closedata-di

13、smiss=modal+div.modal-body+div.modal-footer【顯示動畫效果 bootstrap-transition.js，對.modal 應(yīng)用.fade 即可】，方法.modal( toggle ”或.modal( show ”或.modal( hide ”，事件 show,shown,hide,hidden4.2 下拉項【bootstrap-dropdown.js】樣式應(yīng)用導(dǎo)航欄與膠囊鏈接，方法$().dropdown()，設(shè)置data-toggle= dropdown ”【也可以使用data-target= #foo 或href= #foo 來關(guān)聯(lián)下拉項與鏈接】

14、4.3 滾動偵測【bootstrap-scrollspy.js 】$( navbar ).scrollspy()標(biāo)記添加data-spy= scroll【導(dǎo)航鏈接必須有 href= #id 且對應(yīng)有dom#id】選項offset【默認(rèn)為10】4.4可切換的標(biāo)簽頁【bootstrap-tab.js 】方法 $( #myTab .tab( Show 標(biāo)簽頁需要設(shè)置 data-target= #id 或 href= #id 標(biāo)記添力口 data-toggle= tab或 data-toggle= pill”事件show與shown【event.target指向激活標(biāo)簽，event.relatedT

15、arget指向之前激活的標(biāo) 簽】4.5 工具提示【bootstrap-tooltips.js 】$( example .tooltip(options)中選項 animation:true ， placement: top selector， title，trigger: over delay:show:num, hide:100工具提示可以單獨(dú)設(shè)置data-屬性實(shí)現(xiàn)與js調(diào)用同樣的功能，指定一個selector即可【設(shè)置rel= tooltip ”方法：.tooltip( show #?.tooltip( hide #?.tooltip( toggle #4.6 彈出提示【bootstrap

16、-popover.js 】$( #example #.popover(options) 中選項 animation:true , placement: #op , selector , trigger: hover , title , content , delay同樣可以單獨(dú)設(shè)置data-屬性，方法也相同4.7 通知消息【bootstrap-alert.js 】$( “alert ”.alert()用在通知，對關(guān)閉按鈕設(shè)置data-dismiss= alert 即可定時關(guān)閉 方法 $( .alert ”.alert( close #,事件 close closed應(yīng)用在 btn 與 btn-

17、group，設(shè)置 data-toggle= button 與 data-toggle= button-checkbox 與 data-toggle= button-radio 樣式方法 $().button( toggle 按下$().button( l6ading 載入文本 data-loading-text 屬性中$().button( reset 重置按鈕狀態(tài)4.9 折疊手風(fēng)琴【bootstrap-collapse.js 】$().collapse(toggle:false) ，事件 show， shown ， hide， hidden設(shè)置 data-toggle= collapse 和 data-target 即可變?yōu)檎郫B式，data-target 接收一個 css 選擇器以選取元素添加，元素上需要添加.collapse，默認(rèn)打開用.in4.10 輪播【bootstrap-carousel.js 】$().carousel(interval:5000, pause:hover )標(biāo)記用 data-屬性提供前后翻頁，data-slide= prev 或 next ” 方法.carousel( cycle 或 pause或 number 或 prev 或 next事件 slide , slid4.11 輸入提醒【boot