【正文】 圖1２ 偏移列(Offset columns)以下代碼實(shí)現(xiàn)了是實(shí)現(xiàn)圖12中，第一列的寬度為4和偏移度為4寬度為4的兩個div.divclass=row divclass=span4.../div divclass=span4 offset4.../div/div 嵌套列. 嵌套列是容許用戶實(shí)現(xiàn)更復(fù)雜的頁面要素布局。如果添加新的列，,.5 布局(Layout).本文最后我們討論創(chuàng)建頁面基礎(chǔ)模板的布局。1 排版 (Typography)，它囊括標(biāo)題(Headings),段落 (paragraphs), 列表(lists)以及其他內(nèi)聯(lián)要素。更多短語標(biāo)簽請參見[1].縮寫(abbreviations ).使用abbr，它重新封裝了該標(biāo)簽，鼠標(biāo)滑過會異步地顯示縮寫的含義。主要提供了四個css的類來控制表格的邊和結(jié)構(gòu)。如圖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)站來定制。關(guān)于btngroup的編程實(shí)踐上：所有的導(dǎo)航組件，包括tabs,pills,lists標(biāo)簽。，至于頂部或者底部，用navbarfixedtop與navbarfixedbottom來置頂/。laquo。laquo。raquo。 一個是多頁面導(dǎo)航，用于多個頁碼的跳轉(zhuǎn)，它具有極簡主義風(fēng)格的翻頁提示，能夠很好應(yīng)用在結(jié)果搜索頁面；另一種則是Pager，是輕量級組件，可以快速翻動上下頁，適用于個人博客或者雜志。如圖34所示：圖34 列表與下拉導(dǎo)航 代碼依然簡單，片段如下：View Code divclass=span5 well pricehover h2基礎(chǔ)Nav List/h2 ulclass=nav navlist liclass=navheaderList header/li liclass=activeahref=Home/a/li liahref=Library/a/li liahref=Applications/a/li liclass=navheaderAnother list header/li liahref=Profile/a/li liahref=Settings/a/li liclass=divider/li liahref=Help/a/li /ul /div divclass=span5 well pricehover h3圖標(biāo)List/h3 ulclass=nav navlist liclass=navheaderList header/li liclass=activeahref=iclass=iconwhite iconhome/i Home/a/li liahref=iclass=iconbook/i Library/a/li liahref=iclass=iconpencil/i Applications/a/li liclass=navheaderAnother list header/li liahref=iclass=iconuser/i Profile/a/li liahref=iclass=iconcog/i Settings/a/li liclass=divider/li liahref=iclass=iconflag/i Help/a/li /ul /div /div divclass=row divclass=span5 well pricehover h3pills式的下拉菜單/h3 ulclass=nav navpills liclass=activeahref=Home/a/li liahref=Help/a/li liclass=dropdown aclass=dropdowntoggle datatoggle=dropdown href=Dropdown bclass=caret/b/a ulclass=dropdownmenu liahref=Action/a/li liahref=Another action/a/li liahref=Something else here/a/li liclass=divider/li liahref=Separated link/a/li /ul /li /ul /div divclass=span5 well pricehover h3tab式的下拉菜單/h3 ulclass=nav navtabs liclass=activeahref=Home/a/li liahref=Help/a/li liclass=dropdown aclass=dropdowntoggle datatoggle=dropdown href=Dropdown bclass=caret/b/a ulclass=dropdownmenu liahref=Action/a/li liahref=Another action/a/li liahref=Something else here/a/li liclass=divider/li liahref=Separated link/a/li /ul /li /ul /div 導(dǎo)航條(Navbar) 最最重要的頁面要素，莫過于頁面頭部的導(dǎo)航條，這是幾乎任何頁面都會使用到的。 buttonclass=btn btnlarge btnprimaryLeft/button buttonclass=btn btnlarge btnprimaryMiddle/button buttonclass=btn btnlarge btnprimaryRight/button /div /div divclass=span4 well pricehoverh2按鈕工具條/h2 divclass=btntoolbar divclass=btngroup buttonclass=btn1/button buttonclass=btn2/button buttonclass=btn3/button buttonclass=btn4/button /div divclass=btngroup buttonclass=btn5/button buttonclass=btn6/button buttonclass=btn7/button /div divclass=btngroup buttonclass=btn8/button /div /div /divdivclass=span8 well pricehover h3按鈕下拉菜單/h3 p/p divc