建站
咨詢
售后
建站咨詢
新聞中心
今天我們選擇使用著名的 bootstrap 庫(kù)的模態(tài)框插件 modal.js 來(lái)實(shí)現(xiàn)模態(tài)框效果，同時(shí)也使大家進(jìn)一步熟悉 bootstrap 的插件使用。
一. bootstrap 的 js 插件的簡(jiǎn)單介紹
1.引入
我們?cè)谑褂?bootstrap 庫(kù)時(shí)，引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件，這兩種文件都集成了 bootstrap 的所有插件，區(qū)別在于 *.min.js 是壓縮后的版本。
我們?cè)谑褂?bootstrap 的 js插件時(shí)不需要做更多的工作，只需要引入這兩個(gè)文件中的一個(gè)就可以了，另外重要的信息是 bootstrap 的所有插件都依賴于 jquery 庫(kù)，所以在引入 bootstrap 的插件時(shí)，必須先引入 jquery 庫(kù)。
如果只使用 bootstrap庫(kù)的 某個(gè)插件，所以不想引入全部插件時(shí)，可以選擇單獨(dú)引入某個(gè)插件。此種方法需要你有要使用的插件的單獨(dú)文件，bootstrap 共有 12 個(gè) js 插件，你可以到 github此處 下載使用每個(gè)插件的單獨(dú)文件。
另外 bootstrap 有以下 12 個(gè)插件，大家可以大概做個(gè)了解：
- 動(dòng)畫(huà)過(guò)渡（Transitions）: transition.js
- 模態(tài)彈窗（Modal）: modal.js
- 下拉菜單（Dropdown）： dropdown.js
- 滾動(dòng)偵測(cè)（Scrollspy）： scrollspy.js
- 選項(xiàng)卡（Tab）： tab.js
- 提示框（Tooltips）： tooltop.js
- 彈出框（Popover）： popover.js
- 警告框（Alert）： alert.js
- 按鈕（Buttons）： button.js
- 折疊/手風(fēng)琴（Collapse）： collapse.js
- 圖片輪播Carousel： carousel.js
- 自動(dòng)定位浮標(biāo)Affix： affix.js
2.引入插件的使用
bootstrap 提供了一個(gè)非常方便的 API 來(lái)調(diào)用插件，那就是 data 屬性 。我們不需要寫(xiě)很多 js 代碼，只需要為 HTML 標(biāo)簽增加 data-* 屬性，就可以調(diào)用 js 插件實(shí)現(xiàn)各種效果 。
例如我們想為按鈕綁定 下拉菜單效果，只需要為按鈕添加data-toggle="dropdown"屬性，在點(diǎn)擊按鈕時(shí)，就會(huì)調(diào)用 dropdown 插件了。
當(dāng)然我們也可以使用 bootstrap 提供的 純javascript API 來(lái)調(diào)用插件，例如為 id 為 test 的 按鈕綁定調(diào)用 dropdown 插件操作，可以使用如下的 js 代碼：
$("#test").dropdown(option) /可帶選項(xiàng)參數(shù)option另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)題目：使用bootstrap插件實(shí)現(xiàn)模態(tài)框效果-創(chuàng)新互聯(lián)
URL標(biāo)題：http://fisionsoft.com.cn/article/dddsgp.html
