Bootstrap插件概览

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

你也可以学习Bootstrap的js插件。利用Bootstrap数据api(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。

站点引用bootstrap插件的方式有两种:

单独引用:使用Bootstrap的个别的*.js文件。一些插件和css组件依赖于其他插件。如果您单独引用插件,请先确保弄清楚这些插件之间的依赖关系。

编译(同时)引用:使用Bootstrap.js或压缩版的bootstrap.min.js

不要尝试同时引用这两个文件,因为bootstrap.js和bootstrap.min.js都包含了所有的插件。

所有的插件依赖于jQuery。所以必须在插件文件之前引用jQuery.请访问bower.json.查看boostrap当前支持的jQuery版本。

data属性

你可以仅仅通过data属性API就能使用所有的bootstap插件,无需写一行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')

所有的方法都可以接受一个可选的选项作为参数,或者一个代 ,表特定的方法的字符串,或者不带参数(这种情况下,将会初始插件为默认行为),如下所示

$('#myModel').modal();

//初始化不支持键盘

$('myModel').model({keyborad:false})

初始化并立即调用 show

$('#myModel').modal('show')

每个插件在Constructor属性上也暴露了其原始的构造函数:$.fn.popover.Constructor.如果你想获取某个特定插件的实例,可以直接通过页面元素获取

$('[rel=popover]').data('popover').

避免命名空间冲突

某些时候Bootstrap插件可能需要与其他ui框架一起使用.中这种情况下,可能会发生命名空间冲突。如果不幸发生了这种情况,你可以通过调用插件的

.noconflict方法恢复其原始值。

var bootstrapButton=$.fn.button.noConflict();

//为$().bootstrapBtn赋予Bootstrap功能

$.fn.bootstrapBtn=bootstrapButton

事件

Bootstrap为大多数插件的独特行为提供了自定义事件。一般来说,这些事件有两种形式

动词不定式:这会在事件开始时被触发。例如ex:show.动词不定式事件提供了preventDefault功能。这使得事件开始前可以停止操作的执行。

$('#myModel').on('show.bs.model',function(e)

  //阻止模态框的显示

if(!data)return e.preventDefault();

过去分词形式:这会在动作执行完毕之后被触发。

)

bootstrap学习笔记 插件概述的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

随机推荐

  1. 【深度搜索+剪枝】POJ1011-Sticks

    深搜部分和之前的POJ2362差不多,只是有几处需要额外的剪枝. [思路]排序后从最短木棒开始搜索至木棒长总和,如果木棒长总和sum能整除当前棒长,则进入深搜. [剪枝]先前POJ2362的剪枝部分不 ...

  2. 数据库之mysql的基本操作

    1 数据库 1.1 数据库介绍 为什么要有数据库? 数据需要大量的存储,把数据永久保存下来,可以保存到文件中,当然也可以保存到数据库中. 数据库:通俗的说,存储数据的仓库,是管理数据的文件夹:存放数据 ...

  3. 鹦鹉学舌1——C语言初学者百题大战之三

    #include<stdio.h> int main() { int a; scanf("%d",&a); printf("%d",a-a+ ...

  4. 数据结构--汉诺塔--借助栈实现非递归---Java

    /*汉诺塔非递归实现--利用栈 * 1.创建一个栈,栈中每个元素包含的信息:盘子编号,3个塔座的变量 * 2.先进栈,在利用循环判断是否栈空, * 3.非空情况下,出栈,检查是否只有一个盘子--直接移 ...

  5. 一段javascript设计模式应用场景

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. 深入分析JavaWeb Item40 -- 文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是很经常使用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传.浏览器在上传的过程中是将文件以流的形式提交到server端的.假设 ...

  7. linux CMakeLists.txt 语法

    CMake入门教程 参考文献:http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/index.html 官方网址:http://www.cmak ...

  8. 【Todo】机器学习系列

    看了这篇文章很好,有很多指导性思想: http://www.cnblogs.com/tornadomeet/p/3395593.html 另外这个人的系列文章里面也有很多干货. 就看这个系列的吧: h ...

  9. 如何使用SQLMAP绕过WAF

    WAF(web应用防火墙)逐渐成为安全解决方案的标配之一.正因为有了它,许多公司甚至已经不在意web应用的漏洞.遗憾的是,并不是所有的waf都是不可绕过的!本文将向大家讲述,如何使用注入神器SQLMa ...

  10. ASPCMS不能上传2M以上大文件修改!

    \admin_aspcms\editor\upload.asp修改80行左右maxattachsize=xxxxxxxx'最大上传大小,默认是2M前提是IIS上传大小已修 其他有关IIS方面的修改: ...