例子

用於顯示鏈接列表的可切換上下文菜單。與下拉 JavaScript 插件交互。

<ul類= “下拉菜單”角色= “菜單” aria-labelledby = “下拉菜單” >   
  <li><a tabindex = "-1" href = "#" >動作</a></li>  
  <li><a tabindex = "-1" href = "#" >另一個動作</a></li>  
  <li><a tabindex = "-1" href = "#" >這裡有別的東西</a></li>  
  <li class = "分隔符" ></li> 
  <li><a tabindex = "-1" href = "#" >分隔鏈接</a></li>  
</ul>

標記

只看下拉菜單，這是所需的 HTML。您需要將下拉菜單的觸發器和下拉菜單包裝在內.dropdown，或另一個聲明position: relative;. 然後只需創建菜單。

<div類= “下拉” > 
  <!-- 用於切換下拉菜單的鏈接或按鈕 -->
  <ul類= “下拉菜單”角色= “菜單” aria- labelledby = “dLabel” >   
    <li><a tabindex = "-1" href = "#" >動作</a></li>  
    <li><a tabindex = "-1" href = "#" >另一個動作</a></li>  
    <li><a tabindex = "-1" href = "#" >這裡有別的東西</a></li>  
    <li class = "分隔符" ></li> 
    <li><a tabindex = "-1" href = "#" >分隔鏈接</a></li>  
  </ul>
</div>

選項

向右對齊菜單並添加包括其他級別的下拉菜單。

對齊菜單

添加.pull-right到.dropdown-menu右對齊下拉菜單。

<ul類= “下拉菜單向右”角色= “菜單” aria- labelledby = “dLabel” >   
  ...
</ul>

禁用的菜單選項

添加.disabled到<li>下拉列表中的 a 以禁用鏈接。

<ul類= “下拉菜單”角色= “菜單” aria-labelledby = “下拉菜單” >   
  <li><a tabindex = "-1" href = "#" >常規鏈接</a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" >禁用鏈接</a></li>   
  <li><a tabindex = "-1" href = "#" >另一個鏈接</a></li>  
</ul>

下拉菜單上的子菜單

添加一個額外級別的下拉菜單，像 OS X 一樣在懸停時出現，並添加了一些簡單的標記。添加.dropdown-submenu到li現有下拉菜單中的任何內容以進行自動樣式設置。

默認

放棄

左側子菜單

<ul類= “下拉菜單”角色= “菜單” aria- labelledby = “dLabel” >   
  ...
  <li class = "下拉子菜單" > 
    <a tabindex = "-1" href = "#" >更多選項</a>  
    <ul class = "下拉菜單" > 
      ...
    </ul>
  </li>
</ul>

例子

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

單鍵組

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

<div class = "btn-group" > 
  <button class = "btn" >左</button> 
  <button class = "btn" >中間</button> 
  <button class = "btn" >右</button> 
</div>

多個按鈕組

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

<div類= "btn 工具欄" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

垂直按鈕組

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

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

複選框和收音機口味

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

按鈕組中的下拉菜單

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

概述和示例

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    行動
    <span class = "caret" ></span> 
  </a>
  <ul class = "下拉菜單" > 
    <!-- 下拉菜單鏈接 -->
  </ul>
</div>

適用於所有按鈕尺寸

按鈕下拉菜單適用於任何大小：.btn-large、.btn-small或.btn-mini。

需要 JavaScript

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

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

拆分按鈕下拉菜單

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

<div class = "btn-group" > 
  <button class = "btn" >動作</button> 
  <按鈕類= “btn下拉切換”數據切換= “下拉” >  
    <span class = "caret" ></span> 
  </按鈕>
  <ul class = "下拉菜單" > 
    <!-- 下拉菜單鏈接 -->
  </ul>
</div>

尺寸

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" >動作</button> 
  <按鈕類= “btn btn-mini下拉切換”數據切換= “下拉” >  
    <span class = "caret" ></span> 
  </按鈕>
  <ul class = "下拉菜單" > 
    <!-- 下拉菜單鏈接 -->
  </ul>
</div>

下拉菜單

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <按鈕類= “btn下拉切換”數據切換= “下拉” >  
    <span class = "caret" ></span> 
  </按鈕>
  <ul class = "下拉菜單" > 
    <!-- 下拉菜單鏈接 -->
  </ul>
</div>

輕量級默認值相同的標記，不同的類

這裡的所有導航組件——選項卡、藥丸和列表——在整個類中共享相同的基本標記和样式.nav。

基本選項卡

獲取常規<ul>鏈接並添加.nav-tabs：

<ul class = "nav 導航標籤" > 
  <li class = "活動" > 
    <a href = "#" >主頁</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

基本丸

採用相同的 HTML，但.nav-pills改用：

<ul class = "nav nav-藥丸" > 
  <li class = "活動" > 
    <a href = "#" >主頁</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

禁用狀態

對於任何導航組件（選項卡、藥丸或列表），添加.disabled灰色鏈接和無懸停效果。但是，除非您刪除該href屬性，否則鏈接將保持可點擊狀態。或者，您可以實施自定義 JavaScript 來防止這些點擊。

<ul class = "nav nav-藥丸" > 
  ...
  <li class = "disabled" ><a href = "#" >主頁</a></li>  
  ...
</ul>

組件對齊

要對齊導航鏈接，請使用.pull-left或.pull-right實用程序類。兩個類都將在指定方向添加 CSS 浮動。

可堆疊

由於選項卡和藥丸默認是水平的，只需添加第二個類 ,.nav-stacked以使它們顯示為垂直堆疊。

堆疊標籤

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

堆積的藥丸

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

下拉菜單

添加帶有一點額外 HTML 的下拉菜單和下拉 JavaScript 插件。

帶有下拉菜單的選項卡

<ul class = "nav 導航標籤" > 
  <li class = "下拉菜單" > 
    <a類= "下拉切換" 
       數據切換= “下拉”
       href = "#" >
        落下
        <b類= "插入符號" ></b> 
      </a>
    <ul class = "下拉菜單" > 
      <!-- 鏈接 -->
    </ul>
  </li>
</ul>

帶有下拉菜單的藥丸

<ul class = "nav nav-藥丸" > 
  <li class = "下拉菜單" > 
    <a類= "下拉切換" 
       數據切換= “下拉”
       href = "#" >
        落下
        <b類= "插入符號" ></b> 
      </a>
    <ul class = "下拉菜單" > 
      <!-- 鏈接 -->
    </ul>
  </li>
</ul>

導航列表

一種使用可選標題構建導航鏈接組的簡單方法。它們最適合用於 OS X 中的 Finder 等側邊欄。

示例導航列表

獲取鏈接列表並添加class="nav nav-list"：

<ul類= "導航導航列表" > 
  <li class = "nav-header" >列表頭</li> 
  <li class = "active" ><a href = "#" >主頁</a></li>  
  <li><a href = "#" >庫</a></li> 
  ...
</ul>

筆記對於導航列表中的嵌套，包括class="nav nav-list"任何嵌套<ul>的 .

水平分隔線

通過使用 class 創建一個空列表項來添加水平分隔線.divider，如下所示：

<ul類= "導航導航列表" > 
  ...
  <li class = "分隔符" ></li> 
  ...
</ul>

選項卡導航

使用一個簡單的插件讓您的標籤栩栩如生，通過標籤在內容之間切換。Bootstrap 集成了四種樣式的可選項卡：頂部（默認）、右側、底部和左側。

可選項卡示例

要使選項卡可選項卡，請.tab-pane為每個選項卡創建一個具有唯一 ID 的並將它們包裝在.tab-content.

我在第一節。

你好，我在第 2 節。

怎麼樣，女孩，這是第 3 節。

<div class = "tabbable" > <!-- 僅左/右標籤需要 -->  
  <ul class = "nav 導航標籤" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" >第 1 節</a></li>   
    <li><a href = "#tab2" data-toggle = "tab" >第 2 節</a></li>  
  </ul>
  <div類= "標籤內容" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p>我在第 1 部分。</p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p>你好，我在第 2 區。</p>
    </div>
  </div>
</div>

淡入標籤

要使標籤淡入，請添加.fade到每個.tab-pane.

需要 jQuery 插件

所有可選項卡都由我們的輕量級 jQuery 插件提供支持。在 JavaScript 文檔頁面上閱讀有關如何使可選項卡栩栩如生的更多信息。

可在任何方向上標記

底部的標籤

翻轉 HTML 的順序並添加一個類以將選項卡放在底部。

我在A區。

你好，我在 B 區。

怎麼了女孩，這是C區。

<div class = "可選項卡-下面" > 
  <div類= "標籤內容" > 
    ...
  </div>
  <ul class = "nav 導航標籤" > 
    ...
  </ul>
</div>

左側的選項卡

交換類以將選項卡放在左側。

我在A區。

你好，我在 B 區。

怎麼了女孩，這是C區。

<div class = "tabable tabs-left" > 
  <ul class = "nav 導航標籤" > 
    ...
  </ul>
  <div類= "標籤內容" > 
    ...
  </div>
</div>

右側的選項卡

交換類以將選項卡放在右側。

我在A區。

你好，我在 B 區。

怎麼了女孩，這是C區。

<div class = "tabable tabs-right" > 
  <ul class = "nav 導航標籤" > 
    ...
  </ul>
  <div類= "標籤內容" > 
    ...
  </div>
</div>

基本導航欄

首先，導航欄是靜態的（不固定在頂部），包括對項目名稱和基本導航的支持。在 a 中的任意位置放置一個.container，它設置您的站點和內容的寬度。

<div類= "導航欄" > 
  <div類= “導航欄內部” > 
    <a class = "brand" href = "#" >標題</a>  
    <ul類= “導航” > 
      <li class = "active" ><a href = "#" >主頁</a></li>  
      <li><a href = "#" >鏈接</a></li> 
      <li><a href = "#" >鏈接</a></li> 
    </ul>
  </div>
</div>

導航欄組件

牌

顯示您的品牌或項目名稱的簡單鏈接只需要一個錨標籤。

<a class = "brand" href = "#" >項目名稱</a>

導航鏈接

導航項目很容易通過無序列表添加。

<ul類= “導航” > 
  <li class = "活動" > 
    <a href = "#" >主頁</a> 
  </li>
  <li><a href = "#" >鏈接</a></li> 
  <li><a href = "#" >鏈接</a></li> 
</ul>

您可以使用空列表項和簡單的類輕鬆地將分隔線添加到導航鏈接。只需在鏈接之間添加：

<ul類= “導航” > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

形式

要在導航欄中正確設置表單的樣式和位置，請添加適當的類，如下所示。對於默認表單，包含.navbar-form和其中之一.pull-left或.pull-right以正確對齊它。

<form class = "navbar-form pull-left" > 
  <輸入類型= “文本”類= “span2” >  
  <button type = "submit" class = "btn" >提交</button>  
</form>

搜索表格

要獲得更自定義的搜索表單，請在導航欄中添加.navbar-search和form輸入.search-query以獲取專用樣式。

<form class = "navbar-search pull-left" > 
  <輸入類型= “文本”類= “搜索查詢”佔位符= “搜索” >   
</form>

組件對齊

對齊導航鏈接、搜索表單或文本，使用.pull-left或.pull-right實用程序類。兩個類都將在指定方向添加 CSS 浮動。

使用下拉菜單

使用一些標記和下拉菜單 JavaScript 插件將下拉菜單和下拉菜單添加到導航。

<ul類= “導航” > 
  <li class = "下拉菜單" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      帳戶
      <b類= "插入符號" ></b> 
    </a>
    <ul class = "下拉菜單" > 
      ...
    </ul>
  </li>
</ul>

訪問JavaScript 下拉列表文檔以獲取有關調用下拉列表的更多標記和信息。

文本

用將文本字符串包裹在一個元素中.navbar-text，通常在一個<p>標籤上以獲得正確的前導和顏色。

可選的顯示變化

將導航欄固定到視口的頂部或底部，並在最外面的 div 上添加一個類，.navbar.

固定在頂部

添加.navbar-fixed-top並記住通過將至少 40px 添加padding到<body>. 請務必在核心 Bootstrap CSS 之後和可選的響應式 CSS 之前添加它。

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

固定在底部

.navbar-fixed-bottom改為添加。

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

靜態頂部導航欄

創建一個全寬導航欄，通過添加.navbar-static-top. 與.navbar-fixed-top類不同，您不需要更改body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

響應式導航欄

要實現折疊響應式導航欄，請將導航欄內容包裝在包含 div 的 div 中.nav-collapse.collapse，並添加導航欄切換按鈕.btn-navbar.

<div類= "導航欄" > 
  <div類= “導航欄內部” > 
    <div類= “容器” > 
 
      <!-- .btn-navbar 用作折疊導航欄內容的切換 -->
      <一個類= “btn btn-navbar”數據切換= “折疊”數據目標= “. nav-折疊” >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- 如果您想顯示品牌，請務必將其保留在那裡 -->
      <a class = "brand" href = "#" >項目名稱</a>  
 
      <!-- 任何你想隱藏在 940px 或以下的東西，都放在這裡 -->
      <div class = "nav-collapse 折疊" > 
        <!-- .nav、.navbar-search、.navbar-form 等 -->
      </div>
 
    </div>
  </div>
</div>

小心！響應式導航欄需要折疊插件和響應式 Bootstrap CSS 文件。

倒轉變化

通過添加來修改導航欄的外觀.navbar-inverse。

<div類= "導航欄 navbar-inverse" > 
  ...
</div>

例子

顯示的單個示例可能會跨多個頁面顯示。

<ul類= “麵包屑” > 
  <li><a href = "#" >主頁</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >庫</a> <span class = "divider" > / </span></li>   
  <li class = "active" >數據</li> 
</ul>

標準分頁

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

<div類= “分頁” > 
  <ul>
    <li><a href = "#" >上一頁</a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" >下一個</a></li> 
  </ul>
</div>

選項

禁用和活動狀態

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

<div類= “分頁” > 
  <ul>
    <li class = "已禁用" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div類= “分頁” > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "活動" ><span> 1 </span></li> 
    ...
  </ul>
</div>

尺寸

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

<div class = "分頁分頁-大" > 
  <ul>
    ...
  </ul>
</div>
<div類= “分頁” > 
  <ul>
    ...
  </ul>
</div>
<div class = "分頁分頁-小" > 
  <ul>
    ...
  </ul>
</div>
<div class = "分頁分頁-mini" > 
  <ul>
    ...
  </ul>
</div>

結盟

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

<div class = "分頁以分頁為中心" > 
  ...
</div>

<div class = "分頁分頁權" > 
  ...
</div>

尋呼機

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

默認示例

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

<ul類= “尋呼機” > 
  <li><a href = "#" >上一頁</a></li> 
  <li><a href = "#" >下一個</a></li> 
</ul>

對齊的鏈接

或者，您可以將每個鏈接對齊到兩側：

<ul類= “尋呼機” > 
  <li class = "上一個" > 
    <a href = "#" > ← 年長的</a> 
  </li>
  <li類= “下一個” > 
    <a href = "#" >較新的 → </a> 
  </li>
</ul>

可選禁用狀態

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

<ul類= “尋呼機” > 
  <li class = "以前的禁用" > 
    <a href = "#" > ← 年長的</a> 
  </li>
  ...
</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 的選擇器）。

英雄單位

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

你好世界！

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

學到更多

<div class = "英雄單位" > 
  <h1>標題</h1>
  <p>標語</p>
  <p>
    <a類= "btn btn-primary btn-large" > 
      學到更多
    </a>
  </p>
</div>

頁眉

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

<div類= "頁眉" > 
  <h1>示例頁眉<small>頁眉的子文本</small></h1>
</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。

行動行動
縮略圖標籤

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）來控制縮略圖尺寸。

標記

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

<ul類= “縮略圖” > 
  <li類= "span4" > 
    <a href = "#"類= "縮略圖" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul類= “縮略圖” > 
  <li類= "span4" > 
    <div類= "縮略圖" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3>縮略圖標籤</h3>
      <p>縮略圖標題... </p>
    </div>
  </li>
  ...
</ul>

默認警報

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

警告！最好檢查一下自己，你看起來不太好。

<div類= "警報" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </按鈕>   
  <strong>警告！</strong>最好檢查一下自己，你看起來不太好。
</div>

關閉按鈕

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

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

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

<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 等。

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </按鈕>   
  <h4>警告！</h4>
  最好自己檢查一下，你不是...
</div>

上下文替代方案

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

錯誤或危險

哦，快！更改一些內容並嘗試再次提交。

<div class = "alert alert-error" > 
  ...
</div>

成功

做得好！您已成功閱讀此重要警報消息。

<div class = "alert alert-success" > 
  ...
</div>

信息

小心！此警報需要您的注意，但它並不是非常重要。

<div類= "警報警報信息" > 
  ...
</div>

示例和標記

基本的

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

<div類= “進度” > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

有條紋的

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

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

動畫

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

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

堆疊的

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

<div類= “進度” > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

選項

其他顏色

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

<div class = "進度進度信息" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "進度進度-成功" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "進度進度警告" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

條紋條

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "進度進度-成功進度-條紋" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

瀏覽器支持

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

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

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

默認示例

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

媒體標題

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。

媒體標題

<div類= “媒體” > 
  <a class = "pull-left" href = "#" >  
    <img類= "媒體對象" data-src = "holder.js/64x64" >  
  </a>
  <div類= “媒體主體” > 
    <h4 class = "media-heading" >媒體標題</h4> 
    ...
 
    <!-- 嵌套媒體對象 -->
    <div類= “媒體” > 
      ...
    </div>
  </div>
</div>

媒體列表

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

媒體標題

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

嵌套媒體標題
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

嵌套媒體標題
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

嵌套媒體標題
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。
媒體標題
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

<ul類= "媒體列表" > 
  <li class = "媒體" > 
    <a class = "pull-left" href = "#" >  
      <img類= "媒體對象" data-src = "holder.js/64x64" >  
    </a>
    <div類= “媒體主體” > 
      <h4 class = "media-heading" >媒體標題</h4> 
      ...
 
      <!-- 嵌套媒體對象 -->
      <div類= “媒體” > 
        ...
     </div>
    </div>
  </li>
</ul>

威爾斯

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

看，我在井裡！

<div類= “好” > 
  ...
</div>

選修課

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

看，我在井裡！

<div class = "好好-大" > 
  ...
</div>

看，我在井裡！

<div class = "好-小" > 
  ...
</div>

關閉圖標

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

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

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

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

助手類

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

.pull-left

向左浮動一個元素

類= “拉左”

. 拉-左{
  浮動：左；
}

.pull-right

向右浮動元素

類= “拉右”

. 拉-右{
  浮動：對；
}

.靜音

將元素的顏色更改為#999

類= “靜音”

. 靜音{
  顏色：#999； 
}

.clearfix

清除float任何元素上的

類= “清除修復”

. 清除修復{
  *縮放：1 ； 
  &：之前，
  &：在{之後
    顯示：表格；
    內容：“” ； 
  }
  &：在{之後
    明確：兩者；
  }
}

下拉菜單

例子

標記

選項

對齊菜單

禁用的菜單選項

下拉菜單上的子菜單

按鈕組

例子

單鍵組

多個按鈕組

垂直按鈕組

複選框和收音機口味

按鈕組中的下拉菜單

按鈕下拉菜單

概述和示例

適用於所有按鈕尺寸

需要 JavaScript

拆分按鈕下拉菜單

尺寸

下拉菜單

導航：標籤、藥丸和列表

輕量級默認值相同的標記，不同的類

基本選項卡

基本丸

禁用狀態

組件對齊

可堆疊

堆疊標籤

堆積的藥丸

下拉菜單

帶有下拉菜單的選項卡

帶有下拉菜單的藥丸

導航列表

示例導航列表

水平分隔線

選項卡導航

可選項卡示例

淡入標籤

需要 jQuery 插件

可在任何方向上標記

底部的標籤

左側的選項卡

右側的選項卡

導航欄

基本導航欄

導航欄組件

牌

導航鏈接

形式

搜索表格

組件對齊

使用下拉菜單

文本

可選的顯示變化

固定在頂部

固定在底部

靜態頂部導航欄

響應式導航欄

倒轉變化

麵包屑

例子

分頁用於分頁內容的兩個選項

標準分頁

選項

禁用和活動狀態

尺寸

結盟

尋呼機

默認示例

對齊的鏈接

可選禁用狀態

標籤和徽章

標籤

徽章

易於折疊

排版組件

英雄單位

你好世界！

頁眉

示例頁眉標題的子文本