## JavaScript 插件引入前提 **引入js文件** `bootstrap.js`和`bootstrap.min.js`都包含了所有插件，你在使用时，只需选择一个引入页面就可以了， 建议使用压缩版的 JavaScript 文件（`bootstrap.min.js`）。 注意：所有插件都依赖 jQuery （也就是说，jQuery必须在`bootstrap.min.js`之前引入页面）。 ***** **data 属性** **1.** data-属性 data属性是HTML5的新属性。允许开发者自由给任意标签添加属性来存储数据，存储的（自定义）数据能够被页面的 JavaScript 中利用。这种自定义属性一般用“data-”开头。 data-\* 属性因注意的两个部分： （1）属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符。 （2）属性值可以是任意字符串。 简单点来说，data-属性就是让HTML标签可以隐式的附带一些数据，而javascript就可以对这些属性数据进行操作 , 从而可以做出相应的动作和事件。 **2.** Bootstrap 中的data属性 以前我们使用原生的javascript时候，是先确定了前端布局以及交互事件，然后在去利用javascript以及HTML的DOM节点去操作已经存在文本对象，从而实现页面动态效果等交互。 后来facebook公司就发现，很多基本网页上效果是比较常用的，比如下拉菜单、折叠、模态框等等。为什么不把这些常用的提取出一套标准模型，然后制定出使用规则，使用时按照这些规则直接拿来使用就可以了，于是就诞生了bootstrap。 简单点来说，以前如果我们要实现某些网页交互效果必须要有功能需求，然后结合js以及HTML的DOM节点来慢慢实现，但是现在你想实现某个交互效果，只需要直接按照他的规则调用（通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。）就可以实现，。然后为了能更多样化,bootstrap.js中的函数可以有不同的参数值，这些参数值就是根据你给标签的属性来设置的。 ```markdown 标签的class="xxx" 属性，主要是用来使用bootstrap的css样式，以及作为一个可识别对象对象的类名标识。 标签的data-[xx]="yy"属性，主要是用来使用和调用bootstrap的组件和插件，也就是使用bootstrap.js来实现一些交互效果。 ``` **3.** Bootstrap 常见data属性 (1) `data-toggle`以什么事件触发 , 告诉JS需要对按钮做什么。常用的如下： ```html data-toggle="dropdown" //下拉菜单 data-toggle="model" //模态框事件 data-toggle="tooltip" //提示框事件 data-toggle="tab" //标签页 data-toggle="collapse" //折叠 data-toggle="popover" //弹出框 data-toggle="button" //按钮事件 ``` 一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-toggle和data-target有时会结合一起使用。 (2) `data-target`指：事件作用的目标元素。 (3) `data-dismiss`常见的是在模态窗口中用于关闭模态窗口 data-dismiss=”modal”。 (4) `data-slide-to`、`data-slide`、`data-ride`用于轮播图carousel。 属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置； 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数；data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。 **注意：** 不要在同一个元素上使用来自多个插件的数据属性，也就是说一个元素上只能有一个data-属性。例如，按钮不能同时具有工具提示和切换模式。 另外，在某些情况下可能需要将此功能关闭。因此，官网还提供了关闭 data 属性 API 的方法，来解除data-属性作用于文档元素上的事件。如下： ```js $(document).off('.data-api') //data-api 绑定事件的数据属性（data属性） ``` 如果是针对某个特定的插件，只需在`data-api`前面添加那个插件的名称作为命名空间，例如： ```js $(document).off('.alert.data-api') ``` ***** **编程方式的 API** 所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（和jQuery的调用形式一致）。 ```js $('.btn.danger').button('toggle').addClass('fat') ``` 所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下： ```js // 初始化为默认行为 $("#myModal").modal() // 初始化为不支持键盘 $("#myModal").modal({ keyboard: false }) // 初始化并立即调用 show $("#myModal").modal('show') ``` ***** **避免命名空间冲突** 某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用，这时候可能就会产生命名空间冲突，通过调用插件的`.noConflict`方法恢复其原始值。 ~~~js var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前所赋的值 $.fn.bootstrapBtn = bootstrapButton // 为 $().bootstrapBtn 赋予 Bootstrap 功能 ~~~ ***** **事件** Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式： 1 、 动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。 ~~~js $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // 阻止模态框的展示 }) ~~~ 2、 过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。 ***** **版本号** 每个 Bootstrap 的 jQuery 插件的版本号都可以通过插件的构造函数上的`VERSION`属性获取到。例如工具提示框（tooltip）插件： ~~~js $.fn.tooltip.Constructor.VERSION // => "3.3.7" ~~~