快捷導(dǎo)航

Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）

更新時間：2016年07月14日 15:11:29 作者：u013511989

這篇文章主要為大家詳細(xì)介紹了Bootstrap 最常用的JS插件，包括圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動監(jiān)聽scrollspy.js等，感興趣的小伙伴們可以參考一下

在Bootstrap下載與安裝后，可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12個JS文件，這些JS文件是Bootstrap自帶的12個jQuery插件，也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js，這兩個文件都包含12個jQuery插件。

在這12個jQuery插件中，最常用的有圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動監(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)記輪播在頁面加載時就開始動畫播放 -->
 <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>

（三）滾動監(jiān)聽scrollspy.js和下拉列表dropdown.js
將滾動監(jiān)聽和下拉列表結(jié)合起來制作擁有下拉列表的可以滾動監(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">
 <!-- 局部滾動條監(jiān)聽時使用
 <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個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

本文已被整理到了《Bootstrap插件使用教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: