• JavaScript 脚本
    • 单个引用或者编译
    • 依赖关系
    • 数据属性
    • JS事件(Event)
    • 编程化的API
      • 异步函数和转换
      • 默认设置
    • 无冲突处理
    • 版本管理
    • 当JavaScript被禁用时，没有特殊的回调机制
      • 第三方库
  • Util方法
  • 清理器

    JavaScript 脚本

    Bootstrap 包括一些 JavaScript 帮助用户做出更加充满生机、活动的项目。欢迎学习更多关于如何去调用动态事件、灵活展示的数据和编程性的API选项等。

    单个引用或者编译

    插件可以单独包含（使用Bootstrap的单独js/dist/*.js），也可以使用bootstrap.js或缩小的bootstrap.min.js（不包括两者）一次性包含。

    如果使用bundler（Webpack，Rollup …），则可以使用UMD就绪的/js/dist/*.js文件。

    依赖关系

    一些插件和CSS组件依赖于其它插件，这在系统中是被允许的。如果你要单个调用插件，请先在文档中检查它们的依赖关系。还要注意，所有插件都依赖于jQuery（即jQuery必须在所有JS插件文件之前调用）。参考 Consult our package.json可以以了解哪些详尽版本的jQuery是被支持的。比如下拉菜单dropdowns、提示组件popovers、冒泡组件等都提依赖于Popper.js。

    数据属性

    通过HTML的数据属性几乎能启用并配置所有的Bootstrap插件（我们更倾向于函数化地使用JavaScript）。，住只能在单个元素上使用一套数据属性（例如，不能在一个按钮上同时触发一个工具提示和一个模态框）。

    在某些情况下，可能需要禁用此功能。要禁用数据属性API，可用下面的方法在文档中解绑所有的带data-api命名空间的事件：

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

    如需要指向特定的插件，只需要在调用插件的全名空间上拼接data-api作为命名空间，如下所示：

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

    JS事件(Event)

    Bootstrap为大多数插件的独一无二的行为提供了自定义事件。通常情况下，这里会有动词不定式和过去分词形式—如果在事件的开始触发了它的动词不定式（如show），而shown在完成某个动作后触发其过去分词形式（如shown）。

    所有不定式事件都提供preventDefault()功能，从而使开发者设计一个动作开始之前就能终止它的执行。从事件处理程序返回false同样也是自动调用preventDefault()功能。

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

    编程化的API

    我们还相信，你能够纯粹通过JavaScript API来使用所有的Bootstrap插件。所有的公共的API都是单一的，可链接的方法，并返回执行的集合。

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

    所有的方法都能够接收一个可取舍的options对象、一个指向特定方法的字符串，或者不接收参数（不带参数地调用这个方法将用默认行为初始化一个插件）：

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

    每个插件都需要在Constructor属性上明文曝露它的原始构造函数$.fn.popover.Constructor。如果你想获得一个特定的插件实例，可以从一个元素中直接获得它：$('[rel="popover"]').data('popover')。

    异步函数和转换

    All programmatic API methods are asynchronous and returns to the caller once the transition is started but before it ends.

    所有编程化的API方法均为异步，一旦转换开始并在结束之前返回给调用者。如果需要在转换完成后执行动作，您可以收听相应的事件（进行侦听并作出下一步的编程）：

    1. $('#myCollapse').on('shown.bs.collapse', function (e) {
    2.   // Action to execute once the collapsible area is expanded
    3. })

    另外，transition过渡组件上的方法调用将被忽略:

    1. $('#myCarousel').on('slid.bs.carousel', function (e) {
    2.   $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
    3. })
    5. $('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
    6. $('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

    默认设置

    用户可以通过修改插件的 Constructor.Default对象来更改插件的默认设置：

    1. // changes default for the modal plugin's `keyboard` option to false
    2. $.fn.modal.Constructor.Default.keyboard = false

    无冲突处理

    有时，必须使用Bootstrap插件和其他UI框架。在这种情况下，偶尔会发生命名空间冲突。如果发生这种情况，您可以调用.noConflict恢复插件的值：

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

    版本管理

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

    1. $.fn.tooltip.Constructor.VERSION // => "4.3.1"

    当JavaScript被禁用时，没有特殊的回调机制

    Bootstrap插件在JavaScript被禁用时没有特殊的回调方式。如果你比较关心用户体验的话，可用<noscript>向你的用户解释情况（以及指引如何重新开启 JavaScript），然后/或者添加自定义回调机制。

    第三方库

    Bootstrap并不正式支持第三方的JavaScript库，比如Prototype或者jQuery UI。尽管有系统中.noConflic和命名空间事件，但如果混合引用可能会带来兼容性问题（高手不怕脏和累、并自行修复BUG条件下，请自便:）。

    Util方法

    默认bootstrap.js（预编译与精简版）都已经包含了util.js，因为Bootstrap所有JavaScript行为都依赖于util.js函数。

    util.js包括效用函数和transitionEnd事件的基本帮助器以及CSS转换仿真器。它被其他插件用于检查CSS过渡支持并捕获挂起的过渡。

    清理器

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

    默认的whiteList值如下:

    1. var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
    2. var DefaultWhitelist = {
    3.   // Global attributes allowed on any supplied element below.
    4.   '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
    5.   a: ['target', 'href', 'title', 'rel'],
    6.   area: [],
    7.   b: [],
    8.   br: [],
    9.   col: [],
    10.   code: [],
    11.   div: [],
    12.   em: [],
    13.   hr: [],
    14.   h1: [],
    15.   h2: [],
    16.   h3: [],
    17.   h4: [],
    18.   h5: [],
    19.   h6: [],
    20.   i: [],
    21.   img: ['src', 'alt', 'title', 'width', 'height'],
    22.   li: [],
    23.   ol: [],
    24.   p: [],
    25.   pre: [],
    26.   s: [],
    27.   small: [],
    28.   span: [],
    29.   sub: [],
    30.   sup: [],
    31.   strong: [],
    32.   u: [],
    33.   ul: []
    34. }

    如果要向此默认whiteList添加新值，可以执行以下操作:

    1. var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
    3. // To allow table elements
    4. myDefaultWhiteList.table = []
    6. // To allow td elements and data-option attributes on td elements
    7. myDefaultWhiteList.td = ['data-option']
    9. // You can push your custom regex to validate your attributes.
    10. // Be careful about your regular expressions being too lax
    11. var myCustomRegex = /^data-my-app-[\w-]+/
    12. myDefaultWhiteList['*'].push(myCustomRegex)

    If you want to add new values to this default whiteList you can do the following:

    如果您想绕过我们的清理器,例如DOMPurify,则应执行以下操作:

    1. $('#yourTooltip').tooltip({
    2.   sanitizeFn: function (content) {
    3.     return DOMPurify.sanitize(content)
    4.   }
    5. })