Bootstrap 调用插件

调用插件

Bootstrap的所有插件，都支持两种调用方式，一种是 data 属性调用，一种是JavaScript调用，可以根据需要选择其中一种使用。

1、data属性调用

使用 data 属性调用，只需为HTML元素添加相应的 data-* 属性，而无需再添加额外的JavaScript代码。在加载网页时，Bootstrap的JavaScript插件会自动检测这些元素，并自动绑定相应的事件。

data-* 属性是HTML5新支持的语法，它允许开发人员元素添加一些自定义属性，通过这些属性来存储页面或应用程序的私有数据，然后通过JavaScript获取数据并加以使用。

比如，Bootstrap中的 data-toggle 属性，用来存储要激活插件的类型。在脚本中，只要获取它的值，就知道要激活什么插件。如，取值“dropdown”，就表示激活下拉菜单：

1. <a class="btn" data-toggle="dropdown" href="#">Dropdown</a>

这种方法无需添加额外的JavaScript代码，它是最简单实用、最实用的方法，对于没有JavaScript基础的用户来说，建议首选这种调用方式。

说明：

在某些特殊情况下，可能需要解除对 data-* 属性的绑定。只需将 body 元素上，命名空间为 '.data-api' 的事件全部禁用即可。代码如下：

1. $('body').off('.data-api')

如果只想解除特定插件的 data-* 属性绑定，只需禁用该插件所在命名空间下的事件即可。如，只解除 alert 插件的 data-* 属性绑定：

1. $('body').off('.alert.data-api')

2、JavaScript调用

Bootstrap为所有插件都提供了JavaScript API，可以使用这些API来调用相应的插件，而不必为元素定义 data-* 属性。

JavaScript的这些API跟jQuery的API用法相同，都支持单独调用和链式调用，并返回操作对象的集合。如：

1. $(".btn.danger").button("toggle").addClass("fat")

所有的API，都可以接受一个可选的对象参数、或一个有特定意义的字符串、或不传递任何参数（即，使用默认默认值）。如：

1. $("#myModal").modal({ keyboard: false })   // 初始化时，keyboard 选项的值为 false
2. $("#myModal").modal('show')             // 初始化，并立即调用 show 方法
3. $("#myModal").modal()                   // 所有选项，均使用默认值进行初始化

所有的插件，都允许使用Constructor属性访问插件的构造函数。如：

1. $.fn.modal.Constructor

   关于作者

   歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。