Bootstrap JS插件系列总结

最新推荐文章于 2022-08-13 17:44:14 发布

Hey_Sarah

最新推荐文章于 2022-08-13 17:44:14 发布

阅读量6k

点赞数 2

分类专栏：经验总结文章标签： bootstrap jquery插件 javascript

本文链接：https://blog.csdn.net/u013511989/article/details/51899543

版权

经验总结专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在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>

Hey_Sarah

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 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
复制链接

扫一扫