【正文】 圖13 嵌套列(Nesting columns) 以下代碼實現(xiàn)了是實現(xiàn)圖13中，第一層的寬度為12和第二層兩個寬度為6的兩個div.divclass=row divclass=span12 Level 1 of column divclass=row divclass=span6Level 2/div divclass=span6Level 2/div /div /div/div嵌套的div長度之和不能大于它的父div，否則會溢出疊加。默認(rèn)格網(wǎng)系統(tǒng)直觀概念如圖11所示： 圖11 默認(rèn)格網(wǎng)系統(tǒng)(Default Grid System) 以下簡單的代碼則是實現(xiàn)圖11中，第三列的寬度為4和寬度為8的兩個div. divclass=row divclass=span4.../div divclass=span8.../div/div 偏移列. 有時候，頁面要素前面需要一些空白，bootstrap提供了偏移列來實現(xiàn)，如圖12所示： 圖1２ 偏移列(Offset columns)以下代碼實現(xiàn)了是實現(xiàn)圖12中，第一列的寬度為4和偏移度為4寬度為4的兩個div.divclass=row divclass=span4.../div divclass=span4 offset4.../div/div 嵌套列. 嵌套列是容許用戶實現(xiàn)更復(fù)雜的頁面要素布局。3 格網(wǎng)系統(tǒng)(Grid System).默認(rèn)的Bootstrap格網(wǎng)系統(tǒng)提供一個寬達(dá)940像素的,12列的格網(wǎng)。本系列教程遵循官方文檔結(jié)構(gòu)來介紹bootstrap，包括手腳架（Scaffolding),基礎(chǔ)CSS,組件,javascript插件，. Bootstrap建立了一個響應(yīng)式的12列格網(wǎng)布局系統(tǒng)，它引入了fixed和fluidwith兩種布局方式。如下圖所示： GitHub上這樣介紹 bootstrap：簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html,css,javascript工具集。大量工程師踴躍為該項目貢獻(xiàn)代碼，社區(qū)驚人地活躍，代碼版本進(jìn)化非?？焖伲俜轿臋n質(zhì)量極其高(可以說是優(yōu)雅)，同時涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡潔。Bootstrap由MARK OTTO和Jacob Thornton所設(shè)計和建立，在github上開源之后，迅速成為該站上最多人watchamp。本作品由VentLam創(chuàng)作，采用知識共享署名非商業(yè)性使用相同方式共享 中國大陸許可協(xié)議進(jìn)行許可。BootStrap入門教程 (一) 2011年，twitter的“一小撮”工程師為了提高他們內(nèi)部的分析和管理能力，用業(yè)余時間為他們的產(chǎn)品構(gòu)建了一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集BootStrap。fork的項目。要素排版利落大方。基于htmlcss3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等。我們從全局樣式(Global Style),格網(wǎng)系統(tǒng)(Grid System),流式格網(wǎng)(Fluid grid System),自定義(Customing),布局(Layouts),響應(yīng)式設(shè)計(Responsive Design)這六五個方面深入講解Boostrap的scaffolding.1 全局樣式(Global Style).Bootstrap要求html5的文件類型，所以必須在每個使用bootstrap頁面的開頭都引用: !DOCTYPE htmlhtmllang=en .../html2 同時，使用baseFontFamily,baseFontSize,linkColor等變量來控制基本排版。這意味著你頁面默認(rèn)寬度是940px,最小的單元要素寬度是940/(平板電腦，智能手機(jī)等)。在bootstrap中實現(xiàn)嵌套列非常簡單， 和相應(yīng)的長度的span* div即可。各位可以試試將第一層的div長度改為其他值，看看效果。嵌套流式格網(wǎng)(Fluid nesting)的子要素不用匹配父要素的寬度，子要素用100%來表示占滿父要素的頁面寬度。主要包括如表11所示的變量：變量默認(rèn)值說明gridColumns12列數(shù)gridColumnWidth60px每列的寬度gridGutterWidth20px列間距 表11 格網(wǎng)變量 我們通過修改以上值，并重新編譯Bootstrap來實現(xiàn)自定義格網(wǎng)系統(tǒng)。如前面所言，Bootstrap提供兩種布局方式，包括固定(Fixed)和流式(Fliud)布局。最后，再次強(qiáng)調(diào)，官方文檔極其優(yōu)秀，強(qiáng)烈推薦各位直接參考和學(xué)習(xí)之。. (H5BP) 8. Bootstrap英文教程 BootStrap入門教程 (二) 上講回顧：Bootstrap的手腳架(Scaffolding)提供了固定(fixed)和流式(fluid)兩種布局，它同時建立了一個寬達(dá)940px和12列的格網(wǎng)系統(tǒng)。本文將主要深入講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個方面的內(nèi)容。:baseFontSize 和 baseLineHeight來控制整體排版的樣式。 標(biāo)題和段落使用常見的htmlh*/h*和p/P即可表現(xiàn),可以不必考慮margin,padding。paragraphs) 強(qiáng)調(diào)(Emphasis).使用strong和em兩個標(biāo)簽，前者使用粗體，后者使用斜體來強(qiáng)調(diào)標(biāo)簽內(nèi)容。這些短語標(biāo)簽也可以通過定義CSS的方式來豐富效果。引入title屬性來顯示原文。如圖22所示圖22 引用(Blockquotes)代碼片段如下所示：divclass=row divclass=span6 blockquoteclass=pullright p凌冬將至. 我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護(hù)王國的堅盾。/p 守夜人軍團(tuán)總司令.small.citetitle=路飛/cite/small/blockquote /div /div (lists).Bootstrap提供三種標(biāo)簽來表現(xiàn)不同類型的列表。圖23較好顯示了這幾種列表：圖23 列表(lists) (Table).依然使用tabletrthtd等標(biāo)簽來表現(xiàn)表格。表21顯示了bootstrap的table可選項。最好的地方在于你如何使用這些hmtl標(biāo)簽，它都會有很好的表現(xiàn)效果，而且不需要其他多余的代碼。主要提供了四四種表單選項，如表22所示：名字Class描述Vertical (default).formvertical (not required)堆放式, 可控制的左對齊標(biāo)簽Inline.forminline左對齊標(biāo)簽和簡約的內(nèi)聯(lián)控制塊Search.formsearch放大的圓角，具有美感的搜索框Horizontal.formhorizontal左漂浮, 右對齊標(biāo)簽 推薦到官方文檔去體驗下各種表單要素的真實效果，在chrome,Firefox等現(xiàn)代瀏覽器下顯示十分優(yōu)雅。如圖25所示：圖25 表單狀態(tài)控制 代碼片段如下： View Codedivclass=span8 formclass=formhorizontal fieldset divclass=controlgroup labelclass=controllabel for=focusedInputFocused input/label divclass=controls inputclass=inputxlarge focused id=focusedInput type=text value=This is focused… /div /div divclass=controlgroup labelclass=controllabelUneditable input/label divclass=controls spanclass=inputxlarge uneditableinputSome value here/span /div /div divclass=controlgroup labelclass=controllabel for=disabledInputDisabled input/label divclass=controls inputclass=inputxlarge disabled id=disabledInput type=text placeholder=Disabled input here… disabled /div /div divclass=controlgroup labelclass=controllabel for=optionsCheckbox2Disabled checkbox/label divclass=controls labelclass=checkbox inputtype=c