Bootstrap/docs/4.5/getting-started/javascript
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
你可以做以下事情:
如果您因为喜欢使用专用库而想绕过我们的消毒剂,例如 净化 ,您应该执行以下操作: