bootstrap-v4-chinese-document
/
JavaScript.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.101.0">

  <meta name="docsearch:language" content="en">
  <meta name="docsearch:version" content="4.6">

  <title>介绍文档 · Bootstrap v4.6</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <!-- Documentation extras -->
  <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">

  <link href="https://getbootstrap.com/docs/4.6/assets/css/docs.css" rel="stylesheet">

  <!-- Favicons -->
  <link rel="manifest" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/manifest.json">
  <link rel="icon" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/favicon.ico">
  <meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
  <meta name="theme-color" content="#563d7c">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@getbootstrap">
  <meta name="twitter:creator" content="@getbootstrap">
  <meta name="twitter:title" content="Introduction">
  <meta name="twitter:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png">

  <!-- Facebook -->
  <meta property="og:url" content="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
  <meta property="og:title" content="Introduction">
  <meta property="og:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <script defer src="https://cdn.usefathom.com/script.js" site="ITUSEYJG"></script>
  <script>
    window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', 'UA-146052-10', 'getbootstrap.com');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>


</head>

<body>
  <div class="skippy overflow-hidden">
    <div class="container-xl">
      <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" data-href="#content">跳转到主要内容</a>
      <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" data-href="#bd-docs-nav">跳转到文档导航</a>
    </div>
  </div>


  <div class="d-block px-3 py-2 text-center text-bold skippy">
    <a data-href="" class="text-white">Bootstrap 有更新版本！</a>
  </div>

  <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
    <a class="navbar-brand mr-0 mr-md-2" data-href="/" aria-label="Bootstrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img"
        focusable="false">
        <title>Bootstrap</title>
        <path fill="currentColor"
          d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" />
        <path fill="currentColor"
          d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" />
      </svg>
    </a>

    <div class="navbar-nav-scroll">
      <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item">
          <a class="nav-link" data-href="/"
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">示例</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');"
            target="_blank" rel="noopener">图标</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');"
            target="_blank" rel="noopener">主题</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');"
            target="_blank" rel="noopener">博览会</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');"
            target="_blank" rel="noopener">博客</a>
        </li>
      </ul>
    </div>

    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item dropdown">
        <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
          <span class="sr-only">Bootstrap&nbsp;</span> v4.6 <span class="sr-only">(选择其他版本)</span>
        </button>
        <div class="dropdown-menu dropdown-menu-md-right">
          <a class="dropdown-item active" data-href="">当前 (4.6.x)</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">5.1.x</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">v3.4.1</a>
          <a class="dropdown-item" data-href="">v2.3.2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="/">全部版本</a>
        </div>
      </li>

      <li class="nav-item">
        <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" data-data-href="https://github.com/twbs" target="_blank"
          rel="noopener" aria-label="GitHub">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"
            focusable="false">
            <title>GitHub</title>
            <path fill="currentColor" fill-rule="evenodd"
              d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://twitter.com/getbootstrap" target="_blank"
          rel="noopener" aria-label="Twitter">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"
            focusable="false">
            <title>Twitter</title>
            <path fill="currentColor"
              d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://opencollective.com/bootstrap/" target="_blank"
          rel="noopener" aria-label="Open Collective">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg"
            viewBox="0 0 40 41" role="img" focusable="false">
            <title>Open Collective</title>
            <path fill-opacity=".4"
              d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" />
            <path
              d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" />
          </svg>
        </a>
      </li>
    </ul>

    <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
      data-href="https://getbootstrap.com/docs/4.6/getting-started/download/">下载</a>
  </header>


  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-md-3 col-xl-2 bd-sidebar">
        <form role="search" class="bd-search d-flex align-items-center">
          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..."
            autocomplete="off" data-docs-version="4.6">
          <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
            data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false"
            aria-label="Toggle docs navigation">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"
              focusable="false">
              <title>菜单</title>
              <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
                d="M4 7h22M4 15h22M4 23h22" />
            </svg>
          </button>
        </form>

        <div class="collapse d-md-block row" id="bd-docs-nav">
          <nav class="bd-links" aria-label="Main navigation">

            <div class="bd-toc-item active">
              <a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">
                入门
              </a>
              <ul class="nav bd-sidenav">
                <li class="active bd-sidenav-active">
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">介绍</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/下载.html">下载</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/目录.html">目录</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/浏览器和设备.html">浏览器和设备</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/JavaScript.html">JavaScript</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/主题.html">主题</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/构建工具.html">构建工具</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/Webpack.html">Webpack</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/可访问性.html">可访问性</a>
                </li>
              </ul>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/layout/overview/">
                布局
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/content/reboot/">
                内容
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/components/alerts/">
                组件
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/utilities/borders/">
                实用工具
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/extend/approach/">
                扩展
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/migration/">
                迁移
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/about/overview/">
                关于
              </a>
            </div>
          </nav>
        </div>

      </div>
      <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
        <nav id="TableOfContents">
          <ul>
            <li><a href="#单个插件或集成包">单个插件或集成包</a></li>
            <li><a href="#依赖项">依赖项</a></li>
            <li><a href="#插件的-data-属性-api">插件的 data 属性 API</a></li>
            <li><a href="#事件">事件</a></li>
            <li><a href="#编程式-api">编程式 API</a>
              <ul>
                <li><a href="#异步编程和-transitions">异步编程和 transitions</a></li>
                <li><a href="#默认设置">默认设置</a></li>
              </ul>
            </li>
            <li><a href="#避免冲突">避免冲突</a></li>
            <li><a href="#版本号">版本号</a></li>
            <li><a href="#javascript-被禁用的话没有降级方案">JavaScript 被禁用的话没有降级方案</a></li>
            <li><a href="#utiljs-文件">util.js 文件</a></li>
            <li><a href="#清理程序">清理程序</a></li>
          </ul>
        </nav>
      </nav>

      <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>

      <body>
        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
            <a class="btn btn-sm btn-bd-light my-2 my-md-0"
              href="https://github.com/twbs/bootstrap/blob/v4.6.2/site/content/docs/getting-started/javascript.md"
              title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
            <h1 class="bd-title" id="content">JavaScript</h1>
          </div>
          <p class="bd-lead">通过使用可选的基于 jQuery 构建的 JavaScript 插件，让 Bootstrap 变得栩栩如生。在本章中你将了解每个插件以及 Bootstrap 提供的 data
            和编程式 API 等更多信息。</p>


          <h2 id="单个插件或集成包"><span class="bd-content-title">单个插件或集成包<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#单个插件或集成包" style="padding-left: 0.375em;"></a></span></h2>
          <p>每个插件都可以被单独引入（使用对应每个 Bootstrap 插件的 <code>js/dist/*.js</code> 文件），也可以通过 <code>bootstrap.js</code> 或压缩版的
            <code>bootstrap.min.js</code> 文件一次性引入所有插件（选一个即可，不要同时使用）。
          </p>
          <p>如果使用打包程序（Webpack、Rollup 等），你可以使用支持 UMD 格式的 <code>/js/dist/*.js</code> 文件。</p>
          <h2 id="依赖项"><span class="bd-content-title">依赖项<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#依赖项" style="padding-left: 0.375em;"></a></span></h2>
          <p>某些插件和 CSS 组件依赖于其它插件。如果你选择单独引入某个插件，请确保在文档中查明其依赖项。另外需要注意的是 <strong>所有插件都依赖 jQuery</strong> （也就是说，jQuery
            必须在其它插件 <strong>之前</strong> 被引入）。<a href="https://github.com/twbs/bootstrap/blob/v4.6.2/package.json">请参考
              <code>package.json</code> 文件</a> 以了解所支持的 jQuery 版本。</p>
          <p>下拉菜单（dropdown）、弹出框（popover）和工具提示（tooltip）组件依赖 <a href="https://popper.js.org/">Popper</a>。</p>
          <h2 id="插件的-data-属性-api"><span class="bd-content-title">插件的 data 属性 API<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#插件的-data-属性-api"
                style="padding-left: 0.375em;"></a></span></h2>
          <p>几乎所有的 Bootstrap 插件都可以通过带有 data 属性的 HTML 元素单独开启和配置（我们推荐 JavaScript API 为首选方式）。请确保 <strong>仅在单个 HTML
              元素上使用同一个插件的 data 属性</strong> （例如，你不能通过同一按钮触发工具提示和模态框。）</p>
          <p>不过，在某些情况下，你可能需要禁用此功能。如需禁用基于 data 属性的 API，请将 document 对象上的以 <code>data-api</code> 为命名空间的所有事件解绑，如下所示：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span>
</span></span></code></pre>
          </div>
          <p>另外，如需禁用某个特定插件，只需将插件名作为命名空间并将 data-api 作为后缀，如下所示：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span>
</span></span></code></pre>
          </div>
          <div class="bd-callout bd-callout-warning">
            <h2 id="选择器">选择器</h2>
            <p>目前，由于性能的原因，我们使用原生方法 <code>querySelector</code> 和 <code>querySelectorAll</code> 来查询 DOM 元素，因此你必须使用 <a
                href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">合法的选择器</a>。
              如果使用特殊的选择器，例如 <code>collapse:Example</code> ，请确保对其进行转义。
            </p>
          </div>

          <h2 id="事件"><span class="bd-content-title">事件<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#事件" style="padding-left: 0.375em;"></a></span></h2>
          <p>Bootstrap 为大多数插件的独特行为提供了自定义事件。通常，事件的命名以不定式或过去分词形式出现，例如，在事件开始时触发的事件名时不定式形式的（例如
            <code>show</code>），在事件完成时触发的事件名是过去分词形式的（例如 <code>shown</code>）。
          </p>
          <p>所有不定式形式命名的事件都提供 <a
              href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code>preventDefault()</code></a>
            功能。这就赋予了你在动作开始之前将其停止的能力。如果事件处理函数的返回值是 false，将自动调用 <code>preventDefault()</code>。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// 停止即将展示的模态框（modal）
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span></code></pre>
          </div>
          <h2 id="编程式-api"><span class="bd-content-title">编程式 API<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#编程式-api" style="padding-left: 0.375em;"></a></span></h2>
          <p>我们觉得你应该会需要完全通过 JavaScript API 的方式来使用所有的 Bootstrap 插件。所有开放的 API 都是独立、可链式调用的方法，并且返回被操作的元素集合。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span>
</span></span></code></pre>
          </div>
          <p>所有方法都可以接受三种参数形式：对象类型的参数、字符串类型的参数（将被当作是某个方法的名称）或没有参数（将以默认行为启动插件）：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span> <span class="c1">// 以默认值启动插件
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// 启动插件时将 keyboard 设置为 false
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// 启动插件并立即调用 show 方法
</span></span></span></code></pre>
          </div>
          <p>每个插件都通过 <code>Constructor</code> 属性对外开放其原始的构造函数：
            <code>$.fn.popover.Constructor</code>。如果你想获取某个插件的特定实例，请直接从其对应的元素中获取它：
            <code>$('[rel="popover"]').data('popover')</code>。
          </p>
          <h3 id="异步编程和-transitions"><span class="bd-content-title">异步编程和 transitions<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#异步编程和-transitions"
                style="padding-left: 0.375em;"></a></span></h3>
          <p>所有编程形式的 API 方法都是 <strong>异步的</strong>，并在 transition 开始之后、<strong>结束之前</strong>返回到调用者。</p>
          <p>为了在 transition 完成后执行某个动作，你可以监听相应的事件。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapse'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="c1">// 可折叠区域被展开时，此处的动作将被执行一次
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
</span></span></code></pre>
          </div>
          <p>另外，对 <strong>正在 transitioning 状态的组件调用的任何方法都将被忽略</strong>。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'slid.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// 当滑动到幻灯片 1 之后，将立即滑动到幻灯片 2
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'1'</span><span class="p">)</span> <span class="c1">// 开始滑动到幻灯片 1 并返回到回调者
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// !! 将会被忽略，因为滑动到幻灯片 1 的转换动作还未完成 !!
</span></span></span></code></pre>
          </div>
          <h3 id="默认设置"><span class="bd-content-title">默认设置<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#默认设置" style="padding-left: 0.375em;"></a></span></h3>
          <p>你可以通过修改插件的 <code>Constructor.Default</code> 对象来更改插件的默认设置：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// 将模态框（modal）插件的 `keyboard` 的默认值修改为 false
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span>
</span></span></code></pre>
          </div>
          <h2 id="避免冲突"><span class="bd-content-title">避免冲突<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#避免冲突" style="padding-left: 0.375em;"></a></span></h2>
          <p>有些时候需要将 Bootstrap 插件与其它 UI 框架一起使用。在这种情况下，难免发生命名空间的冲突。如果发生这种情况，你可以在需要还原的插件上调用 <code>.noConflict</code> 函数。
          </p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// 重置 $.fn.button 为先前的值
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// 为 $().bootstrapBtn 赋予 Bootstrap 的功能
</span></span></span></code></pre>
          </div>
          <h2 id="版本号"><span class="bd-content-title">版本号<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#版本号" style="padding-left: 0.375em;"></a></span></h2>
          <p>每个 Bootstrap 的 jQuery 插件都可以通过其构造函数上的 <code>VERSION</code> 属性进行访问。例如，以工具提示（tooltip）插件为例：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "4.6.2"
</span></span></span></code></pre>
          </div>
          <h2 id="javascript-被禁用的话没有降级方案"><span class="bd-content-title">JavaScript 被禁用的话没有降级方案<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#javascript-被禁用的话没有降级方案"
                style="padding-left: 0.375em;"></a></span></h2>
          <p>一旦 JavaScript 被禁用，Bootstrap 的插件没有优雅降级的方案。如果你很关心在这种情况下的用户体验，请使用 <a
              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a>
            标签并向你的用户解释情况（以及重新启用 JavaScript 的方法），和/或添加你自己的降级方案。</p>
          <div class="bd-callout bd-callout-warning">
            <h5 id="第三方工具库">第三方工具库</h5>
            <p><strong>Bootstrap 不对第三方工具库提供支持</strong>，例如 Prototype 或 jQuery UI。尽管存在 <code>.noConflict</code>
              和基于命名空间的事件，但仍可能需要您自行解决兼容性问题。
            </p>
          </div>

          <h2 id="utiljs-文件"><span class="bd-content-title">util.js 文件<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#utiljs-文件" style="padding-left: 0.375em;"></a></span></h2>
          <p>Bootstrap 的所有 JavaScript 文件都依赖 <code>util.js</code> 文件，并且此文件必须与其它 JavaScript 文件放在一起使用。如果你使用的是经过编译（或压缩）的
            <code>bootstrap.js</code> 文件，则已经包含了此文件了。
          </p>
          <p><code>util.js</code> 包含了一些工具函数，和 <code>transitionEnd</code> 事件的一个基本的辅助函数，以及一个 CSS transition
            的模拟器。其它插件使用此文件来检查是否支持 CSS transition 情况并捕获挂起的（hanging） transitions。</p>
          <h2 id="清理程序"><span class="bd-content-title">清理程序<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#清理程序" style="padding-left: 0.375em;"></a></span></h2>
          <p>工具提示（tooltip）和弹出框（popover）可以接受 HTML 代码作为参数，但会使用 Bootstrap 内置的清理程序对 HTML 代码进行清理。</p>
          <p><code>whiteList</code> 的默认值如下所示：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span> <span class="o">=</span> <span class="sr">/^aria-[\w-]*$/i</span>
</span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">DefaultWhitelist</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="c1">// Global attributes allowed on any supplied element below.
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="s1">'*'</span><span class="o">:</span> <span class="p">[</span><span class="s1">'class'</span><span class="p">,</span> <span class="s1">'dir'</span><span class="p">,</span> <span class="s1">'id'</span><span class="p">,</span> <span class="s1">'lang'</span><span class="p">,</span> <span class="s1">'role'</span><span class="p">,</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="s1">'target'</span><span class="p">,</span> <span class="s1">'href'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'rel'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">area</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">b</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">br</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">col</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">code</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">div</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">em</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">hr</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h1</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h2</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h3</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h4</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h5</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">h6</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">i</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">img</span><span class="o">:</span> <span class="p">[</span><span class="s1">'src'</span><span class="p">,</span> <span class="s1">'srcset'</span><span class="p">,</span> <span class="s1">'alt'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'width'</span><span class="p">,</span> <span class="s1">'height'</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">li</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">ol</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">p</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">pre</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">s</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">small</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">span</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">sub</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">sup</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">strong</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">u</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">ul</span><span class="o">:</span> <span class="p">[]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre>
          </div>
          <p>如果要向 <code>whiteList</code> 添加新值，则可以执行如下操作：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">myDefaultWhiteList</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">whiteList</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// 添加 table 元素
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myDefaultWhiteList</span><span class="p">.</span><span class="nx">table</span> <span class="o">=</span> <span class="p">[]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// 添加 td 元素以及 td 元素的 data-option 属性
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myDefaultWhiteList</span><span class="p">.</span><span class="nx">td</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'data-option'</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// 你可以添加自定义的正则表达式来对属性进行校验。
</span></span></span><span class="line"><span class="cl"><span class="c1">// 请提防过于宽松的正则表达式
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">myCustomRegex</span> <span class="o">=</span> <span class="sr">/^data-my-app-[\w-]+/</span>
</span></span><span class="line"><span class="cl"><span class="nx">myDefaultWhiteList</span><span class="p">[</span><span class="s1">'*'</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">myCustomRegex</span><span class="p">)</span>
</span></span></code></pre>
          </div>
          <p>如果你因为喜欢使用专用的工具库（例如 <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>）并想绕过 Bootstrap
            的清理程序，则可以这样操作：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#yourTooltip'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">sanitizeFn</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="nx">DOMPurify</span><span class="p">.</span><span class="nx">sanitize</span><span class="p">(</span><span class="nx">content</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span></code></pre>
          </div>
        </main>
      </body>

      </html>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"><\/script>')</script>

  <script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"></script>


  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

  <script src="https://getbootstrap.com/docs/4.6/assets/js/docs.min.js"></script>
</body>

</html>