單獨或編譯

插件可以單獨包含（儘管有些具有必需的依賴項），也可以一次全部包含。bootstrap.js和bootstrap.min.js都在一個文件中包含所有插件。

數據屬性

您可以完全通過標記 API 使用所有 Bootstrap 插件，而無需編寫任何 JavaScript 代碼。這是 Bootstrap 的第一類 API，在使用插件時應該是您的首要考慮因素。

也就是說，在某些情況下，可能需要關閉此功能。因此，我們還提供了禁用數據屬性 API 的能力，方法是取消綁定以“data-api”命名的 body 上的所有事件。這看起來像這樣：

$ （“身體” ）。關閉（'.data-api' ）

或者，要針對特定插件，只需將插件的名稱作為命名空間與 data-api 命名空間一起包含，如下所示：

$ （“身體” ）。關閉（'.alert.data-api' ）

程序化 API

我們也相信您應該能夠純粹通過 JavaScript API 使用所有 Bootstrap 插件。所有公共 API 都是單一的、可鏈接的方法，並返回所操作的集合。

$ （“.btn.danger” ）。按鈕（“切換” ）。addClass （“胖” ）

所有方法都應該接受一個可選的選項對象，一個針對特定方法的字符串，或者什麼都沒有（它啟動一個具有默認行為的插件）：

$ （“#myModal” ）。modal () // 用默認值初始化                       
$ （“#myModal” ）。modal ({ keyboard : false }) // 沒有鍵盤初始化     
$ （“#myModal” ）。modal ( 'show' ) // 立即初始化並調用 show                

每個插件還在 `Constructor` 屬性上公開其原始構造函數$.fn.popover.Constructor：如果您想獲取特定的插件實例，請直接從元素中檢索它：$('[rel=popover]').data('popover')。

無衝突

有時需要將 Bootstrap 插件與其他 UI 框架一起使用。在這些情況下，有時會發生命名空間衝突。如果發生這種情況，您可以調用.noConflict您希望恢復其值的插件。

var bootstrapButton = $ 。fn 。按鈕。noConflict () // 將 $.fn.button 返回到先前分配的值 
$ . fn 。bootstrapBtn = bootstrapButton             // 賦予 $().bootstrapBtn 引導功能

活動

Bootstrap 為大多數插件的獨特操作提供自定義事件。通常，這些以不定式和過去分詞形式出現 - 其中不定式（例如show）在事件開始時觸發，其過去分詞形式（例如shown）在動作完成時觸發。

所有不定式事件都提供 preventDefault 功能。這提供了在動作開始之前停止執行的能力。

$ （'#myModal' ）。上（'顯示' ，功能（e ）{   
    如果（！數據）返回e 。preventDefault () // 停止顯示模態   
})

關於過渡

對於簡單的過渡效果，將bootstrap-transition.js與其他 JS 文件一起包含一次。如果您使用的是已編譯（或縮小）的bootstrap.js，則無需包含它——它已經存在。

用例

過渡插件的幾個例子：

• 在模態中滑動或淡出
• 淡出標籤
• 淡出警報
• 滑動輪播窗格

例子

模態是精簡但靈活的對話框提示，具有最低要求的功能和智能默認值。

靜態示例

在頁腳中帶有頁眉、正文和一組操作的渲染模式。

<div class = "模態隱藏淡入淡出" > 
  <div類= “模態標題” > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </按鈕>    
    <h3>模態標題</h3>
  </div>
  <div類= “模態體” > 
    <p>一個很好的身體...... </p>
  </div>
  <div類= “模態頁腳” > 
    <a href = "#" class = "btn" >關閉</a>  
    <a href = "#" class = "btn btn-primary" >保存更改</a>  
  </div>
</div>

現場演示

單擊下面的按鈕，通過 JavaScript 切換模式。它將向下滑動並從頁面頂部淡入。

<!-- 觸發模態的按鈕 -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" >啟動演示模式</a>    
 
<!-- 模態 -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div類= “模態標題” > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" >模態標題</h3> 
  </div>
  <div類= “模態體” > 
    <p>一個很��的身體...... </p>
  </div>
  <div類= “模態頁腳” > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" >關閉</button>   
    <button class = "btn btn-primary" >保存更改</button> 
  </div>
</div>

用法

通過數據屬性

無需編寫 JavaScript 即可激活模式。在控制器元素上設置data-toggle="modal"，如按鈕，以及一個data-target="#foo"或href="#foo"以特定模式為目標進行切換。

<button type = "button" data-toggle = "modal" data-target = "#myModal" >啟動模態</button>   

通過 JavaScript

myModal使用單行 JavaScript調用帶有 id 的模式：

$ （'#myModal' ）。模態（選項）

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.modal（選項）

將您的內容激活為模式。接受一個可選選項object。

$ （'#myModal' ）。模態（{
  鍵盤：假 
})

.modal('切換')

手動切換模式。

$ （'#myModal' ）。模態（'切換' ）

.modal('顯示')

手動打開一個模態。

$ （'#myModal' ）。模態（“顯示” ）

.modal('隱藏')

手動隱藏模態。

$ （'#myModal' ）。模態（“隱藏” ）

活動

Bootstrap 的模態類公開了一些用於連接模態功能的事件。

$ （'#myModal' ）。on ( '隱藏' , function () {   
  // 做一點事…
})

例子

使用這個簡單的插件幾乎可以將下拉菜單添加到任何東西，包括導航欄、選項卡和藥丸。

在導航欄中

在選項卡內

用法

通過數據屬性

添加data-toggle="dropdown"到鏈接或按鈕以切換下拉菜單。

<div類= “下拉” > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown 觸發器</a>   
  <ul類= “下拉菜單”角色= “菜單” aria- labelledby = “dLabel” >   
    ...
  </ul>
</div>

要保持 URL 完整，請使用data-target屬性而不是href="#".

<div類= “下拉” > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    落下
    <b類= "插入符號" ></b> 
  </a>
  <ul類= “下拉菜單”角色= “菜單” aria- labelledby = “dLabel” >   
    ...
  </ul>
</div>

通過 JavaScript

通過 JavaScript 調用下拉菜單：

$ （'.dropdown-toggle' ）。下拉（）

選項

沒有任何

方法

$().dropdown('切換')

用於切換給定導航欄或選項卡式導航的菜單的編程 api。

導航欄中的示例

ScrollSpy 插件用於根據滾動位置自動更新導航目標。滾動導航欄下方的區域並觀察活動類的變化。下拉子項目也將突出顯示。

用法

通過數據屬性

要輕鬆地將 scrollspy 行為添加到您的頂欄導航，只需添加data-spy="scroll"到您要監視的元素（通常是正文）並data-target=".navbar"選擇要使用的導航。您需要將 scrollspy 與.nav組件一起使用。

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

通過 JavaScript

通過 JavaScript 調用 scrollspy：

$ （'#navbar' ）。捲軸間諜()

方法

.scrollspy('刷新')

當使用 scrollspy 和從 DOM 中添加或刪除元素時，你需要像這樣調用 refresh 方法：

$ ( '[data-spy="scroll"]' )。每個（函數（）{  
  var $spy = $ (這個)。scrollspy ( '刷新' )
});

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-offset="".

活動

示例選項卡

添加快速、動態的選項卡功能以在本地內容窗格之間進行轉換，甚至通過下拉菜單。

用法

通過 JavaScript 啟用可選項卡（每個選項卡需要單獨激活）：

$ （'#myTab a' ）。點擊（功能（e ）{  
  e . 防止默認（）；
  $ （這個）。選項卡（“顯示” ）；
})

您可以通過多種方式激活單個選項卡：

$ ( '#myTab a[href="#profile"]' )。選項卡（“顯示” ）；// 按名稱選擇標籤 
$ ( '#myTab a:first' )。選項卡（“顯示” ）；// 選擇第一個標籤 
$ ( '#myTab a:last' )。選項卡（“顯示” ）；// 選擇最後一個標籤 
$ ( '#myTab li:eq(2) a' )。選項卡（“顯示” ）；// 選擇第三個標籤（0-indexed） 

標記

您無需編寫任何 JavaScript，只需在元素上指定data-toggle="tab"或即可激活選項卡或藥丸導航。data-toggle="pill"將nav和nav-tabs類添加到選項卡ul將應用 Bootstrap 選項卡樣式。

<ul class = "nav 導航標籤" > 
  <li><a href = "#home" data-toggle = "tab" >主頁</a></li>  
  <li><a href = "#profile" data-toggle = "tab" >個人資料</a></li>  
  <li><a href = "#messages" data-toggle = "tab" >消息</a></li>  
  <li><a href = "#settings" data-toggle = "tab" >設置</a></li>  
</ul>

方法

$().tab

激活選項卡元素和內容容器。Tab 應該在 DOM 中具有一個data-target或一個href目標容器節點。

<ul類= “nav 導航標籤” id = “myTab” >  
  <li class = "active" ><a href = "#home" >主頁</a></li>  
  <li><a href = "#profile" >個人資料</a></li> 
  <li><a href = "#messages" >消息</a></li> 
  <li><a href = "#settings" >設置</a></li> 
</ul>
 
<div類= "標籤內容" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<腳本>
  $ (函數() {  
    $ ( '#myTab a:last' )。選項卡（“顯示” ）；
  })
</腳本>

活動

$ ( 'a[data-toggle="tab"]' )。on （'顯示' ，函數（e ）{   
  e . 目標// 激活的選項卡
  e . relatedTarget // 上一個標籤
})

例子

受到 Jason Frame 編寫的優秀 jQuery.tipsy 插件的啟發；工具提示是一個更新版本，它不依賴圖像，使用 CSS3 製作動畫，使用數據屬性存儲本地標題。

出於性能原因，工具提示和彈出框數據 API 是可選的，這意味著您必須自己初始化它們。

將鼠標懸停在下面的鏈接上以查看工具提示：

四個方向

輸入組中的工具提示

當使用帶有 Bootstrap 輸入組的工具提示和彈出框時，您必須設置container（如下所述）選項以避免不必要的副作用。

用法

通過 JavaScript 觸發工具提示：

$ （'#example' ）。工具提示（選項）

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-animation="".

標記

<a href = "#" data-toggle = "tooltip" title = "first tooltip" >懸停在我身上</a>   

方法

$().tooltip(選項)

將工具提示處理程序附加到元素集合。

.tooltip('顯示')

顯示元素的工具提示。

$ （'#element' ）。工具提示（“顯示” ）

.tooltip('隱藏')

隱藏元素的工具提示。

$ （'#element' ）。工具提示（“隱藏” ）

.tooltip('切換')

切換元素的工具提示。

$ （'#element' ）。工具提示（“切換” ）

.tooltip('銷毀')

隱藏和破壞元素的工具提示。

$ （'#element' ）。工具提示（“銷毀” ）

例子

向任何元素添加小的內容覆蓋，如 iPad 上的內容，以容納輔助信息。將鼠標懸停在按鈕上以觸發彈出窗口。需要包含工具提示。

靜態彈出框

有四個選項可用：上對齊、右對齊、下對齊和左對齊。

沒有顯示為彈出框的標記是從 JavaScript 和data屬性中的內容生成的。

現場演示

四個方向

用法

通過 JavaScript 啟用彈出框：

$ （'#example' ）。彈出框（選項）

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-animation="".

標記

出於性能原因，選擇加入 Tooltip 和 Popover data-apis。如果您想使用它們，只需指定一個選擇器選項。

方法

$().popover(選項)

初始化元素集合的彈出框。

.popover('顯示')

顯示元素彈出框。

$ （'#element' ）。彈出窗口（“顯示” ）

.popover('隱藏')

隱藏元素彈出框。

$ （'#element' ）。彈出框（'隱藏' ）

.popover('切換')

切換元素彈出框。

$ （'#element' ）。彈出框（'切換' ）

.popover('銷毀')

隱藏和銷毀元素的彈出框。

$ （'#element' ）。彈出框（“銷毀” ）

示例警報

使用此插件向所有警報消息添加解除功能。

用法

啟用通過 JavaScript 解除警報：

$ （“.alert” ）。警報()

標記

只需添加data-dismiss="alert"到您的關閉按鈕即可自動提供警報關閉功能。

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

方法

$().alert()

使用關閉功能包裝所有警報。要讓警報在關閉時顯示動畫，請確保它們已經應用了.fadeand.in類。

.alert('關閉')

關閉警報。

$ （“.alert” ）。警報（'關閉' ）

活動

Bootstrap 的警報類公開了一些用於連接警報功能的事件。

$ （'#my-alert' ）。綁定（'關閉' ，函數（）{   
  // 做一點事…
})

示例用途

用按鈕做更多事情。控制按鈕狀態或為更多組件（如工具欄）創建按鈕組。

有狀態的

添加data-loading-text="Loading..."以在按鈕上使用加載狀態。

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." >加載狀態</button>   

單切換

添加data-toggle="button"以激活單個按鈕上的切換。

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

複選框

添加data-toggle="buttons-checkbox"複選框樣式在 btn-group 上切換。

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" >左</button>  
  <button type = "button" class = "btn btn-primary" >中間</button>  
  <button type = "button" class = "btn btn-primary" >右</button>  
</div>

收音機

添加data-toggle="buttons-radio"用於在 btn-group 上切換無線電樣式。

<div class = "btn-group"數據切換= "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" >左</button>  
  <button type = "button" class = "btn btn-primary" >中間</button>  
  <button type = "button" class = "btn btn-primary" >右</button>  
</div>

用法

通過 JavaScript 啟用按鈕：

$ （'.nav-tabs' ）。按鈕()

標記

數據屬性是按鈕插件的組成部分。查看下面的示例代碼以了解各種標記類型。

選項

沒有任何

方法

$().button('切換')

切換推送狀態。使按鈕具有已激活的外觀。

<button type = "button" class = "btn" data-toggle = "button" > ... </button>    

$().button('加載中')

將按鈕狀態設置為加載 - 禁用按鈕並將文本交換為加載文本。應使用 data 屬性在按鈕元素上定義加載文本data-loading-text。

<button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>    

$().button('重置')

重置按鈕狀態 - 將文本交換為原始文本。

$().button(字符串)

重置按鈕狀態 - 將文本交換為任何數據定義的文本狀態。

<按鈕類型= “按鈕”類= “btn”數據完整文本= “完成！” > ... </按鈕>    
<腳本>
  $ （'.btn' ）。按鈕（“完成” ）
</腳本>

關於

獲得對可折疊組件（如手風琴和導航）的基本樣式和靈活支持。

*需要包含過渡插件。

示例手風琴

使用折疊插件，我們構建了一個簡單的手風琴風格小部件：

<div class = "accordion" id = "accordion2" >  
  <div class = "手風琴組" > 
    <div class = "手風琴標題" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        可折疊組項目 #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body 折疊在" >  
      <div class = "手風琴內部" > 
        動漫卡通頭像...
      </div>
    </div>
  </div>
  <div class = "手風琴組" > 
    <div class = "手風琴標題" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        可折疊組項目 #2
      </a>
    </div>
    <div id = "collapseTwo" class = "手風琴體折疊" >  
      <div class = "手風琴內部" > 
        動漫卡通頭像...
      </div>
    </div>
  </div>
</div>
...

您也可以使用沒有手風琴標記的插件。製作一個按鈕來切換另一個元素的展開和折疊。

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  簡單可折疊
</按鈕>
 
<div id = "demo" class = "collapse in" > ... </div>  

用法

通過數據屬性

只需添加data-toggle="collapse"一個data-targetto 元素即可自動分配對可折疊元素的控制。該data-target屬性接受一個 CSS 選擇器來應用折疊。確保將類添加collapse到可折疊元素。如果您希望它默認打開，請添加附加類in。

要將手風琴式的組管理添加到可折疊控件，請添加 data 屬性data-parent="#selector"。請參閱演示以查看此操作。

通過 JavaScript

手動啟用：

$ （“.collapse” ）。崩潰()

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-parent="".

方法

.collapse（選項）

將您的內容激活為可折疊元素。接受一個可選選項object。

$ （'#myCollapsible' ）。崩潰（{
  切換：假 
})

.collapse('切換')

將可折疊元素切換為顯示或隱藏。

.collapse('顯示')

顯示可折疊元素。

.collapse('隱藏')

隱藏可折疊元素。

活動

Bootstrap 的折疊類公開了一些用於掛鉤折疊功能的事件。

$ （'#myCollapsible' ）。on ( '隱藏' , function () {   
  // 做一點事…
})

示例輪播

下面的幻燈片顯示了一個通用插件和組件，用於在輪播等元素中循環。

第一個縮略圖標籤

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。

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "輪播指示器" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 輪播項目 -->
  <div class = "carousel-inner" > 
    <div class = "活動項目" > ... </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- 輪播導航 -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

用法

通過數據屬性

使用數據屬性輕鬆控制輪播的位置。data-slide接受關鍵字prevor next，它改變相對於當前位置的幻燈片位置。或者，使用data-slide-to將原始幻燈片索引傳遞給 carousel data-slide-to="2"，它將幻燈片位置跳轉到以 開頭的特定索引0。

通過 JavaScript

手動調用輪播：

$ （'.carousel' ）。輪播()

選項

選項可以通過數據屬性或 JavaScriptz 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-interval="".

方法

.carousel（選項）

使用可選選項初始化輪播object並開始循環瀏覽項目。

$ （'.carousel' ）。輪播（{
  間隔：2000 
})

.carousel('循環')

從左到右循環瀏覽輪播項目。

.carousel('暫停')

停止輪播在項目中循環。

.carousel(數字)

將輪播循環到特定幀（基於 0，類似於數組）。

.carousel('prev')

循環到上一個項目。

.carousel('下一個')

循環到下一個項目。

活動

Bootstrap 的 carousel 類公開了兩個用於連接 carousel 功能的事件。

例子

一個基本的、易於擴展的插件，用於使用任何表單文本輸入快速創建優雅的預輸入。

<輸入類型= “文本”數據提供= “提前輸入” >  

您需要進行設置autocomplete="off"以防止默認瀏覽器菜單出現在 Bootstrap 預輸入下拉菜單中。

用法

通過數據屬性

添加數據屬性以註冊具有預先輸入功能的元素，如上例所示。

通過 JavaScript

使用以下命令手動調用 typeahead：

$ （'.typeahead' ）。預輸入()

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-source="".

方法

.typeahead（選項）

使用預輸入初始化輸入。

例子

左側的子導航是詞綴插件的現場演示。

用法

通過數據屬性

要輕鬆地將詞綴行為添加到任何元素，只需添加data-spy="affix"到要監視的元素即可。然後使用偏移量來定義何時打開和關閉元素的固定。

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

通過 JavaScript

通過 JavaScript 調用 affix 插件：

$ （'#navbar' ）。詞綴()

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-offset-top="200".