Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
更新時(shí)間：2016年07月14日 15:11:29 作者：u013511989
這篇文章主要為大家詳細(xì)介紹了Bootstrap 最常用的JS插件，包括圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動(dòng)監(jiān)聽scrollspy.js等，感興趣的小伙伴們可以參考一下
在Bootstrap下載與安裝后，可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12個(gè)JS文件，這些JS文件是Bootstrap自帶的12個(gè)jQuery插件，也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js，這兩個(gè)文件都包含12個(gè)jQuery插件。
在這12個(gè)jQuery插件中，最常用的有圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動(dòng)監(jiān)聽scrollspy.js、下拉列表dropdown.js、模塊框彈出層modal.js和提示框tooltip.js。
（一）圖片輪播carousel.js
圖片輪播可以根據(jù)需要在css中設(shè)置圖片大小，位置等。
圖片輪播需要引入jquery.min.js、carousel.js，也可以引入transition.js添加過渡效果。
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <!-- data-ride="carousel" 屬性用于標(biāo)記輪播在頁面加載時(shí)就開始動(dòng)畫播放 --> <div data-ride="carousel" class="carousel slide" id="carousel-332839"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-332839"> </li> <li data-slide-to="1" data-target="#carousel-332839"> </li> <li data-slide-to="2" data-target="#carousel-332839"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <img alt="Carousel Bootstrap First" src="images/Chrysanthemum.jpg" /> <div class="carousel-caption"> <h4> First Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div class="item"> <img alt="Carousel Bootstrap Second" src="images/Desert.jpg"/> <div class="carousel-caption"> <h4> Second Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div class="item"> <img alt="Carousel Bootstrap Third" src="images/Hydrangeas.jpg"> <div class="carousel-caption"> <h4> Third Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> </div> <a class="left carousel-control" href="#carousel-332839" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-332839" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> </div> </div> </div>
（二）標(biāo)簽切換tab.js
標(biāo)簽切換需要引入jquery.min.js、tab.js，也可以引入transition.js添加過渡效果。
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="tabbable" id="tabs-440751"> <ul class="nav nav-tabs"> <li class="active"> <a href="#panel-1" data-toggle="tab">Section 1</a> </li> <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel-1"> <p> I'm in Section 1. </p> </div> <div class="tab-pane" id="panel-2"> <p> I'm in Section 2. </p> </div> </div> </div> </div> </div> </div>
（三）滾動(dòng)監(jiān)聽scrollspy.js和下拉列表dropdown.js
將滾動(dòng)監(jiān)聽和下拉列表結(jié)合起來 制作 擁有下拉列表的可以滾動(dòng)監(jiān)聽的導(dǎo)航條。
需要設(shè)置樣式，本例的樣式為：
.a,.b{
height: 500px;
width: 100%;
}
.b{
background-color: white;
}
.a{
background-color: black;
}
需要引入jquery.min.js、dropdown.js、scrollspy.js。
<body data-spy="scroll" data-target="#navbarExample"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div id="navbarExample" class="navbar navbar-default navbar-fixed-top" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#1">Link</a> </li> <li> <a href="#2">Link</a> </li> <li class="dropdown"> <a href="#3" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"> </li> <li> <a href="#">Separated link</a> </li> <li class="divider"> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control"> </div> <button type="submit" class="btn btn-default"> Submit </button> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#4">Link</a> </li> <li class="dropdown"> <a href="#5" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"> </li> <li> <a href="#">Separated link</a> </li> </ul> </li> </ul> </div> </div> </div> </div> <div class="row"> <!-- 局部滾動(dòng)條監(jiān)聽時(shí)使用 <div class="col-md-12 scrollspy-example" data-spy="scroll" data-target="#navbarExample"> --> <div class="col-md-12"> <div class="a" id="1"></div> <div class="b" id="2"></div> <div class="a" id="3"></div> <div class="b" id="4"></div> <div class="a" id="5"></div> </div> </div> </div> </body> </html>
（四）模塊框彈出層modal.js
需要引入jquery.min.js、modal.js，也可以引入transition.js添加過渡效果。
<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <a id="modal-732948" href="#modal-container-732948" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div class="modal fade in" id="modal-container-732948" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> Modal title </h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div> </div> </div> </div>
（五）提示框tooltip.js
需要引入jquery.min.js、tooltip.js，也可以引入transition.js添加過渡效果。
另外，Tooltip插件不像其他插件那樣，它不是純 CSS 插件。如需使用該插件，必須使用 jquery 激活它。
$(function () { $("[data-toggle='tooltip']").tooltip(); });
<body class="container" style="padding: 100px;" >
<a href="#" class="tooltip-test" data-toggle="tooltip"
title="默認(rèn)的 Tooltip">默認(rèn)的 Tooltip</a> <br/>
<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左側(cè)的 Tooltip">左側(cè)的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="top"
title="頂部的 Tooltip">頂部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">底部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="right"
title="右側(cè)的 Tooltip">右側(cè)的 Tooltip</a> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="默認(rèn)的 Tooltip">默認(rèn)的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左側(cè)的 Tooltip">左側(cè)的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="頂部的 Tooltip">頂部的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右側(cè)的 Tooltip">右側(cè)的 Tooltip</button>
</body>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
本文已被整理到了《Bootstrap插件使用教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js圖片輪播手動(dòng)切換效果
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- 原生js實(shí)現(xiàn)圖片層疊輪播切換效果
- javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
- js實(shí)現(xiàn)圖片輪播切換效果
- js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
- js實(shí)現(xiàn)輪播圖自動(dòng)切換
- JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖
- 原生javascript實(shí)現(xiàn)圖片輪播切換效果
相關(guān)文章
JavaScript中常用的簡潔高級(jí)技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中常用的簡潔高級(jí)技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
一文帶你徹底搞懂JS大文件分片上傳的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了前端JavaScript是如何實(shí)現(xiàn)大文件分片上傳的，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以參考一下2023-05-05
這篇文章主要介紹了在小程序中推送模板消息的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要給大家介紹了關(guān)于Webpack按需加載打包c(diǎn)hunk命名的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序畫布圓形進(jìn)度條顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
用js實(shí)現(xiàn)簡單算法的實(shí)例代碼
下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)簡單算法的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
js網(wǎng)頁滾動(dòng)條滾動(dòng)事件實(shí)例分析
這篇文章主要介紹了js網(wǎng)頁滾動(dòng)條滾動(dòng)事件的用法,實(shí)例分析了javascript中window.onscroll監(jiān)控滾動(dòng)條滾動(dòng)事件的相關(guān)技巧,需要的朋友可以參考下2015-05-05
利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實(shí)現(xiàn)造日歷輪子的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ctrl+v粘貼上傳圖片，兼容chrome，firefox，ie11，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JS實(shí)現(xiàn)的網(wǎng)頁上的顏色拾色器
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁上的顏色拾色器,需要的朋友可以參考下2016-04-04