JavaScript

單獨或編譯

插件可以單獨包含（使用 Bootstrap 的單個*.js文件），也可以一次全部包含（使用bootstrap.js或 minified bootstrap.min.js）。

使用已編譯的 JavaScript

兩者都bootstrap.js包含bootstrap.min.js在一個文件中的所有插件。只包括一個。

插件依賴

一些插件和 CSS 組件依賴於其他插件。如果您單獨包含插件，請確保在文檔中檢查這些依賴項。另請注意，所有插件都依賴於 jQuery（這意味著 jQuery 必須包含在插件文件之前）。請諮詢我們bower.json以了解支持的 jQuery 版本。

數據屬性

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

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

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

通過數據屬性每個元素只有一個插件

不要在同一個元素上使用來自多個插件的數據屬性。例如，一個按鈕不能同時具有工具提示和切換模式。為此，請使用包裝元素。

程序化 API

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

默認設置

您可以通過修改插件的Constructor.DEFAULTS對象來更改插件的默認設置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

沒有衝突

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

活動

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

從 3.0.0 開始，所有 Bootstrap 事件都具有命名空間。

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

版本號

每個 Bootstrap 的 jQuery 插件的版本都可以通過VERSION插件構造函數的屬性來訪問。例如，對於工具提示插件：

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

禁用 JavaScript 時沒有特殊的回退

當 JavaScript 被禁用時，Bootstrap 的插件不會特別優雅地回退。如果您關心這種情況下的用戶體驗，請使用<noscript>向您的用戶解釋情況（以及如何重新啟用 JavaScript），和/或添加您自己的自定義後備。

第三方庫

Bootstrap 不正式支持第三方 JavaScript 庫，如 Prototype 或 jQuery UI。儘管有.noConflict命名空間的事件，但您可能需要自行修復兼容性問題。

關於過渡

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

裡面有什麼

Transition.js 是transitionEnd事件的基本助手以及 CSS 過渡模擬器。其他插件使用它來檢查 CSS 過渡支持並捕獲懸掛過渡。

禁用過渡

可以使用以下 JavaScript 片段全局禁用轉換，該片段必須在transition.js（或bootstrap.js或bootstrap.min.js，視情況而定）加載之後：

$.support.transition = false

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

不支持多個打開模式

確保不要在另一個模式仍然可見時打開模式。一次顯示多個模式需要自定義代碼。

由於 HTML5 定義其語義的方式，autofocusHTML 屬性在 Bootstrap 模態中無效。要達到相同的效果，請使用一些自定義 JavaScript：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

例子

靜態示例

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

現場演示

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

可選尺寸

模態有兩個可選尺寸，可通過修飾符類放置在.modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

移除動畫

對於只是出現而不是淡入查看.fade的模態，請從模態標記中刪除該類。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

使用網格系統

要在模態中利用 Bootstrap 網格系統，只需.row將 s嵌套在中.modal-body，然後使用正常的網格系統類。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

有一堆按鈕都觸發相同的模式，只是內容略有不同？使用event.relatedTarget和HTMLdata-*屬性（可能通過 jQuery）根據單擊的按鈕來改變模式的內容。有關詳細信息，請參閱模態事件文檔relatedTarget，

...更多按鈕...

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

用法

模態插件通過數據屬性或 JavaScript 按需切換您的隱藏內容。它還添加.modal-open到<body>覆蓋默認滾動行為並生成一個.modal-backdrop以提供單擊區域，以便在單擊模態框外時關閉顯示的模態框。

通過數據屬性

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通過 JavaScript

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

$('#myModal').modal(options)

選項

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

姓名	類型	默認	描述
背景	布爾值或字符串`'static'`	真的	包括一個模態背景元素。或者，指定`static`在單擊時不關閉模式的背景。
鍵盤	布爾值	真的	按下退出鍵時關閉模態
節目	布爾值	真的	初始化時顯示模態。
偏僻的	小路	錯誤的	此選項自 v3.3.0 起已棄用，並已在 v4 中刪除。我們建議改用客戶端模板或數據綁定框架，或者自己調用jQuery.load。如果提供了遠程 URL，內容將通過 jQuery 的方法加載一次`load`並註入到`.modal-content`div 中。如果您使用的是 data-api，您也可以使用該`href`屬性來指定遠程源。這方面的一個例子如下所示： `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

方法

`.modal(options)`

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

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

手動切換模式。在模態框實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。shown.bs.modalhidden.bs.modal

$('#myModal').modal('toggle')

`.modal('show')`

手動打開一個模態。在模態實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.modal

$('#myModal').modal('show')

`.modal('hide')`

手動隱藏模式。在模式實際上被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.modal

$('#myModal').modal('hide')

`.modal('handleUpdate')`

重新調整模態框的位置以對抗滾動條，以防出現滾動條，這將使模態框跳到左側。

僅當模態的高度在打開時發生變化時才需要。

$('#myModal').modal('handleUpdate')

活動

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

所有模態事件都在模態本身觸發（即在<div class="modal">）。

事件類型	描述
show.bs.modal	`show`調用實例方法時立即觸發此事件。如果由單擊引起，則單擊的元素可用作`relatedTarget`事件的屬性。
顯示.bs.modal	當模式對用戶可見時觸發此事件（將等待 CSS 轉換完成）。如果由單擊引起，則單擊的元素可用作`relatedTarget`事件的屬性。
hide.bs.modal	`hide`調用實例方法時立即觸發此事件。
hidden.bs.modal	當模態對用戶隱藏完成時會觸發此事件（將等待 CSS 轉換完成）。
加載.bs.modal	`remote`當模態使用該選項加載內容時會觸發此事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

例子

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

藥丸內

用法

.open通過數據屬性或 JavaScript，下拉插件通過切換父列表項上的類來切換隱藏內容（下拉菜單）。

在移動設備上，打開下拉菜單會添加一個.dropdown-backdrop作為在菜單外點擊時關閉下拉菜單的點擊區域，這是適當的 iOS 支持的要求。這意味著從打開的下拉菜單切換到不同的下拉菜單需要額外點擊移動設備。

注意：該data-toggle="dropdown"屬性依賴於在應用程序級別關閉下拉菜單，因此最好始終使用它。

通過數據屬性

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

通過 JavaScript

通過 JavaScript 調用下拉菜單：

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`仍然需要

無論您是通過 JavaScript 調用下拉菜單還是使用 data-api，data-toggle="dropdown"都必須始終出現在下拉菜單的觸發元素上。

選項

沒有任何

方法

`$().dropdown('toggle')`

切換給定導航欄或選項卡式導航的下拉菜單。

活動

所有下拉事件都在.dropdown-menu的父元素上觸發。

所有下拉事件都有一個relatedTarget屬性，其值是切換錨元素。

事件類型	描述
show.bs.dropdown	此事件在調用 show 實例方法時立即觸發。
顯示的.bs.dropdown	當下拉菜單對用戶可見時觸發此事件（將等待 CSS 轉換完成）。
hide.bs.dropdown	當調用 hide 實例方法時，會立即觸發此事件。
hidden.bs.dropdown	當下拉菜單完成對用戶隱藏時觸發此事件（將等待 CSS 轉換完成）。

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

導航欄中的示例

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

@胖的

廣告緊身褲 keytar，早午餐 id 藝術派對 dolor labe。Pitchfork yr enim lo-fi 在售罄之前 qui。Tumblr 從農場到餐桌的自行車權利。Anim keffiyeh carles 開衫。Velit seitan mcsweeney 的照相亭 3 wolf moon irure。Cosby 毛衣 lomo jean 短褲，williamsburg 連帽衫 minim qui 你可能沒聽說過它們和開衫信託基金過失生物柴油韋斯安德森美學。Nihil 紋身 accusamus，具有諷刺意味的生物柴油 keffiyeh 工匠 ullamco 後果。

@mdo

Veniam marfa 小鬍子滑板，adipisicing fugiat velit 乾草叉鬍鬚。Freegan 鬍鬚 aliqua cupidatat mcsweeney 的 vero。Cupidatat 四個 loko nisi，ea helvetica nulla carles。紋身 cosby 毛衣食品卡車，mcsweeney 的非免費乙烯基。低保真韋斯安德森 +1 裁縫。卡爾斯非審美練習 quis 紳士化。布魯克林 adipisicing 精釀啤酒副 keytar deserunt。

一

Occaecat commodo aliqua delectus。Fap 精釀啤酒 deserunt 滑板 ea。Lomo 自行車權利 adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam。High Life id 黑膠唱片，echo park consequat quis aliquip banh mi 乾草叉。Vero VHS est adipisicing。Consectetur nisi DIY 迷你郵差包。Cred ex in，可持續的 delectus consectetur 腰包 iphone。

二

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee 博客，過錯郵差包 marfa 不管是什麼美味的食品卡車。Sapiente 合成器 id 假設。Locavore sed helvetica 陳詞濫調具有諷刺意味，您可能沒有聽說過它們導致連帽衫無麩質 lo-fi fap aliquip。在售罄之前，Labore 就出現了，terry Richardson 早午餐 nesciunt quis cosby 毛衣 pariatur keffiyeh ut helvetica artisan。開衫精釀啤酒 seitan 現成的 velit。VHS chambray labouris tempor veniam。Anim mollit minim commodo ullamco 雷貓。

用法

需要引導導航

Scrollspy 目前需要使用Bootstrap 導航組件來正確突出顯示活動鏈接。

需要可解析的 ID 目標

導航欄鏈接必須具有可解析的 id 目標。例如，a<a href="#home">home</a>必須對應 DOM 中的某些內容，例如<div id="home"></div>.

非`:visible`目標元素被忽略

:visible不符合 jQuery的目標元素將被忽略，並且它們相應的導航項將永遠不會突出顯示。

需要相對定位

無論實現方法如何，scrollspy 都需要在position: relative;您正在監視的元素上使用。在大多數情況下，這是<body>. 當對以外的元素進行滾動監視時<body>，請務必height設置並overflow-y: scroll;應用。

通過數據屬性

要輕鬆地將 scrollspy 行為添加到您的頂欄導航，請添加data-spy="scroll"到您要監視的元素（通常是<body>）。然後添加帶有任何 Bootstrap組件data-target的父元素的 ID 或類的屬性。.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

通過 JavaScript

添加position: relative;CSS 後，通過 JavaScript 調用 scrollspy：

$('body').scrollspy({ target: '#navbar-example' })

方法

`.scrollspy('refresh')`

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

選項

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

姓名	類型	默認	描述
抵消	數字	10	計算滾動位置時從頂部偏移的像素。

活動

事件類型	描述
激活.bs.scrollspy	每當滾動間諜激活新項目時，就會觸發此事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

示例選項卡

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

你可能沒聽說過奧斯汀牛仔短褲。Nesciunt tofu stumptown aliqua，復古合成大師淨化。小鬍子陳詞濫調，威廉斯堡卡爾斯素食主義者 helvetica。Reprehenderit 屠夫復古 keffiyeh 捕夢網合成器。Cosby 毛衣 eu banh mi, qui irure terry richardson ex squid。Aliquip placeat 鼠尾草 iphone。Seitan aliquip quis 開衫美國服裝，屠夫 voluptate nisi qui。

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

擴展選項卡式導航

該插件擴展了選項卡式導航組件以添加選項卡區域。

用法

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

標記

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

淡化效果

要使標籤淡入，請添加.fade到每個.tab-pane. 第一個選項卡窗格還必須.in使初始內容可見。

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

方法

`$().tab`

激活選項卡元素和內容容器。Tab 應該在 DOM 中具有一個data-target或一個href目標容器節點。在上面的示例中，選項卡是<a>帶有data-toggle="tab"屬性的 s。

`.tab('show')`

選擇給定的選項卡並顯示其相關內容。之前選擇的任何其他選項卡都將被取消選擇，並且其相關內容被隱藏。在選項卡窗格實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.tab

$('#someTab').tab('show')

活動

顯示新選項卡時，事件按以下順序觸發：

hide.bs.tab（在當前活動選項卡上）
show.bs.tab（在待顯示的選項卡上）
hidden.bs.tab（在上一個活動選項卡上，與hide.bs.tab事件相同）
shown.bs.tab（在剛剛顯示的新活動選項卡上，與show.bs.tab活動相同）

如果沒有選項卡處於活動狀態，則不會觸發hide.bs.taband事件。hidden.bs.tab

事件類型	描述
顯示.bs.tab	此事件在標籤顯示時觸發，但在新標籤顯示之前。使用`event.target`和`event.relatedTarget`分別定位活動選項卡和上一個活動選項卡（如果可用）。
顯示的.bs.tab	顯示選項卡後，此事件在選項卡顯示時觸發。使用`event.target`和`event.relatedTarget`分別定位活動選項卡和上一個活動選項卡（如果可用）。
隱藏.bs.tab	此事件在要顯示新選項卡時觸發（因此要隱藏先前的活動選項卡）。使用`event.target`和`event.relatedTarget`分別定位當前活動選項卡和新的即將活動選項卡。
hidden.bs.tab	此事件在顯示新選項卡後觸發（因此先前的活動選項卡被隱藏）。使用`event.target`和`event.relatedTarget`分別定位前一個活動選項卡和新活動選項卡。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

從不顯示具有零長度標題的工具提示。

例子

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

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

四個方向

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

選擇加入功能

出於性能原因，Tooltip 和 Popover data-apis 是可選的，這意味著您必須自己初始化它們。

初始化頁面上所有工具提示的一種方法是通過它們的data-toggle屬性來選擇它們：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

用法

工具提示插件按需生成內容和標記，默認情況下將工具提示放置在其觸發元素之後。

通過 JavaScript 觸發工具提示：

$('#example').tooltip(options)

標記

工具提示所需的標記只是一個data屬性，並且title在您希望擁有工具提示的 HTML 元素上。生成的工具提示標記相當簡單，儘管它確實需要一個位置（默認情況下，top由插件設置）。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

選項

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

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 CSS 淡入淡出過渡
容器	字符串 \| 錯誤的	錯誤的	將工具提示附加到特定元素。示例：`container: 'body'`。此選項特別有用，因為它允許您將工具提示定位在文檔流中靠近觸發元素的位置 - 這將防止工具提示在窗口調整大小期間從觸發元素浮動。
延遲	號碼 \| 目的	0	延遲顯示和隱藏工具提示 (ms) - 不適用於手動觸發類型如果提供了一個數字，延遲將應用於隱藏/顯示對象結構為：`delay: { "show": 500, "hide": 100 }`
html	布爾值	錯誤的	將 HTML 插入到工具提示中。如果為 false，jQuery 的`text`方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用文本。
放置	字符串 \| 功能	'最佳'	如何定位工具提示 - 頂部 \| 底部 \| 離開 \| 對 \| 汽車。當指定“自動”時，它將動態地重新定位工具提示。例如，如果放置為“自動向左”，則工具提示將盡可能顯示在左側，否則將顯示在右側。當一個函數用於確定位置時，它會以工具提示 DOM 節點作為其第一個參數，觸發元素 DOM 節點作為其第二個參數來調用。`this`上下文設置為工具提示實例。
選擇器	細繩	錯誤的	如果提供了選擇器，則工具提示對象將被委託給指定的目標。實際上，這用於啟用動態 HTML 內容以添加工具提示。請參閱this和一個內容豐富的示例。
模板	細繩	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	創建工具提示時要使用的基本 HTML。工具提示`title`將被注入到`.tooltip-inner`. `.tooltip-arrow`將成為工具提示的箭頭。最外層的包裝元素應該有`.tooltip`類。
標題	字符串 \| 功能	''	`title`如果屬性不存在，則默認標題值。如果給定了一個函數，它將被調用，並將其`this`引用設置為工具提示附加到的元素。
扳機	細繩	'懸停焦點'	工具提示是如何觸發的 - 點擊 \| 懸停 \| 焦點 \| 手動的。您可以傳遞多個觸發器；用空格分隔它們。`manual`不能與任何其他觸發器結合使用。
視口	字符串 \| 對象 \| 功能	{ 選擇器：'body'，填充：0 }	將工具提示保持在此元素的範圍內。示例：`viewport: '#viewport'`或`{ "selector": "#viewport", "padding": 0 }` 如果給定了一個函數，則使用觸發元素 DOM 節點作為其唯一參數來調用它。`this`上下文設置為工具提示實例。

方法

`$().tooltip(options)`

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

`.tooltip('show')`

顯示元素的工具提示。在工具提示實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.tooltip這被認為是工具提示的“手動”觸發。從不顯示具有零長度標題的工具提示。

$('#element').tooltip('show')

`.tooltip('hide')`

隱藏元素的工具提示。在工具提示實際上被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.tooltip這被認為是工具提示的“手動”觸發。

$('#element').tooltip('hide')

`.tooltip('toggle')`

切換元素的工具提示。在工具提示實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。這被認為是工具提示的“手動”觸發。shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

`.tooltip('destroy')`

隱藏和破壞元素的工具提示。使用委託（使用選項創建）的selector工具提示不能在後代觸發器元素上單獨銷毀。

$('#element').tooltip('destroy')

活動

事件類型	描述
show.bs.tooltip	`show`調用實例方法時立即觸發此事件。
顯示的.bs.tooltip	當工具提示對用戶可見時觸發此事件（將等待 CSS 轉換完成）。
hide.bs.tooltip	`hide`調用實例方法時立即觸發此事件。
hidden.bs.tooltip	當工具提示完成對用戶隱藏時觸發此事件（將等待 CSS 轉換完成）。
插入的.bs.tooltip	此事件`show.bs.tooltip`在工具提示模板添加到 DOM 的事件之後觸發。

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

向任何元素添加小的內容覆蓋，如 iPad 上的內容，以容納輔助信息。

標題和內容都為零長度的彈出框永遠不會顯示。

選擇加入功能

出於性能原因，Tooltip 和 Popover data-apis 是可選的，這意味著您必須自己初始化它們。

初始化頁面上所有彈出框的一種方法是通過它們的data-toggle屬性選擇它們：

$(function () {
  $('[data-toggle="popover"]').popover()
})

例子

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

現場演示

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四個方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

下次點擊關閉

使用focus觸發器在用戶下次單擊時關閉彈出窗口。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

用法

通過 JavaScript 啟用彈出框：

$('#example').popover(options)

選項

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

姓名	類型	默認	描述
動畫	布爾值	真的	對彈出框應用 CSS 淡入淡出過渡
容器	字符串 \| 錯誤的	錯誤的	將彈出框附加到特定元素。示例：`container: 'body'`。此選項特別有用，因為它允許您將彈出框定位在文檔流中靠近觸發元素的位置 - 這將防止彈出框在窗口調整大小期間浮動遠離觸發元素。
內容	字符串 \| 功能	''	`data-content`如果屬性不存在，則默認內容值。如果給定了一個函數，它將被調用，並將其`this`引用設置為彈出框附加到的元素。
延遲	號碼 \| 目的	0	延遲顯示和隱藏彈出框（毫秒） - 不適用於手動觸發類型如果提供了一個數字，延遲將應用於隱藏/顯示對象結構為：`delay: { "show": 500, "hide": 100 }`
html	布爾值	錯誤的	將 HTML 插入彈出框。如果為 false，jQuery 的`text`方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用文本。
放置	字符串 \| 功能	'正確的'	如何定位彈出框 - 頂部 \| 底部 \| 離開 \| 對 \| 汽車。當指定“auto”時，它將動態地重新定向彈出框。例如，如果放置是“自動向左”，則彈出框將盡可能向左顯示，否則將向右顯示。當一個函數用於確定位置時，它會以彈出框 DOM 節點作為其第一個參數，觸發元素 DOM 節點作為其第二個參數來調用。`this`上下文設置為彈出框實例。
選擇器	細繩	錯誤的	如果提供了選擇器，彈出框對象將被委託給指定的目標。實際上，這用於啟用動態 HTML 內容以添加彈出框。請參閱this和一個內容豐富的示例。
模板	細繩	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	創建彈出框時要使用的基本 HTML。彈出框`title`將被注入到`.popover-title`. 彈出框`content`將被注入到`.popover-content`. `.arrow`將成為彈出框的箭頭。最外層的包裝元素應該有`.popover`類。
標題	字符串 \| 功能	''	`title`如果屬性不存在，則默認標題值。如果給定了一個函數，它將被調用，並將其`this`引用設置為彈出框附加到的元素。
扳機	細繩	'點擊'	popover是如何觸發的——點擊\| 懸停 \| 焦點 \| 手動的。您可以傳遞多個觸發器；用空格分隔它們。`manual`不能與任何其他觸發器結合使用。
視口	字符串 \| 對象 \| 功能	{ 選擇器：'body'，填充：0 }	將彈出框保持在此元素的範圍內。示例：`viewport: '#viewport'`或`{ "selector": "#viewport", "padding": 0 }` 如果給定了一個函數，則使用觸發元素 DOM 節點作為其唯一參數來調用它。`this`上下文設置為彈出框實例。

方法

`$().popover(options)`

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

`.popover('show')`

顯示元素的彈出框。在彈出框實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.popover這被認為是彈出框的“手動”觸發。標題和內容均為零長度的彈出框永遠不會顯示。

$('#element').popover('show')

`.popover('hide')`

隱藏元素的彈出框。在彈出框實際上被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.popover這被認為是彈出框的“手動”觸發。

$('#element').popover('hide')

`.popover('toggle')`

切換元素的彈出框。在彈出框實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。這被認為是彈出框的“手動”觸發。shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

`.popover('destroy')`

隱藏和銷毀元素的彈出框。使用委託（使用選項創建）的selector彈出框不能在後代觸發器元素上單獨銷毀。

$('#element').popover('destroy')

活動

事件類型	描述
show.bs.popover	`show`調用實例方法時立即觸發此事件。
顯示的.bs.popover	當彈出框對用戶可見時觸發此事件（將等待 CSS 轉換完成）。
hide.bs.popover	`hide`調用實例方法時立即觸發此事件。
hidden.bs.popover	當彈出窗口完成對用戶隱藏時觸發此事件（將等待 CSS 轉換完成）。
插入的.bs.popover	該事件`show.bs.popover`在彈出框模板添加到 DOM 後觸發。

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

示例警報

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

使用.close按鈕時，它必須是的第一個子元素，.alert-dismissible並且標記中不能出現任何文本內容。

神聖的鱷梨醬！最好檢查一下自己，你看起來不太好。

哦，快！你有一個錯誤！

改變這個和那個，然後再試一次。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Cras mattis consectetur purus 坐在 amet 發酵液中。

用法

只需添加data-dismiss="alert"到您的關閉按鈕即可自動提供警報關閉功能。關閉警報會將其從 DOM 中刪除。

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

要讓警報在關閉時使用動畫，請確保它們已經應用了.fade和.in類。

方法

`$().alert()`

使警報偵聽具有該data-dismiss="alert"屬性的後代元素上的單擊事件。（使用 data-api 的自動初始化時不需要。）

`$().alert('close')`

通過從 DOM 中刪除警報來關閉它。如果元素上存在.fade和.in類，則警報將在被刪除之前淡出。

活動

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

事件類型	描述
關閉.bs.alert	`close`調用實例方法時立即觸發此事件。
關閉.bs.alert	當警報關閉時觸發此事件（將等待 CSS 轉換完成）。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

跨瀏覽器兼容性

Firefox 在頁面加載時保持表單控制狀態（禁用和檢查）。解決方法是使用autocomplete="off". 請參閱Mozilla 錯誤 #654072。

有狀態的

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

此功能自 v3.3.5 起已棄用，並已在 v4 中刪除。

使用您喜歡的任何狀態！

為了演示，我們使用data-loading-textand $().button('loading')，但這不是您可以使用的唯一狀態。在下面的文檔中查看更多$().button(string)信息。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

單切換

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

預切換按鈕需要`.active`和`aria-pressed="true"`

對於預切換按鈕，您必須將.active類和aria-pressed="true"屬性添加到您button自己。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

複選框/收音機

添加data-toggle="buttons"到.btn-group包含複選框或單選輸入以啟用各自樣式的切換。

預選選項需要`.active`

對於預選選項，您必須自己將.active類添加到輸入中label。

僅在單擊時更新視覺檢查狀態

如果復選框按鈕的選中狀態在沒有觸發click按鈕上的事件的情況下更新（例如，通過<input type="reset">或通過設置checked輸入的屬性），您將需要自己切換.active輸入上的類label。

複選框 1（預先選中）複選框 2 複選框 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

收音機 1（預選）電台 2 電台 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

方法

`$().button('toggle')`

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

`$().button('reset')`

重置按鈕狀態 - 將文本交換為原始文本。此方法是異步的，並在重置實際完成之前返回。

`$().button(string)`

將文本交換為任何數據定義的文本狀態。

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

靈活的插件，利用少數類來輕鬆切換行為。

插件依賴

Collapse 需要在您的 Bootstrap 版本中包含過渡插件。

例子

單擊下面的按鈕以通過類更改顯示和隱藏另一個元素：

.collapse隱藏內容
.collapsing在過渡期間應用
.collapse.in顯示內容

您可以使用帶有屬性的鏈接href或帶有屬性的按鈕data-target。在這兩種情況下，data-toggle="collapse"都是必需的。

與href鏈接

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

手風琴示例

擴展默認折疊行為以使用面板組件創建手風琴。

可折疊組項目 #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡車藜麥 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一隻鳥 squid 單產咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精釀啤酒工人韋斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。緊身褲 occaecat 精釀啤酒從農場到餐桌，粗斜紋棉布美學合成器你可能沒有聽說過它們 accusamus labe 可持續 VHS。

可折疊組項目 #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

可折疊組項目 #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

也可以.panel-body用s 交換.list-groups。

可折疊列表組

Bootply
One itmus ac facilin
Second eros

Footer

使展開/折疊控件可訪問

一定要添加aria-expanded到控制元素。該屬性明確定義了屏幕閱讀器和類似輔助技術的可折疊元素的當前狀態。如果可折疊元素默認關閉，則它的值應為aria-expanded="false". 如果您已使用in類將可折疊元素設置為默認打開，aria-expanded="true"請改為在控件上設置。該插件將根據可折疊元素是否已打開或關閉自動切換此屬性。

此外，如果您的控制元素針對單個可折疊元素——即data-target屬性指向一個id選擇器——您可以向控制元素添加一個附加aria-controls屬性，其中包含id可折疊元素的。現代屏幕閱讀器和類似的輔助技術利用此屬性為用戶提供額外的快捷方式，以直接導航到可折疊元素本身。

用法

崩潰插件利用幾個類來處理繁重的工作：

.collapse隱藏內容
.collapse.in顯示內容
.collapsing在過渡開始時添加，並在過渡結束時刪除

這些類可以在component-animations.less.

通過數據屬性

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

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

通過 JavaScript

手動啟用：

$('.collapse').collapse()

選項

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

姓名	類型	默認	描述
父母	選擇器	錯誤的	如果提供了選擇器，則在顯示此可折疊項時，將關閉指定父項下的所有可折疊元素。（類似於傳統的手風琴行為 - 這取決於`panel`類）
切換	布爾值	真的	在調用時切換可折疊元素

方法

`.collapse(options)`

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

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

將可折疊元素切換為顯示或隱藏。在可折疊元素實際顯示或隱藏之前（即在or事件發生之前）返回給調用者。shown.bs.collapsehidden.bs.collapse

`.collapse('show')`

顯示可折疊元素。在可折疊元素實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.collapse

`.collapse('hide')`

隱藏可折疊元素。在可折疊元素實際被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.collapse

活動

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

事件類型	描述
show.bs.collapse	`show`調用實例方法時立即觸發此事件。
顯示.bs.collapse	當折疊元素對用戶可見時觸發此事件（將等待 CSS 轉換完成）。
hide.bs.collapse	`hide`調用該方法時會立即觸發此事件。
hidden.bs.collapse	當對用戶隱藏折疊元素時會觸發此事件（將等待 CSS 轉換完成）。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

用於循環播放元素的幻燈片組件，例如輪播。不支持嵌套輪播。

例子

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可訪問性問題

輪播組件通常不符合可訪問性標準。如果您需要合規，請考慮使用其他選項來展示您的內容。

Internet Explorer 8 和 9 不支持過渡動畫

Bootstrap 專門使用 CSS3 來製作動畫，但 Internet Explorer 8 和 9 不支持必要的 CSS 屬性。因此，使用這些瀏覽器時沒有幻燈片過渡動畫。我們有意決定不為過渡包含基於 jQuery 的後備。

需要初始活動元素

該類.active需要添加到其中一張幻燈片中。否則，輪播將不可見。

字形圖標不是必需的

控件不一定需要和.glyphicon .glyphicon-chevron-left類。.glyphicon .glyphicon-chevron-rightBootstrap 提供.icon-prev並.icon-next作為純 unicode 替代品。

可選字幕

使用.carousel-caption任何.item. 在那裡放置幾乎任何可選的 HTML，它將自動對齊和格式化。

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

用法

多個輪播

輪播需要在id最外面的容器 (the .carousel) 上使用，以便輪播控件正常運行。添加多個輪播或更改輪播時id，請務必更新相關控件。

通過數據屬性

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

該data-ride="carousel"屬性用於將輪播標記為在頁面加載時開始動畫。它不能與同一輪播的（冗餘和不必要的）顯式 JavaScript 初始化結合使用。

通過 JavaScript

手動調用輪播：

$('.carousel').carousel()

選項

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

姓名	類型	默認	描述
間隔	數字	5000	自動循環項目之間的延遲時間。如果為 false，carousel 將不會自動循環。
暫停	字符串 \| 無效的	“徘徊”	如果設置為`"hover"`，則暫停旋轉木馬`mouseenter`的循環並恢復旋轉木馬的循環`mouseleave`。如果設置為`null`，將鼠標懸停在輪播上不會暫停它。
裹	布爾值	真的	轉盤是否應連續循環或硬停止。
鍵盤	布爾值	真的	輪播是否應對鍵盤事件做出反應。

方法

`.carousel(options)`

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

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

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

`.carousel('pause')`

停止輪播在項目中循環。

`.carousel(number)`

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

`.carousel('prev')`

循環到上一個項目。

`.carousel('next')`

循環到下一個項目。

活動

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

這兩個事件都具有以下附加屬性：

direction：旋轉木馬的滑動方向（"left"或"right"）。
relatedTarget：作為活動項滑入到位的 DOM 元素。

所有輪播事件都在輪播本身（即在<div class="carousel">）觸發。

事件類型	描述
slide.bs.carousel	`slide`調用實例方法時立即觸發此事件。
slid.bs.carousel	當輪播完成其幻燈片轉換時會觸發此事件。

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

例子

詞綴插件可以position: fixed;打開和關閉，模擬使用position: sticky;. 右側的子導航是詞綴插件的現場演示。

用法

通過數據屬性或手動使用您自己的 JavaScript 使用 affix 插件。在這兩種情況下，您都必須為附加內容的定位和寬度提供 CSS。

注意：不要在包含在相對定位元素中的元素上使用詞綴插件，例如拉或推的列，因為Safari 呈現錯誤。

通過 CSS 定位

詞綴插件在三個類之間切換，每個類代表一個特定的狀態：.affix、.affix-top和.affix-bottom。您必須自己（獨立於此插件）為這些類提供樣式，除了position: fixed;on來處理實際位置。.affix

以下是詞綴插件的工作原理：

首先，插件添加.affix-top以指示元素處於其最頂部位置。此時不需要 CSS 定位。
滾動過去要附加的元素應該會觸發實際的附加。這是.affix替換.affix-top和設置的地方position: fixed;（由 Bootstrap 的 CSS 提供）。
如果定義了底部偏移，則滾動過去應替換.affix為.affix-bottom. 由於偏移量是可選的，因此設置一個需要您設置適當的 CSS。在這種情況下，position: absolute;必要時添加。該插件使用 data 屬性或 JavaScript 選項來確定從那裡放置元素的位置。

按照上述步驟為以下任一使用選項設置 CSS。

通過數據屬性

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

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

通過 JavaScript

通過 JavaScript 調用 affix 插件：

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

選項

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

姓名	類型	默認	描述
抵消	號碼 \| 功能 \| 目的	10	計算滾動位置時從屏幕偏移的像素。如果提供了單個數字，則將在頂部和底部方向上應用偏移量。要提供唯一的底部和頂部偏移，只需提供一個對像`offset: { top: 10 }`或`offset: { top: 10, bottom: 5 }`. 當您需要動態計算偏移量時使用函數。
目標	選擇器 \| 節點 \| jQuery 元素	`window`對象_	指定詞綴的目標元素。

方法

`.affix(options)`

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

$('#myAffix').affix({
  offset: 15
})

`.affix('checkPosition')`

根據相關元素的尺寸、位置和滾動位置重新計算詞綴的狀態。、.affix和類根據新狀態添加到附加內容.affix-top中.affix-bottom或從附加內容中刪除。每當附加內容或目標元素的尺寸發生變化時，都需要調用該方法，以確保附加內容的正確定位。

$('#myAffix').affix('checkPosition')

活動

Bootstrap 的詞綴插件公開了一些用於掛鉤詞綴功能的事件。

事件類型	描述
詞綴.bs.詞綴	此事件在元素被附加之前立即觸發。
附加.bs.affix	此事件在元素被附加後觸發。
詞綴-top.bs.affix	此事件在元素被加到頂部之前立即觸發。
貼-top.bs.affix	此事件在元素被固定到頂部後觸發。
詞綴-bottom.bs.affix	此事件在元素被固定到底部之前立即觸發。
貼-bottom.bs.affix	此事件在元素被固定到底部後觸發。

概述

單獨或編譯

使用已編譯的 JavaScript

插件依賴

數據屬性

通過數據屬性每個元素只有一個插件

程序化 API

默認設置

沒有衝突

活動

版本號

禁用 JavaScript 時沒有特殊的回退

第三方庫

過渡transition.js

關於過渡

裡面有什麼

禁用過渡

模態modal.js

不支持多個打開模式

模態標記放置

移動設備註意事項

例子

靜態示例

現場演示

使模態可訪問

嵌入 YouTube 視頻

可選尺寸

移除動畫

使用網格系統

根據觸發按鈕改變模態內容

用法

通過數據屬性

通過 JavaScript

選項

方法

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

活動

下拉菜單 dropdown.js

例子

在導航欄中

藥丸內

用法

通過數據屬性

通過 JavaScript

data-toggle="dropdown"仍然需要

選項

方法

$().dropdown('toggle')

活動

ScrollSpy scrollspy.js

導航欄中的示例

@胖的

@mdo

一

二

three

用法

需要引導導航

需要可解析的 ID 目標

非:visible目標元素被忽略

需要相對定位

通過數據屬性

通過 JavaScript

方法

.scrollspy('refresh')

選項

活動

可切換標籤tab.js

示例選項卡

擴展選項卡式導航

用法

標記

淡化效果

方法

$().tab

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`仍然需要

`$().dropdown('toggle')`

非`:visible`目標元素被忽略

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

`$().alert()`

`$().alert('close')`