Bootstrap外掛概覽
在前面佈局元件章節中所討論的元件僅僅是個開始。Bootstrap自帶的12種jQuery外掛,擴充套件了功能,可以給站點新增更多的互動。即使您不是一名高階的js開發人員,
你也可以學習Bootstrap的js外掛。利用Bootstrap資料api(Bootstrap Data API),大部分的外掛可以在不編寫任何程式碼的情況被觸發。
站點引用bootstrap外掛的方式有兩種:
單獨引用:使用Bootstrap的個別的*.js檔案。一些外掛和css元件依賴於其他外掛。如果您單獨引用外掛,請先確保弄清楚這些外掛之間的依賴關係。
編譯(同時)引用:使用Bootstrap.js或壓縮版的bootstrap.min.js
不要嘗試同時引用這兩個檔案,因為bootstrap.js和bootstrap.min.js都包含了所有的外掛。
所有的外掛依賴於jQuery。所以必須在外掛檔案之前引用jQuery.請訪問bower.json.檢視boostrap當前支援的jQuery版本。
data屬性
你可以僅僅通過data屬性API就能使用所有的bootstap外掛,無需寫一行javascript程式碼。這是bootstrap中的一等api,也應該是你的首選方式。
話又說回來,在某些情況下可能需要將功能關閉。因此,我們還提供了關閉data屬性API的方法,即解除以data-api為名稱空間並繫結在文件上的事件。就像下面這樣:
$(document).off('.data-api')
如需關閉一個特定的外掛,只需要在data-api名稱空間前加上該外掛的名稱作為名稱空間即可,如下所示:
$(document).off('.alert.data-api')
程式設計方式的API
我們為所有Bootstrap外掛提供純javascript方式的API。所有公開的api都支援單獨或鏈式呼叫方式,並且返回其所有操作的元素集合(注:和jQuery的呼叫形式一致)。
$('.btn.danger').button('toggle').addClass('fat')
所有的方法都可以接受一個可選的選項作為引數,或者一個代 ,表特定的方法的字串,或者不帶引數(這種情況下,將會初始外掛為預設行為),如下所示
$('#myModel').modal();
//初始化不支援鍵盤
$('myModel').model({keyborad:false})
初始化並立即呼叫 show
$('#myModel').modal('show')
每個外掛在Constructor屬性上也暴露了其原始的建構函式:$.fn.popover.Constructor.如果你想獲取某個特定外掛的例項,可以直接通過頁面元素獲取
$('[rel=popover]').data('popover').
避免名稱空間衝突
某些時候Bootstrap外掛可能需要與其他ui框架一起使用.中這種情況下,可能會發生名稱空間衝突。如果不幸發生了這種情況,你可以通過呼叫外掛的
.noconflict方法恢復其原始值。
var bootstrapButton=$.fn.button.noConflict();
//為$().bootstrapBtn賦予Bootstrap功能
$.fn.bootstrapBtn=bootstrapButton
事件
Bootstrap為大多數外掛的獨特行為提供了自定義事件。一般來說,這些事件有兩種形式
動詞不定式:這會在事件開始時被觸發。例如ex:show.動詞不定式事件提供了preventDefault功能。這使得事件開始前可以停止操作的執行。
$('#myModel').on('show.bs.model',function(e)
//阻止模態框的顯示
if(!data)return e.preventDefault();
過去分詞形式:這會在動作執行完畢之後被觸發。
)