本文主要包含bootstrap js插件,bootstrap js插件下载,bootstrap.min.js,bootstrap.js,bootstrap.min.js下载等相关知识,u013511989 希望在学习及工作中可以帮助到您
在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></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></div>
（三）滚动监听scrollspy.js和下拉列表dropdown.js
将滚动监听和下拉列表结合起来 制作 拥有下拉列表的可以滚动监听的导航条。
需要设置样式，本例的样式为：
.a,.b{
height: 500px;
width: 100%;
}
.b{
background-color: white;
}
.a{
background-color: black;
}
</div>
需要引入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></div>
（四）模块框弹出层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" dat