Bootstrap內(nèi)置組件

1、下拉菜單例子可切換的鏈接列表. 互動(dòng)式的下拉菜單需要dropdown JavaScript 插件.· 行為· 其它行為· 特別行為·· 分割鏈接1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">2. <li><a tabindex="-1" href="#">行為</a></li>3. <

2、li><a tabindex="-1" href="#">其它行為</a></li>4. <li><a tabindex="-1" href="#">特別行為</a></li>5. <li class="divider"></li>6. <li><a tabindex="-1" href="#">分割鏈接</a&g

3、t;</li>7. </ul>用法以下是下拉菜單所需的HTML. 下拉菜單的觸發(fā)和下拉菜單都需要包含在.dropdown里, 或者聲明 position: relative; 其他元素. 然后, 只需創(chuàng)建菜單.1. <div class="dropdown">2. <!- Link or button to toggle dropdown ->3. <ul class="dropdown-menu" role="menu" aria-labelledby="dL

4、abel">4. <li><a tabindex="-1" href="#">行為</a></li>5. <li><a tabindex="-1" href="#">其它行為</a></li>6. <li><a tabindex="-1" href="#">特別行為</a></li>7. <li class=&q

5、uot;divider"></li>8. <li><a tabindex="-1" href="#">分割鏈接</a></li>9. </ul>10. </div>選項(xiàng)列表右對(duì)齊, 和包括一個(gè)多級(jí)的下拉菜單.對(duì)齊在 .dropdown-menu 添加 .pull-right , 讓下拉列表右對(duì)齊.1. <ul class="dropdown-menu pull-right" role=&qu

6、ot;menu" aria-labelledby="dLabel">2. .3. </ul>禁用菜單選項(xiàng)在下拉菜單<li>添加.disabled來禁用鏈接.· 注冊· 修改· 退出1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">2. <li><a tabindex="-1" href="#&q

7、uot;>注冊</a></li>3. <li class="disabled"><a tabindex="-1" href="#">修改</a></li>4. <li><a tabindex="-1" href="#">退出</a></li>5. </ul>下拉菜單的子列表添加一些簡單的標(biāo)記, 讓下拉菜單擁有一個(gè)二級(jí)菜單, 停選效果類似OS X. 在任意的 l

8、i 添加 .dropdown-submenu 就會(huì)自動(dòng)獲得一個(gè)額外的菜單.默認(rèn)· 行為· 其它行為· 特別行為·· 更多選項(xiàng)向上顯示· 行為· 其它行為· 特別行為·· 更多選項(xiàng)左邊顯示· 行為· 其它行為· 特別行為·· 更多選項(xiàng)1. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&

9、gt;2. .3. <li class="dropdown-submenu">4. <a tabindex="-1" href="#">More options</a>5. <ul class="dropdown-menu">6. .7. </ul>8. </li>9. </ul>按鈕組例子兩個(gè)基本選項(xiàng), 帶有兩個(gè)更明確的變化.單一按鈕組帶有 .btn 的按鈕, 都放在 .btn-group 

10、里面.左 中 右1. <div class="btn-group">2. <button class="btn">左</button>3. <button class="btn">中</button>4. <button class="btn">右</button>5. </div>多個(gè)按鈕組組合成工具條集合幾組 <div class="btn-group">

11、 ，再用 <div class="btn-toolbar"> 包裝就可以合成工具條組件。1 2 3 4 5 6 7 81. <div class="btn-toolbar">2. <div class="btn-group">3. .4. </div>5. </div>垂直按鈕組讓一組按鈕垂直擺放1. <div class="btn-group btn-grou

12、p-vertical">2. .3. </div>復(fù)選框和單選框形式按鈕組也可實(shí)現(xiàn)單選和復(fù)選功能。前者只有一個(gè)按鈕被按下，后者可以按下多個(gè)按鈕。詳見JavaScript插件 。在按鈕組的下拉菜單注意! 為了渲染正常，帶下拉項(xiàng)的按鈕應(yīng)該被 .btn-group 嵌套，然后再放入 .btn-toolbar 內(nèi)。按鈕式下拉菜單簡介和例子通過將其放在 .btn-group 并添加一些下拉菜單的標(biāo)記, 讓點(diǎn)擊按鈕生產(chǎn)一個(gè)下拉菜單.行為  行為  危險(xiǎn)

13、0; 警告  成功  信息  反向 1. <div class="btn-group">2. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">3. Action4. <span class="caret"></span>5. </a>6. <ul class="dr

14、opdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>適應(yīng)所有按鈕的尺寸下拉按鈕適應(yīng)任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。大號(hào)按鈕  小號(hào)按鈕  迷你按鈕 需要Javascript下拉按鈕需要 Bootstrap 下拉插件 實(shí)現(xiàn)功能。在某些情況下（諸如使用手機(jī)瀏覽），下拉菜單會(huì)超出可視區(qū)域。這時(shí)要么手動(dòng)對(duì)齊，要么使用定

15、制的javascript。帶間隔的下拉按鈕在按鈕組的樣式和標(biāo)記的基礎(chǔ)上，我們可以很方便的創(chuàng)建帶間隔的下拉按鈕。間隔左側(cè)是按鈕，右側(cè)是下拉鏈接。動(dòng)作  動(dòng)作  危險(xiǎn)  警告  成功  信息  反向 1. <div class="btn-group">2. <button class="btn">Action</button>3. <button class="btn dropd

16、own-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </button>6. <ul class="dropdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>尺寸使用 .btn-mini, .btn-small, 或 .btn-large 指定大小。大號(hào)

17、按鈕 小號(hào)按鈕 迷你按鈕 1. <div class="btn-group">2. <button class="btn btn-mini">Action</button>3. <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </butt

18、on>6. <ul class="dropdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>上彈菜單下拉菜單也可以變成上彈菜單，只要在 .dropdown-menu 最近的父標(biāo)簽上應(yīng)用 .dropup 即可。它會(huì)改變 .caret 的箭頭方向，并將菜單底部與按鈕頂部對(duì)齊。上彈按鈕  上彈按鈕(右對(duì)齊) 1. <div class="btn-group d

19、ropup">2. <button class="btn">Dropup</button>3. <button class="btn dropdown-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </button>6. <ul class="dropdown-menu">7. <!- dropdown men

20、u links ->8. </ul>9. </div>導(dǎo)航: 標(biāo)簽, 圓角, 和 列表輕巧的默認(rèn)項(xiàng) 同樣的標(biāo)記，不同的類所有的導(dǎo)航組件都在這里, 包括標(biāo)簽, 圓角, 列表, 通過.nav屬性共享相同的標(biāo)記和樣式.基本的標(biāo)簽頁對(duì)存放鏈接的 <ul> 應(yīng)用 .nav-tabs ：· 首頁· 簡介· 信息1. <ul class="nav nav-tabs">2. <li class="active">3. <

21、a href="#">首頁</a>4. </li>5. <li><a href="#">.</a></li>6. <li><a href="#">.</a></li>7. </ul>基本圓角標(biāo)簽頁HTML不變，使用 .nav-pills ：· 首頁· 簡介· 信息1. <ul class="nav nav-pills">

22、;2. <li class="active">3. <a href="#">Home</a>4. </li>5. <li><a href="#">.</a></li>6. <li><a href="#">.</a></li>7. </ul>不可用狀態(tài)在任何的導(dǎo)航組件(標(biāo)簽, 圓角或列表)添加 .disabled, 鏈接將變成灰色, 且沒有停懸

23、效果. 但是鏈接仍然保持可點(diǎn)擊, 除非刪除了href屬性. 或者你也可用JavaScript來防止點(diǎn)擊.· 可點(diǎn)擊鏈接· 可點(diǎn)擊鏈接· 不可點(diǎn)擊鏈接1. <ul class="nav nav-pills">2. .3. <li class="disabled"><a href="#">Home</a></li>4. .5. </ul>組件對(duì)齊方式使用 .pull-left 或 .pull-right

24、60;讓導(dǎo)航鏈接對(duì)齊. 它們都是添加了CSS float來指定方向.疊放式導(dǎo)航 豎直排放標(biāo)簽和圓角鏈接默認(rèn)情況下標(biāo)簽和圓角鏈接是水平排放的，使用 .nav-stacked 就可以將其變成豎直疊放。疊放式標(biāo)簽· 首頁· 簡介· 信息1. <ul class="nav nav-tabs nav-stacked">2. .3. </ul>疊放式圓角鏈接· 首頁· 簡介· 信息1. <ul class="nav nav-pills nav-stacked

25、">2. .3. </ul>下拉菜單 改良的導(dǎo)航組件添加下拉菜單需要添加一些額外的HTML代碼和下拉菜單的JavaScript插件.帶下拉項(xiàng)的標(biāo)簽頁· 首頁· 幫助· 下拉菜單 · 上彈菜單 1. <ul class="nav nav-tabs">2. <li class="dropdown">3. <a class="dropdown-toggle"4. data-toggle="dropdown

26、"5. href="#">6. Dropdown7. <b class="caret"></b>8. </a>9. <ul class="dropdown-menu">10. <!- links ->11. </ul>12. </li>13. </ul>帶下拉的圓角鏈接· 首頁· 幫助· 下拉菜單 · 上彈菜單 1. <ul class="nav n

27、av-pills">2. <li class="dropdown">3. <a class="dropdown-toggle"4. data-toggle="dropdown"5. href="#">6. Dropdown7. <b class="caret"></b>8. </a>9. <ul class="dropdown-menu">10. <!- links ->11.

28、 </ul>12. </li>13. </ul>導(dǎo)航列表 構(gòu)建簡單的疊放式導(dǎo)航，適用于側(cè)邊欄導(dǎo)航列表可以便捷地創(chuàng)建帶有標(biāo)頭(可選)的導(dǎo)航鏈接組，非常適合用做側(cè)邊欄（與OS X中的Finder類似）。導(dǎo)航列表例子對(duì)存放一組鏈接的列表使用 class="nav nav-list" :· 列表頭· 首頁· 庫· 應(yīng)用程序· 其它列表頭· 簡介· 設(shè)置·· 幫助1. <ul class="nav nav-list

29、">2. <li class="nav-header">List header</li>3. <li class="active"><a href="#">Home</a></li>4. <li><a href="#">Library</a></li>5. .6. </ul>注意 對(duì)于嵌入在導(dǎo)航列表的任何 <ul> 都需要添加&

30、#160;class="nav nav-list" .水平分隔符添加一個(gè)水平分隔符, 只需在空列表項(xiàng)添加.divider, 像這樣:1. <ul class="nav nav-list">2. .3. <li class="divider"></li>4. .5. </ul>標(biāo)簽頁切換導(dǎo)航 通過javascript讓標(biāo)簽生動(dòng)起來我們使用一個(gè)簡單的插件切換標(biāo)簽頁對(duì)應(yīng)的內(nèi)容，從而讓標(biāo)簽頁變得生動(dòng)。 Bootstrap 提供了四種樣式的標(biāo)簽頁：置頂(默認(rèn))，居右，置底，居左

31、。應(yīng)用時(shí)只需修改很少的標(biāo)記。標(biāo)簽頁切換的例子讓標(biāo)簽可切換, 需在.tab-content里創(chuàng)建.tab-pane, 并對(duì)每個(gè)標(biāo)簽設(shè)置一個(gè)唯一的ID.· Section 1· Section 2· Section 3I'm in Section 1.1. <div class="tabbable"> <!- Only required for left/right tabs ->2. <ul class="nav nav-tabs">3. <li class="act

32、ive"><a href="#tab1" data-toggle="tab">Section 1</a></li>4. <li><a href="#tab2" data-toggle="tab">Section 2</a></li>5. </ul>6. <div class="tab-content">7. <div class="tab-pane acti

33、ve" id="tab1">8. <p>I'm in Section 1.</p>9. </div>10. <div class="tab-pane" id="tab2">11. <p>Howdy, I'm in Section 2.</p>12. </div>13. </div>14. </div>淡入要讓內(nèi)容淡入, 需在每個(gè).tab-pane添加.fade .需要jQuery插件所有

34、可切換標(biāo)簽都采用了輕量級(jí)的jQuery插件. 在JavaScript文檔頁面了解更多如果創(chuàng)建可切換標(biāo)簽.各個(gè)方向的標(biāo)簽底部反轉(zhuǎn)HTML的順序，用 .tabs-below 將標(biāo)簽居底。I'm in Section A.· Section 1· Section 2· Section 31. <div class="tabbable tabs-below">2. <div class="tab-content">3. .4. </div>5. <ul class

35、="nav nav-tabs">6. .7. </ul>8. </div>左邊，用 .tabs-left 將標(biāo)簽居底。· Section 1· Section 2· Section 3I'm in Section A.1. <div class="tabbable tabs-left">2. <ul class="nav nav-tabs">3. .4. </ul>5. <div class="t

36、ab-content">6. .7. </div>8. </div>右邊使用 .tabs-right 將標(biāo)簽居右。· Section 1· Section 2· Section 3I'm in Section A.1. <div class="tabbable tabs-right">2. <ul class="nav nav-tabs">3. .4. </ul>5. <div class="tab-con

37、tent">6. .7. </div>8. </div>導(dǎo)航條基本導(dǎo)航條導(dǎo)航條是靜態(tài)的(未固定在頂部), 并包括項(xiàng)目名詞和一些導(dǎo)航該有的功能. 將導(dǎo)航條放在任意一個(gè) .container, 其寬度是與網(wǎng)站內(nèi)容相同.標(biāo)題· 首頁· 鏈接· 鏈接1. <div class="navbar">2. <div class="navbar-inner">3. <a class="brand" href="#">

38、Title</a>4. <ul class="nav">5. <li class="active"><a href="#">Home</a></li>6. <li><a href="#">Link</a></li>7. <li><a href="#">Link</a></li>8. </ul>9. </div&g

39、t;10. </div>導(dǎo)航條組件僅標(biāo)題用于展示品牌或項(xiàng)目名稱的一個(gè)簡單鏈接，只需要一個(gè)錨標(biāo)簽。標(biāo)題1. <a class="brand" href="#">項(xiàng)目名稱</a>導(dǎo)航鏈接可以簡單的往導(dǎo)航添加列表.· 首頁· 鏈接· 鏈接1. <ul class="nav">2. <li class="active">3. <a href="#">Home</a>4. </li>

40、;5. <li><a href="#">Link</a></li>6. <li><a href="#">Link</a></li>7. </ul>添加分隔符同樣的簡單, 只需在每個(gè)空白的列表項(xiàng)添加一個(gè)屬性即可. 在每個(gè)鏈接間添加, 如下:· 首頁·· 鏈接·· 鏈接·1. <ul class="nav">2. .3. <li class="d

41、ivider-vertical"></li>4. .5. </ul>表單導(dǎo)航條內(nèi)的表單, 用 .navbar-form 進(jìn)行樣式化,由 .pull-left 或 .pull-right 決定居左還是居右.窗體頂端 提交窗體底端1. <form class="navbar-form pull-left">2. <input type="text" class="span2">3. <button t

42、ype="submit" class="btn">Submit</button>4. </form>搜索表單在導(dǎo)航條內(nèi), 對(duì) form 添加 .navbar-search 并在輸入框添加專門的一個(gè)屬性 .search-query, 就可獲得一個(gè)搜索表單.窗體頂端窗體底端1. <form class="navbar-search pull-left">2. <input type="text" class="s

43、earch-query" placeholder="Search">3. </form>對(duì)齊使用 .pull-left 或 .pull-right 對(duì)齊導(dǎo)航鏈接, 搜索表單或文本. 它們都是添加了CSS float來指定方向.使用下拉菜單在導(dǎo)航添加下拉菜單只需要加入一點(diǎn)點(diǎn)標(biāo)記和下拉菜單JavaScript插件.1. <ul class="nav">2. <li class="dropdown">3. <a href="#&quo

44、t; class="dropdown-toggle" data-toggle="dropdown">4. Account5. <b class="caret"></b>6. </a>7. <ul class="dropdown-menu">8. .9. </ul>10. </li>11. </ul>查看更多JavaScript下拉菜單文檔.文本在 .navbar-text 下使用文本元素, 對(duì)于需要突出或設(shè)

45、置顏色, 通常使用 <p> 標(biāo)簽.可選的顯示方法在最外層div上應(yīng)用,.navbar添加一個(gè)額外的屬性, 就可以將導(dǎo)航條固定到頂部或是底部.固定在頂部添加 .navbar-fixed-top 以及記得在<body>的頂部添加一個(gè)至少40px的padding. 確保是添加在Bootstrap核心CSS之后, 和響應(yīng)式CSS(可選的)之前.標(biāo)題· 首頁· 鏈接· 鏈接1. <div class="navbar navbar-fixed-top">2. .3. </di

46、v>固定在底部添加 .navbar-fixed-bottom .標(biāo)題· 首頁· 鏈接· 鏈接1. <div class="navbar navbar-fixed-bottom">2. .3. </div>頂部靜態(tài)導(dǎo)航條通過添加 .navbar-static-top 創(chuàng)建一個(gè)全寬(full-width)的導(dǎo)航條. 這不像.navbar-fixed-top, 因?yàn)槟悴恍枰赽ody改動(dòng)任何padding.標(biāo)題· 首頁· 鏈接· 鏈接1. <di

47、v class="navbar navbar-static-top">2. .3. </div>響應(yīng)式導(dǎo)航條要實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航條, 需要把導(dǎo)航條包含在div,.nav-collapse.collapse里面, 并添加一個(gè)觸發(fā)展開導(dǎo)航(適用在屏幕較窄的設(shè)備)的按鈕.btn-navbar.標(biāo)題· 首頁· 鏈接· 鏈接· 下拉菜單 窗體頂端窗體底端· 鏈接·· 下拉菜單 1. <div class="navbar">2. <div c

48、lass="navbar-inner">3. <div class="container">4.  5. <!- .btn-navbar is used as the toggle for collapsed navbar content ->6. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">7. <span class=&quo

49、t;icon-bar"></span>8. <span class="icon-bar"></span>9. <span class="icon-bar"></span>10. </a>11.  12. <!- Be sure to leave the brand out there if you want it shown ->13. <a class="brand" href="#">Pro

50、ject name</a>14.  15. <!- Everything you want hidden at 940px or less, place within here ->16. <div class="nav-collapse collapse">17. <!- .nav, .navbar-search, .navbar-form, etc ->18. </div>19.  20. </div>21. </div>22. </div>注意!

51、0;響應(yīng)式導(dǎo)航條需要 切換(collapse)插件 和 Bootstrap響應(yīng)式CSS文件.逆變化需要變化導(dǎo)航條外觀(變成黑色), 可添加.navbar-inverse.標(biāo)題· 首頁· 鏈接· 鏈接· 下拉菜單 窗體頂端窗體底端· 鏈接·· 下拉菜單 1. <div class="navbar navbar-inverse">2. .3. </div>面包屑(路徑式)導(dǎo)航例子面包屑導(dǎo)航欄用于展示用戶當(dāng)前在網(wǎng)站/應(yīng)用中的位置，但并不是首要導(dǎo)航。

52、適宜布局清爽，簡潔明了的場合。即查看某個(gè)頁面, 可以需要跳轉(zhuǎn)多個(gè)頁面, 可使用路徑式導(dǎo)航方便使用者返回.· 首頁· 首頁 / · 庫· 首頁 / · 庫 / · 數(shù)據(jù)1. <ul class="breadcrumb">2. <li><a href="#">Home</a> <span class="divider">/</span></li

53、>3. <li><a href="#">Library</a> <span class="divider">/</span></li>4. <li class="active">Data</li>5. </ul>分頁 供兩種可選擇內(nèi)容分頁標(biāo)準(zhǔn)分頁受Rdio啟發(fā)，我們設(shè)計(jì)了極為簡致的頁碼樣式，適用于應(yīng)用和搜索結(jié)果。頁碼區(qū)域尺寸大，易于吸引注意力，易于擴(kuò)展，易于點(diǎn)擊。· «· 1

54、3; 2· 3· 4· 5· »1. <div class="pagination">2. <ul>3. <li><a href="#">Prev</a></li>4. <li><a href="#">1</a></li>5. <li><a href="#">2</a></li>6. <li&g

55、t;<a href="#">3</a></li>7. <li><a href="#">4</a></li>8. <li><a href="#">5</a></li>9. <li><a href="#">Next</a></li>10. </ul>11. </div>選項(xiàng)不可用和當(dāng)前狀態(tài)Bootstrap使用一組樣式

56、類定制頁碼的狀態(tài)，.disabled 用于不可點(diǎn)擊鏈接，而 .active 用于表示當(dāng)前頁鏈接。· «· 1· 2· 3· 4· 5· »1. <div class="pagination">2. <ul>3. <li class="disabled"><a href="#">&laquo;</a></li>4. <li class

57、="active"><a href="#">1</a></li>5. .6. </ul>7. </div>也可以使用span標(biāo)簽替換a標(biāo)簽, 這樣可以刪除點(diǎn)擊功能, 同時(shí)又保留了樣式.1. <div class="pagination">2. <ul>3. <li class="disabled"><span>&laquo;</span></li>4. <li cl

58、ass="active"><span>1</span></li>5. .6. </ul>7. </div>大小想要更大或更小的分頁? 添加.pagination-large, .pagination-small, 或 .pagination-mini 就可改變分頁大小.· «· 1· 2· 3· 4· 5· »· «· 1· 2· 3

59、3; 4· 5· »· «· 1· 2· 3· 4· 5· »· «· 1· 2· 3· 4· 5· »1. <div class="pagination pagination-large">2. <ul>3. .4. </ul>5. </div>6. <div class="pagination&quo

60、t;>7. <ul>8. .9. </ul>10. </div>11. <div class="pagination pagination-small">12. <ul>13. .14. </ul>15. </div>16. <div class="pagination pagination-mini">17. <ul>18. .19. </ul>20. </div>對(duì)齊使用 .pagination-cent

61、ered 和 .pagination-right 可以改變頁碼的對(duì)齊方式，前者居中，后者居右。· «· 1· 2· 3· 4· 5· »1. <div class="pagination pagination-centered">2. .3. </div>· «· 1· 2· 3· 4· 5· »1. <div class="p

62、agination pagination-right">2. .3. </div>翻頁用更少的標(biāo)記和樣式, 創(chuàng)建用于簡單快速分頁. 非常適用于簡單的網(wǎng)站, 像博客或者雜志網(wǎng)站.默認(rèn)默認(rèn)情況下, 翻頁鏈接居中.· 上一頁 · 下一頁1. <ul class="pager">2. <li><a href="#">上一頁</a></li>3. <li><a href="#">下一頁</a>

63、</li>4. </ul>居于左右端的鏈接另一種情況下，鏈接分別居于左右端：· 過去的· 更新的 1. <ul class="pager">2. <li class="previous">3. <a href="#">&larr; 過去的</a>4. </li>5. <li class="next">6. <a href="#">更新的 &rarr;&l

64、t;/a>7. </li>8. </ul>不可用狀態(tài)同樣也是使用 .disabled 讓其顯示不可用狀態(tài).· 過去的· 更新的 1. <ul class="pager">2. <li class="previous disabled">3. <a href="#">&larr; Older</a>4. </li>5. .6. </ul>標(biāo)簽和標(biāo)記標(biāo)簽和注釋文本標(biāo)簽標(biāo)簽標(biāo)記默認(rèn)<sp

65、an class="label">默認(rèn)</span>成功<span class="label label-success">成功</span>警告<span class="label label-warning">警告</span>重要<span class="label label-important">重要</span>信息<span class="label label-info">信息&

66、lt;/span>反向<span class="label label-inverse">反向</span>標(biāo)記名稱例子標(biāo)記默認(rèn)1<span class="badge">1</span>成功2<span class="badge badge-success">2</span>警告4<span class="badge badge-warning">4</span>重要6<span class="ba

67、dge badge-important">6</span>信息8<span class="badge badge-info">8</span>反向10<span class="badge badge-inverse">10</span>容易的標(biāo)記為了方便編寫,請將標(biāo)簽和標(biāo)記存在空的元素當(dāng)中(通過 CSS's :empty 定義)排版組件Hero單元Bootstrap提供了一個(gè)輕巧又靈活的組件，用以在網(wǎng)站中著重展示內(nèi)容，稱之為"hero uni

68、t"/主角單元。 適用于市場類或強(qiáng)調(diào)內(nèi)容的網(wǎng)站。Hello, world!This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.Learn more1. <div class="hero-unit">2. <h1>Heading</h1>3. <p>Tagline</p>4. <p>5. <a

69、 class="btn btn-primary btn-large">6. Learn more7. </a>8. </p>9. </div>頁面標(biāo)題相當(dāng)于一個(gè)簡單的 h1 外殼，它有適當(dāng)?shù)牧舭?，以便在頁面中分割?nèi)容片段。 還可以在 h1 內(nèi)嵌入 small ，html元素或是其他組件。頁面標(biāo)題的例子 子標(biāo)題文字1. <div class="page-header">2. <h1>頁面標(biāo)題的例子 <small>

70、;子標(biāo)題文字</small></h1>3. </div>縮略項(xiàng) 網(wǎng)格式圖片, 視頻, 文本, 等等默認(rèn)縮略項(xiàng)默認(rèn)情況下，Bootstrap的縮略項(xiàng)使用很少的標(biāo)記來展示鏈接圖象。····高可定制使用少量其他標(biāo)記就可以在縮略項(xiàng)中添加任何一種HTML內(nèi)容，比如標(biāo)題，段落，或按鈕。·Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at

71、eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.動(dòng)作 動(dòng)作·Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.動(dòng)作 動(dòng)作·Thumbnail labelCras ju

72、sto odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.動(dòng)作 動(dòng)作為什么使用縮略項(xiàng)縮略項(xiàng)（1.4版之前使用 .media-grid ）適用于柵格化的圖片和視頻，圖片搜索結(jié)果，零售產(chǎn)品，文件夾等等?？s略項(xiàng)可以是鏈接，也可以是靜態(tài)內(nèi)容。簡潔靈活的標(biāo)記縮略項(xiàng)標(biāo)記既簡單又靈活只須用一個(gè) ul 嵌套

73、多個(gè) li 元素?？s略項(xiàng)內(nèi)容可以是任何一種HTML內(nèi)容，只須少許標(biāo)記。使用柵格列確定大小最后，縮略項(xiàng)組件使用柵格類諸如 .span2 或 .span3 確定縮略項(xiàng)的尺寸。標(biāo)記正如之前所提到的，縮略項(xiàng)所需的標(biāo)記是很少的。下面就是一個(gè) 帶鏈接圖象 的默認(rèn)設(shè)置：1. <ul class="thumbnails">2. <li class="span4">3. <a href="#" class="thumbnail&quo

74、t;>4. <img data-src="holder.js/300x200" alt="">5. </a>6. </li>7. .8. </ul>縮略項(xiàng)中的HTML內(nèi)容僅須更改少許標(biāo)記。將 <a> 變成 <div> 即可定制塊狀內(nèi)容，如下：1. <ul class="thumbnails">2. <li class="span4">3. <div class=&quo

75、t;thumbnail">4. <img data-src="holder.js/300x200" alt="">5. <h3>Thumbnail label</h3>6. <p>Thumbnail caption.</p>7. </div>8. </li>9. .10. </ul>更多例子嘗試更多柵格類，混用不同的尺寸。·····通知 給成功，警告和錯(cuò)誤消息指定樣式默認(rèn)樣式在

76、0;.alert 里面添加任何文本內(nèi)容和關(guān)閉按鈕.×警告! Best check yo self, you're not looking too good.1. <div class="alert">2. <button type="button" class="close" data-dismiss="alert">&times;</button>3. <strong>Warning!</strong> Be

77、st check yo self, you're not looking too good.4. </div>關(guān)閉按鈕在移動(dòng)設(shè)備的Safari和Opera瀏覽器中, 當(dāng)使用<a>標(biāo)簽用以關(guān)閉通知框, 除了在data-dismiss="alert"屬性之外, 還需要包含一個(gè)href="#".1. <a href="#" class="close" data-dismiss="alert">&times;</a>另外, 你可以使用<button>元素的數(shù)據(jù)屬性, 我們的文檔就是使用這個(gè)元素. 當(dāng)使用<button>, 必須包含type="button", 或者表單中沒有提交.1. <button type="button" class="clos