Bootstrap JavaScript插件： JavaScript 插件引入前提

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

引入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中的函数可以有不同的参数值，这些参数值就是根据你给标签的属性来设置的。

标签的class="xxx" 属性，主要是用来使用bootstrap的css样式，以及作为一个可识别对象对象的类名标识。
标签的data-[xx]="yy"属性，主要是用来使用和调用bootstrap的组件和插件，也就是使用bootstrap.js来实现一些交互效果。

3. Bootstrap 常见data属性

(1) data-toggle以什么事件触发 , 告诉JS需要对按钮做什么。常用的如下：

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-属性作用于文档元素上的事件。如下：

$(document).off('.data-api') //data-api 绑定事件的数据属性（data属性）

如果是针对某个特定的插件，只需在data-api前面添加那个插件的名称作为命名空间，例如：

$(document).off('.alert.data-api')

---

编程方式的 API

所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（和jQuery的调用形式一致）。

$('.btn.danger').button('toggle').addClass('fat')

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下：

// 初始化为默认行为
 $("#myModal").modal()
// 初始化为不支持键盘
 $("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
 $("#myModal").modal('show')

---

避免命名空间冲突

某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用，这时候可能就会产生命名空间冲突，通过调用插件的.noConflict方法恢复其原始值。

var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前所赋的值
$.fn.bootstrapBtn = bootstrapButton            // 为 $().bootstrapBtn 赋予 Bootstrap 功能

---

事件

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

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

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

2、 过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

---

版本号

每个 Bootstrap 的 jQuery 插件的版本号都可以通过插件的构造函数上的VERSION属性获取到。例如工具提示框（tooltip）插件：

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

---

就先分享到这里!! 😄 后续继续更新!!