用於引導的 Javascript

讓 Bootstrap 的組件栩栩如生——現在有 12 個自定義jQuery插件。

模態

一個精簡但靈活的傳統 javascript 模態插件，僅具有最低要求的功能和智能默認值。

下拉菜單

使用這個簡單的插件將下拉菜單添加到 Bootstrap 中的幾乎所有內容。Bootstrap 在導航欄、選項卡和藥丸中提供完整的下拉菜單支持。

捲軸間諜

使用 scrollspy 自動更新導航欄中的鏈接，以根據滾動位置顯示當前活動鏈接。

工具提示

jQuery Tipsy 插件的新版本，Tooltips 不依賴於圖像——它們使用 CSS3 來製作動畫，使用數據屬性來存儲本地標題。

彈出窗口 *

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

*需要包含工具提示

過渡*

對於簡單的過渡效果，包含一次 bootstrap-transition.js 以滑入模態或淡出警報。

*插件中的動畫需要

小心！所有 javascript 插件都需要最新版本的 jQuery。

關於模態

一個精簡但靈活的傳統 javascript 模態插件，僅具有最低要求的功能和智能默認值。

下載文件

靜態示例

下面是一個靜態渲染的模態。

現場演示

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

啟動演示模式

使用引導模式

通過javascript調用模態：

$('#myModal').modal(選項)（'#myModal' ）。模態（選項）

選項

姓名	類型	默認	描述
背景	布爾值	真的	包括一個模態背景元素。或者，指定`static`在單擊時不關閉模式的背景。
鍵盤	布爾值	真的	按下退出鍵時關閉模態
節目	布爾值	真的	初始化時顯示模態。

標記

您可以輕鬆地在頁面上激活模式，而無需編寫一行 javascript。只需data-toggle="modal"在控制器元素上設置一個data-target="#foo"或href="#foo"對應於模態元素 id 的控制器元素，單擊時，它將啟動您的模態。

此外，要將選項添加到您的模態實例，只需將它們作為附加數據屬性包含在控件元素或模態標記本身上。

<a class="btn" data-toggle="modal" href="#myModal" >啟動模式</a>
 class = "btn" data-toggle = "modal" href = "#myModal" >啟動模態</a>

<div class="modal hide" id="myModal"> 類= “模態隱藏” id = “我的模態” > 
  <div類= “模態標題” > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3>模態標題</h3>
  </div>
  <div類= “模態體” > 
    <p>一個很好的身體...... </p>
  </div>
  <div類= “模態頁腳” > 
    <a href = "#" class = "btn" data-dismiss = "modal" >關閉</a>   
    <a href = "#" class = "btn btn-primary" >保存更改</a>  
  </div>
</div>

小心！如果您希望您的模態動畫進出，只需 .fade向元素添加一個類 .modal（請參閱演示以查看此操作）並包含 bootstrap-transition.js。

方法

.modal（選項）

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

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

.modal('切換')

手動切換模式。

$('#myModal').modal('toggle')（'#myModal' ）。模態（'切換' ）

.modal('顯示')

手動打開一個模態。

$('#myModal').modal('show')（'#myModal' ）。模態（“顯示” ）

.modal('隱藏')

手動隱藏模態。

$('#myModal').modal('隱藏')（'#myModal' ）。模態（“隱藏” ）

活動

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

事件	描述
節目	`show`調用實例方法時立即觸發此事件。
顯示	當模式對用戶可見時觸發此事件（將等待 css 轉換完成）。
隱藏	`hide`調用實例方法時立即觸發此事件。
隱	當模式對用戶完成隱藏時觸發此事件（將等待 css 轉換完成）。

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

關於下拉菜單

使用這個簡單的插件將下拉菜單添加到 Bootstrap 中的幾乎所有內容。Bootstrap 在導航欄、選項卡和藥丸中提供完整的下拉菜單支持。

下載文件

例子

單擊導航欄中的下拉導航鏈接和下面的藥丸以測試下拉菜單。

使用 bootstrap-dropdown.js

通過 javascript 調用下拉列表：

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

標記

要快速向任何元素添加下拉功能，只需添加data-toggle="dropdown"，任何有效的引導下拉菜單都會自動激活。

小心！data-target="#fat"您可以選擇使用或來定位特定的下拉列表 href="#fat"。

<ul class="nav nav-藥丸"> 類= “導航導航藥片” >
  <li class = "active" ><a href = "#" >常規鏈接</a></li>  
  <li class = "下拉菜單" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      落下
      <b類= "插入符號" ></b> 
    </a>
    <ul class = "下拉菜單" > 
      <li><a href = "#" >動作</a></li> 
      <li><a href = "#" >另一個動作</a></li> 
      <li><a href = "#" >這裡有別的東西</a></li> 
      <li class = "分隔符" ></li> 
      <li><a href = "#" >分隔鏈接</a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-藥丸"> 類= “導航導航藥片” >
  <li class = "下拉菜單" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      落下
      <b類= "插入符號" ></b> 
    </a>
    <ul class = "下拉菜單" > 
      ...
    </ul>
  </li>
</ul>

方法

$().dropdown()

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

ScrollSpy 插件用於根據滾動位置自動更新導航目標。

下載文件

帶有 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 雷貓。

使用 bootstrap-scrollspy.js

通過javascript調用scrollspy：

$('#navbar').scrollspy()( '#navbar' )。捲軸間諜()

標記

要輕鬆地將 scrollspy 行為添加到您的頂欄導航，只需添加data-spy="scroll"到您要監視的元素（最常見的是正文）。

<body data-spy="scroll" >...</body> 數據間諜= “滾動” > ... </body>

小心！導航欄鏈接必須具有可解析的 id 目標。例如， a <a href="#home">home</a>必須對應 dom 中的某些東西 like <div id="home"></div>。

方法

.scrollspy('刷新')

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

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

選項

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

活動

事件	描述
啟用	每當滾動間諜激活新項目時，就會觸發此事件。

該插件添加了快速、動態的選項卡和藥丸功能，用於轉換本地內容。

下載文件

示例選項卡

單擊下面的選項卡可在隱藏窗格之間切換，甚至可以通過下拉菜單進行切換。

你可能沒聽說過奧斯汀牛仔短褲。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.

使用 bootstrap-tab.js

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

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

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

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

標記

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

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

方法

$().tab

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

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

活動

事件	描述
節目	此事件在標籤顯示時觸發，但在新標籤顯示之前。使用`event.target`和`event.relatedTarget`分別定位活動選項卡和上一個活動選項卡（如果可用）。
顯示	顯示選項卡後，此事件在選項卡顯示時觸發。使用`event.target`和`event.relatedTarget`分別定位活動選項卡和上一個活動選項卡（如果可用）。

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

關於工具提示

受到 Jason Frame 編寫的優秀 jQuery.tipsy 插件的啟發；Tooltips 是一個更新版本，它不依賴於圖像，使用 css3 來製作動畫，使用 data-attributes 來存儲本地標題。

下載文件

工具提示的示例使用

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

使用 bootstrap-tooltip.js

通過 javascript 觸發工具提示：

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

選項

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 css 淡入淡出過渡
放置	字符串\|函數	'最佳'	如何定位工具提示 - 頂部 \| 底部 \| 左 \| 正確的
選擇器	細繩	錯誤的	如果提供了選擇器，則工具提示對象將被委託給指定的目標。
標題	字符串 \| 功能	''	如果 `title` 標籤不存在，則默認標題值
扳機	細繩	'徘徊'	如何觸發工具提示 - 懸停 \| 焦點 \| 手動的
延遲	號碼 \| 目的	0	延遲顯示和隱藏工具提示（毫秒） - 不適用於手動觸發類型如果提供了一個數字，延遲將應用於隱藏/顯示對象結構為：`delay: { show: 500, hide: 100 }`

小心！也可以通過使用數據屬性來指定單個工具提示的選項。

標記

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

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

方法

$().tooltip(選項)

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

.tooltip('顯示')

顯示元素的工具提示。

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

.tooltip('隱藏')

隱藏元素的工具提示。

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

.tooltip('切換')

切換元素的工具提示。

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

關於彈出框

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

*需要包含工具提示

下載文件

懸停彈出框示例

將鼠標懸停在按鈕上以觸發彈出窗口。

懸停彈出框

使用 bootstrap-popover.js

通過 javascript 啟用彈出框：

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

選項

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 css 淡入淡出過渡
放置	字符串\|函數	'正確的'	如何定位彈出框 - 頂部 \| 底部 \| 左 \| 正確的
選擇器	細繩	錯誤的	如果提供了選擇器，則工具提示對象將被委託給指定的目標
扳機	細繩	'徘徊'	如何觸發工具提示 - 懸停 \| 焦點 \| 手動的
標題	字符串 \| 功能	''	如果 `title` 屬性不存在，則默認標題值
內容	字符串 \| 功能	''	如果 `data-content` 屬性不存在，則默認內容值
延遲	號碼 \| 目的	0	延遲顯示和隱藏彈出框（毫秒） - 不適用於手動觸發類型如果提供了一個數字，延遲將應用於隱藏/顯示對象結構為：`delay: { show: 500, hide: 100 }`

小心！也可以通過使用數據屬性來指定單個彈出框的選項。

標記

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

方法

$().popover(選項)

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

.popover('顯示')

顯示元素彈出框。

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

.popover('隱藏')

隱藏元素彈出框。

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

.popover('切換')

切換元素彈出框。

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

關於警報

警報插件是一個小類，用於向警報添加關閉功能。

下載

示例警報

警報插件適用於常規警報消息和阻止消息。

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

哦，快！你有一個錯誤！

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

採取這個行動或者這樣做

使用 bootstrap-alert.js

啟用通過 javascript 解除警報：

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

標記

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

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

方法

$().alert()

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

.alert('關閉')

關閉警報。

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

活動

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

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

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

關於

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

下載文件

示例用途

使用按鈕插件進行狀態和切換。

有狀態的
單切換
複選框
收音機

使用 bootstrap-button.js

通過 javascript 啟用按鈕：

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

標記

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

<!-- 添加 data-toggle="button" 以激活單個按鈕的切換 -->
<button class = "btn" data-toggle = "button" >單次切換</button>  
 
<!-- 為 btn-group 上的複選框樣式切換添加 data-toggle="buttons-checkbox" -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" >左</button> 
  <button class = "btn" >中間</button> 
  <button class = "btn" >右</button> 
</div>
 
<!-- 添加 data-toggle="buttons-radio" 用於 btn-group 上的單選樣式切換 -->
<div class = "btn-group"數據切換= "buttons-radio" >  
  <button class = "btn" >左</button> 
  <button class = "btn" >中間</button> 
  <button class = "btn" >右</button> 
</div>

方法

$().button('切換')

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

小心！您可以使用該 data-toggle屬性啟用按鈕的自動切換。

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

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

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

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

小心！ Firefox 在頁面加載時保持禁用狀態。一種解決方法是使用 autocomplete="off".

$().button('重置')

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

$().button(字符串)

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

<button class = "btn" data-complete-text = "完成！" > ... </按鈕>   
<腳本>
  $ （'.btn' ）。按鈕（“完成” ）
</腳本>

關於

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

下載文件

*需要包含過渡插件。

示例手風琴

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

可折疊組項目 #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

可折疊組項目 #3

使用 bootstrap-collapse.js

通過 javascript 啟用：

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

選項

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

標記

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

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

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

方法

.collapse（選項）

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

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

.collapse('切換')

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

.collapse('顯示')

顯示可折疊元素。

.collapse('隱藏')

隱藏可折疊元素。

活動

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

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

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

關於

用於循環元素的通用插件。一個旋轉木馬。

下載文件

示例輪播

觀看下面的幻燈片。

第一個縮略圖標籤

Cras justo odio，dapibus ac facilisis in，egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

小心！實施此輪播時，請刪除我們提供的圖像並將其替換為您自己的圖像。

使用 bootstrap-carousel.js

通過javascript調用：

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

選項

姓名	類型	默認	描述
間隔	數字	5000	自動循環項目之間的延遲時間。如果為 false，carousel 將不會自動循環。
暫停	細繩	“徘徊”	在 mouseenter 上暫停輪播的循環並在 mouseleave 上恢復輪播的循環。

標記

數據屬性用於上一個和下一個控制。查看下面的示例標記。

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 輪播項目 -->
  <div class = "carousel-inner" > 
    <div class = "活動項目" > ... </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- 輪播導航 -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

方法

.carousel（選項）

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

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

.carousel('循環')

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

.carousel('暫停')

停止輪播在項目中循環。

.carousel(數字)

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

.carousel('prev')

循環到上一個項目。

.carousel('下一個')

循環到下一個項目。

活動

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

事件	描述
滑動	`slide`調用實例方法時立即觸發此事件。
滑動	當輪播完成其幻燈片轉換時會觸發此事件。

關於

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

下載文件

例子

開始在下面的字段中輸入以顯示預先輸入的結果。

使用 bootstrap-typeahead.js

通過 javascript 調用 typeahead：

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

選項

姓名	類型	默認	描述
資源	大批	[ ]	要查詢的數據源。
項目	數字	8	下拉列表中顯示的最大項目數。
匹配器	功能	不區分大小寫	用於確定查詢是否與項目匹配的方法。接受單個參數，`item`用於測試查詢。使用訪問當前查詢`this.query`。`true`如果查詢匹配，則返回布爾值。
分揀機	功能	完全匹配、區分大小寫、不區分大小寫	用於對自動完成結果進行排序的方法。接受單個參數`items`並具有預先輸入實例的範圍。使用引用當前查詢`this.query`。
熒光筆	功能	突出顯示所有默認匹配	用於突出顯示自動完成結果的方法。接受單個參數`item`並具有預先輸入實例的範圍。應該返回 html。

標記

添加數據屬性以註冊具有預先輸入功能的元素。

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

方法

.typeahead（選項）

使用預輸入初始化輸入。

jQuery 插件十幾個 Bootstrap 插件讓你開始

彈出窗口 *

過渡*

模態引導-modal.js

關於模態

靜態示例

模態標題

現場演示

模態標題

模態文本

模態中的彈出框

模態中的工具提示

溢出文本以顯示可選滾動條

使用引導模式

選項

標記

方法

.modal（選項）

.modal('切換')

.modal('顯示')

.modal('隱藏')

活動

下拉菜單 bootstrap-dropdown.js

關於下拉菜單

例子

使用 bootstrap-dropdown.js

標記

方法

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

帶有 scrollspy 的示例導航欄

@胖的

@mdo

一

二

three

使用 bootstrap-scrollspy.js

標記

方法

.scrollspy('刷新')

選項

活動

可切換選項卡bootstrap-tab.js

示例選項卡

使用 bootstrap-tab.js

標記

方法

$().tab

活動

工具提示bootstrap-tooltip.js

關於工具提示

工具提示的示例使用

使用 bootstrap-tooltip.js

選項

標記

方法

$().tooltip(選項)

.tooltip('顯示')

.tooltip('隱藏')

.tooltip('切換')

彈出框 bootstrap- popover.js

關於彈出框

懸停彈出框示例

使用 bootstrap-popover.js

選項

標記

方法

$().popover(選項)

.popover('顯示')

.popover('隱藏')

.popover('切換')

警報消息bootstrap-alert.js

關於警報

示例警報

哦，快！你有一個錯誤！

使用 bootstrap-alert.js

標記

方法

$().alert()

.alert('關閉')