Bootstrap插件概述
前面的话
Bootstrap除了包含丰富的Web组件之外,如下拉菜单、按钮组、导航、分页等,还包括一些JavaScript的插件。插件为 Bootstrap 的组件赋予了“生命”。Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。本文将介绍Bootstrap插件概述
导入
【一次性导入】
Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)
【单独导入】
为方便单独导入特效文件,Bootstrap提供了12种JavaScript插件,他们分别是:
☑ 动画过渡(Transitions):对应的插件文件“transition.js”
☑ 模态弹窗(Modal):对应的插件文件“modal.js”
☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js”
☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”
☑ 选项卡(Tab):对应的插件文件“tab.js”
☑ 提示框(Tooltips):对应的插件文件“tooltop.js”
☑ 弹出框(Popover):对应的插件文件“popover.js”
☑ 警告框(Alert):对应的插件文件“alert.js”
☑ 按钮(Buttons):对应的插件文件“button.js”
☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js”
☑ 图片轮播Carousel:对应的插件文件“carousel.js”
☑ 自动定位浮标Affix:对应的插件文件“affix.js”
data属性
可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是首选方式。
话又说回来,在某些情况下可能需要将此功能关闭。因此,还提供了关闭 data 属性 API 的方法,即解除以 data-api
为命名空间并绑定在文档上的事件。就像下面这样:
$(document).off('.data-api')
另外,如果是针对某个特定的插件,只需在 data-api
前面添加那个插件的名称作为命名空间,如下:
$(document).off('.alert.data-api')
API
Bootstrap为所有插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合,和jQuery的调用形式一致
$('.btn.danger').button('toggle').addClass('fat')
所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化)
$('#myModal').modal() // 以默认值初始化
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // 初始化后立即调用 show 方法
每个插件还通过 Constructor
属性暴露了其原始的构造函数:$.fn.popover.Constructor
。如果想获取某个插件的实例,可以直接通过页面元素获取:$('[rel="popover"]').data('popover')
【默认设置】
每个插件都可以通过修改其自身的 Constructor.DEFAULTS
对象从而改变插件的默认设置:
$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false
【避免命名空间冲突】
某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不幸发生了这种情况,可以通过调用插件的 .noConflict
方法恢复其原始值
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
【事件】
Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词的命名形式,例如,不定式形式的动词(例如 show
)表示其在事件开始时被触发;而过去式动词(如shown
)表示在动作执行完毕之后被触发。
所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault
功能。这就赋予在动作开始执行前将其停止的能力
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // 阻止模态框的展示
})
过渡效果
Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法:
☑ 调用统一编译的bootstrap.js;
☑ 调用单一的过渡动画的JavaScript插件文件transition.js
transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果
默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:
☑ 模态弹出窗(Modal)的滑动和渐变效果;
☑ 选项卡(Tab)的渐变效果;
☑ 警告框(Alert)的渐变效果;
☑ 图片轮播(Carousel)的滑动效果
transition.js 是针对 transitionEnd
事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果
通过下面的代码可以在全局范围禁用过渡效果,并且必须将此代码放在transition.js(
或bootstrap.js
或bootstrap.min.js
)后面,确保在js文件加载完毕后再执行下面代码
$.support.transition = false
Bootstrap插件概述的更多相关文章
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
随机推荐
- stm32cubemx学习要点记录
如果有些外设的HAL库函数找不到的话,你可以到IAR工程的文件夹显示栏中找如下图所示:
- 【Codeforces 912E】Prime Gift
Codeforces 912 E 题意:给\(n\leq16\)个素数\(p_1..p_n\),求第\(k\)个所有质因数都在\(n\)个数中的数. 思路:折半搜索...我原来胡搞毛搞怎么也搞不动\( ...
- ubuntu 解决TXT文本的乱码的问题。
windows 系统上编辑的 txt 文本,在ubuntu上出现 乱码,我是这样解决的 1.terminal上输入以下命令: gsettings set org.gnome.gedit.prefere ...
- 加解密工具类(含keystore导出pfx)
java代码如下: package sign; import java.io.FileInputStream; import java.io.FileOutputStream; import java ...
- 如何在Virtual box 下安装Mac os
这几天,突然奇想,想要试一试Mac os ,毕竟是贵族系统,装完之后,确实感觉字体很不错. 其他更优秀的功能还没发现,不过,还是希望在这里做一个记录. 以下附录我参照的网址:https://blog ...
- 一个简单的javascript节流器实现
节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台 ...
- React-简书视频学习总结
react的基础语法 redux这个数据层框架 react-redux如何方便我们在react中使用redux react-router 4.0 这样的非常实用的相关的第三方模块儿 immutable ...
- 大话设计模式之模板模式 C#
学无止境,精益求精 十年河东,十年河西,莫欺少年穷 今天一起探讨模板模式,如下: 一.概念 上一篇文章讲了大话设计模式:原型模式,原型模式主要是通过Clone()方法<深浅复制>,创建新的 ...
- 理解标准盒模型和怪异模式&box-sizing属性
盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...
- 懒人小工具:T4生成实体类Model,Insert,Select,Delete以及导出Excel的方法
由于最近公司在用webform开发ERP,用到大量重复机械的代码,之前写了篇文章,懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法,但是有人觉得这种方法 ...