Plugins 概述

优质

小牛编辑

125浏览

2023-12-01

在Layout Components下的前几章中讨论的Layout Components仅仅是开始。 Bootstrap捆绑了12个jQuery插件，可以扩展这些功能，并可以为您的网站添加更多交互。要开始使用Bootstrap的JavaScript插件，您不需要成为高级JavaScript开发人员。通过使用Bootstrap Data API，可以在不编写任何代码的情况下触发大多数插件。

Bootstrap插件可以以两种形式包含在您的网站上 -

Individually使用 - 使用Bootstrap的各个*.js文件。一些插件和CSS组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。
或compiled (all at once) - 使用bootstrap.js或缩小的bootstrap.min.js 。不要尝试包含两者，因为bootstrap.js和bootstrap.min.js都包含单个文件中的所有插件。

所有插件都依赖于jQuery。因此必须在插件文件之前包含jQuery。检查bower.json以查看支持哪些版本的jQuery。

数据属性

可以使用附带的Data API访问所有Bootstrap插件。因此，您不需要包含一行JavaScript来调用任何插件功能。
在某些情况下，可能需要关闭Data API的此功能。如果您需要关闭Data API，可以通过添加以下JavaScript行来取消绑定属性 -

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

要关闭特定/单个插件，只需将插件的名称作为命名空间以及data-api命名空间包含，如下所示 -

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

程序化API

Bootstrap的开发人员相信你应该能够纯粹通过JavaScript API使用所有插件。所有公共API都是单一的，可链接的方法，并返回收集的集合，例如 -

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

所有方法都接受一个可选的选项对象，一个以特定方法为目标的字符串，或者什么都没有（它启动一个具有默认行为的插件），如下所示 -

// initialized with defaults
$("#myModal").modal()    
 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  
// initializes and invokes show immediately
$("#myModal").modal('show')

每个插件还在Constructor属性上公开其原始构造Constructor : $.fn.popover.Constructor 。如果您想获得特定的插件实例，请直接从元素中检索它 -

$('[rel = popover]').data('popover').

没有冲突

Bootstrap插件有时可以与其他UI框架一起使用。在这些情况下，偶尔会发生命名空间冲突。要在插件上克服此调用.noConflict ，您希望还原其值。

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()
// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

事件 (Events)

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

Infinitive form - 这是在事件开始时触发的。 Eg show 。不定式事件提供preventDefault功能。这提供了在动作开始之前停止执行的能力。

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

Past participle form - 这是在动作完成时触发的。 Eg shown.