mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 08:39:56 +02:00
Add v4.6.1 docs (#35273)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
|
||||
<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.88.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.6">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -104,13 +104,13 @@
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
@@ -284,7 +284,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -317,7 +317,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
@@ -359,7 +359,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
|
||||
@@ -393,7 +393,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToastBtn"</span><span class="p">></span>Show live toast<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToastBtn"</span><span class="p">></span>Show live toast<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-fixed bottom-0 right-0 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 5; right: 0; bottom: 0;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToast"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast hide"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"2000"</span><span class="p">></span>
|
||||
@@ -427,7 +427,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
|
||||
@@ -472,7 +472,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Heads up, toasts will stack automatically
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
|
||||
@@ -518,7 +518,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
@@ -571,7 +571,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="p">></span>
|
||||
<span class="c"><!-- Position it --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="p">></span>
|
||||
|
||||
@@ -626,7 +626,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Flexbox container for aligning the toasts --></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Flexbox container for aligning the toasts --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span>
|
||||
|
||||
<span class="c"><!-- Then put toasts within --></span>
|
||||
@@ -649,7 +649,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<p>Note that the live region needs to be present in the markup <em>before</em> the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.</p>
|
||||
<p>You also need to adapt the <code>role</code> and <code>aria-live</code> level depending on the content. If it’s an important message like an error, use <code>role="alert" aria-live="assertive"</code>, otherwise use <code>role="status" aria-live="polite"</code> attributes.</p>
|
||||
<p>As the content you’re displaying changes, be sure to update the <a href="#options"><code>delay</code> timeout</a> to ensure people have enough time to read the toast.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-delay</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>When using <code>autohide: false</code>, you must add a close button to allow users to dismiss the toast.</p>
|
||||
@@ -668,7 +668,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">data-autohide</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast"</span> <span class="na">data-autohide</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mr-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto"</span><span class="p">></span>Bootstrap<span class="p"></</span><span class="nt">strong</span><span class="p">></span>
|
||||
@@ -684,7 +684,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<p>Initialize toasts via JavaScript:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span>
|
||||
</code></pre></div><h3 id="options">Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -732,13 +732,13 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<h4 id="toastshow"><code>.toast('show')</code></h4>
|
||||
<p>Reveals an element’s toast. <strong>Returns to the caller before the toast has actually been shown</strong> (i.e. before the <code>shown.bs.toast</code> event occurs).
|
||||
You have to manually call this method, instead your toast won’t show.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="toasthide"><code>.toast('hide')</code></h4>
|
||||
<p>Hides an element’s toast. <strong>Returns to the caller before the toast has actually been hidden</strong> (i.e. before the <code>hidden.bs.toast</code> event occurs). You have to manually call this method if you made <code>autohide</code> to <code>false</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="toastdispose"><code>.toast('dispose')</code></h4>
|
||||
<p>Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span>
|
||||
</code></pre></div><h3 id="events">Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@@ -766,7 +766,7 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myToast'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.toast'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myToast'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.toast'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div>
|
||||
@@ -774,10 +774,10 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<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="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user