在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、标签切换tab.js、滚动监听scrollspy.js、下拉列表dropdown.js、模块框弹出层modal.js和提示框tooltip.js。
（一）图片轮播carousel.js
图片轮播可以根据需要在css中设置图片大小，位置等。
图片轮播需要引入jquery.min.js、carousel.js，也可以引入transition.js添加过渡效果。
<div class='container-fluid'> <div class='row'> <div class='col-md-12'> <!-- data-ride='carousel' 属性用于标记轮播在页面加载时就开始动画播放 --> <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>
（二）标签切换tab.js
标签切换需要引入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>
（三）滚动监听scrollspy.js和下拉列表dropdown.js
将滚动监听和下拉列表结合起来 制作 拥有下拉列表的可以滚动监听的导航条。
需要设置样式，本例的样式为：
.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'> <!-- 局部滚动条监听时使用 <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='默认的 Tooltip'>默认的 Tooltip</a> <br/> <a href='#' class='tooltip-test' data-toggle='tooltip' data-placement='left' title='左侧的 Tooltip'>左侧的 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='右侧的 Tooltip'>右侧的 Tooltip</a> <br/> <button type='button' class='btn btn-default' data-toggle='tooltip' title='默认的 Tooltip'>默认的 Tooltip</button> <br/> <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='left' title='左侧的 Tooltip'>左侧的 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='右侧的 Tooltip'>右侧的 Tooltip</button></body>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
本文已被整理到了《Bootstrap插件使用教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
