Bootstrap/docs/4.5/getting-started/javascript

来自菜鸟教程
跳转至:导航、​搜索

使用我们基于jQuery构建的可选JavaScript插件,使Bootstrap栩栩如生。 了解每个插件,我们的数据和程序化API选项以及更多信息。

个别或编译

可以单独包含插件(使用Bootstrap的个人插件) js/dist/*.js ),或一次全部使用 bootstrap.js 或缩小 bootstrap.min.js (不要同时包括两者)。

如果您使用捆绑器(Webpack,汇总…),则可以使用 /js/dist/*.js UMD准备就绪的文件。

依赖

一些插件和CSS组件依赖于其他插件。 如果您单独包含插件,请确保在文档中检查这些依赖性。 另请注意 所有插件都依赖jQuery (这意味着必须包含jQuery 之前 插件文件)。 咨询我们 package.json 查看支持哪些版本的jQuery。

我们的下拉菜单,弹出窗口和工具提示还取决于 Popper.js .

资料属性

几乎所有的Bootstrap插件都可以通过带有数据属性的HTML单独启用和配置(我们使用JavaScript功能的首选方式)。 务必 仅在单个元素上使用一组数据属性 (例如,您无法通过同一按钮触发工具提示和模式。)

但是,在某些情况下,可能需要禁用此功能。 要禁用数据属性API,请取消绑定文档中以命名的所有事件 data-api 像这样:

另外,要定位特定的插件,只需将插件的名称作为名称空间以及data-api命名空间包括在内,如下所示:

选择器

当前,要查询DOM元素,我们使用本机方法 querySelector and querySelectorAll 由于性能原因,因此您必须使用 有效的选择器 如果使用特殊选择器,例如: collapse:Example 确保逃脱。


活动

Bootstrap为大多数插件的唯一操作提供自定义事件。 通常,这些词有不定式和过去分词形式-不定式(例如 show )在事件开始时以及其过去分词形式(例如 shown )在操作完成时触发。

所有不定式事件都提供 preventDefault() 功能。 这提供了在动作开始之前停止执行的能力。 从事件处理程序返回false也会自动调用 preventDefault().

程序化API

我们还相信您应该能够完全通过JavaScript API使用所有Bootstrap插件。 所有公共API都是可链接的单个方法,并返回所作用的集合。

所有方法都应接受可选的options对象,以特定方法为目标的字符串或不包含任何内容(以默认行为启动插件):

每个插件还将其原始构造函数公开在 Constructor 属性: $.fn.popover.Constructor 。如果您想获取特定的插件实例,请直接从元素中检索它: $('[rel="popover"]').data('popover').

异步功能和转换

所有编程API方法都是 异步 并在过渡开始后返回到呼叫者,但是 在结束之前 .

为了在转换完成后执行动作,您可以监听相应的事件。

另外,方法调用 过渡组件将被忽略 .

默认设置

您可以通过修改插件的默认设置来更改其默认设置 Constructor.Default 宾语:

没有冲突

有时有必要将Bootstrap插件与其他UI框架一起使用。 在这些情况下,名称空间冲突有时会发生。 如果发生这种情况,您可以致电 .noConflict 在您要还原其值的插件上。

版本号

每个Bootstrap jQuery插件的版本都可以通过 VERSION 插件的构造函数的属性。 例如,对于工具提示插件:

禁用JavaScript时没有特殊的后备

禁用JavaScript后,Bootstrap的插件不会特别优雅地回退。 如果您在这种情况下关心用户体验,请使用 <noscript> 向您的用户说明情况(以及如何重新启用JavaScript),和/或添加您自己的自定义后备广告。

第三方图书馆

Bootstrap不正式支持第三方JavaScript库 例如Prototype或jQuery UI。 尽管 .noConflict 和命名空间事件,则可能需要自己解决兼容性问题。


Util

所有Bootstrap的JavaScript文件都取决于 util.js 并且必须与其他JavaScript文件一起包含。 如果您使用的是已编译(或最小化) bootstrap.js ,则无需包含它-它已经存在。

util.js 包括实用程序功能和基本的帮助程序 transitionEnd 事件以及CSS过渡模拟器。 其他插件使用它来检查CSS过渡支持并捕获挂起的过渡。

消毒液

工具提示和弹出窗口使用我们内置的清理工具来清理接受HTML的选项。

默认值 whiteList 值如下:

如果要向此默认值添加新值 whiteList 你可以做以下事情:

如果您因为喜欢使用专用库而想绕过我们的消毒剂,例如 净化 ,您应该执行以下操作: