我們的 Modal 插件是對傳統 modal js 插件的超薄版，特別注意只包含我們在 twitter 上需要的基本功能。

下載

使用引導模式

$ （'#my-modal' ）。模態（選項）

選項

姓名	類型	默認	描述
背景	布爾值	錯誤的	包括一個模態背景元素
鍵盤	布爾值	錯誤的	按下退出鍵時關閉模式
節目	布爾值	錯誤的	在類初始化時打開模式

標記

您可以輕鬆地在頁面上激活模式，而無需編寫一行 javascript。只需給一個元素一個data-controls-modal對應於模態元素 id 的屬性，當單擊時，它將啟動您的模態。要添加模式選項，只需將它們也包含為數據屬性即可。

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" >啟動模態</a>    

注意如果您希望您的模態動畫進出，只需.fade向您的元素添加一個類.modal（請參閱演示以查看此操作）。

方法

.modal（選項）

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

$ （'#my-modal' ）。模態（{
  closeOnEscape :真 
})

.modal('切換')

手動切換模式。

$ （'#my-modal' ）。模態（'切換' ）

.modal('顯示')

手動打開一個模態。

$ （'#my-modal' ）。模態（“顯示” ）

.modal('隱藏')

手動隱藏模態。

$ （'#my-modal' ）。模態（“隱藏” ）

.modal（真）

返回一個元素模式類實例。

$ （'#my-modal' ）。模態（真）

注意或者，這可以用 檢索$().data('modal')。

活動

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

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

$ （'#my-modal' ）。綁定（'隱藏' ，函數（）{   
  // 做一點事 ...
})

演示

啟動模式

此插件用於向引導頂部欄或選項卡式導航添加下拉交互。

下載

使用 boostrap-dropdown.js

$ （'#topbar' ）。下拉（）

標記

要快速將下拉功能添加到任何導航元素，請使用該data-dropdown屬性。任何有效的引導下拉菜單都將自動激活。

<ul類= “標籤” > 
  <li class = "active" ><a href = "#" >主頁</a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" >下拉</a>  
    <ul class = "下拉菜單" > 
      <li><a href = "#" >二級鏈接</a></li> 
      <li><a href = "#" >這裡有別的東西</a></li> 
      <li class = "分隔符" ></li> 
      <li><a href = "#" >另一個鏈接</a></li> 
    </ul>
  </li>
</ul>

注意如果您的 ui 有多個下拉菜單，請考慮將data-dropdown屬性添加到更重要的容器元素，例如.tabsor .topbar。

方法

$().dropdown()

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

演示

該插件用於將滾動間諜（自動更新導航）交互添加到引導頂部欄。

下載

使用 boostrap-scrollspy.js

$ （'#topbar' ）。下拉（）

標記

要輕鬆地將 scrollspy 行為添加到您的導航，只需將data-scrollspy屬性添加到.topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

方法

$().scrollspy()

自動通過用戶滾動位置激活導航按鈕。

$ ( 'body > .topbar' )。滾動間諜()

注意Topbar 錨標記必須具有可解析的 id 目標。例如， a<a href="#home">home</a>必須對應 dom 中的某些東西 like <div id="home"></div>。

.scrollspy('刷新')

scrollspy 緩存導航按鈕和部分坐標以提高性能。如果您需要更新此緩存（如果您有動態內容），只需調用此刷新方法。如果你使用 data 屬性來定義你的 scrollspy，只需在 body 上調用 refresh。

$ （“身體” ）。scrollspy ( '刷新' )

演示

簽出此頁面上的頂部欄導航。

該插件添加了快速、動態的選項卡和藥丸功能。

下載

使用 boostrap-tabs.js

$ （'.tabs' ）。選項卡()

標記

您可以通過簡單地給它們一個data-tabs或data-pills屬性來激活選項卡或藥丸導航，而無需編寫任何 javascript。

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

方法

$().tabs 或 $().pills

激活給定容器的選項卡和藥丸功能。選項卡鏈接應引用文檔中的 id。

<ul類= “標籤” > 
  <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 class = "藥丸內容" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "個人資料" > ... </div> 
  <div id = "消息" > ... </div> 
  <div id = "設置" > ... </div> 
</ul>
 
<腳本>
  $ (函數() {  
    $ （'.tabs' ）。選項卡()
  })
</腳本>

演示

• 家
• 輪廓
• 留言
• 設置

基於 Jason Frame 編寫的優秀的 jQuery.tipsy 插件；twipsy 是一個更新版本，它不依賴圖像，使用 css3 進行動畫，使用 data-attributes 存儲標題！

下載

使用 bootstrap-twipsy.js

$ （'#example' ）。twipsy (選項)

選項

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 css 淡入淡出過渡
延遲輸入	數字	0	顯示工具提示前的延遲（毫秒）
延遲輸出	數字	0	隱藏工具提示前的延遲（毫秒）
倒退	細繩	''	不存在工具提示標題時使用的文本
放置	細繩	'以上'	如何定位工具提示 - 上面 | 下面 | 左 | 正確的
html	布爾值	錯誤的	允許在工具提示中包含 html 內容
居住	布爾值	錯誤的	使用事件委託而不是單個事件處理程序
抵消	數字	0	工具提示與目標元素的像素偏移
標題	字符串 | 功能	'標題'	檢索標題文本的屬性或方法
扳機	細繩	'徘徊'	如何觸發工具提示 - 懸停 | 焦點 | 手動的

方法

$().twipsy(選項)

將 twipsy 處理程序附加到元素集合。

.twipsy('顯示')

揭示了一個元素 twipsy。

$ （'#element' ）。twipsy （'顯示' ）

.twipsy('隱藏')

隱藏元素 twipsy。

$ （'#element' ）。twipsy （'隱藏' ）

.twipsy(真)

返回一個元素 twipsy 類實例。

$ （'#element' ）。twipsy （真）

注意或者，這可以用 檢索$().data('twipsy')。

演示

彈出框插件提供了一個簡單的界面，用於將彈出框添加到您的應用程序中。它擴展了boostrap-twipsy.js插件，所以在你的項目中包含彈出框時一定要獲取該文件！

下載

使用 boostrap-popover.js

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

選項

姓名	類型	默認	描述
動畫	布爾值	真的	對工具提示應用 css 淡入淡出過渡
延遲輸入	數字	0	顯示工具提示前的延遲（毫秒）
延遲輸出	數字	0	隱藏工具提示前的延遲（毫秒）
倒退	細繩	''	不存在工具提示標題時使用的文本
放置	細繩	'正確的'	如何定位工具提示 - 上面 | 下面 | 左 | 正確的
html	布爾值	錯誤的	允許在工具提示中包含 html 內容
居住	布爾值	錯誤的	使用事件委託而不是單個事件處理程序
抵消	數字	0	工具提示與目標元素的像素偏移
標題	字符串 | 功能	'標題'	檢索標題文本的屬性或方法
內容	字符串 | 功能	'數據內容'	檢索內容文本的屬性或方法
扳機	細繩	'徘徊'	如何觸發工具提示 - 懸停 | 焦點 | 手動的

方法

$().popover(選項)

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

.popover('顯示')

顯示元素彈出框。

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

.popover('隱藏')

隱藏元素彈出框。

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

演示

懸停彈出框

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

下載

使用 bootstrap-alerts.js

$ ( ".alert-message" )。警報()

標記

只需data-alert在警報消息中添加一個屬性，即可自動為它們提供關閉功能。

方法

$().alert()

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

.alert('關閉')

關閉警報。

$ ( ".alert-message" )。警報（'關閉' ）

演示