Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition)、模态弹窗(Modal)、下拉菜单(Dropdown)、滚动侦测(Scrollspy)、选项卡(Tab)、提示 框(Tooltip)、弹出框(Popover)、警告框(Alert)、按钮(Button)、折叠(Collapse)、旋转轮播(Carousel)、定位浮标(Affix)。
由于各种加班,身心疲惫...
动画过渡
源文件:transition.js
使用的动画过渡效果全部使用了 CSS3的语法,所以IE6、IE7、IE8是不能用动画过渡效果。
默认带过渡效果的
- 模态弹窗(Modal)的滑动和渐变效果;
- 选项卡(Tab)的渐变效果;
- 警告框(Alert)的渐变效果;
- 旋转轮播(Carousel)的滑动效果。
源码
js源码
transition.js部分源码
通过以上代码判断是否支持动画过渡效果。
CSS源码
fade css
模态弹窗
源文件:modal.js
模态弹窗(也叫popup,Bootstrap里称为Modal)是绝大部分交互式网站都需要的一种功能,一般有以下几种用法:
- 提示信息、警告信息、大文本等;
- 确认提示(多按钮);
- 显示表单元素(一般使用ajax操作等功能);
- 其他需要特殊显示的信息(如单击缩略图时放大图片)。
使用
弹窗组件使用了3层 div容器元素,其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗 的头(header)、内容(body)、尾(footer)3个部分,分别应用了3个样式:modal-header、modal-body、modal-footer。
使用data-target
modal
js会控制在弹出modal之前,会加一个.modal-backdrop 用来设为灰色背景。
下拉菜单
源文件:dropdown.js
一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现。
实现原理:
- 在网页加载的时候,对所有带有datatoggle="dropdown"样式的元素进行事件绑定。
- 用户单击带有data-toggle="dropdown"样式的链接或按钮时,触发JavaScript事件代码。
- Javascript事件代码在父容器(本例是:<li class="dropdown">)上加一个.open样式。
- 默认隐藏的.dropdown-menu菜单在外部有了.open样式后,即可显示出来,从而达到预期的效果。
使用:
- 菜单样式和菜单项保持一致(即按照第4节的要求编写)。
- 被单击的链接或者按钮上需要应用data-toggle="dropdown"样式,以便在初始化的时候JavaScript可以监控单击事件
使用data-target
dropdown
滚动侦测
源文件:scrollspy.js
滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航 条中相应的导航项
使用:
- 设置滚动容器,即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性。
- 设置菜单链接容器,该容器的id(或样式)和data-target 属性所对应的选择符应一致。
- 在菜单容器内,必须有.nav样式的元素,并且在其内部有 li元素,li内包含的a元素才是可以侦测高亮的菜单链接,即符 合.nav li > a这种选择符的条件。
body上用data-spy
data-spy
注意:
子菜单虽然会高亮,但不会打开,为了展示效果,需要手 动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用
选项卡
源文件:tab.js
就像我们平时使用的Windows操作系统里的选项卡设置一样,单击一个选项,下面就显示对应的选项卡面板
使用:
- 选项卡导航和选项卡面板要同时有(但不一定要放在一 起)。
- 导航链接里要设置data-toggle="tab",并且还要设置data-target="选择符"(或href="选择符"),以便单击的时候能找到该选择符所对应的tab-pane面板。
- tab-pane要放在tab-content里面,要有id(或者CSS样式) 并与data-target="选择符"(或href="选择符")一致
nav-tabs
提示框
源文件:tooltip.js
鼠标移动到特定的元素上时,显示相关的提示语。类似于abbr的title功能,不过效果更加漂亮实用。
使用
- 指定的data-toggle="tooltip"属性
- 然后再定义要显示的内容,可以在title也可以用data-original-title
- js初始化.$('[data-toggle="tooltip"]').tooltip();
tooltip
弹出框
源文件:popover.js
弹出框其实就是一种特殊的提示框,相比来说只是多了一个title标题而已
使用
(弹出框插件的用法和提示框组件几乎一模一样),唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化,也和提示框插件一样,需要手动初始化
- 指定的data-toggle="popover"属性
- 然后再定义要显示的标题,可以在title也可以用data-original-title
- 定义内容,可以在content也可以data-content
- js初始化.$('[data-toggle=popover]').popover();
popover
警告框
源文件:alert.js
就是在警告框组件的基础上,提供了 单击x号关闭警告框的功能
使用
alert
默认情况下,如果不设置data-target属性,则会关闭x号按钮元素所在的父元素容器,即外部的div元素。只需要保证设置了data-dismiss="alert"即可.
按钮
源文件:button.js
按钮插件提供了一组可以控制按钮多种状态的功能,比如,一个按钮有禁用状态、正在加载状态、正常状态等
使用
禁用状态在这里不再赘述。
正在加载和加载完成控制与显示
btn
折叠
源文件:collapse.js
当单击一个触发元素时,在另外一个可折叠区域进行显示(或隐藏),再次单击时可以反转显示状态。(经典的手风琴风格)
使用
1
2
3
|
<!-- 默认显示折叠区域--> < a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</ a > < div id="demo" class="collapse in">折叠区域...</ div > |
1
2
3
|
<!-- 默认隐藏折叠区域--> < button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</ button > < div id="demo" class="collapse ">折叠区域...</ div > |
轮播
源文件:carousel.js
旋转轮播(Carousel)这个插件有很多种译法,有人叫轮播,有人叫传送带
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
< div data-ride="carousel" class="carousel slide" id="carousel-container"> <!-- 图片容器 --> < div class="carousel-inner"> < div class="item"> < img alt="第一张图" src="A" /> </ div > < div class="item active"> < img alt="第二张图" src="B" /> </ div > < div class="item"> < img alt="第三张图" src="C" /> </ div > </ div > <!-- 圆圈指示符 --> < ol class="carousel-indicators"> < li data-slide-to="0" data-target="#carousel-container"></ li > < li data-slide-to="1" data-target="#carousel-container"></ li > < li data-slide-to="2" data-target="#carousel-container" class="active"></ li > </ ol > <!-- 左右控制按钮 --> < a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> < span class="glyphicon glyphicon-chevron-left"></ span > </ a > < a data-slide="next" href="#carousel-container" class="right carouselcontrol"> < span class="glyphicon glyphicon-chevron-right"></ span > </ a > </ div > |
带有data-ride="carousel"的div就是轮播插件的容器,容器id为carousel-container,稍后会用到。
还有两个样式,其中carousel样式做样式容器,而slide样式和fade类似,用来定义轮播图片的时候是否有特效.
- carousel-inner样式div内部包含多个含有item的div样式,在 这些内部的div里,定义我们要显示的幻灯图片。
- carousel-indicators样式ol内部定义了一组标示符,用户单 击这些标示符可以直接显示相应的图片,data-slide-to是索引,从0开始.
- 另外两个a链接是一组,用于显示左右箭头,可以改变轮播的方向。这两个元素上定义的data-slide属性值只能是 prev或者next
针对图片,轮播插件还提供了一个字幕说明样式(carousel-caption),紧接着img元素定义即可。示例如下
<div class="item active">
<img src="..." alt="..." />
<div class="carousel-caption">
<h3>标题</h3>
<p>描述...</p>
</div>
</div>
定位浮标
源文件:affix.js
Affix的效果就像其官方网站左边的导航链接一样。
<!—或者分开设置offset -- >
<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >导航内容 </div>
<!—合并设置offset -- >
<div data-spy="affix" data-offset="60" >导航内容</div>
data-offset-top表示一个完整的新网页,从顶部向下拖动滚动条(也就是网页向上滚动)这个像素以后,
而data-offset-bottom则表示距离最底部还有多少距离(本例60像素)以后,就要开始继续滚动了.
Bootstrap JavaScript插件的更多相关文章
- Twitter Bootstrap JavaScript插件
Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- bootstrap导入JavaScript插件
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
- Bootstrap支持的JavaScript插件
1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...
随机推荐
- java抽象类和接口
面向对象设计过程中重要的一点是如何进行抽象,即把"问题空间"中的元素与"方案空间"中的元素建立理想的一对一的映射关系.抽象类和接口便是抽象过程中的产物. ...
- spring源码:web容器启动(li)
web项目中可以集成spring的ApplicationContext进行bean的管理,这样使用起来bean更加便捷,能够利用到很多spring的特性.我们比较常用的web容器有jetty,tomc ...
- xcode中的.h和.m文件分别是什么意思?各有什么用?
.h 表示头文件,用来声明各种成员变量,方法,属性之类的.在import的时候用头文件. .m 主要用来实现.h 里声明的方法.举个例子,如果要写一个方法,你要在.h里先声明: - (void)myM ...
- Microsoft.CodeAnalysis 入门
1 安装 Microsoft.CodeAnalysis 我这里创建的是WPF的项目,首先再VS2015中用NuGet控制台进行安装 Install-Package Microsoft.CodeAnal ...
- python语言中的编码问题(续)
上文提到了python开发中非常重要的两处设置. 一个是编解码器的默认设置defaultencoding >>> import sys >>> sys.getdef ...
- canvas 制作flappy bird(像素小鸟)全流程
flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...
- 配置eclipse J2EE环境
早已习惯使用eclipse做Java相关的开发,因为之前安装的是RCP版本,今天发现对于J2EE的开发,在perference中居然没有Axis2的支持,需要添加J2EE的支持插件,特在此说明安装方式 ...
- 学习笔记 MYSQL报错注入(count()、rand()、group by)
首先看下常见的攻击载荷,如下: select count(*),(floor(rand(0)*2))x from table group by x; 然后对于攻击载荷进行解释, floor(rand( ...
- Json解析工具的选择
前言 前段时间@寒江不钓同学针对国内Top500和Google Play Top200 Android应用做了全面的分析(具体分析报告见文末的参考资料),其中有涉及到对主流应用使用json框架Gson ...
- CentOS7 修改防火墙,增加外网可以访问的端口号
CentOS7 修改防火墙,增加外网可以访问的端口号: vim /etc/sysconfig/iptables 增加一条 -A INPUT -p tcp -m state --state NEW -m ...