首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

Posted in Javascript onJuly 14, 2016

在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 最常用的JS插件系列总结（图片轮播、标签切换等）

- Author -

u013511989

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
node+express+jade制作简单网站指南
Nov 26 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 #Javascript
js css+html实现简单的日历
Jul 14 #Javascript
javascript运算符——位运算符全面介绍
Jul 14 #Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 #Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 #Javascript
闭幕词(9) 工作总结(1972) 慰问信(53) 报告(147) 开幕词(63) 实用文书(952) 计划(88) 汇报材料(247) 通知(159) 导游词(322)
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php修改数组键名的方法示例
2017/04/15 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
解决vue 退出动画无效的问题
2020/08/09 Javascript
python处理大数字的方法
2015/05/27 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python无损压缩图片的示例代码
2020/08/06 Python
中级会计职业生涯规划范文
2014/01/16 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
见习报告的格式
2014/11/04 职场文书
大学生在校表现评语
2014/12/31 职场文书
现场施工员岗位职责
2015/04/11 职场文书
预备党员入党感想
2015/08/10 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS