用於引導的 Javascript

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

模態

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

下拉菜單

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

捲軸間諜

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

可切換標籤

使用此插件,通過允許它們在本地內容的可選項卡窗格中切換,使選項卡和藥丸更有用。

工具提示

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

彈出窗口 *

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

*需要包含工具提示

警報消息

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

鈕扣

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

坍塌

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

旋轉木馬

創建您希望提供交互式內容幻燈片的任何內容的旋轉木馬。

提前輸入

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

過渡*

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

*插件中的動畫需要

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

關於模態

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

下載文件

靜態示例

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

現場演示

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

啟動演示模式

使用引導模式

通過javascript調用模態:

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

選項

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

標記

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

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

  1. <a class="btn" data-toggle="modal" href="#myModal" >啟動模式</a> class = "btn" data-toggle = "modal" href = "#myModal" >啟動模態</a>
  1. <div class="modal hide" id="myModal"> = “模態隱藏” id = “我的模態” >
  2. <div= “模態標題” >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3>模態標題</h3>
  5. </div>
  6. <div= “模態體” >
  7. <p>一個很好的身體...... </p>
  8. </div>
  9. <div= “模態頁腳” >
  10. <a href = "#" class = "btn" data-dismiss = "modal" >關閉</a>
  11. <a href = "#" class = "btn btn-primary" >保存更改</a>
  12. </div>
  13. </div>
小心!如果您希望您的模態動畫進出,只需 .fade向元素添加一個類 .modal(請參閱演示以查看此操作)並包含 bootstrap-transition.js。

方法

.modal(選項)

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

  1. $('#myModal').modal({'#myModal' )。模態({
  2. 鍵盤
  3. })

.modal('切換')

手動切換模式。

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

.modal('顯示')

手動打開一個模態。

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

.modal('隱藏')

手動隱藏模態。

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

活動

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

事件 描述
節目 show調用實例方法時立即觸發此事件。
顯示 當模式對用戶可見時觸發此事件(將等待 css 轉換完成)。
隱藏 hide調用實例方法時立即觸發此事件。
當模式對用戶完成隱藏時觸發此事件(將等待 css 轉換完成)。
  1. $('#myModal').on('隱藏', function () {'#myModal' )。on ( '隱藏' , function () {
  2. // 做一點事…
  3. })

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:

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

標記

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

  1. <body data-spy="scroll" >...</body> 數據間諜= “滾動” > ... </body>
小心!導航欄鏈接必須具有可解析的 id 目標。例如, a <a href="#home">home</a>必須對應 dom 中的某些東西 like <div id="home"></div>

方法

.scrollspy('刷新')

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

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

選項

姓名 類型 默認 描述
抵消 數字 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.


使用 bootstrap-tab.js

通過 javascript 啟用可選項卡(每個選項卡需要單獨激活):

  1. $ '#myTab a' )。點擊功能e {
  2. e . 防止默認();
  3. $ 這個)。選項卡“顯示” );
  4. })

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

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

標記

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

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

方法

$().tab

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

  1. <ul= “nav 導航標籤” id = “myTab” >
  2. <li class = "active" ><a href = "#home" >主頁</a></li>
  3. <li><a href = "#profile" >個人資料</a></li>
  4. <li><a href = "#messages" >消息</a></li>
  5. <li><a href = "#settings" >設置</a></li>
  6. </ul>
  7.  
  8. <div= "標籤內容" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <腳本>
  16. $ (函數() {
  17. $ ( '#myTab a:last' )。選項卡“顯示” );
  18. })
  19. </腳本>

活動

事件 描述
節目 此事件在標籤顯示時觸發,但在新標籤顯示之前。使用event.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
顯示 顯示選項卡後,此事件在選項卡顯示時觸發。使用event.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
  1. $ ( 'a[data-toggle="tab"]' )。on '顯示' 函數e {
  2. e . 目標// 激活的選項卡
  3. e . relatedTarget // 上一個標籤
  4. })

關於工具提示

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

下載文件

工具提示的示例使用

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

緊身褲下一級 keffiyeh你可能沒聽說過。照相亭鬍鬚生牛仔布凸版素食信使包 stumptown。從農場到餐桌的 seitan,mcsweeney 的 fixie 可持續藜麥 8 位美國服裝採用特里·理查森乙烯基青年布。Beard stumptown,開襟羊毛衫 banh mi lomo 雷貓。Tofu biodiesel williamsburg marfa, 4 loko mcsweeney's cleanse vegan chambray。一個真正具有諷刺意味的工匠,無論 keytar,場景農場到餐桌的銀行奧斯汀推特處理freegan cred raw denim single-origin 咖啡病毒。


使用 bootstrap-tooltip.js

通過 javascript 觸發工具提示:

  1. $ '#example' )。工具提示選項

選項

姓名 類型 默認 描述
動畫 布爾值 真的 對工具提示應用 css 淡入淡出過渡
放置 字符串|函數 '最佳' 如何定位工具提示 - 頂部 | 底部 | 左 | 正確的
選擇器 細繩 錯誤的 如果提供了選擇器,則工具提示對象將被委託給指定的目標。
標題 字符串 | 功能 '' 如果 `title` 標籤不存在,則默認標題值
扳機 細繩 '徘徊' 如何觸發工具提示 - 懸停 | 焦點 | 手動的
延遲 號碼 | 目的 0

延遲顯示和隱藏工具提示(毫秒) - 不適用於手動觸發類型

如果提供了一個數字,延遲將應用於隱藏/顯示

對象結構為:delay: { show: 500, hide: 100 }

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

標記

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

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

方法

$().tooltip(選項)

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

.tooltip('顯示')

顯示元素的工具提示。

  1. $ '#element' )。工具提示“顯示”

.tooltip('隱藏')

隱藏元素的工具提示。

  1. $ '#element' )。工具提示“隱藏”

.tooltip('切換')

切換元素的工具提示。

  1. $ '#element' )。工具提示“切換”

關於彈出框

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

*需要包含工具提示

下載文件

懸停彈出框示例

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


使用 bootstrap-popover.js

通過 javascript 啟用彈出框:

  1. $ '#example' )。彈出框選項

選項

姓名 類型 默認 描述
動畫 布爾值 真的 對工具提示應用 css 淡入淡出過渡
放置 字符串|函數 '正確的' 如何定位彈出框 - 頂部 | 底部 | 左 | 正確的
選擇器 細繩 錯誤的 如果提供了選擇器,則工具提示對象將被委託給指定的目標
扳機 細繩 '徘徊' 如何觸發工具提示 - 懸停 | 焦點 | 手動的
標題 字符串 | 功能 '' 如果 `title` 屬性不存在,則默認標題值
內容 字符串 | 功能 '' 如果 `data-content` 屬性不存在,則默認內容值
延遲 號碼 | 目的 0

延遲顯示和隱藏彈出框(毫秒) - 不適用於手動觸發類型

如果提供了一個數字,延遲將應用於隱藏/顯示

對象結構為:delay: { show: 500, hide: 100 }

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

標記

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

方法

$().popover(選項)

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

.popover('顯示')

顯示元素彈出框。

  1. $ '#element' )。彈出窗口“顯示”

.popover('隱藏')

隱藏元素彈出框。

  1. $ '#element' )。彈出框'隱藏'

.popover('切換')

切換元素彈出框。

  1. $ '#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 解除警報:

  1. $ “.alert” )。警報()

標記

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

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

方法

$().alert()

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

.alert('關閉')

關閉警報。

  1. $ “.alert” )。警報'關閉'

活動

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

事件 描述
close調用實例方法時立即觸發此事件。
關閉 當警報關閉時觸發此事件(將等待 css 轉換完成)。
  1. $ '#my-alert' )。綁定'關閉' 函數(){
  2. // 做一點事…
  3. })

關於

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

下載文件

示例用途

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

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

使用 bootstrap-button.js

通過 javascript 啟用按鈕:

  1. $ '.nav-tabs' )。按鈕()

標記

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

  1. <!-- 添加 data-toggle="button" 以激活單個按鈕的切換 -->
  2. <button class = "btn" data-toggle = "button" >單次切換</button>
  3.  
  4. <!-- 為 btn-group 上的複選框樣式切換添加 data-toggle="buttons-checkbox" -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" ></button>
  7. <button class = "btn" >中間</button>
  8. <button class = "btn" ></button>
  9. </div>
  10.  
  11. <!-- 添加 data-toggle="buttons-radio" 用於 btn-group 上的單選樣式切換 -->
  12. <div class = "btn-group"數據切換= "buttons-radio" >
  13. <button class = "btn" ></button>
  14. <button class = "btn" >中間</button>
  15. <button class = "btn" ></button>
  16. </div>

方法

$().button('切換')

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

小心!您可以使用該 data-toggle屬性啟用按鈕的自動切換。
  1. <button class = "btn" data-toggle = "button" > ... </button>

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

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

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
小心! Firefox 在頁面加載時保持禁用狀態。一種解決方法是使用 autocomplete="off".

$().button('重置')

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

$().button(字符串)

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

  1. <button class = "btn" data-complete-text = "完成!" > ... </按鈕>
  2. <腳本>
  3. $ '.btn' )。按鈕“完成”
  4. </腳本>

關於

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

下載文件

*需要包含過渡插件。

示例手風琴

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

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

使用 bootstrap-collapse.js

通過 javascript 啟用:

  1. $ “.collapse” )。崩潰()

選項

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

標記

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. 簡單可折疊
  3. </按鈕>
  4.  
  5. <div id = "demo" class = "collapse in" > ... </div>
小心!要將手風琴式的組管理添加到可折疊控件,請添加 data 屬性 data-parent="#selector"。請參閱演示以查看此操作。

方法

.collapse(選項)

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

  1. $ '#myCollapsible' )。崩潰({
  2. 切換
  3. })

.collapse('切換')

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

.collapse('顯示')

顯示可折疊元素。

.collapse('隱藏')

隱藏可折疊元素。

活動

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

事件 描述
節目 show調用實例方法時立即觸發此事件。
顯示 當折疊元素對用戶可見時觸發此事件(將等待 css 轉換完成)。
隱藏 hide調用該方法時立即觸發此事件。
當對用戶隱藏折疊元素時會觸發此事件(將等待 css 轉換完成)。
  1. $ '#myCollapsible' )。on ( '隱藏' , function () {
  2. // 做一點事…
  3. })

關於

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

下載文件

例子

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


使用 bootstrap-typeahead.js

通過 javascript 調用 typeahead:

  1. $ '.typeahead' )。預輸入()

選項

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

標記

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

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

方法

.typeahead(選項)

使用預輸入初始化輸入。