## 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"
~~~
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)