Bootstrap插件

1 BootStrap插件使用規則

1.1 單個引入

JavaScript 插件可以單個引入（使用 Bootstrap 提供的單個 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）。

某些插件和 CSS 組件依賴于其它插件。如果你是單個引入每個插件的，請確保在文檔中檢查插件之間的依賴關系。注意，所有插件都依賴 jQuery （也就是說，jQuery必須在所有插件之前引入頁面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

1.2 data屬性

你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。

話又說回來，在某些情況下可能需要將此功能關閉。因此，我們還提供了關閉 data 屬性 API 的方法，即解除以 data-api 為命名空間并綁定在文檔上的事件。就像下面這樣：

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

另外，如果是針對某個特定的插件，只需在 data-api 前面添加那個插件的名稱作為命名空間，如下：

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

1.3 編程方式的 API

我們為所有 Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式，并且返回其所操作的元素集合（注：和jQuery的調用形式一致）。

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

所有方法都可以接受一個可選的 option 對象作為參數，或者一個代表特定方法的字符串，或者什么也不提供（在這種情況下，插件將會以默認值初始化）：

$('#myModal').modal()                      // 以默認值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后立即調用 show 方法

每個插件還通過 Constructor 屬性暴露了其原始的構造函數：$.fn.popover.Constructor。如果你想獲取某個插件的實例，可以直接通過頁面元素獲取：$('[rel="popover"]').data('popover')。

默認設置

每個插件都可以通過修改其自身的 Constructor.DEFAULTS 對象從而改變插件的默認設置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 默認選參數置為 false

1.4 避免命名空間沖突

某些時候可能需要將 Bootstrap 插件與其他 UI 框架共同使用。在這種情況下，命名空間沖突隨時可能發生。如果不幸發生了這種情況，你可以通過調用插件的 .noConflict 方法恢復其原始值。

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

1.5 事件

Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞（例如 shown ）表示在動作執行完畢之后被觸發。

從 3.0.0 版本開始，所有 Bootstrap 事件的名稱都采用命名空間方式。

所有以不定式形式的動詞命名的事件都提供了 preventDefault 功能。這就賦予你在動作開始執行前將其停止的能力。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模態框的展示
})

1.6 版本號

每個 Bootstrap 的 jQuery 插件的版本號都可以通過插件的構造函數上的 VERSION 屬性獲取到。例如工具提示框（tooltip）插件：

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

2 過渡效果 transition.js

2.1 關于過渡效果

對于簡單的過渡效果，只需將 transition.js 和其它 JS 文件一起引入即可。如果你使用的是編譯（或壓縮）版的 bootstrap.js 文件，就無需再單獨將其引入了。

2.3 包含的內容

Transition.js 是針對 transitionEnd 事件的一個基本輔助工具，也是對 CSS 過渡效果的模擬。它被其它插件用來檢測當前瀏覽器對是否支持 CSS 的過渡效果。

2.4 禁用過度效果

通過下面的 JavaScript 代碼可以在全局范圍禁用過渡效果，并且必須將此代碼放在 transition.js （或 bootstrap.js 或 bootstrap.min.js）后面，確保在 js 文件加載完畢后再執行下面的代碼：

$.support.transition = false

3 模態框 modal.js

務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。

3.1 模態框定義

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

3.2 按鈕

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

3.3 模態框尺寸

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

3.4 禁止動畫效果

如果你不需要模態框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類即可。

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

3.5 模態框中使用柵格系統

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

3.6 基于觸發器按鈕的不同模態內容

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

3.7 通過JavaScript處理模態框

打開

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

參數

名稱	類型	默認值	描述
backdrop	boolean 或字符串 `'static'`	true	I指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
keyboard	boolean	true	鍵盤上的 esc 鍵被按下時關閉模態框。
show	boolean	true	模態框初始化之后就立即顯示出來。
remote	path	false	This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself.如果提供的是 URL，將利用 jQuery 的 `load` 方法從此 URL 地址加載要展示的內容（只加載一次）并插入 `.modal-content` 內。如果使用的是 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')

手動打開或關閉模態框。在模態框顯示或隱藏之前返回到主調函數中（也就是，在觸發 shown.bs.modal 或 hidden.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 的模態框類提供了一些事件用于監聽并執行你自己的代碼。

事件類型	描述
show.bs.modal	`show` 方法調用之后立即觸發該事件。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 `relatedTarget` 屬性進行訪問。
shown.bs.modal	此事件在模態框已經顯示出來（并且同時在 CSS 過渡效果完成）之后被觸發。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 `relatedTarget` 屬性進行訪問。
hide.bs.modal	`hide` 方法調用之后立即觸發該事件。
hidden.bs.modal	此事件在模態框被隱藏（并且同時在 CSS 過渡效果完成）之后被觸發。
loaded.bs.modal	從`遠端的數據源`加載完數據之后觸發該事件。

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

4 下拉菜單 dropdown.js

4.1 JavaScript調用

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

方法

$().dropdown('toggle')

Toggles the dropdown menu of a given navbar or tabbed navigation.

事件

Event Type	Description
show.bs.dropdown	This event fires immediately when the show instance method is called.
shown.bs.dropdown	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown	This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown	This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

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

5 滾動監聽 scrollspy.js

滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。滾動導航條下面的區域并關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。

依賴 Bootstrap 的導航組件

滾動監聽插件依賴 Bootstrap 的導航組件用于高亮顯示當前激活的鏈接。

無論何種實現方式，滾動監聽都需要被監聽的組件是 position: relative; 即相對定位方式。大多數時候是監聽 <body> 元素

5.1 基本調用

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>

5.2 JavaScript調用

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

方法

.scrollspy('refresh')

當使用滾動監聽插件的同時在 DOM 中添加或刪除元素后，你需要像下面這樣調用此刷新（ refresh）方法：

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

參數

可以通過 data 屬性或 JavaScript 傳遞參數。對于 data 屬性，其名稱是將參數名附著到 data- 后面組成，例如 data-offset=""。

名稱	類型	默認值	描述
offset	number	10	計算滾動位置時相對于頂部的偏移量（像素數）。

事件

事件類型	描述
activate.bs.scrollspy	每當一個新條目被激活后都將由滾動監聽插件觸發此事件。

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

6 標簽頁 tab.js

6.1 基本使用

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

6.2 Fade特效

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

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

方法

$().tab

該方法可以激活標簽頁元素和內容容器。標簽頁需要用一個 data-target 或者一個指向 DOM 中容器節點的 href。

.tab('show')

Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tabevent occurs).

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

事件

事件	描述	實例
show.bs.tab	該事件在標簽頁顯示時觸發，但是必須在新標簽頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標簽頁和前一個激活的標簽頁。	`$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的標簽頁 e.relatedTarget // 前一個激活的標簽頁 })`
shown.bs.tab	該事件在標簽頁顯示時觸發，但是必須在某個標簽頁已經顯示之后。分別使用 event.target和 event.relatedTarget 來定位到激活的標簽頁和前一個激活的標簽頁。	`$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的標簽頁 e.relatedTarget // 前一個激活的標簽頁 })`

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

7 工具提示 tooltips.js

7.1 基本使用

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

7.2 JavaScript調用

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

參數

選項名稱	類型/默認值	Data 屬性名稱	描述
animation	boolean 默認值：true	data-animation	提示工具使用 CSS 漸變濾鏡效果。
html	boolean 默認值：false	data-html	向提示工具插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
placement	string\	function 默認值：top	data-placement	規定如何定位提示工具（即 top\	bottom\	left\	right\	auto）。當指定為 auto 時，會動態調整提示工具。例如，如果 placement 是 "auto left"，提示工具將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector	string 默認值：false	data-selector	如果提供了一個選擇器，提示工具對象將被委派到指定的目標。
title	string \	function 默認值：''	data-title	如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger	string 默認值：'hover focus'	data-trigger	定義如何觸發提示工具： **click\	hover \	focus \	manual**。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
delay	number \	object 默認值：0	data-delay	延遲顯示和隱藏提示工具的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那么延遲將會應用于顯示和隱藏。如果提供的是對象，結構如下所示：`delay: { show: 500, hide: 100 }`
container	string \	false 默認值：false	data-container	向指定元素追加提示工具。實例： container: 'body'

方法

方法	描述	實例
Options: .tooltip(options)	向元素集合附加提示工具句柄。	`$().tooltip(options)`
Toggle: .tooltip('toggle')	切換顯示/隱藏元素的提示工具。	`$('#element').tooltip('toggle')`
Show: .tooltip('show')	顯示元素的提示工具。	`$('#element').tooltip('show')`
Hide: .tooltip('hide')	隱藏元素的提示工具。	`$('#element').tooltip('hide')`
Destroy: .tooltip('destroy')	隱藏并銷毀元素的提示工具。	`$('#element').tooltip('destroy')`

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

事件

事件	描述	實例
show.bs.tooltip	當調用 show 實例方法時立即觸發該事件。	`$('#myTooltip').on('show.bs.tooltip', function () { // 執行一些動作... })`
shown.bs.tooltip	當提示工具對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#myTooltip').on('shown.bs.tooltip', function () { // 執行一些動作... })`
hide.bs.tooltip	當調用 hide 實例方法時立即觸發該事件。	`$('#myTooltip').on('hide.bs.tooltip', function () { // 執行一些動作... })`
hidden.bs.tooltip	當提示工具對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#myTooltip').on('hidden.bs.tooltip', function () { // 執行一些動作... })`

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

8.1 基本使用

基本

<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?">點我彈出/隱藏彈出框</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 左側
</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 頂部
</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 底部
</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 右側
</button>

點擊并讓彈出框消失

通過使用 focus 觸發器可以在用戶點擊彈出框是讓其消失。

實現“點擊并讓彈出框消失”的效果需要一些額外的代碼

為了更好的跨瀏覽器和跨平臺效果，你必須使用 <a> 標簽，不能使用 <button> 標簽，并且，還必須包含 role="button" 和 tabindex 屬性。

<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?">可消失的彈出框</a>

8.2 javaScript調用

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

參數

可以通過 data 屬性或 JavaScript 傳遞參數。對于 data 屬性，將參數名附著到 data- 后面，例如 data-animation=""。

選項名稱	類型/默認值	Data 屬性名稱	描述
animation	boolean 默認值：true	data-animation	向彈出框應用 CSS 褪色過渡效果。
html	boolean 默認值：false	data-html	向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
placement	string\	function 默認值：top	data-placement	規定如何定位彈出框（即 top\	bottom\	left\	right\	auto）。當指定為 auto 時，會動態調整彈出框。例如，如果 placement 是 "auto left"，彈出框將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector	string 默認值：false	data-selector	如果提供了一個選擇器，彈出框對象將被委派到指定的目標。
title	string \	function 默認值：''	data-title	如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger	string 默認值：'hover focus'	data-trigger	定義如何觸發彈出框： **click\	hover \	focus \	manual**。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
delay	number \	object 默認值：0	data-delay	延遲顯示和隱藏彈出框的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那么延遲將會應用于顯示和隱藏。如果提供的是對象，結構如下所示：`delay: { show: 500, hide: 100 }`
container	string \	false 默認值：false	data-container	向指定元素追加彈出框。實例： container: 'body'

方法

方法	描述	實例
Options: .popover(options)	向元素集合附加彈出框句柄。	`$().popover(options)`
Toggle: .popover('toggle')	切換顯示/隱藏元素的彈出框。	`$('#element').popover('toggle')`
Show: .popover('show')	顯示元素的彈出框。	`$('#element').popover('show')`
Hide: .popover('hide')	隱藏元素的彈出框。	`$('#element').popover('hide')`
Destroy: .popover('destroy')	隱藏并銷毀元素的彈出框。	`$('#element').popover('destroy')`

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

事件

事件	描述	實例
show.bs.popover	當調用 show 實例方法時立即觸發該事件。	`$('#mypopover').on('show.bs.popover', function () { // 執行一些動作... })`
shown.bs.popover	當彈出框對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#mypopover').on('shown.bs.popover', function () { // 執行一些動作... })`
hide.bs.popover	當調用 hide 實例方法時立即觸發該事件。	`$('#mypopover').on('hide.bs.popover', function () { // 執行一些動作... })`
hidden.bs.popover	當工具提示對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#mypopover').on('hidden.bs.popover', function () { // 執行一些動作... })`

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

9 警告信息 alert.js

9.1 基本使用

當使用 .close 按鈕時，它必須是 .alert-dismissible 的第一個子元素，并且在它之前不能有任何文本內容。

為關閉按鈕添加 data-dismiss="alert" 屬性就可以使其自動為警告框賦予關閉功能。關閉警告框也就是將其從 DOM 中刪除。

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

為了讓警告框在關閉時表現出動畫效果，請確保為其添加了 .fade 和 .in 類。

9.2 JavaScript調用

方法

$().alert()

讓警告框監聽具有 data-dismiss="alert" 屬性的后裔元素的點擊（click）事件。（如果是通過 data 屬性進行的初始化則無需使用）

$().alert('close')

關閉警告框并從 DOM 中將其刪除。如果警告框被賦予了 .fade 和 .in 類，那么，警告框在淡出之后才會被刪除。

事件

Bootstrap 的警告框插件對外暴露了一些可以被監聽的事件。

事件類型	描述
close.bs.alert	當 `close` 方法被調用后立即觸發此事件。
closed.bs.alert	當警告框被關閉后（也即 CSS 過渡效果完畢之后）立即觸發此事件。

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

10 按鈕 button.js

10.1 加載狀態

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

10.2 獨立的按鈕切換狀態

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

10.3 Checkbox和Radio

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

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

10.4 JavaScript方法

方法	描述	實例
button('toggle')	切換按壓狀態。賦予按鈕被激活的外觀。您可以使用 data-toggle 屬性啟用按鈕的自動切換。	`$().button('toggle')`
.button('loading')	當加載時，按鈕是禁用的，且文本變為 button 元素的 data-loading-text 屬性的值。	`$().button('loading')`
.button('reset')	重置按鈕狀態，文本內容恢復為最初的內容。當您想要把按鈕返回為原始的狀態時，該方法非常有用。	`$().button('reset')`
.button(string)	該方法中的字符串是指由用戶聲明的任何字符串。使用該方法，重置按鈕狀態，并添加新的內容。	`$().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>

11 折疊 collapse.js

11.1 基本使用

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

11.2 手風琴菜單

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

It's also possible to swap out .panel-bodys with .list-groups.

11.3 JavaScript調用

$('.collapse').collapse()

選項

選項名稱	類型/默認值	Data 屬性名稱	描述
parent	selector 默認值：false	data-parent	如果提供了一個選擇器，當可折疊項目顯示時，指定父元素下的所有可折疊的元素將被關閉。這與傳統的折疊面板（accordion）的行為類似 - 這依賴于 accordion-group 類。
toggle	boolean 默認值：true	data-toggle	切換調用可折疊元素。

方法

方法	描述	實例
Options:.collapse(options)	激活內容為可折疊元素。接受一個可選的 options 對象。	`$('#identifier').collapse({ toggle: false })`
Toggle:.collapse('toggle')	切換顯示/隱藏可折疊元素。	`$('#identifier').collapse('toggle')`
Show:.collapse('show')	顯示可折疊元素。	`$('#identifier').collapse('show')`
Hide:.collapse('hide')	隱藏可折疊元素。	`$('#identifier').collapse('hide')`

事件

事件	描述	實例
show.bs.collapse	在調用 show 方法后觸發該事件。	`$('#identifier').on('show.bs.collapse', function () { // 執行一些動作... })`
shown.bs.collapse	當折疊元素對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#identifier').on('shown.bs.collapse', function () { // 執行一些動作... })`
hide.bs.collapse	當調用 hide 實例方法時立即觸發該事件。	`$('#identifier').on('hide.bs.collapse', function () { // 執行一些動作... })`
hidden.bs.collapse	當折疊元素對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	`$('#identifier').on('hidden.bs.collapse', function () { // 執行一些動作... })`

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

12 輪播 carousel.js

12.1 基本使用

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

12.2 每個項目的標題

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

12.3 JavaScript 調用

$('.carousel').carousel()

選項

選項名稱	類型/默認值	Data 屬性名稱	描述
interval	number 默認值：5000	data-interval	自動循環每個項目之間延遲的時間量。如果為 false，輪播將不會自動循環。
pause	string 默認值："hover"	data-pause	鼠標進入時暫停輪播循環，鼠標離開時恢復輪播循環。
wrap	boolean 默認值：true	data-wrap	輪播是否連續循環。

方法

方法	描述	實例
.carousel(options)	初始化輪播為可選的 options 對象，并開始循環項目。	`$('#identifier').carousel({ interval: 2000 })`
.carousel('cycle')	從左到右循環輪播項目。	`$('#identifier').carousel('cycle')`
.carousel('pause')	停止輪播循環項目。	`$('#identifier').carousel('pause')`
.carousel(number)	循環輪播到某個特定的幀（從 0 開始計數，與數組類似）。	`$('#identifier').carousel(number)`
.carousel('prev')	循環輪播到上一個項目。	`$('#identifier').carousel('prev')`
.carousel('next')	循環輪播到下一個項目。	`$('#identifier').carousel('next')`

事件

事件	描述	實例
slide.bs.carousel	當調用 slide 實例方法時立即觸發該事件。	`$('#identifier').on('slide.bs.carousel', function () { // 執行一些動作... })`
slid.bs.carousel	當輪播完成幻燈片過渡效果時觸發該事件。	`$('#identifier').on('slid.bs.carousel', function () { // 執行一些動作... })`

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

13 附加 affix.js

12.1 基本使用

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

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

13.2 JavaScript調用

Call the affix plugin via JavaScript:

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

選項

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name	type	default	description
offset	number \	function \	object	10	Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object `offset: { top: 10 }` or `offset: { top: 10, bottom: 5 }`. Use a function when you need to dynamically calculate an offset.
target	selector \	node \	jQuery element	the `window`object	Specifies the target element of the affix.

方法

$().affix(options)

Activates your content as affixed content. Accepts an optional options object.

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

$().affix('checkPosition')

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

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

事件

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

Event Type	Description
affix.bs.affix	This event fires immediately before the element has been affixed.
affixed.bs.affix	This event is fired after the element has been affixed.
affix-top.bs.affix	This event fires immediately before the element has been affixed-top.
affixed-top.bs.affix	This event is fired after the element has been affixed-top.
affix-bottom.bs.affix	This event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affix	This event is fired after the element has been affixed-bottom.

posted @ 2018-08-27 19:44 Elton丶閱讀(201) 評論(0) 收藏舉報

刷新頁面返回頂部

王程 Elton

博主比較懶，正在努力更新中...

Bootstrap插件

1 BootStrap插件使用規則

1.1 單個引入

1.2 data屬性

1.3 編程方式的 API

1.4 避免命名空間沖突

1.5 事件

1.6 版本號

2 過渡效果 transition.js

2.1 關于過渡效果

2.3 包含的內容

2.4 禁用過度效果

3 模態框 modal.js

3.1 模態框定義

3.2 按鈕

3.3 模態框尺寸

3.4 禁止動畫效果

3.5 模態框中使用柵格系統

3.6 基于觸發器按鈕的不同模態內容

3.7 通過JavaScript處理模態框

打開

參數

方法

事件

4 下拉菜單 dropdown.js

4.1 JavaScript調用

方法

事件

5 滾動監聽 scrollspy.js

5.1 基本調用

5.2 JavaScript調用

方法

參數

事件

6 標簽頁 tab.js

6.1 基本使用

6.2 Fade特效

6.3 JavaScript調用

方法

事件

7 工具提示 tooltips.js

7.1 基本使用

7.2 JavaScript調用

參數

方法

事件

8 彈出框 popover.js

8.1 基本使用

基本

彈出方向

點擊并讓彈出框消失

8.2 javaScript調用

參數

方法

事件

9 警告信息 alert.js

9.1 基本使用

9.2 JavaScript調用

方法

事件

10 按鈕 button.js

10.1 加載狀態

10.2 獨立的按鈕切換狀態

10.3 Checkbox和Radio

10.4 JavaScript方法

11 折疊 collapse.js

11.1 基本使用

11.2 手風琴菜單

11.3 JavaScript調用

選項

方法

事件

12 輪播 carousel.js

12.1 基本使用

12.2 每個項目的標題

12.3 JavaScript 調用

選項

方法