mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-30 23:36:47 +02:00
Add v4.6.2 docs (#36726)
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="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
|
||||
<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-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<link href="/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">
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
<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-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-md-right">
|
||||
<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.1/">5.1.x</a>
|
||||
@@ -240,7 +240,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -262,7 +262,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">
|
||||
@@ -276,61 +276,61 @@
|
||||
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
|
||||
<p>If you use a bundler (Webpack, Rollup…), you can use <code>/js/dist/*.js</code> files which are UMD ready.</p>
|
||||
<h2 id="dependencies">Dependencies</h2>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.6.1/package.json">Consult our <code>package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.6.2/package.json">Consult our <code>package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Our dropdowns, popovers and tooltips also depend on <a href="https://popper.js.org/">Popper.js</a>.</p>
|
||||
<h2 id="data-attributes">Data attributes</h2>
|
||||
<p>Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to <strong>only use one set of data attributes on a single element</strong> (e.g., you cannot trigger a tooltip and modal from the same button.)</p>
|
||||
<p>However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with <code>data-api</code> like so:</p>
|
||||
<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="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>
|
||||
</code></pre></div><p>Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the data-api namespace like this:</p>
|
||||
<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="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>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<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>Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the data-api namespace like this:</p>
|
||||
<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="selectors">Selectors</h2>
|
||||
<p>Currently to query DOM elements we use the native methods <code>querySelector</code> and <code>querySelectorAll</code> for performance reasons, so you have to use <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>.
|
||||
If you use special selectors, for example: <code>collapse:Example</code> be sure to escape them.
|
||||
</div>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
<p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
|
||||
<p>Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
|
||||
<p>All infinitive events provide <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code>preventDefault()</code></a> functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call <code>preventDefault()</code>.</p>
|
||||
<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">'#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 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 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">// stops modal from being shown
|
||||
</span><span class="c1"></span> <span class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></div><h2 id="programmatic-api">Programmatic API</h2>
|
||||
<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">// stops modal from being shown
|
||||
</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="programmatic-api">Programmatic API</h2>
|
||||
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
|
||||
<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">'.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>
|
||||
</code></pre></div><p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
|
||||
<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">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span> <span class="c1">// initialized with defaults
|
||||
</span><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">// initialized with no keyboard
|
||||
</span><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">// initializes and invokes show immediately
|
||||
</span></code></pre></div><p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you’d like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
|
||||
<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>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
|
||||
<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">// initialized with defaults
|
||||
</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">// initialized with no keyboard
|
||||
</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">// initializes and invokes show immediately
|
||||
</span></span></span></code></pre></div><p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you’d like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
|
||||
<h3 id="asynchronous-functions-and-transitions">Asynchronous functions and transitions</h3>
|
||||
<p>All programmatic API methods are <strong>asynchronous</strong> and return to the caller once the transition is started but <strong>before it ends</strong>.</p>
|
||||
<p>In order to execute an action once the transition is complete, you can listen to the corresponding event.</p>
|
||||
<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">'#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 class="c1">// Action to execute once the collapsible area is expanded
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div><p>In addition a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
<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">'#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 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">// Will slide to the slide 2 as soon as the transition to slide 1 is finished
|
||||
</span><span class="c1"></span><span class="p">})</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">'1'</span><span class="p">)</span> <span class="c1">// Will start sliding to the slide 1 and returns to the caller
|
||||
</span><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">// !! Will be ignored, as the transition to the slide 1 is not finished !!
|
||||
</span></code></pre></div><h3 id="default-settings">Default settings</h3>
|
||||
<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">// Action to execute once the collapsible area is expanded
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
|
||||
</span></span></code></pre></div><p>In addition a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
<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">// Will slide to the slide 2 as soon as the transition to slide 1 is finished
|
||||
</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">// Will start sliding to the slide 1 and returns to the caller
|
||||
</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">// !! Will be ignored, as the transition to the slide 1 is not finished !!
|
||||
</span></span></span></code></pre></div><h3 id="default-settings">Default settings</h3>
|
||||
<p>You can change the default settings for a plugin by modifying the plugin’s <code>Constructor.Default</code> object:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="c1">// changes default for the modal plugin's `keyboard` option to false
|
||||
</span><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>
|
||||
</code></pre></div><h2 id="no-conflict">No conflict</h2>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// changes default for the modal plugin's `keyboard` option to 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="no-conflict">No conflict</h2>
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><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">// return $.fn.button to previously assigned value
|
||||
</span><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">// give $().bootstrapBtn the Bootstrap functionality
|
||||
</span></code></pre></div><h2 id="version-numbers">Version numbers</h2>
|
||||
<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">// return $.fn.button to previously assigned value
|
||||
</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">// give $().bootstrapBtn the Bootstrap functionality
|
||||
</span></span></span></code></pre></div><h2 id="version-numbers">Version numbers</h2>
|
||||
<p>The version of each of Bootstrap’s jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
|
||||
<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="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">// => "4.6.1"
|
||||
</span></code></pre></div><h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</h2>
|
||||
<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">// => "4.6.2"
|
||||
</span></span></span></code></pre></div><h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</h2>
|
||||
<p>Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code><noscript></code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="third-party-libraries">Third-party libraries</h5>
|
||||
@@ -343,60 +343,60 @@ If you use special selectors, for example: <code>collapse:Example</code> be sure
|
||||
<h2 id="sanitizer">Sanitizer</h2>
|
||||
<p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>
|
||||
<p>The default <code>whiteList</code> value is the following:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span> <span class="o">=</span> <span class="sr">/^aria-[\w-]*$/i</span>
|
||||
<span class="kd">var</span> <span class="nx">DefaultWhitelist</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="c1">// Global attributes allowed on any supplied element below.
|
||||
</span><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 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 class="nx">area</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">b</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">br</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">col</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">code</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">div</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">em</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">hr</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h1</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h2</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h3</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h4</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h5</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">h6</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">i</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<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 class="nx">li</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">ol</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">p</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">pre</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">s</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">small</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">span</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">sub</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">sup</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">strong</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">u</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">ul</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><p>If you want to add new values to this default <code>whiteList</code> you can do the following:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><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 class="c1">// To allow table elements
|
||||
</span><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 class="c1">// To allow td elements and data-option attributes on td elements
|
||||
</span><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 class="c1">// You can push your custom regex to validate your attributes.
|
||||
</span><span class="c1">// Be careful about your regular expressions being too lax
|
||||
</span><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 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>
|
||||
</code></pre></div><p>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>
|
||||
<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">'#yourTooltip'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span>
|
||||
<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 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 class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></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>If you want to add new values to this default <code>whiteList</code> you can do the following:</p>
|
||||
<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">// To allow table elements
|
||||
</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">// To allow td elements and data-option attributes on td elements
|
||||
</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">// You can push your custom regex to validate your attributes.
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">// Be careful about your regular expressions being too lax
|
||||
</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>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -404,7 +404,7 @@ If you use special selectors, for example: <code>collapse:Example</code> be sure
|
||||
<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-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
<script src="/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>
|
||||
|
||||
Reference in New Issue
Block a user