成分

Bootstrap 中內置了許多可重用的組件,以提供導航、警報、彈出框等等。

按鈕組

使用按鈕組將多個按鈕連接在一起作為一個複合組件。用一系列<a><button>元素構建它們。

最佳實踐

對於使用按鈕組和工具欄,我們建議遵循以下準則:

  • 始終在單個按鈕組中使用相同的元素,<a><button>.
  • 不要在同一個按鈕組中混用不同顏色的按鈕。
  • 使用圖標作為文本的補充或替代,但請確保在適當的情況下包含 alt 和標題文本。

帶有下拉菜單的相關按鈕組(見下文)應單獨調用,並始終包含一個下拉插入符號以指示預期行為。

默認示例

以下是 HTML 如何查找使用錨標記按鈕構建的標準按鈕組:

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

工具欄示例

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

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

複選框和收音機口味

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

獲取 JavaScript »

按鈕組中的下拉菜單

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

按鈕下拉菜單

示例標記

與按鈕組類似,我們的標記使用常規按鈕標記,但添加了一些改進樣式並支持 Bootstrap 的下拉 jQuery 插件。

  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 解決對齊問題。


拆分按鈕下拉菜單

概述和示例

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

尺寸

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "下拉菜單向右" >
  4. <!-- 下拉菜單鏈接 -->
  5. </ul>
  6. </div>

示例標記

我們擴展了普通按鈕下拉菜單以提供第二個按鈕操作,該操作作為單獨的下拉觸發器操作。

  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>

下拉菜單

下拉菜單也可以通過將單個類添加到.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 啟發的超簡單和極簡風格的分頁,非常適合應用程序和搜索結果。大塊很難錯過,易於擴展,並提供大點擊區域。

有狀態的頁面鏈接

鏈接是可定制的,並且可以在多種情況下使用正確的類。.disabled對於不可點擊的鏈接和.active當前頁面。

靈活對齊

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

例子

默認的分頁組件是靈活的,並且可以在許多變體中工作。

標記

包裹在一個 中<div>,分頁只是一個<ul>.

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

尋呼機用於快速上一個和下一個鏈接

關於尋呼機

分頁器組件是一組用於簡單分頁實現的鏈接,具有輕標記甚至更輕的樣式。它非常適合博客或雜誌等簡單網站。

可選禁用狀態

分頁鏈接也使用來自分頁的通用.disabled類。

默認示例

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

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

對齊的鏈接

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

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

關於

徽章是用於顯示某種指標或計數的小而簡單的組件。它們通常出現在 Mail.app 等電子郵件客戶端或用於推送通知的移動應用程序中。

可用課程

姓名 例子 標記
默認 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>

英雄單位

Bootstrap 提供了一個輕量級、靈活的組件,稱為英雄單元,用於在您的網站上展示內容。它適用於營銷和內容繁重的網站。

標記

將您的內容包裝成div這樣:

  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>示例頁眉</h1>
  3. </div>

默認縮略圖

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

高度可定制

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

  • 縮略圖標籤

    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。

    行動 行動

  • 縮略圖標籤

    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= "span3" >
  3. <a href = "#"= "縮略圖" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul= “縮略圖” >
  2. <li= "span3" >
  3. <div= "縮略圖" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5>縮略圖標籤</h5>
  6. <p>縮略圖標題就在這裡...... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

更多示例

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

輕量級默認值

重寫基類

在 Bootstrap 2 中,我們簡化了基類:.alert而不是.alert-message. 我們還減少了所需的最低標記——<p>默認情況下不需要,只需要外部<div>.

單個警報消息

對於代碼更少、更耐用的組件,我們刪除了塊警報、帶有更多填充和通常更多文本的消息的差異化外觀。班級也已更改為.alert-block.


非常適合使用 javascript

Bootstrap 帶有一個很棒的 jQuery 插件,它支持警報消息,可以快速輕鬆地解除它們。

獲取插件 »

示例警報

用簡單的類將您的消息和可選的關閉圖標包裝在一個 div 中。

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

小心!iOS 設備需要一個href="#"來解除警報。確保包含它和錨點關閉圖標的數據屬性。或者,您可以使用<button>具有 data 屬性的元素,我們選擇為我們的文檔執行此操作。使用時<button>,您必須包含,type="button"否則您的表格可能無法提交。

使用兩個可選類輕鬆擴展標準警報消息:.alert-block更多填充和文本控件以及.alert-heading匹配標題。

警告!

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

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" >警告!</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= “酒吧”
  3. 樣式= "寬度: 60 %; " ></div>
  4. </div>

有條紋的

使用漸變創建條紋效果(無 IE)。

  1. <div class = "progress progress-striped" >
  2. <div= “酒吧”
  3. 樣式= "寬度: 20 %; " ></div>
  4. </div>

動畫

採用條紋示例並對其進行動畫處理(無 IE)。

  1. <div class = "進度進度條
  2. 活躍” >
  3. <div= “酒吧”
  4. 樣式= "寬度: 40 %; " ></div>
  5. </div>

選項和瀏覽器支持

其他顏色

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

條紋條

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

行為

進度條使用 CSS3 過渡,因此如果您通過 javascript 動態調整寬度,它將平滑調整大小。

如果您使用.active該類,您的.progress-striped進度條將從左到右為條紋設置動畫。

瀏覽器支持

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

Opera 和 IE 目前不支持動畫。

威爾斯

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

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

關閉圖標

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

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

如果您更願意使用錨點,iOS 設備需要一個 href="#" 來表示點擊事件。

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