按鈕組

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

最佳實踐

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

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

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

默認示例

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

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

複選框和收音機口味

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

獲取 JavaScript »

按鈕組中的下拉菜單

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

概述和示例

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

示例標記

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

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

概述和示例

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

尺寸

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

<div class = "btn-group" > 
  ...
  <ul class = "下拉菜單向右" > 
    <!-- 下拉菜單鏈接 -->
  </ul>
</div>

示例標記

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

<div class = "btn-group" > 
  <button class = "btn" >動作</button> 
  <按鈕類= “btn下拉切換”數據切換= “下拉” >  
    <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。

何時使用

標籤和藥丸非常適合內容部分或在相關內容頁面之間導航。

組件對齊

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

基本選項卡

獲取常規<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>

如何堆疊它們

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

堆疊標籤

• 家
• 輪廓
• 留言

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

堆積的藥丸

• 家
• 輪廓
• 留言

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

豐富的菜單變得簡單

Bootstrap 選項卡和藥丸中的下拉菜單非常簡單，只需要一點額外的 HTML 和一個輕量級的 jQuery 插件。

前往 Javascript 頁面閱讀有關在 Bootstrap中初始化下拉菜單的文檔。

帶有下拉菜單的選項卡

• 家
• 幫助
• 落下
  • Action
  • Another action
  • Something else here
  • Separated link

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

帶有下拉菜單的藥丸

• 家
• 幫助
• 落下
  • Action
  • Another action
  • Something else here
  • Separated link

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

應用式導航

導航列表提供了一種簡單易用的方法來構建帶有可選標題的導航鏈接組。它們最適合用於 OS X 中的 Finder 等側邊欄。

從結構上講，它們與標籤和藥丸建立在相同的核心導航樣式上，因此使用和定制很簡單。

帶圖標

導航列表也很​​容易配備圖標。使用類添加適當的<i>標籤，您就可以設置了。

水平分隔線

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

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

示例導航列表

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

<ul類= "導航導航列表" > 
  <li類= “導航標題” > 
    列表標題
  </li>
  <li class = "活動" > 
    <a href = "#" >主頁</a> 
  </li>
  <li>
    <a href = "#" >庫</a> 
  </li>
  ...
</ul>

帶有圖標的示例

相同的示例，但帶有<i>圖標標籤。

<ul類= "導航導航列表" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      圖書館
    </a>
  </li>
  ...
</ul>

包括什麼

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

在它們之間進行更改很容易，只需要更改很少的標記。

淡入標籤

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

需要 jQuery 插件

所有可選項卡都由我們的輕量級 jQuery 插件提供支持。閱讀更多關於如何在 javascript 文檔頁面上將可選項卡變為現實的信息。

獲取 javascript →

可選項卡示例

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

對於右對齊或左對齊的標籤，將.nav-tabsand包裹.tab-content在.tabbable.

直截了當的標記

使用可選項卡需要一個包裝 div、一組選項卡和一組可選項卡的內容窗格。

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

底部的標籤

翻轉 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>

導航欄腳手架

導航欄只需要幾個 div 就可以很好地為靜態或固定顯示構建它。

<div類= "導航欄" > 
  <div類= “導航欄內部” > 
    <div類= “容器” > 
      ...
    </div>
  </div>
</div>

固定導航欄

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

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

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

粘貼導航欄時，請記住考慮下方的隱藏區域。添加 40px 或更多的填充到<body>. 請務必在核心 Bootstrap CSS 之後和可選的響應式 CSS 之前添加它。

品牌

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

<a類= "品牌" href = "#" >  
  項目名稱
</a>

導航欄中的表單

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

<form class = "navbar-form pull-left" > 
  <輸入類型= “文本”類= “span2” >  
</form>

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

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

可選的響應變化

根據頂部欄中的內容量，您可能希望實現響應式選項。為此，請將您的導航內容包裝在包含 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>

導航鏈接

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

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

組件對齊

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

添加下拉菜單

嚮導航添加下拉菜單和下拉菜單非常簡單，但確實需要使用我們的 javascript 插件。

<ul類= “導航” > 
  <li class = "下拉菜單" > 
    <a href = "#" 
          類= “下拉切換”
          數據切換= “下拉” >
          帳戶
          <b類= "插入符號" ></b> 
    </a>
    <ul class = "下拉菜單" > 
      ...
    </ul>
  </li>
</ul>

獲取 javascript →

導航欄中的文本

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

為什麼使用它們

麵包屑導航用於向用戶顯示他們在應用程序或網站中的位置，但不適用於主導航。保持它們的使用稀疏和簡潔是最有效的。

例子

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

• 家

• 主頁 /
• 圖書館

• 主頁 /
• 圖書館 /
• 數據

標記

HTML 是帶有鏈接的標準無序列表。

<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 啟發的超簡單和極簡風格的分頁，非常適合應用程序和搜索結果。大塊很難錯過，易於擴展，並提供大點擊區域。

有狀態的頁面鏈接

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

靈活對齊

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

例子

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

標記

包裹在一個<div>，分頁只是一個<ul>。

<div類= “分頁” > 
  <ul>
    <li><a href = "#" >上一頁</a></li> 
    <li class = "活動" > 
      <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>

關於尋呼機

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

可選禁用狀態

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

默認示例

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

• 以前的
• 下一個

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

關於

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

可用課程

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

標記

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

<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 內容（如標題、段落或按鈕）添加到縮略圖中。

• 

  縮略圖標籤

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

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

<ul類= “縮略圖” > 
  <li類= "span3" > 
    <div類= "縮略圖" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5>縮略圖標籤</h5>
      <p>縮略圖標題就在這裡... </p>
    </div>
  </li>
  ...
</ul>

更多示例

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

重寫基類

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

單個警報消息

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

非常適合使用 javascript

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

獲取插件 »

示例警報

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

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

小心！iOS 設備需要一個href="#"來解除警報。確保包含它和錨點關閉圖標的數據屬性。或者，您可以使用button具有 data 屬性的元素，我們已選擇為我們的文檔執行此操作。

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" >警告！</h4> 
  最好自己檢查一下，你不是...
</div>

錯誤或危險

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

成功

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

信息

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

基本的

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

<div類= “進度” > 
  <div類= “酒吧” 
       樣式= "寬度: 60 %; " ></div> 
</div>

有條紋的

使用漸變創建條紋效果（無 IE）。

<div class = "progress progress-striped" > 
  <div類= “酒吧” 
       樣式= "寬度: 20 %; " ></div> 
</div>

動畫

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

<div class = "進度進度條 
     活躍” >
  <div類= “酒吧” 
       樣式= "寬度: 40 %; " ></div> 
</div>

其他顏色

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

條紋條

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

行為

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

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

瀏覽器支持

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

Opera 和 IE 目前不支持動畫。

威爾斯

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

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

關閉圖標

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

×

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

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

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