玩轉(zhuǎn)bootstrap(js插件篇)

《玩轉(zhuǎn)bootstrap(js插件篇)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、玩轉(zhuǎn)Bootstrap（JS插件篇）導(dǎo)入JavaScript插件Bootstrap除了包含豐富的Web組件之外，如前面介紹的下拉菜單、按鈕組、導(dǎo)航、分頁等。他還包括一些JavaScript的插件。Bootstrap的JavaScript插件可以單獨(dú)導(dǎo)入到頁面中，也可以一次性導(dǎo)入到頁面中。因?yàn)樵贐ootstrap中的JavaScript插件都是依賴于jQuery庫(kù)，所以不論是單獨(dú)導(dǎo)入還一次性導(dǎo)入之前必須先導(dǎo)入jQuery庫(kù)。一次性導(dǎo)入：Bootstrap提供了一個(gè)單一的文件，這個(gè)文件包含了Bootstrap的所有JavaScr

2、ipt插件，即bootstrap.js（壓縮版本：bootstrap.min.js）。具體使用如下（或見右側(cè)代碼編輯器28-29行）：

3、ipt>特別聲明：jQuery版本庫(kù)也可以加載你本地的jQuery版本。單獨(dú)導(dǎo)入：為方便單獨(dú)導(dǎo)入特效文件，BootstrapV3.2中提供了12種JavaScript插件，他們分別是：????動(dòng)畫過渡（Transitions）:對(duì)應(yīng)的插件文件“transition.js”????模態(tài)彈窗（Modal）:對(duì)應(yīng)的插件文件“modal.js”????下拉菜單（Dropdown）：對(duì)應(yīng)的插件文件“dropdown.js”????滾動(dòng)偵測(cè)（Scrollspy）：對(duì)應(yīng)的插件文件“scrollspy.js”????選項(xiàng)卡（Tab）：對(duì)應(yīng)的

4、插件文件“tab.js”????提示框（Tooltips）：對(duì)應(yīng)的插件文件“tooltop.js”????彈出框（Popover）：對(duì)應(yīng)的插件文件“popover.js”????警告框（Alert）：對(duì)應(yīng)的插件文件“alert.js”????按鈕（Buttons）：對(duì)應(yīng)的插件文件“button.js”????折疊/手風(fēng)琴（Collapse）：對(duì)應(yīng)的插件文件“collapse.js”????圖片輪播Carousel：對(duì)應(yīng)的插件文件“carousel.js”????自動(dòng)定位浮標(biāo)Affix：對(duì)應(yīng)的插件文件“affix.js”上述單

5、獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。下載后可查看js文件夾，如下圖：接下來依次向大家介紹這些插件如何使用，至于插件源碼分析，在本系列不做過多的闡述，具體源碼可以閱讀各插件的代碼。注意：在后面的例子中我們?yōu)榱朔奖愣疾捎靡淮涡詫?dǎo)入的方法，即引入“bootstrap.min.js”文件（小伙伴們可以在自己的項(xiàng)目中跟據(jù)需要選擇單獨(dú)導(dǎo)入還是一次性導(dǎo)入）。動(dòng)畫過渡（Transitions）這一小節(jié)我們先來講“動(dòng)畫過渡（Transitions）”這個(gè)插件的使用，源文件：

6、transition.jsBootstrap框架默認(rèn)給各個(gè)組件提供了基本動(dòng)畫的過渡效果，如果要使用，有兩種方法：???調(diào)用統(tǒng)一編譯的bootstrap.js；???調(diào)用單一的過渡動(dòng)畫的JavaScript插件文件transition.js（右側(cè)第29行引入Bootstrap上對(duì)外公布的transition.js的地址）。transition.js文件為Bootstrap具有過渡動(dòng)畫效果的組件提供了動(dòng)畫過渡效果。不過需要注意的是，這些過渡動(dòng)畫都是采用CSS3來實(shí)現(xiàn)的，所以IE6-8瀏覽器是不具備這些過渡動(dòng)畫效果。默認(rèn)情況之下，

7、Bootstrap框架中以下組件使用了過渡動(dòng)畫效果：???模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果；???選項(xiàng)卡（Tab）的漸變效果；???警告框（Alert）的漸變效果；???圖片輪播（Carousel）的滑動(dòng)效果。右側(cè)舉了一個(gè)“模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果”源代碼例子。模態(tài)彈出框--結(jié)構(gòu)分析Bootstrap框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：????彈

8、出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕????彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容????彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕模態(tài)彈出窗的結(jié)構(gòu)如下：