单个还是全部引入

JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js)。
建议使用压缩版的 JavaScript 文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。
插件之间的依赖关系
某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

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 )表示在动作执行完毕之后被触发。
从 3.0.0 版本开始,所有 Bootstrap 事件的名称都采用命名空间方式。
所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // 阻止模态框的展示
})

获得版本号

$.fn.tooltip.Constructor.VERSION // => "3.3.5"

未对禁用 JavaScript 的浏览器提供补救措施

Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话,请添加 <noscript> 标签向你的用户进行解释(并告诉他们如何启用 JavaScript),或者按照你自己的方式提供补救措施。

第三方工具库

Bootstrap 官方不提供对第三方 JavaScript 工具库的支持,例如 Prototype 或 jQuery UI。除了 .noConflict 和为事件名称添加命名空间,还可能会有兼容性方面的问题,这就需要你自己来处理了。

Bootstrap提供了常见插件

1.模态对话框(Modal)

2.下拉项(Dropdown):实现下拉功能,如下拉菜单、下拉按钮、下拉工具条等。

3.滚动监听(Scrollspy):实现滚动条位置的效果,如在导航中有多个标签,点击其中一个标签,滚动条会自动定位到导航中标签对应的文本位置。

4.Tab标签页(Tab):快速实现本地内容的切换,动态切换标签页对应的本地内容。

5.工具提示(ToolTip):无需加在任何图片,采用CSS3新技术,动态显示data-attributes存储的标题信息。

6.弹出提示(Popover):用来显示一些叠加内容的提示效果,此插件需要配合Tooltips使用。

7.警告框(Alert):用来关闭警告信息块。

8.按钮(Button):用来控制按钮状态货更多组件功能,如复选框、单选按钮,以及载入状态条等。

9.折叠(Collapse):手风琴效果,用来制作折叠面板或菜单等效果。

10.轮播(Carousel):实现图片播放功能。

11.输入提示(Typeahead):可以记住文本框输入的文本,下次输入时可以及时自动补全。

12.过渡效果(Transition):为一些动画效果增加过渡。

更多Bootstrap优秀插件

1.Sco.js(http://www.bootcss.com/p/sco.js/) :对Bootstrap中Js插件的增强实现。

2.Chart.js(http://www.bootcss.com/p/chart.js):图标绘制工具库。

3.bsie(http://www.bootcss.com/p/bsie/):能在IE6上支持Bootstrap的大部分特性。

4.jQuery UI Bootstrap(http://www.bootcss.com/p/jquery-ui-bootstrap/):使Bootstrap和jQuery UI可以完美融合。

5.Flat UI(http://www.bootcss.com/p/flat-ui/):基于Bootstrap做的Metro化改造。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。

6.Metro UI CSS(http://www.bootcss.com/p/metro-ui-css/):用来创建类似于Windows 8 Metro UI风格网站的样式。

7.HTML5Boilerplate(http://www.bootcss.com/p/html5boilerplate/)用来开发快速、健壮、适应性强的App或网站。

Bootstrap进阶三:jQuery插件概览的更多相关文章

  1. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  4. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  5. Bootstrap进阶四:jQuery插件详解

    一.模态对话框(Modal) 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框, ...

  6. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  7. jQuery插件库代码分享 - 进阶者系列 - 学习者系列文章

    这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家. 见下图结构. 对目录结构进行了分类.这里是插件列表. 这里总共收集了20来个插件.还有下面未进行划分的. 下面是DEMO ...

  8. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  9. jQuery插件综合应用(三)发布文章页面

    一.使用的插件 一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成 ...

随机推荐

  1. bzoj千题计划159:bzoj2055: 80人环游世界(有源汇上下界可行最小费用流)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2055 某个国家必须经过vi次, 可以转化为上下界都为vi的边 对这张图做有源汇上下界可行最小费用流 ...

  2. bzoj千题计划142:bzoj3144: [Hnoi2013]切糕

    http://www.lydsy.com/JudgeOnline/problem.php?id=3144 如果D=2 ,两个点,高度为4,建图如下 #include<queue> #inc ...

  3. 容器启动报iptables错误

    # systemctl stop docker # iptables -t nat -F # ifconfig docker0 down # brctl delbr docker0   # 命令由br ...

  4. git push时报错fatal: Could not read from remote repository.

    后来发现,出现这个问题是因为仓库地址不对 使用如下命令先查看一下: $ git remote -v 发现跟github的地址不一致 然后在终端输入:git remote set-url origin ...

  5. python 压缩每周生成的数据文件

    为了便于整理部分业务数据,以及存储管理, 写了此脚本.后期如果有需求,再改一下. #!/usr/bin/env python #coding:utf8 import os,sys,time,comma ...

  6. IE6下面的css调试工具

    在开发过程中,代码部分实现之后,就要着手于前台展示部分的界面,公司的美工又是新手,无奈,只有自己慢慢调了,但IE6之前的版本都没有好的调试工具,后来在网上搜索了一个 IE Developer Tool ...

  7. 退役 AFO

    noi滚粗了 D类没学校要 回去高考 此博客停止更新 此文章可能会继续更新 看心情 [upd 2017.11.13] 看完今年noip log级别数据结构终于出现辣! 看来noip以后又多了一大块考点 ...

  8. opencv产生随机的颜色

    //将HSV颜色空间值转换成RGB值,参考这里cv::Scalar HSV2RGB(const float h, const float s, const float v) { ); - h_i; - ...

  9. 【leetcode 简单】 第一百零六题 压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  10. 【leetcode 简单】 第九十三题 二进制手表

    二进制手表顶部有 4 个 LED 代表小时(0-11),底部的 6 个 LED 代表分钟(0-59). 每个 LED 代表一个 0 或 1,最低位在右侧. 例如,上面的二进制手表读取 “3:25”. ...