在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)聽(tīng)scrollspy.js、下拉列表dropdown.js、模塊框彈出層modal.js和提示框tooltip.js。
（一）圖片輪播carousel.js
圖片輪播可以根據(jù)需要在css中設(shè)置圖片大小，位置等。
圖片輪播需要引入jquery.min.js、carousel.js，也可以引入transition.js添加過(guò)渡效果。
<div class='container-fluid'> <div class='row'> <div class='col-md-12'> <!-- data-ride='carousel' 屬性用于標(biāo)記輪播在頁(yè)面加載時(shí)就開(kāi)始動(dòng)畫(huà)播放 --> <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添加過(guò)渡效果。
<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)聽(tīng)scrollspy.js和下拉列表dropdown.js
將滾動(dòng)監(jiān)聽(tīng)和下拉列表結(jié)合起來(lái) 制作 擁有下拉列表的可以滾動(dòng)監(jiān)聽(tīng)的導(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)聽(tīng)時(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添加過(guò)渡效果。
<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添加過(guò)渡效果。
另外，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>
精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：
Bootstrap學(xué)習(xí)教程
Bootstrap實(shí)戰(zhàn)教程
Bootstrap Table使用教程
本文已被整理到了《Bootstrap插件使用教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
