Bootstrap 插件的选项

插件的选项

为了对插件提供更多的控制，Bootstrap为某些插件提供了一些选项。对于所有的插件，这些选项都可以通过 data 属性或JavaScript进行设置。

如果使用 data 属性，则要将选项名称放在 data- 的后面。比如，模态对话框的 keyboard 属性，就要写成类似于 data-keyboard="" 的形式。如：

1. data-toggle="modal" data-target="#myModal" data-keyboard="false">Demo

如果使用JavaScript代码，直接使用选项名称即可。如：

Bootstrap中的所有插件，都允许使用 data() 方法来获取 data-* 属性的值。假设以下HTML代码片段：

1. id="launch" data-toggle="modal" data-target="#myModal">Launch Modal

使用以下代码，就可以获取 data-toggle 属性的值：

1. $('#launch').data('toggle')

在调用 data() 方法时，如果没有传递任何参数，如 $('#launch').data()，则表示一次性收集所有以 data- 开头的属性的值，并返回一个对象，其结果就像使用如下方式声明一个 value 变量：

1. var value = {
2.   toggle: 'modal',
3.   target: 'target'
4. }

Bootstrap中的很多插件都是利用这个特性，在HTML元素上自定义一些必要的参数，然后在脚本中通过 data() 方法来收集这些参数，并加以使用。

关于作者

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