在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>
<div>
<div>
<!-- data-ride="carousel" 屬性用于標(biāo)記輪播在頁面加載時就開始動畫播放 -->
<div data-ride="carousel" id="carousel-332839">
<ol>
<li 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>
<div>
<img src="images/Chrysanthemum.jpg" />
<div>
<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>
<img src="images/Desert.jpg"/>
<div>
<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>
<img src="images/Hydrangeas.jpg">
<div>
<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 href="#carousel-332839" data-slide="prev"><span></span></a> <a href="#carousel-332839" data-slide="next"><span></span></a>
</div>
</div>
</div>
</div>
（二）標(biāo)簽切換tab.js
標(biāo)簽切換需要引入jquery.min.js、tab.js，也可以引入transition.js添加過渡效果。
<div>
<div>
<div>
<div id="tabs-440751">
<ul>
<li>
<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>
<div id="panel-1">
<p>
I'm in Section 1.
</p>
</div>
<div 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>
<div>
<div>
<div id="navbarExample" >
<div>
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Toggle navigation</span><span></span><span></span><span></span>
</button> <a href="#">Brand</a>
</div>
<div id="bs-example-navbar-collapse-1">
<ul>
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#2">Link</a>
</li>
<li>
<a href="#3" data-toggle="dropdown">Dropdown<strong></strong></a>
<ul>
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form role="search">
<div>
<input type="text">
</div>
<button type="submit">
Submit
</button>
</form>
<ul>
<li>
<a href="#4">Link</a>
</li>
<li>
<a href="#5" data-toggle="dropdown">Dropdown<strong></strong></a>
<ul>
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<!-- 局部滾動條監(jiān)聽時使用
<div data-spy="scroll" data-target="#navbarExample"> -->
<div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
</div>
</div>
</div>
</body>
</html>
（四）模塊框彈出層modal.js
需要引入jquery.min.js、modal.js，也可以引入transition.js添加過渡效果。
<div>
<div>
<div>
<a id="modal-732948" href="#modal-container-732948" role="button" data-toggle="modal">Launch demo modal</a>
<div id="modal-container-732948" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div>
<div>
<div>
<button type="button" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="myModalLabel">
Modal title
</h4>
</div>
<div>
...
</div>
<div>
<button type="button" data-dismiss="modal">
Close
</button>
<button type="button">
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 >
<a href="#" data-toggle="tooltip"
>默認(rèn)的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip"
data-placement="left">左側(cè)的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="top"
>頂部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="bottom"
>底部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="right"
>右側(cè)的 Tooltip</a> <br/>
<button type="button" data-toggle="tooltip"
>默認(rèn)的 Tooltip</button> <br/>
<button type="button" data-toggle="tooltip"
data-placement="left">左側(cè)的 Tooltip</button> <br/>
<button type="button" data-toggle="tooltip"
data-placement="top">頂部的 Tooltip</button> <br/>
<button type="button" data-toggle="tooltip"
data-placement="bottom">底部的 Tooltip</button> <br/>
<button type="button" data-toggle="tooltip"
data-placement="right">右側(cè)的 Tooltip</button>
</body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助