1.引导插件概述。

上一节讨论的布局组件只是一个开始。Bootstrap自带12个jQuery插件，扩展了它的功能，可以给站点增加更多的交互。即使你不是高级JavaScript开发人员，也可以开始学习Bootstrap的JavaScript插件。使用Bootstrap数据API，无需编写任何代码就可以触发大多数插件。

2.导入JavaScript插件。

Bootstrap包含丰富的Web组件，如下拉菜单、按钮组、导航、分页等。它还包括一些JavaScript插件。

Bootstrap的JavaScript插件可以单独导入页面，也可以一次导入。因为Bootstrap中的JavaScript插件都依赖于jQuery库，所以必须先导入jQuery库，然后才能单独导入或一次性导入。

导入一次：

Bootstrap提供单个文件，包含Bootstrap的所有JavaScript插件，即bootstrap.js(压缩版：bootstrap.min.js)。

！-导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery-script src=' http :/jQuery/1 . 9 . 0/jQuery . js '/script！-一次性导入Bootstrap的所有JavaScript插件(压缩版)-脚本src=' http : js/Bootstrap . min . js '/脚本单独导入：

为了便于单独导入特效文件，Bootstrap V3.2提供了12个JavaScript插件，它们是：

Transitions):对应于插件文件“transition.js”。

对应于Modal):的插件文件“modal.js”。

下拉菜单：对应的插件文件“dropdown.js”。

Scrollspy:对应的插件文件“scrollspy.js”。

Tab:对应的插件文件“tab.js”。

工具提示：对应的插件文件“tooltop.js”。

Popover:对应的插件文件“popover.js”。

预警框：对应的插件文件“alert.js”。

按钮：对应的插件文件“button.js”。

折叠/手风琴：对应的插件文件“collapse.js”。

图片轮播：对应的插件文件“carousel.js”。

自动定位浮标词缀：对应插件文件“词缀. js”。

3.数据属性。

您可以仅通过数据属性API使用所有Bootstrap插件，而无需编写一行JavaScript代码。这是Bootstrap中的一流API，应该是你的首选。

同样，在某些情况下，可能需要关闭此功能。因此，我们还提供了一种关闭数据属性API的方法，即以data-api作为命名空间来释放绑定到文档的事件。就像这样：

$(文档)。关闭('。数据API’)

要关闭一个特定的插件，只需在data-api名称空间之前添加插件的名称作为名称空间，如下所示：

$(文档)。关闭(' alert.data-api ')

4.编程模式的API。

我们为所有Bootstrap插件提供纯JavaScript模式的API。所有公开的API都支持单个或链调用，并返回它们操作的元素集合(注意：调用形式与jQuery相同)。例如：

$(. BTN . danger ')。按钮('切换')。addClass('fat ')

的所有方法都可以接受可选的option对象作为参数，或者接受表示特定方法的字符串，或者不接受任何参数(在这种情况下，插件将被初始化为默认行为)，如下所示：

//初始化为默认行为$(“# MyModal”)。modal() //初始化为键盘$ ('# mymodal ')。modal({ keyboard : false })//初始化并立即调用show$('#myModal ')。情态(' show ')。如果您想要获取特定插件的实例，可以直接通过page元素获取：

$('[rel=popover]')。数据(' popover ')。

5.避免命名空间冲突。

有时，引导插件可能需要与其他用户界面框架一起使用。在这种情况下，可能会发生命名空间冲突。如果不幸发生这种情况，您可以通过调用插件的。noConflict方法。

//返回在$ . fn . button var Bootstrap button=$ . fn . button . noconfiglict()之前赋值//将Bootstrap函数赋予$()。bootstrapBtn $ . fn . bootstrap BTN=bootstrap button 6，event。

Bootstrap为大多数插件的独特行为提供自定义事件。一般来说，这些事件有两种形式：不定式：这将在事件开始时触发。例如ex: show。不定式事件提供了preventDefault的功能。这使得在事件开始之前停止操作的执行成为可能。

$ ('#我的模态')。on ('show.bs.modal '，函数(e){//防止显示modal box if(！Data)返回e.preventDefault()})过去分词形式：这将在动作执行后触发。例如所示的ex:

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

以上就是本文的全部内容，希望对大家的学习有所帮助。