mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Add v5.0.0-beta3 docs (#33440)

Browse Source
This commit is contained in:
XhmikosR
2021-03-23 18:32:27 +02:00
committed by GitHub
parent 8484574c52
commit e2460ba2f8
219 changed files with 13671 additions and 7651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
docs/5.0/components/modal/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<meta name="generator" content="Hugo 0.82.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -193,6 +193,7 @@
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
@@ -289,6 +290,7 @@
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded active" aria-current="page">Modal</a></li>
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs &amp; tabs</a></li>
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
@@ -407,6 +409,7 @@
<li><a href="#tooltips-and-popovers">Tooltips and popovers</a></li>
<li><a href="#using-the-grid">Using the grid</a></li>
<li><a href="#varying-modal-content">Varying modal content</a></li>
<li><a href="#toggle-between-modals">Toggle between modals</a></li>
<li><a href="#change-animation">Change animation</a></li>
<li><a href="#remove-animation">Remove animation</a></li>
<li><a href="#dynamic-heights">Dynamic heights</a></li>
@@ -416,6 +419,12 @@
</li>
<li><a href="#optional-sizes">Optional sizes</a></li>
<li><a href="#fullscreen-modal">Fullscreen Modal</a></li>
<li><a href="#sass">Sass</a>
<ul>
<li><a href="#variables">Variables</a></li>
<li><a href="#loop">Loop</a></li>
</ul>
</li>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#via-data-attributes">Via data attributes</a></li>
@@ -910,6 +919,69 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="nx">modalTitle</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">&#39;New message to &#39;</span> <span class="o">+</span> <span class="nx">recipient</span>
<span class="nx">modalBodyInput</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">recipient</span>
<span class="p">})</span>
</code></pre></div><h3 id="toggle-between-modals">Toggle between modals</h3>
<p>Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes. For example, you could toggle a password reset modal from within an already open sign in modal. <strong>Please note multiple modals cannot be open at the same time</strong>—this method simply toggles between two separate modals.</p>
<div class="bd-example">
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
</div>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c">&lt;!-- First modal dialog --&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal fade&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">&#34;-1&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-dialog modal-dialog-centered&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-content&#34;</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-footer&#34;</span><span class="p">&gt;</span>
<span class="c">&lt;!-- Toogle to second dialog --&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&#34;#modal2&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">&#34;modal&#34;</span><span class="p">&gt;</span>Open #modal2<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="c">&lt;!-- Second modal dialog --&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal fade&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;modal2&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">&#34;-1&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-dialog modal-dialog-centered&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-content&#34;</span><span class="p">&gt;</span>
...
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal-footer&#34;</span><span class="p">&gt;</span>
<span class="c">&lt;!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway --&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#modal&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;button&#34;</span><span class="p">&gt;</span>Open #modal<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="c">&lt;!-- Open first dialog --&gt;</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#modal&#34;</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;button&#34;</span><span class="p">&gt;</span>Open #modal<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div><h3 id="change-animation">Change animation</h3>
<p>The <code>$modal-fade-transform</code> variable determines the transform state of <code>.modal-dialog</code> before the modal fade-in animation, the <code>$modal-show-transform</code> variable determines the transform of <code>.modal-dialog</code> at the end of the modal fade-in animation.</p>
<p>If you want for example a zoom-in animation, you can set <code>$modal-fade-transform: scale(.8)</code>.</p>
@@ -1156,6 +1228,80 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div>
</div>
</div>
<h2 id="sass">Sass</h2>
<h3 id="variables">Variables</h3>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$modal-inner-padding</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
<span class="nv">$modal-footer-margin-between</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$modal-dialog-margin</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$modal-dialog-margin-y-sm-up</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$modal-title-line-height</span><span class="o">:</span> <span class="nv">$line-height-base</span><span class="p">;</span>
<span class="nv">$modal-content-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
<span class="nv">$modal-content-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
<span class="nv">$modal-content-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.2</span><span class="p">);</span>
<span class="nv">$modal-content-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
<span class="nv">$modal-content-border-radius</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
<span class="nv">$modal-content-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$modal-content-border-radius</span><span class="o">,</span> <span class="nv">$modal-content-border-width</span><span class="p">);</span>
<span class="nv">$modal-content-box-shadow-xs</span><span class="o">:</span> <span class="nv">$box-shadow-sm</span><span class="p">;</span>
<span class="nv">$modal-content-box-shadow-sm-up</span><span class="o">:</span> <span class="nv">$box-shadow</span><span class="p">;</span>
<span class="nv">$modal-backdrop-bg</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
<span class="nv">$modal-backdrop-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
<span class="nv">$modal-header-border-color</span><span class="o">:</span> <span class="nv">$border-color</span><span class="p">;</span>
<span class="nv">$modal-footer-border-color</span><span class="o">:</span> <span class="nv">$modal-header-border-color</span><span class="p">;</span>
<span class="nv">$modal-header-border-width</span><span class="o">:</span> <span class="nv">$modal-content-border-width</span><span class="p">;</span>
<span class="nv">$modal-footer-border-width</span><span class="o">:</span> <span class="nv">$modal-header-border-width</span><span class="p">;</span>
<span class="nv">$modal-header-padding-y</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
<span class="nv">$modal-header-padding-x</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
<span class="nv">$modal-header-padding</span><span class="o">:</span> <span class="nv">$modal-header-padding-y</span> <span class="nv">$modal-header-padding-x</span><span class="p">;</span> <span class="c1">// Keep this for backwards compatibility
</span><span class="c1"></span>
<span class="nv">$modal-sm</span><span class="o">:</span> <span class="mi">300</span><span class="kt">px</span><span class="p">;</span>
<span class="nv">$modal-md</span><span class="o">:</span> <span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
<span class="nv">$modal-lg</span><span class="o">:</span> <span class="mi">800</span><span class="kt">px</span><span class="p">;</span>
<span class="nv">$modal-xl</span><span class="o">:</span> <span class="mi">1140</span><span class="kt">px</span><span class="p">;</span>
<span class="nv">$modal-fade-transform</span><span class="o">:</span> <span class="nf">translate</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">-50</span><span class="kt">px</span><span class="p">);</span>
<span class="nv">$modal-show-transform</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
<span class="nv">$modal-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="mf">.3</span><span class="kt">s</span> <span class="n">ease-out</span><span class="p">;</span>
<span class="nv">$modal-scale-transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mi">1</span><span class="mf">.02</span><span class="p">);</span>
</code></pre></div>
<h3 id="loop">Loop</h3>
<p><a href="#fullscreen-modal">Responsive fullscreen modals</a> are generated via the <code>$breakpoints</code> map and a loop in <code>scss/_modal.scss</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
<span class="nv">$infix</span><span class="o">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
<span class="nv">$postfix</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$infix</span> <span class="o">!=</span> <span class="s2">&#34;&#34;</span><span class="o">,</span> <span class="nv">$infix</span> <span class="o">+</span> <span class="s2">&#34;-down&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="p">);</span>
<span class="k">@include</span><span class="nd"> media-breakpoint-down</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.modal-fullscreen</span><span class="si">#{</span><span class="nv">$postfix</span><span class="si">}</span> <span class="p">{</span>
<span class="nt">width</span><span class="nd">:</span> <span class="nt">100vw</span><span class="p">;</span>
<span class="nt">max-width</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
<span class="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
<span class="nt">margin</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
<span class="nc">.modal-content</span> <span class="p">{</span>
<span class="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
<span class="nt">border</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.modal-body</span> <span class="p">{</span>
<span class="nt">overflow-y</span><span class="nd">:</span> <span class="nt">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.modal-footer</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="usage">Usage</h2>
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code>&lt;body&gt;</code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
<h3 id="via-data-attributes">Via data attributes</h3>
@@ -1215,6 +1361,9 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</code></pre></div><h4 id="show">show</h4>
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
</code></pre></div><p>Also, you can pass a DOM element as an argument that can be received in the modal events (as the <code>relatedTarget</code> property).</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">modalToggle</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;toggleMyModal&#39;</span><span class="p">)</span> <span class="c1">// relatedTarget
</span><span class="c1"></span><span class="nx">myModal</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="nx">modalToggle</span><span class="p">)</span>
</code></pre></div><h4 id="hide">hide</h4>
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">hide</span><span class="p">()</span>
@@ -1279,11 +1428,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
</ul>
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>