Bootstrap插件的介紹與使用

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

導入

#【一次導入】

　　Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）

#【單獨導入】

　　為方便單獨導入特效文件，Bootstrap提供了12種JavaScript插件，他們分別是：

　　☑ 動畫過渡（Transitions）:對應的插件檔案「transition.js」

　　☑ 模態彈窗（Modal）:對應的插件檔案「modal.js」

　　☑ 下拉選單（Dropdown）：對應的外掛程式檔案「dropdown.js」

　　☑ 捲動偵測（Scrollspyjs」

#　　☑ 滾動偵測)：對應的外掛程式檔案「scrollspy.js」

　　☑ 標籤（Tab）：對應的外掛程式檔案「tab.js」

　　☑ 提示方塊（Tooltips）：對應的外掛程式檔案“tooltop.js”

　　☑ 彈出框（Popover）：對應的插件檔案「popover.js」

　　☑ 警告框（Alert）：對應的外掛程式檔案「alert.js」

　　☑ 按鈕（Buttons）：對應的插件檔案「button.js」

　　☑ 摺疊/手風琴（Collapse）：對應的外掛程式檔案「collapse.js」

㘀　☑圖片輪播Carousel：對應的外掛程式檔案「carousel.js」

　　☑ 自動定位浮標Affix：對應的外掛程式檔案「affix.js」

#data屬性

#　　可以光是透過data 屬性API 就能使用所有的Bootstrap 插件，無需寫一行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')

　　所有方法都可以接受一個可選的option 物件作為參數，或代表特定方法的字串，或什麼也不提供（在這種情況下，外掛程式將會以預設值初始化）

###

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

###

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

$('#myModal').on('show.bs.modal', function (e) {  if (!data) return e.preventDefault() // 阻止模态框的展示})

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

以上是Bootstrap插件的介紹與使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！