Bootstrap除了包含豐富的Web組件之外,如前面介紹的下拉菜單、按鈕組、導(dǎo)航、分頁等。他還包括一些JavaScript的插件。
Bootstrap的JavaScript插件可以單獨導(dǎo)入到頁面中,也可以一次性導(dǎo)入到頁面中。因為在Bootstrap中的JavaScript插件都是依賴于jQuery庫,所以不論是單獨導(dǎo)入還一次性導(dǎo)入之前必須先導(dǎo)入jQuery庫。
一次性導(dǎo)入:
Bootstrap提供了一個單一的文件,這個文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(壓縮版本:bootstrap.min.js)。
具體使用如下(或見右側(cè)代碼編輯器28-29行):
<!—導(dǎo)入jQuery版本庫,因為Bootstrap的JavaScript插件依賴于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性導(dǎo)入所有Bootstrap的JavaScript插件(壓縮版本) -->
<script src="js/bootstrap.min.js"></script>
特別聲明:jQuery版本庫也可以加載你本地的jQuery版本。
單獨導(dǎo)入:
為方便單獨導(dǎo)入特效文件,Bootstrap V3.2中提供了12種JavaScript插件,他們分別是:
? 動畫過渡(Transitions):對應(yīng)的插件文件“transition.js”
? 模態(tài)彈窗(Modal):對應(yīng)的插件文件“modal.js”
? 下拉菜單(Dropdown):對應(yīng)的插件文件“dropdown.js”
? 滾動偵測(Scrollspy):對應(yīng)的插件文件“scrollspy.js”
? 選項卡(Tab):對應(yīng)的插件文件“tab.js”
? 提示框(Tooltips):對應(yīng)的插件文件“tooltop.js”
? 彈出框(Popover):對應(yīng)的插件文件“popover.js”
? 警告框(Alert):對應(yīng)的插件文件“alert.js”
? 按鈕(Buttons):對應(yīng)的插件文件“button.js”
? 折疊/手風(fēng)琴(Collapse):對應(yīng)的插件文件“collapse.js”
? 圖片輪播Carousel:對應(yīng)的插件文件“carousel.js”
? 自動定位浮標(biāo)Affix:對應(yīng)的插件文件“affix.js”
上述單獨插件的下載可到github去下載(https://github.com/twbs/bootstrap)。
下載后可查看js文件夾,如下圖:
接下來依次向大家介紹這些插件如何使用,至于插件源碼分析,在本系列不做過多的闡述,具體源碼可以閱讀各插件的代碼。
注意:在后面的例子中我們?yōu)榱朔奖愣疾捎?strong>一次性導(dǎo)入的方法,即引入“bootstrap.min.js”文件(小伙伴們可以在自己的項目中跟據(jù)需要選擇單獨導(dǎo)入還是一次性導(dǎo)入)。
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報