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插件使用教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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
You might like
调频问题解答
2021/03/01 无线电
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
文本加密解密
2006/06/23 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
django 环境变量配置过程详解
2019/08/06 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
家长会邀请书
2014/01/25 职场文书
文明礼仪倡议书
2015/04/28 职场文书