成分

為提供導航、警報、彈出框等而構建的數十個可重用組件。

例子

兩個基本選項,以及兩個更具體的變體。

單鍵組

.btn用in包裹一系列按鈕.btn-group

  1. <div class = "btn-group" >
  2. <button class = "btn" ></button>
  3. <button class = "btn" >中間</button>
  4. <button class = "btn" ></button>
  5. </div>

多個按鈕組

將集合組合<div class="btn-group"><div class="btn-toolbar">更複雜的組件。

  1. <div= "btn 工具欄" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

垂直按鈕組

使一組按鈕看起來垂直堆疊而不是水平堆疊。

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

複選框和收音機口味

按鈕組還可以用作單選按鈕,其中只有一個按鈕處於活動狀態,或複選框,其中任意數量的按鈕都可能處於活動狀態。查看JavaScript 文檔

按鈕組中的下拉菜單

小心!帶有下拉菜單的按鈕必須單獨包裝在.btn-groupa.btn-toolbar中以正確呈現。

概述和示例

.btn-group使用任何按鈕通過將其放置在 a 中並提供適當的菜單標記來觸發下拉菜單。

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. 行動
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "下拉菜單" >
  7. <!-- 下拉菜單鏈接 -->
  8. </ul>
  9. </div>

適用於所有按鈕尺寸

按鈕下拉菜單適用於任何大小:.btn-large.btn-small.btn-mini

需要 JavaScript

按鈕下拉菜單需要Bootstrap 下拉插件才能運行。

在某些情況下——比如移動端——下拉菜單會延伸到視口之外。您需要手動或使用自定義 JavaScript 解決對齊問題。


拆分按鈕下拉菜單

基於按鈕組樣式和標記,我們可以輕鬆創建拆分按鈕。拆分按鈕的左側是標準操作,右側是帶有上下文鏈接的下拉切換。

  1. <div class = "btn-group" >
  2. <button class = "btn" >動作</button>
  3. <按鈕= “btn下拉切換”數據切換= “下拉” >
  4. <span class = "caret" ></span>
  5. </按鈕>
  6. <ul class = "下拉菜單" >
  7. <!-- 下拉菜單鏈接 -->
  8. </ul>
  9. </div>

尺寸

使用額外的按鈕類.btn-mini, .btn-small, 或.btn-large來調整大小。

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" >動作</button>
  3. <按鈕= “btn btn-mini下拉切換”數據切換= “下拉” >
  4. <span class = "caret" ></span>
  5. </按鈕>
  6. <ul class = "下拉菜單" >
  7. <!-- 下拉菜單鏈接 -->
  8. </ul>
  9. </div>

下拉菜單

下拉菜單也可以通過將單個類添加到.dropdown-menu. 它將翻轉方向.caret並重新定位菜單本身以從下向上移動而不是自上而下。

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <按鈕= “btn下拉切換”數據切換= “下拉” >
  4. <span class = "caret" ></span>
  5. </按鈕>
  6. <ul class = "下拉菜單" >
  7. <!-- 下拉菜單鏈接 -->
  8. </ul>
  9. </div>

標準分頁

受 Rdio 啟發的簡單分頁,非常適合應用程序和搜索結果。大塊很難錯過,易於擴展,並提供大點擊區域。

  1. <div= “分頁” >
  2. <ul>
  3. <li><a href = "#" >上一頁</a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4​​ </a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" >下一個</a></li>
  10. </ul>
  11. </div>

選項

禁用和活動狀態

鏈接可針對不同情況進行定制。用於.disabled不可點擊的鏈接並.active指示當前頁面。

  1. <div= “分頁” >
  2. <ul>
  3. <li class = "已禁用" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

您可以選擇將活動或禁用的錨點換成跨度以刪除點擊功能,同時保留預期的樣式。

  1. <div= “分頁” >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "活動" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

尺寸

想要更大或更小的分頁?添加.pagination-large.pagination-small.pagination-mini用於其他尺寸。

  1. <div class = "分頁分頁-大" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div= “分頁” >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "分頁分頁-小" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "分頁分頁-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

結盟

添加兩個可選類之一以更改分頁鏈接的對齊方式:.pagination-centered.pagination-right.

  1. <div class = "分頁以分頁為中心" >
  2. ...
  3. </div>
  1. <div class = "分頁分頁權" >
  2. ...
  3. </div>

尋呼機

快速上一個和下一個鏈接,用於簡單的分頁實現,帶有輕量級的標記和样式。它非常適合博客或雜誌等簡單網站。

默認示例

默認情況下,尋呼機將鏈接居中。

  1. <ul= “尋呼機” >
  2. <li><a href = "#" >上一頁</a></li>
  3. <li><a href = "#" >下一個</a></li>
  4. </ul>

對齊的鏈接

或者,您可以將每個鏈接對齊到兩側:

  1. <ul= “尋呼機” >
  2. <li class = "上一個" >
  3. <a href = "#" > 年長的</a>
  4. </li>
  5. <li= “下一個” >
  6. <a href = "#" >較新的 → </a>
  7. </li>
  8. </ul>

可選禁用狀態

尋呼機鏈接也使用分頁中的通用.disabled實用程序類。

  1. <ul= “尋呼機” >
  2. <li class = "以前的禁用" >
  3. <a href = "#" > 年長的</a>
  4. </li>
  5. ...
  6. </ul>

標籤

標籤 標記
默認 <span class="label">Default</span>
成功 <span class="label label-success">Success</span>
警告 <span class="label label-warning">Warning</span>
重要的 <span class="label label-important">Important</span>
信息 <span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

徽章

姓名 例子 標記
默認 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="badge badge-important">6</span>
信息 8 <span class="badge badge-info">8</span>
10 <span class="badge badge-inverse">10</span>

易於折疊

:empty為了便於實施,標籤和徽章在沒有內容時會簡單地折疊(通過 CSS 的選擇器)。

英雄單位

一個輕量級、靈活的組件,用於展示您網站上的關鍵內容。它適用於營銷和內容密集的網站。

你好世界!

這是一個簡單的英雄單位,一個簡單的巨型電子風格組件,用於引起對特色內容或信息的額外關注。

學到更多

  1. <div class = "英雄單位" >
  2. <h1>標題</h1>
  3. <p>標語</p>
  4. <p>
  5. <a= "btn btn-primary btn-large" >
  6. 學到更多
  7. </a>
  8. </p>
  9. </div>

頁眉

一個簡單的外殼,用於h1適當地分隔和分割頁面上的內容部分。它可以利用h1's default small, 元素以及大多數其他組件(帶有其他樣式)。

  1. <div= "頁眉" >
  2. <h1>示例頁眉<small>頁眉的子文本</small></h1>
  3. </div>

默認縮略圖

默認情況下,Bootstrap 的縮略圖旨在展示所需標記最少的鏈接圖像。

高度可定制

通過一些額外的標記,可以將任何類型的 HTML 內容(如標題、段落或按鈕)添加到縮略圖中。

  • 300x200

    縮略圖標籤

    Cras justo odio,dapibus ac facilisis in,egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

    行動 行動

  • 300x200

    縮略圖標籤

    Cras justo odio,dapibus ac facilisis in,egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

    行動 行動

  • 300x200

    縮略圖標籤

    Cras justo odio,dapibus ac facilisis in,egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

    行動 行動

為什麼使用縮略圖

縮略圖(以前.media-grid直到 v1.4)非常適合照片或視頻網格、圖像搜索結果、零售產品、投資組合等等。它們可以是鏈接或靜態內容。

簡單、靈活的標記

縮略圖標記很簡單——只要ul包含任意數量的li元素即可。它也非常靈活,允許任何類型的內容,只需更多標記即可包裝您的內容。

使用網格列大小

最後,縮略圖組件使用現有的網格系統類(如.span2.span3)來控制縮略圖尺寸。

標記

如前所述,縮略圖所需的標記簡單明了。以下是鏈接圖像的默認設置:

  1. <ul= “縮略圖” >
  2. <li= "span4" >
  3. <a href = "#"= "縮略圖" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

對於縮略圖中的自定義 HTML 內容,標記會略有變化。<a>為了允許任何地方的塊級內容,我們將其換成<div>這樣的:

  1. <ul= “縮略圖” >
  2. <li= "span4" >
  3. <div= "縮略圖" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3>縮略圖標籤</h3>
  6. <p>縮略圖標題... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

更多示例

使用可供您使用的各種網格類探索所有選項。您還可以混合搭配不同的尺寸。

默認警報

將任何文本和可選的關閉按鈕包裝起來,.alert以獲得基本的警告警報消息。

警告!最好檢查一下自己,你看起來不太好。
  1. <div= "警報" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </按鈕>
  3. <strong>警告!</strong>最好檢查一下自己,你看起來不太好。
  4. </div>

關閉按鈕

Mobile Safari 和 Mobile Opera 瀏覽器除了該data-dismiss="alert"屬性外,還需要href="#"在使用<a>標籤時解除警報。

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

或者,您可以使用<button>具有 data 屬性的元素,我們選擇為我們的文檔執行此操作。使用時<button>,您必須包含,type="button"否則您的表格可能無法提交。

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </按鈕>

通過 JavaScript 關閉警報

使用alerts jQuery 插件可以快速輕鬆地解除警報。


選項

對於較長的消息,請通過添加來增加警報包裝器頂部和底部的填充.alert-block

警告!

最好檢查一下自己,你看起來不太好。Nulla vitae elit libero,一個 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </按鈕>
  3. <h4>警告!</h4>
  4. 最好自己檢查一下,你不是...
  5. </div>

上下文替代方案

添加可選類以更改警報的內涵。

錯誤或危險

哦,快!更改一些內容並嘗試再次提交。
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

成功

做得好!您已成功閱讀此重要警報消息。
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

信息

小心!此警報需要您的注意,但它並不是非常重要。
  1. <div= "警報警報信息" >
  2. ...
  3. </div>

示例和標記

基本的

帶有垂直漸變的默認進度條。

  1. <div= “進度” >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

有條紋的

使用漸變創建條紋效果。在 IE7-8 中不可用。

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

動畫

添加.active.progress-striped從右到左為條紋設置動畫。並非在所有版本的 IE 中都可用。

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

堆疊的

將多個條放入同一條中.progress以堆疊它們。

  1. <div= “進度” >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

選項

其他顏色

進度條使用一些相同的按鈕和警報類來實現一致的樣式。

  1. <div class = "進度進度信息" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "進度進度-成功" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "進度進度警告" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

條紋條

與純色類似,我們有不同的條紋進度條。

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "進度進度-成功進度-條紋" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

瀏覽器支持

進度條使用 CSS3 漸變、過渡和動畫來實現其所有效果。IE7-9 或更早版本的 Firefox 不支持這些功能。

Internet Explorer 10 和 Opera 12 之前的版本不支持動畫。

用於構建各種類型的組件(如博客評論、推文等)的抽像對像樣式,這些組件具有左對齊或右對齊的圖像以及文本內容。

默認示例

默認媒體允許將媒體對象(圖像、視頻、音頻)浮動到內容塊的左側或右側。

64x64

媒體標題

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
64x64

媒體標題

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
64x64

媒體標題

Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
  1. <div= “媒體” >
  2. <a class = "pull-left" href = "#" >
  3. <img= "媒體對象" data-src = "holder.js/64x64" >
  4. </a>
  5. <div= “媒體主體” >
  6. <h4 class = "media-heading" >媒體標題</h4>
  7. ...
  8.  
  9. <!-- 嵌套媒體對象 -->
  10. <div= “媒體” >
  11. ...
  12. </div>
  13. </div>
  14. </div>

媒體列表

通過一些額外的標記,您可以在列表中使用媒體(對於評論線程或文章列表很有用)。

  • 64x64

    媒體標題

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。

    64x64

    嵌套媒體標題

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
    64x64

    嵌套媒體標題

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
    64x64

    嵌套媒體標題

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
  • 64x64

    媒體標題

    Cras 坐在 amet nibh libero,在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio,前庭在 vulputate,tempus viverra turpis。
  1. <ul= "媒體列表" >
  2. <li class = "媒體" >
  3. <a class = "pull-left" href = "#" >
  4. <img= "媒體對象" data-src = "holder.js/64x64" >
  5. </a>
  6. <div= “媒體主體” >
  7. <h4 class = "media-heading" >媒體標題</h4>
  8. ...
  9.  
  10. <!-- 嵌套媒體對象 -->
  11. <div= “媒體” >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

威爾斯

將井用作元素上的簡單效果,使其具有嵌入效果。

看,我在井裡!
  1. <div= “好” >
  2. ...
  3. </div>

選修課

使用兩個可選的修飾符類控制填充和圓角。

看,我在井裡!
  1. <div class = "好好-大" >
  2. ...
  3. </div>
看,我在井裡!
  1. <div class = "好-小" >
  2. ...
  3. </div>

關閉圖標

使用通用關閉圖標來關閉模式和警報等內容。

  1. <button class = "close" > × </按鈕>

href="#"如果您更願意使用錨點,iOS 設備需要for click 事件。

  1. <a class = "close" href = "#" > × </a>

助手類

用於小型顯示或行為調整的簡單、集中的類。

.pull-left

向左浮動一個元素

  1. = “拉左”
  1. . -{
  2. 浮動
  3. }

.pull-right

向右浮動元素

  1. = “拉右”
  1. . -{
  2. 浮動
  3. }

.靜音

將元素的顏色更改為#999

  1. = “靜音”
  1. . 靜音{
  2. 顏色#999;
  3. }

.clearfix

清除float任何元素上的

  1. = “清除修復”
  1. . 清除修復{
  2. *縮放1
  3. &:之前
  4. &:{之後
  5. 顯示表格
  6. 內容“”
  7. }
  8. &:{之後
  9. 明確兩者
  10. }
  11. }