Bootstrap進階四：jQuery插件詳解

一、模態對話框(Modal)

模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。
不支持同時打開多個模態框
千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框，需要自己寫額外的代碼來實現。
模態框的 HTML 代碼放置的位置
務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。
對於移動設備的附加說明
這里提供了在移動設備上使用模態框有一些附加說明。請參考瀏覽器支持章節。
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

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

 

1.實例

點擊下面的按鈕即可通過 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 添加 role="dialog" 和 aria-labelledby="..." 屬性，用於指向模態框的標題欄；為 .modal-dialog 添加 aria-hidden="true" 屬性。
另外，你還應該通過 aria-describedby 屬性為模態框 .modal 添加描述性信息。

2.可選尺寸

模態框提供了兩個可選尺寸，通過為 .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">
    <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">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

 





3.禁止動畫效果

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

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

 

4.使用柵格系統

<div class="modal fade" 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="container-fluid">
          <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>
      <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 -->

 



5.給模態窗動態傳值

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on 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)
})

 







6.用法

通過 data 屬性或 JavaScript 調用模態框插件，可以根據需要動態展示隱藏的內容。模態框彈出時還會為元素添加 .modal-open 類，從而覆蓋頁面默認的滾動行為，並且還會自動生成一個 .modal-backdrop 元素用於提供一個可點擊的區域，點擊此區域就即可關閉模態框。

通過 data 屬性
不需寫 JavaScript 代碼也可激活模態框。通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" 屬性，用於指向被控制的模態框。

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

 

通過 JavaScript 調用
只需一行 JavaScript 代碼，即可通過元素的 id myModal 調用模態框：

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

 

7.參數

可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對於 data 屬性，需要將參數名稱放到 data- 之后，例如 data-backdrop=""。



8.方法

.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')
Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.
Only needed when the height of the modal changes while it is open.

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

 

9.事件

Bootstrap 的模態框類提供了一些事件用於監聽並執行你自己的代碼。
All modal events are fired at the modal itself (i.e. at the <div class="modal">).



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

 

二、下拉項(Dropdown)

實現下拉功能，如下拉菜單、下拉按鈕、下拉工具條等。

1.用法

添加data-toggle="dropdown"到button或a元素

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

 

通過js調用

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

 

2.方法

$().dropdown('toggle')

 

3.事件

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

 



三、滾動監聽(Scrollspy)

實現滾動條位置的效果，如在導航中有多個標簽，點擊其中一個標簽，滾動條會自動定位到導航中標簽對應的文本位置。
滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。如下所示，滾動導航條下面的區域並關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。

1.用法

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

Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

需要相對定位（relative positioning）
無論何種實現方式，滾動監聽都需要被監聽的組件是 position: relative; 即相對定位方式。大多數時候是監聽 <body> 元素。當不是監聽<body>元素時, 主要要給該元素設定一個高度，並且設定 overflow-y: scroll;

通過 data-spy="scroll" 屬性調用

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 調用
在 CSS 中添加 position: relative; 之后，通過 JavaScript 代碼啟動滾動監聽插件：

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

 

2.方法

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

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

 

3.參數

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



4.事件

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

 



四、Tab標簽頁(Tab)

是對tabbed navigation組件的擴展。快速實現本地內容的切換，動態切換標簽頁對應的本地內容。

1.用法

采用data-toggle="tab"或data-toggle="pill"觸發的例子:

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

 

以下是js調用方式的示范：

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

 

你可以以多種方式激活Tab標簽：

$('#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)

 

2.淡入淡出效果

為了讓標簽淡入，為每個.tab-pane添加.fade類。第一個選項卡窗格還必須添加.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>

 

3.方法

$().tab

.tab('show')
切換到某個tab標簽頁

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

 

4.事件

當切換到一個新的tab標簽頁時，依次發生如下事件：
1 hide.bs.tab (on the current active tab)
2 show.bs.tab (on the to-be-shown tab)
3 hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
4 shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

如果沒有tab被激活，那么hide.bs.tab 和 hidden.bs.tab事件不會發生。



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

 

五、工具提示(ToolTip)

無需加在任何圖片，采用CSS3新技術，動態顯示data-attributes存儲的標題信息。

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>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

 



2.用法

只需要添加如下html代碼和js代碼即可：

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
$('#example').tooltip(options)

 

該插件自動會生成如下代碼：

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

 

3.參數

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




4.方法

$().tooltip(options)
Attaches a tooltip handler to an element collection.

.tooltip('show')
Reveals an element's tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.

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

 

.tooltip('hide')
Hides an element's tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.

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

 

.tooltip('toggle')
Toggles an element's tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.

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

 

.tooltip('destroy')
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

 

5.事件

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

 



六、彈出提示(Popover)

Tooltips插件的變體！用來顯示一些疊加內容的提示效果，此插件需要配合Tooltips使用。
為任意元素添加一小塊浮層，就像 iPad 上一樣，用於存放非主要信息。
彈出框的標題和內容的長度都是零的話將永遠不會被顯示出來。
插件依賴
彈出框依賴 工具提示插件 ，因此，如果你定制了 Bootstrap，一定要注意將依賴的插件編譯進去。
初始化
由於性能的原因，工具提示和彈出框的 data 編程接口（data api）是必須要手動初始化的。
在一個頁面上一次性初始化所有彈出框的方式是通過 data-toggle 屬性選中他們。

1.實例

html代碼

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

 

js代碼

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

 



4個彈出方向

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

 



實現“點擊並讓彈出框消失”的效果需要一些額外的代碼
為了更好的跨瀏覽器和跨平台效果，你必須使用 <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>

 

2.用法

通過 JavaScript 代碼啟動彈出框：

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

 

3.參數

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




4.方法

$().popover(options)
Initializes popovers for an element collection.

.popover('show')
Reveals an element's popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

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

 

.popover('hide')
Hides an element's popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a "manual" triggering of the popover.

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

 

.popover('toggle')
Toggles an element's popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a "manual" triggering of the popover.

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

 

.popover('destroy')
Hides and destroys an element's popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

 

5.事件

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

 



七、警告框(Alert)

用來關閉警告信息塊。

1.實例

通過此插件可以為警告信息添加點擊並消失的功能。
當使用 .close 按鈕時，它必須是 .alert-dismissible 的第一個子元素，並且在它之前不能有任何文本內容。



2.用法

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

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

 

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

3.方法

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

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

4.事件

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

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

 



八、按鈕(Button)

用來控制按鈕狀態或更多組件功能，如復選框、單選按鈕，以及載入狀態條等。
跨瀏覽器兼容性
在頁面多次加載之間，Firefox 仍然保持表單控件的狀態（禁用狀態和選擇狀態）。一個解決辦法是設置 autocomplete="off"。參見 Mozilla bug #654072。

1.控制按鈕狀態的基本用法

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

 





2.按鈕外形的單選框和復選框狀態

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

 



點擊第三個單選框后：



3.方法

$().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.

$().button('reset')
重置按鈕狀態 - 將按鈕上的文本還原回原始的內容。此為異步方法，此方法在內容被重置完成之前即返回。

$().button(string)
Swaps text to any data defined text state.

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

手風琴效果，用來制作折疊面板或菜單等效果。
Click the buttons below to show and hide another element via class changes:
• .collapse hides content
• .collapsing is applied during transitions
• .collapse.in shows content
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

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>

 



點擊后：



2.Accordion example

Extend the default collapse behavior to create an accordion with the panel component.

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

 





用.list-group替換.panel-body



3.用法

The collapse plugin utilizes a few classes to handle the heavy lifting:
• .collapse hides the content
• .collapse.in shows the content
• .collapsing is added when the transition starts, and removed when it finishes
These classes can be found in component-animations.less.

Via data attributes
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript
Enable manually with:

$('.collapse').collapse()

 

4.參數

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



5.方法

.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object.

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

 

.collapse('toggle')
Toggles a collapsible element to shown or hidden.

.collapse('show')
Shows a collapsible element.

.collapse('hide')
Hides a collapsible element.

6.事件

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

 



十、輪播(Carousel)

實現圖片播放功能。

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>

 



Optional captions
Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

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

 

2.用法

Multiple carousels
Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

Via data attributes
Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript
Call carousel manually with:

$('.carousel').carousel()

 

3.參數

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



4.方法

.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.

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

 

.carousel('cycle')
Cycles through the carousel items from left to right.

.carousel('pause')
Stops the carousel from cycling through items.

.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')
Cycles to the previous item.

.carousel('next')
Cycles to the next item.

5.事件

Bootstrap's carousel class exposes two events for hooking into carousel functionality.
Both events have the following additional properties:
• direction: The direction in which the carousel is sliding (either "left" or "right").
• relatedTarget: The DOM element that is being slid into place as the active item.
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

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

 



十一、輸入提示(Typeahead)

可以記住文本框輸入的文本，下次輸入時可以及時自動補全。

十二、過渡效果(Transition)

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

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

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

$.support.transition = false