【正文】 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)航條，這是幾乎任何頁面都會(huì)使用到的。Bootstrap提供的基礎(chǔ)樣式的導(dǎo)航條，是目前互聯(lián)網(wǎng)的流行的“硬又黑”，當(dāng)然你可以用Less來定制它。，至于頂部或者底部，用navbarfixedtop與navbarfixedbottom來置頂/。同時(shí)支持響應(yīng)式操作。如圖35所示：圖35 導(dǎo)航條 代碼片段如下：View Code divclass=span10 well pricehover divclass=navbar divclass=navbarinner divclass=container aclass=btn btnnavbar datatoggle=collapse datatarget=.navcollapse spanclass=iconbar/span spanclass=iconbar/span spanclass=iconbar/span /a aclass=brand href=Project name/a divclass=navcollapse ulclass=nav liclass=activeahref=Home/a/li liahref=Link/a/li liahref=Link/a/li liahref=Link/a/li liclass=dropdown ahref= class=dropdowntoggle datatoggle=dropdownDropdown bclass=caret/b/a ulclass=dropdownmenu liahref=Action/a/li liahref=Another action/a/li liahref=Something else here/a/li liclass=divider/li liclass=navheaderNav header/li liahref=Separated link/a/li liahref=One more separated link/a/li /ul /li /ul formclass=navbarsearch pullleft action= inputtype=text class=searchquery span2 placeholder=Search /form ulclass=nav pullright liahref=Link/a/li liclass=dividervertical/li liclass=dropdown ahref= class=dropdowntoggle datatoggle=dropdownDropdown 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! /.navcollapse /div /div! /navbarinner /div! /navbar /div 面包屑導(dǎo)航(Breadcrumbs)與頁碼(Pagination) 面包屑導(dǎo)航(BreadCrumbs)導(dǎo)航用作顯示用戶在網(wǎng)站或者App的位置，關(guān)于Breadcrumbs 面包屑導(dǎo)航的優(yōu)點(diǎn)與對SEO的作用，請參考這個(gè)頁面。Bootstrap的“面包”用在代碼倉庫式的頁面很優(yōu)雅，具體實(shí)現(xiàn)如圖36所示：圖36 面包屑導(dǎo)航(BreadCrumbs) 頁碼(Pagination)也是非常常用的頁面要素，Bootstrap提供兩種風(fēng)格的翻頁組件。 一個(gè)是多頁面導(dǎo)航，用于多個(gè)頁碼的跳轉(zhuǎn)，它具有極簡主義風(fēng)格的翻頁提示，能夠很好應(yīng)用在結(jié)果搜索頁面；另一種則是Pager，是輕量級(jí)組件，可以快速翻動(dòng)上下頁，適用于個(gè)人博客或者雜志。如圖37所示： 圖37 頁碼(Pagination) 以上兩種導(dǎo)航，代碼片段如下：View Code divclass=span10 well pricehover ulclass=breadcrumb liclass=activeHome/li /ul ulclass=breadcrumb liahref=Home/a spanclass=divider//span/li liclass=activeLibrary/li /ul ulclass=breadcrumb liahref=Home/a spanclass=divider//span/li liahref=Library/a spanclass=divider//span/li liclass=activeData/li /ul /div divclass=span5 well pricehoverdivclass=pagination ul liclass=disabledahref=amp。laquo。/a/li liclass=activeahref=1/a/li liahref=2/a/li liahref=3/a/li liahref=4/a/li liahref=amp。raquo。/a/li /ul /div divclass=pagination ul liahref=amp。laquo。/a/li liahref=10/a/li liclass=activeahref=11/a/li liahref=12/a/li liahref=amp。raquo。/a/li /ul /div divclass=pagination ul liahref=amp。laquo。/a/li liclass=activeahref=10/a/li liclass=disabledahref=.../a/li liahref=20/a/li liahref=amp。raquo。/a/li /ul /div divclass=pagination paginationcentered ul liclass=activeahref=1/a/li