初学者--bootstrap（五）JavaScript插件（上）----在路上（6）
jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。
一：首先要确认的是，单个还是全部引入：
JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
注：建议使用压缩版的 JavaScript文件；bootstrap.js 和 bootstrap.min.js 都包含了所有插件，在使用时，只需选择一个引入页面就可以了。
二：关于JavaScript都包含哪些部分
（1） 过渡效果（ transition.js）
对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。
所包含的内容：Transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
（2）模态框（ modal.js ）
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
注：不支持模态框重叠，千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
关于模态框的 HTML 代码放置的位置：
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
注意，当我们使用modal时，前提是要有一个按钮进行触发模态框，具体代码如下：
<body>
<!-- Button trigger modal 前提是要有一个按钮进行触发模态框 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
触发模态按钮
</button>
<!-- Modal先进行隐藏，当点击按钮时，事件执行 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- 弹出的模态框对话框 此可以决定模态框的大小和位置 ,通过添加modal-lg类改变大小 -->
<div class="modal-dialog modal-lg">
<!-- 弹出的模态内容部分 -->
<div class="modal-content">
<!-- （1）header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title" id="myModalLabel">表单提交</h4>
</div>
<!-- （2）内容 input-->
<div class="modal-body">
<input type="text" class ="form-control">
</div>
<!--（3）尾部 按钮 -->
<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>
<!-- 引入的js与jq -->
<script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>
</body>
（3）下拉菜单
通过数据属性或JavaScript,下拉栏插件切换隐藏的内容(下拉菜单),切换。开放类的父列表项。
在移动设备上,打开一个下拉菜单，dropdown-backdrop关闭下拉菜单应在菜单之外,要求适当的iOS的支持。这意味着,从打开的下拉菜单切换到一个不同的下拉菜单。
注意:data-toggle 是bootstrap中封装好的进行切换的属性。具体实现代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉按钮</title>
<!-- 引入bootstrap中的css -->
<link href="lib/dist/css/bootstrap.css" rel="stylesheet">
</head> <body> <!-- 小的下拉按钮 共两部分组成-->
<div class="dropdown">
<!-- (1)点击按钮-->
<button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-success btn-lg">
按钮与符号<span class="caret"></span>
</button>
<!-- (2)菜单目录 可用ul也可div-->
<ul class="dropdown-menu" >
<li><a href="#">百度一下</a></li>
</ul> <!-- <div class="dropdown-menu">adnajdhajkd</div> --> </div> <!-- 自己来写一个 -->
<!-- 这是我的恩师总结的超简单写法 -->
<div class="dropdown">
<button class= "btn btn-danger" data-toggle="dropdown">按钮</button>
<div class="dropdown-menu" role ="menu">这是面板<br>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦<br>哈哈哈哈</div>
</div>
<script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>
</body>
</html>
（4）滚动监听
滚动监听提要：
1.给想要滑动的区块设置 data-spy="scroll"
2.给设置data-spy=“scroll”的区块设置 相对定位
注：系统提供的代码看起来总会有些复杂，下面就为大家提供了一种简单方法，关于滚动监听的这个思想，无非就是建一个导航栏，再加上一个滑动监听空间，再让创建的id或类与导航栏中的标签对应起来
具体步骤如下：
步骤（1）：建一个导航条
步骤（2）：建滑动监听空间 （核心是：监听控件里的内容滑动到一个锚点，然后修改这个锚点的active）
步骤（3）设置id或class对象，让其与导航栏里的标签对应起来，使标签可以定位行（锚点特性），当滑动监听到某个位置时，导航栏上的相对应a标签执行active
具体代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>滚动监听</title>
<!-- 引入bootstrap中的css -->
<link href="lib/dist/css/bootstrap.css" rel="stylesheet">
</head> <body>
<!-- 系统提供的源代码 -->
<!-- <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body> -->
<!-- 步骤（1）：建一个导航条 （恩师魏氏的一个简单的导航条）-->
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ios">ios</a></li>
<li role="presentation"><a href="#html">html</a></li>
<li role="presentation"><a href="#php">php</a></li>
</ul>
</div>
<!-- 步骤（2）：建滑动监听空间 （核心是：监听控件里的内容滑动到一个锚点，然后修改这个锚点的active） -->
<!-- 注意设置的属性，height overflow position -->
<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">
<!--（3）设置id或class对象，让其与导航栏里的标签对应起来，使标签可以定位行（锚点特性），当滑动监听到某个位置时，导航栏上的相对应a标签执行active -->
<h3 id ="ios">IOS</h3>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<h3 id ="html">HTML</h3>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<h3 id ="php">PHP后台</h3>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
<p>sadaadada</p>
</div>
<script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>
</body>
</html>
（5）标签页（ tab.js）
标签页（Tab）通过结合一些 data 属性，可以轻松地创建一个标签页界面。通过这个插件可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap胶囊式样式。
<!-- 1.复制的滚动监听的代码 -->
<!--<ul class="nav nav-tabs" role = "tablist">
<li role="presentation" class="active"><a href="#ios" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" role="tab" ><a href="#android" data-toggle="tab">Profile</a></li>
<li role="presentation" role="tab" ><a href="#html" data-toggle="tab">Messages</a></li>
</ul> -->
<!--2.给他设置功能面板 可以建在div上，也可以直接在a标签上设置-->
<!-- Tab panes -->
<!-- <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="ios">这是ios面板</div>
<div role="tabpanel" class="tab-pane" id="android">这是安卓面板</div>
<div role="tabpanel" class="tab-pane" id="html">这是HTML面板</div>
</div> -->
<!--精简版 -->
<!-- (1)给a标签直接设置按钮\切换tab\对应的锚点id data-toggle ="tab"-->
<a href="#ios" class="btn btn-danger" data-toggle="tab">iOS</a>
<a href="#android" class="btn btn-danger" data-toggle="tab">安卓</a>
<a href="#html" class="btn btn-danger" data-toggle="tab">HTML</a>
<!-- (2)点击之后切换的对应内容,及执行active div里可以是p标签 也可以是a链接 -->
<div class="tab-content">
<p id="ios" class="tab-pane active" >这是ios面板</p>
<p id="android" class="tab-pane " >这是安卓面板</p>
<p id="html" class="tab-pane " >这是HTML面板</p>
<!-- <a href="#" id="html" class="tab-pane">我是html</a> -->
</div>
（6）工具提示（tooltip.js）
所谓工具提示，是当鼠标经过或鼠标点击事件时，弹出此按钮的解释说明或应用说明
注：使用bootstrap中的工具提示组件，需要在自己的html中加入自己的jquery代码，以找到对应的弹出框。
具体代码如下：
<!-- 现在光靠代码没用了 工具提示：tooltip 布局：placement方向 默认：default -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="hahaha" style="margin-top: 20px;">我是向上的</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="lalalala on left">我是向左的</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="nanana on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="hehehhe我的工具框">Tooltip on right</button> <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script> <!-- 注意：必须自己添加jq代码 ！！！-->
<script>
// $('#example').tooltip();
// 获得所有的data-toggle的对象，给他们设置一个事件 tooltip
$("[data-toggle ='tooltip']").tooltip();
</script>
（7）弹出框
这里的弹出框与上面的工具提示效果看似相同，但代码还是有些不同的，
如：工具提示的data-toggle为tooltip，而弹出框则为popover，相同点就是都得自己写js找到各自切换的属性
这里的tooltip、popover是bootstrap封装好的函数，会用就可。
具体代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>弹出框</title> <link href="lib/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" title="弹出框标题"
data-content= "<a href=''>www.baidu.com</a>">Popover on right</button>
<!-- 注： //如果弹出的是内容是a标签，不会有作用。 --> <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script> <!-- 必须自己添加jq代码 -->
<script>
$("[data-toggle ='popover']").popover();
</script> </body>
</html>
（8）Collapse
轮播图！没错，对于在没有学习bootstrap的js插件前的初学者来说，做轮播图是件很头疼的事情，但自从会了js插件，轮播图so easy！
轮播图无非包括几张图，几个小圆点儿，用以说明当前轮播到第几张，有的轮播图会再加上两边的左右箭头按钮，在使用bootstrap 中js插件时，要注意各实现功能所对应的类名
具体怎么使用bootstrap的轮播插件，代码如下：
<!-- 轮播大框架 carousel-example-generic 指的是轮播通用例 可以对其自行设置-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 50%;
height:50%; margin: 100px auto;">
<!-- 轮播图上的小导航点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="0" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<!-- 是指当轮播到最后一张的时候，只再指向第几张 -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
</ol> <!-- carousel-inner指的是 轮播内部图片区域 且role必须有 -->
<div class="carousel-inner" role="listbox">
<!-- active 是指当前显示的轮播 -->
<div class="item active" style = "background: red;height: 200px;">
<!-- <img src="..." alt="..."> --> <!-- 图片链接部分 -->
<div class="carousel-caption">hahahaha</div> <!-- 轮播图上面的标题、文本说明部分 -->
</div>
<div class="item" style = "background: green;height: 200px;">
<!-- <img src="..." alt="..."> -->
<div class="carousel-caption">lalalalala</div>
</div>
<div class="item" style = "background: pink;height: 200px;">
<!-- <img src="..." alt="..."> -->
<div class="carousel-caption">nananana</div>
</div>
</div> <!-- 左右箭头 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- 轮播大框架结束 -->
学习心得：
bootstrap为我们提供了13种JavaScript插件，无疑为我们编写代码提供巨大帮助，不管对于初学者或已工作的程序员来说，更是使编码效率迅速提高，前提是你懂得bootstrap为你提供的方便。
工作后大部分都会使用专用的jQuery插件，公司不同，使用的插件也不同，但插件无非就那么几种，像专门用于手机上的zepto.js -jquery的精简版，但是zepto主体默认是没有触摸组件的，触摸的js需要在其官网额外下载；还有主要用于移动端网站和移动app页面的iscroll.js，常见的有上拉刷新啊，下拉加载啊它都有，but！如果你够牛，可以自己开发属于自己的js、jQuery库。
类似的前端框架（这里以响应式UI介绍为主），除bootstrap外，还有frozenUI:FrozenUI--专注于移动web的UI框架，提供的CSS组件是目前QQ会员前端开发组所用的通用样式库，FrozenUI提供的一系列JavaScript插件，其更优雅地在移动端上呈现更灵动的动画效果，其中，FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI，其所有组件均以 zepto 的插件的形式存在。 还有一款就是amazeui : 也叫‘妹子UI’，个人觉得啊，就ui样式上和组件上来说，虽然中规中矩，常用的都有，但js和CSS文件在体积上相比其他插件上并不占优势，一般开发团队应用较多的还是bootstrap、frozenUi、zepto较多些。有关bootstrap的发展优势在前面几篇的文章包含，在这不在赘述，若想了解更多bootstrap详情，请参考http://v3.bootcss.com/。
----------------------------------------共勉-----------------------------------------
初学者--bootstrap（五）JavaScript插件（上）----在路上（6）的更多相关文章
- bootstrap导入JavaScript插件
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
- bootstrap学习——javascript插件篇
飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1. 引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...
- Bootstrap学习 - JavaScript插件
模态框 <div class="modal" id="myModal" tabindex="-1" role="dialo ...
- ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件
阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
- Bootstrap支持的JavaScript插件
1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...
- bootstrap 支持的JavaScript插件
一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- RTX二次开发集成
1,rtx服务器端有很多端口,二次发的程序与这些打开的端口交互.打开端口的方法在rtx服务管理器中,默认http服务未启用.需要手动启用http端口如下: 如果打开rtx服务器没有启用http的801 ...
- 如何获取ResultSet的行数和列数
当我们执行数据库查询返回一个ResultSet的时候,很多情况下我们需要知道这个ResultSet的大小,即它的行数和列数.我们知道它的列数可以通过resultSet.getMetaData().ge ...
- 餐厅点餐系统app总结
总结: 三个冲刺已经结束,虽然没有说十分完美,但该实现的功能还是实现了,只是在市场是相较于专业性的缺乏竞争力,从界面到体验都需进一步优化. 每个人的进度不一样,为了同一个任务需要不断的磨合与合作,但慢 ...
- IOS UIAppLocation 单例模式
UIApplocation * app=[UIApplocation shareapplocation]; UIAppLocation 只能被初始化一次. 一个程序中只能被创建一次,称为单例模式. 单 ...
- 2016-1-29 图解HTTP(04)
第7章 确保Web安全的HTTPS 在HTTP协议中有可能存在信息窃听或身份伪装等安全问题.使用HTTPS通信机制可以有效的防止这些问题. 7.1 HTTP的缺点 ● 通信使用明文(不加密),内容可能 ...
- SOAPUI使用教程-了解REST参数
1.2.资源参数 在这一节中,我们更为详细的看看提供给你不同类型的REST参数.有五种类型的可用参数:QUERY, HEADER, TEMPLATE, MATRIX and PLAIN. 所有参数可以 ...
- URL的截取问题
$(function (){ if (window.location.href.includes('?')) { if (window.location.href.split('?')[1].spli ...
- Array方法
1.concat()方法 用法:用于连接两个或者多个数组. 对原数组有无影响:不会改变原有数组,会返回一个连接之后的数组. 2.join()方法 用法:以指定的分隔符把数组中每一项拆分成字符串. 对原 ...
- SPRING SECURITY JAVA配置：Web Security
在前一篇,我已经介绍了Spring Security Java配置,也概括的介绍了一下这个项目方方面面.在这篇文章中,我们来看一看一个简单的基于web security配置的例子.之后我们再来作更多的 ...
- 编写base64图片文件
base64编码代替css背景图片在网站上应用是很广泛的,例如:loading gif图片,天猫加载时那只猫等等. 因为base64图片可以减少http请求,所以我们经常会把不经常改动的,独立的,尺寸 ...