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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python实现简单的语音识别系统
2017/12/13 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
tensorflow 实现数据类型转换
2020/02/17 Python
keras导入weights方式
2020/06/12 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
一套Delphi的笔试题一
2016/02/14 面试题
认识深刻的检讨书
2014/02/16 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
学校通报表扬范文
2015/05/04 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python