【正文】 如果需要更多樣式的按鈕，可以在這個網(wǎng)站來定制。、錯誤等狀態(tài)，需要wekit內(nèi)核。無論多復(fù)雜的布局都可以根據(jù)這些簡潔，可擴展，事件綁定的要素來輕易實現(xiàn)。 名字Class描述DefaultNone沒有樣式，只有行和列Basic.table只有在行間有豎線Bordered.tablebordered圓角和添加外邊框Zebrastripe.tablestriped為奇數(shù)行添加淡灰色的背景色Condensed.tablecondensed將橫向的 padding 對切 表21 表格選項(Table Options) 我們可以將這些CSS類結(jié)合起來使用，如圖24所示，顯示一個混合的表格：圖24 表格(Table) 代碼片段如下所示：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=checkbox id=optionsCheckbox2 value=option1 disabled This is a disabled checkbox /label /div /div divclass=controlgroup warning labelclass=controllabel for=inputWarningInput with warning/label divclass=controls inputtype=text id=inputWarning spanclass=helpinlineSomething may have gone wrong/span /div /div divclass=controlgroup error labelclass=controllabel for=inputErrorInput with error/label divclass=controls inputtype=text id=inputError spanclass=helpinlinePlease correct the error/span /div /div divclass=controlgroup success labelclass=controllabel for=inputSuccessInput with success/label divclass=controls inputtype=text id=inputSuccess spanclass=helpinlineWoohoo!/span /div /div divclass=controlgroup success labelclass=controllabel for=selectErrorSelect with success/label divclass=controls selectid=selectError option1/option option2/option option3/option option4/option option5/option /select spanclass=helpinlineWoohoo!/span /div /div divclass=formactions buttontype=submit class=btn btnprimarySave changes/button buttonclass=btnCancel/button /div /fieldset /form /div 3. 表單(Forms).Bootstrap的表單是非常驚艷的部分。主要提供了四個css的類來控制表格的邊和結(jié)構(gòu)。ul表示無序列表，ul class=unstyled表示無樣式的無序列表，ol表示有序列表，dl表示描述列表，dl class=dlhorizontal表示豎排描述列表。/p 守夜人軍團(tuán)總司令.small.citetitle=路飛/cite/small/blockquote /div divclass=span6 blockquote p凌冬將至.我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護(hù)王國的堅盾。 引用文字(Blockquotes).使用blockquote標(biāo)簽和small兩個標(biāo)簽，前者blockquote是引用的文字內(nèi)容，后者small是可選的要素，能夠添加書寫式的引用，比如內(nèi)容作者。更多短語標(biāo)簽請參見[1].縮寫(abbreviations ).使用abbr，它重新封裝了該標(biāo)簽，鼠標(biāo)滑過會異步地顯示縮寫的含義。請注意strong標(biāo)簽在html4中定義語氣更重的強調(diào)文本；在 HTML 5 中，strong 定義重要的文本。兩者顯示效果如圖21所示： 圖21 標(biāo)題與段落(Headingsamp。Bootstrap同時還用了一些其他的算術(shù)方法來創(chuàng)建所有類型要素的margin,padding,lineheight等。1 排版 (Typography)，它囊括標(biāo)題(Headings),段落 (paragraphs), 列表(lists)以及其他內(nèi)聯(lián)要素。 基于手腳架(Scaffolding)之上，Bootstrap的基礎(chǔ)CSS(Base CSS)提供了一系列的基礎(chǔ)Html頁面要素，旨在為用戶提供新鮮、一致的頁面外觀和感覺。參考文獻(xiàn)與延伸閱讀：。如圖15所示，左邊為Fixed布局，右邊為Fluid布局： 圖15 布局(Layout) 固定布局代碼如下： body divclass=container ... /div/body流式布局代碼如下：divclass=containerfluid divclass=rowfluid divclass=span2 !Sidebar content /div divclass=span10 !Body content /div /div/div如果對Bootstrap提供的布局不夠滿意，可以參見Less Frame Work 提供的模板。如果添加新的列，,.5 布局(Layout).本文最后我們討論創(chuàng)建頁面基礎(chǔ)模板的布局。自定義格網(wǎng)(Grid customization).。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)，稍微有些不同。 如圖13所示：