【正文】 下拉菜單。關(guān)于btngroup的編程實踐上： Bootstrap作為完整的前端工具集，內(nèi)建了大量的強大優(yōu)雅可重用的組件,包括按鈕(Button),導(dǎo)航(Navigation),標(biāo)簽(Labels)，徽章(Badges)，排版(Typography)，縮略圖( thumbnails),提醒(Alert)，進(jìn)度條(progress bar)，雜項(Miscellaneous)。如圖26所示，不同顏色的按鈕：圖26 按鈕(Buttons) 代碼片段如下：View Codetableclass=table tablebordered tablestriped thead tr thButton/th thclass=/th thDescription/th /tr /thead tbody tr tdbuttonclass=btn href=Default/button/td tdcodebtn/code/td tdStandard gray button with gradient/td /tr tr tdbuttonclass=btn btnprimary href=Primary/button/td tdcodebtn btnprimary/code/td tdProvides extra visual weight and identifies the primary action in a set of buttons/td /tr tr tdbuttonclass=btn btninfo href=Info/button/td tdcodebtn btninfo/code/td tdUsed as an alternative to the default styles/td /tr tr tdbuttonclass=btn btnsuccess href=Success/button/td tdcodebtn btnsuccess/code/td tdIndicates a successful or positive action/td /tr tr tdbuttonclass=btn btnwarning href=Warning/button/td tdcodebtn btnwarning/code/td tdIndicates caution should be taken with this action/td /tr tr tdbuttonclass=btn btndanger href=Danger/button/td tdcodebtn btndanger/code/td tdIndicates a dangerous or potentially negative action/td /tr tr tdbuttonclass=btn btninverse href=Inverse/button/td tdcodebtn btninverse/code/td tdAlternate dark gray button, not tied to a semantic action or use/td /tr /tbody /table 如果需要更多樣式的按鈕，可以在這個網(wǎng)站來定制。無論多復(fù)雜的布局都可以根據(jù)這些簡潔，可擴展，事件綁定的要素來輕易實現(xiàn)。主要提供了四個css的類來控制表格的邊和結(jié)構(gòu)。/p 守夜人軍團總司令.small.citetitle=路飛/cite/small/blockquote /div divclass=span6 blockquote p凌冬將至.我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護(hù)王國的堅盾。更多短語標(biāo)簽請參見[1].縮寫(abbreviations ).使用abbr，它重新封裝了該標(biāo)簽，鼠標(biāo)滑過會異步地顯示縮寫的含義。兩者顯示效果如圖21所示： 圖21 標(biāo)題與段落(Headingsamp。1 排版 (Typography)，它囊括標(biāo)題(Headings),段落 (paragraphs), 列表(lists)以及其他內(nèi)聯(lián)要素。參考文獻(xiàn)與延伸閱讀：。如果添加新的列，,.5 布局(Layout).本文最后我們討論創(chuàng)建頁面基礎(chǔ)模板的布局。4 流式格網(wǎng)系統(tǒng)(Fluid grid system).它使用%，而不是固定的px, ，： 圖14 流式格網(wǎng)系統(tǒng)(Fluid grid system) 以下代碼實現(xiàn)了是實現(xiàn)圖14中，兩個不同長度的流式頁面要素. divclass=rowfluid divclass=span4.../div divclass=span8.../div/div嵌套的流式格網(wǎng)和嵌套的固定格網(wǎng)，稍微有些不同。默認(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ù)雜的頁面要素布局。本系列教程遵循官方文檔結(jié)構(gòu)來介紹bootstrap，包括手腳架（Scaffolding),基礎(chǔ)CSS,組件,javascript插件，. Bootstrap建立了一個響應(yīng)式的12列格網(wǎng)布局系統(tǒng)，它引入了fixed和fluidwith兩種布局方式。大量工程師踴躍為該項目貢獻(xiàn)代碼，社區(qū)驚人地活躍，代碼版本進(jìn)化非?？焖?，官方文檔質(zhì)量極其高(可以說是優(yōu)雅)，同時涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡潔。本作品由VentLam創(chuàng)作，采用知識共享署名非商業(yè)性使用相同方式共享 中國大陸許可協(xié)議進(jìn)行許可。fork的項目?；趆tmlcss3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等。這意味著你頁面默認(rèn)寬度是940px,最小的單元要素寬度是940/(平板電腦，智能手機等)。各位可以試試將第一層的div長度改為其他值，看看效果。主要包括如表11所示的變量：變量默認(rèn)值說明gridColumns12列數(shù)gridColumnWidth60px每列的寬度gridGutterWidth20px列間距 表11 格網(wǎng)變量 我們通過修改以上值，并重新編譯Bootstrap來實現(xiàn)自定義格網(wǎng)系統(tǒng)。最后，再次強調(diào)，官方文檔極其優(yōu)秀，強烈推薦各位直接參考和學(xué)習(xí)之。本文將主要深入講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個方面的內(nèi)容。 標(biāo)題和段落使用常見的htmlh*/h*和p/P即可表現(xiàn),可以不必考慮margin,padding。這些短語標(biāo)簽也可以通過定義CSS的方式來豐富效果。如圖22所示圖22 引用(Blockquotes)代碼片段如下所示：divclass=row divclass=span6 blockquoteclass=pullright p凌冬將至. 我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護(hù)王國的堅盾。圖23較好顯示了這幾種列表：圖23 列表(lists) (Table).依然使用tabletrthtd等標(biāo)簽來表現(xiàn)表格。最好的地方在于你如何使用這些hmtl標(biāo)簽，它都會有很好的表現(xiàn)效果，而且不需要其他多余的代碼。如圖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…