例子

用於顯示鏈接列表的可切換上下文菜單。與下拉 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>

下拉菜單上的子菜單

添加一個額外級別的下拉菜單，像 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" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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中以正確呈現。

概述和示例

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

<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灰色鏈接和無懸停效果。但是，除非實施自定義 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 = "#" > Home </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.

<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 的順序並添加一個類以將選項卡放在底部。

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

左側的選項卡

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

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

右側的選項卡

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

<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 = "#" > Home </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類= “導航折疊” > 
        <!-- .nav、.navbar-search、.navbar-form 等 -->
      </div>
 
    </div>
  </div>
</div>

倒變式

通過添加來修改導航欄的外觀.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 class = "分頁" > 
  <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 = "#" >下一個</a></li> 
  </ul>
</div>

選項

禁用和活動狀態

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

<div類= “分頁” > 
  <ul>
    <li class = "disabled" ><a href = "#" > Prev </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </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>

標籤

徽章

英雄單位

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

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

頁眉

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

<div類= "頁眉" > 
  <h1>示例頁眉</h1>
</div>

默認縮略圖

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

高度可定制

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

為什麼使用縮略圖

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

簡單、靈活的標記

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

使用網格列大小

最後，縮略圖組件使用現有的網格系統類（如.span2或.span3）來控制縮略圖尺寸。

標記

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

<ul類= “縮略圖” > 
  <li類= "span4" > 
    <a href = "#"類= "縮略圖" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul類= “縮略圖” > 
  <li類= "span4" > 
    <div類= "縮略圖" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3>縮略圖標籤</h3>
      <p>縮略圖標題... </p>
    </div>
  </li>
  ...
</ul>

更多示例

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

默認警報

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

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

關閉按鈕

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

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

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

通過 javascript 關閉警報

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

選項

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

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <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 之前的版本不支持動畫。

威爾斯

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

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

選修課

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

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

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

關閉圖標

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

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

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

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

助手類

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

.pull-left

向左浮動一個元素

類= “拉左”

. 拉-左{
  浮動：左；
}

.pull-right

向右浮動元素

類= “拉右”

. 拉-右{
  浮動：對；
}

.靜音

將元素的顏色更改為#999

類= “靜音”

. 靜音{
  顏色：#999； 
}

.clearfix

清除float任何元素上的

類= “清除修復”

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