溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)bootstrap中有哪些內(nèi)置插件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
bootstrap內(nèi)置插件有：1、過渡效果插件；2、模態(tài)框插件；3、下拉菜單插件；4、滾動(dòng)監(jiān)聽插件；5、標(biāo)簽頁(yè)插件；6、提示工具插件；7、彈出框插件；8、警告框插件；9、按鈕插件；10、折疊插件；11、輪播插件；12、附加導(dǎo)航插件。
本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦
bootstrap內(nèi)置插件有：
Bootstrap 過渡效果
Bootstrap 模態(tài)框
Bootstrap 下拉菜單
Bootstrap 滾動(dòng)監(jiān)聽
Bootstrap 標(biāo)簽頁(yè)
Bootstrap 提示工具
Bootstrap 彈出框
Bootstrap 警告框
Bootstrap 按鈕
Bootstrap 折疊
Bootstrap 輪播
Bootstrap 附加導(dǎo)航
Bootstrap 過渡效果（Transition）插件
過渡效果（Transition）插件提供了簡(jiǎn)單的過渡效果。
如果您想要單獨(dú)引用該插件的功能，那么除了其他的 JS 文件，您還需要引用 transition.js?；蛘?，可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
Transition.js 是 transitionEnd 事件和 CSS 過渡效果模擬器的基本幫助器類。它被其他插件用來檢查 CSS 過渡效果支持，并用來獲取過渡效果。
Bootstrap 模態(tài)框（Modal）插件
模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 modal.js。或者，可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
用法：
您可以切換模態(tài)框（Modal）插件的隱藏內(nèi)容：
通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle="modal"，同時(shí)設(shè)置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態(tài)框（帶有 id="identifier"）。
通過 JavaScript：使用這種技術(shù)，您可以通過簡(jiǎn)單的一行 JavaScript 來調(diào)用帶有 id="identifier" 的模態(tài)框：
$('#identifier').modal(options)Bootstrap 下拉菜單（Dropdown）插件
使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導(dǎo)航欄、標(biāo)簽頁(yè)、膠囊式導(dǎo)航菜單、按鈕等）添加下拉菜單。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 dropdown.js。或者引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）插件
滾動(dòng)監(jiān)聽（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active class。
用法
您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽行為：
通過 data 屬性：向您想要監(jiān)聽的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁(yè)面主體中有匹配您所要監(jiān)聽鏈接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
通過 JavaScript：您可以通過 JavaScript 調(diào)用滾動(dòng)監(jiān)聽，選取要監(jiān)聽的元素，然后調(diào)用 .scrollspy() 函數(shù)：
$('body').scrollspy({ target: '.navbar-example' })Bootstrap 標(biāo)簽頁(yè)（Tab）插件
通過結(jié)合一些 data 屬性，您可以輕松地創(chuàng)建一個(gè)標(biāo)簽頁(yè)界面。通過這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中。
Bootstrap 提示工具（Tooltip）插件
當(dāng)您想要描述一個(gè)鏈接的時(shí)候，提示工具（Tooltip）就顯得非常有用。提示工具（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發(fā)。提示工具（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用 CSS 實(shí)現(xiàn)動(dòng)畫效果，用 data 屬性存儲(chǔ)標(biāo)題信息。
Bootstrap 彈出框（Popover）插件
彈出框（Popover）與工具提示（Tooltip）類似，提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框，用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充。該方法依賴于工具提示（tooltip）。
Bootstrap 警告框（Alert）插件
警告框（Alert）消息大多是用來向終端用戶顯示諸如警告或確認(rèn)消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
Bootstrap 按鈕（Button）插件
按鈕（Button）在 Bootstrap 按鈕 一章中介紹過。通過按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組。
Bootstrap 折疊（Collapse）插件
折疊（Collapse）插件可以很容易地讓頁(yè)面區(qū)域折疊起來。無論您用它來創(chuàng)建折疊導(dǎo)航還是內(nèi)容面板，它都允許很多內(nèi)容選項(xiàng)。
Bootstrap 輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。
Bootstrap 附加導(dǎo)航（Affix）插件
附加導(dǎo)航（Affix）插件允許指定 <div> 固定在頁(yè)面的某個(gè)位置。一個(gè)常見的例子是社交圖標(biāo)。它們將在某個(gè)位置開始，但當(dāng)頁(yè)面點(diǎn)擊某個(gè)標(biāo)記，該 <div> 會(huì)鎖定在某個(gè)位置，不會(huì)隨著頁(yè)面其他部分一起滾動(dòng)。
關(guān)于“bootstrap中有哪些內(nèi)置插件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼