## JavaScript 插件引入前提 **引入js文件** `bootstrap.js`和`bootstrap.min.js`都包含了所有插件，你在使用時，只需選擇一個引入頁面就可以了， 建議使用壓縮版的 JavaScript 文件（`bootstrap.min.js`）。 注意：所有插件都依賴 jQuery （也就是說，jQuery必須在`bootstrap.min.js`之前引入頁面）。 ***** **data 屬性** **1.** data-屬性 data屬性是HTML5的新屬性。允許開發者自由給任意標簽添加屬性來存儲數據，存儲的（自定義）數據能夠被頁面的 JavaScript 中利用。這種自定義屬性一般用“data-”開頭。 data-\* 屬性因注意的兩個部分： （1）屬性名不應該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個字符。 （2）屬性值可以是任意字符串。 簡單點來說，data-屬性就是讓HTML標簽可以隱式的附帶一些數據，而javascript就可以對這些屬性數據進行操作 , 從而可以做出相應的動作和事件。 **2.** Bootstrap 中的data屬性 以前我們使用原生的javascript時候，是先確定了前端布局以及交互事件，然后在去利用javascript以及HTML的DOM節點去操作已經存在文本對象，從而實現頁面動態效果等交互。 后來facebook公司就發現，很多基本網頁上效果是比較常用的，比如下拉菜單、折疊、模態框等等。為什么不把這些常用的提取出一套標準模型，然后制定出使用規則，使用時按照這些規則直接拿來使用就可以了，于是就誕生了bootstrap。 簡單點來說，以前如果我們要實現某些網頁交互效果必須要有功能需求，然后結合js以及HTML的DOM節點來慢慢實現，但是現在你想實現某個交互效果，只需要直接按照他的規則調用（通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。）就可以實現，。然后為了能更多樣化,bootstrap.js中的函數可以有不同的參數值，這些參數值就是根據你給標簽的屬性來設置的。 ```markdown 標簽的class="xxx" 屬性，主要是用來使用bootstrap的css樣式，以及作為一個可識別對象對象的類名標識。 標簽的data-[xx]="yy"屬性，主要是用來使用和調用bootstrap的組件和插件，也就是使用bootstrap.js來實現一些交互效果。 ``` **3.** Bootstrap 常見data屬性 (1) `data-toggle`以什么事件觸發 , 告訴JS需要對按鈕做什么。常用的如下： ```html data-toggle="dropdown" //下拉菜單 data-toggle="model" //模態框事件 data-toggle="tooltip" //提示框事件 data-toggle="tab" //標簽頁 data-toggle="collapse" //折疊 data-toggle="popover" //彈出框 data-toggle="button" //按鈕事件 ``` 一般事件會作用到一個標簽對象，如果是其他標簽對象，就需要使用data-target指事件的標簽目標。所以data-toggle和data-target有時會結合一起使用。 (2) `data-target`指：事件作用的目標元素。 (3) `data-dismiss`常見的是在模態窗口中用于關閉模態窗口 data-dismiss=”modal”。 (4) `data-slide-to`、`data-slide`、`data-ride`用于輪播圖carousel。 屬性 data-slide接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置； 使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2"將把滑塊移動到一個特定的索引，索引從 0開始計數；data-ride="carousel" 屬性用于標記輪播在頁面加載時就開始動畫播放。 **注意：** 不要在同一個元素上使用來自多個插件的數據屬性，也就是說一個元素上只能有一個data-屬性。例如，按鈕不能同時具有工具提示和切換模式。 另外，在某些情況下可能需要將此功能關閉。因此，官網還提供了關閉 data 屬性 API 的方法，來解除data-屬性作用于文檔元素上的事件。如下： ```js $(document).off('.data-api') //data-api 綁定事件的數據屬性（data屬性） ``` 如果是針對某個特定的插件，只需在`data-api`前面添加那個插件的名稱作為命名空間，例如： ```js $(document).off('.alert.data-api') ``` ***** **編程方式的 API** 所有 Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式，并且返回其所操作的元素集合（和jQuery的調用形式一致）。 ```js $('.btn.danger').button('toggle').addClass('fat') ``` 所有的方法都可以接受一個可選的選項對象作為參數，或者一個代表特定方法的字符串，或者不帶任何參數（這種情況下，將會初始化插件為默認行為），如下： ```js // 初始化為默認行為 $("#myModal").modal() // 初始化為不支持鍵盤 $("#myModal").modal({ keyboard: false }) // 初始化并立即調用 show $("#myModal").modal('show') ``` ***** **避免命名空間沖突** 某些時候可能需要將 Bootstrap 插件與其他 UI 框架共同使用，這時候可能就會產生命名空間沖突，通過調用插件的`.noConflict`方法恢復其原始值。 ~~~js var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前所賦的值 $.fn.bootstrapBtn = bootstrapButton // 為 $().bootstrapBtn 賦予 Bootstrap 功能 ~~~ ***** **事件** Bootstrap 為大多數插件的獨特行為提供了自定義事件。一般來說，這些事件有兩種形式： 1 、 動詞不定式：這會在事件開始時被觸發。例如 ex: show。動詞不定式事件提供了 preventDefault 功能。這使得在事件開始前可以停止操作的執行。 ~~~js $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // 阻止模態框的展示 }) ~~~ 2、 過去分詞形式：這會在動作執行完畢之后被觸發。例如 ex: shown。 ***** **版本號** 每個 Bootstrap 的 jQuery 插件的版本號都可以通過插件的構造函數上的`VERSION`屬性獲取到。例如工具提示框（tooltip）插件： ~~~js $.fn.tooltip.Constructor.VERSION // => "3.3.7" ~~~