1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00

Add v5.0.2 docs

This commit is contained in:
XhmikosR
2021-06-22 21:28:23 +03:00
parent 258f7e37f3
commit a43dd5a897
181 changed files with 4591 additions and 4253 deletions

View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.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-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -427,6 +427,7 @@
<li><a href="#show">show</a></li>
<li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul>
</li>
<li><a href="#events">Events</a></li>
@@ -435,10 +436,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="basic-example">Basic example</h2>
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
@@ -922,9 +923,9 @@
<span class="nv">$list-group-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
<span class="nv">$list-group-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
<span class="nv">$list-group-item-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
<span class="nv">$list-group-item-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
<span class="nv">$list-group-item-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
<span class="nv">$list-group-item-bg-scale</span><span class="o">:</span> <span class="mi">-80</span><span class="kt">%</span><span class="p">;</span>
<span class="nv">$list-group-item-bg-scale</span><span class="o">:</span> <span class="o">-</span><span class="mi">80</span><span class="kt">%</span><span class="p">;</span>
<span class="nv">$list-group-item-color-scale</span><span class="o">:</span> <span class="mi">40</span><span class="kt">%</span><span class="p">;</span>
<span class="nv">$list-group-hover-bg</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
@@ -945,20 +946,20 @@
<p>Used in combination with <code>$theme-colors</code> to generate the <a href="#contextual-classes">contextual variant classes</a> for <code>.list-group-item</code>s.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nv">$color</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.list-group-item-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">background</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$background</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nc">.list-group-item-action</span> <span class="p">{</span>
<span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">background</span><span class="o">,</span> <span class="nt">10</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
<span class="na">&amp;</span><span class="o">:</span><span class="n">hover</span><span class="o">,</span>
<span class="o">&amp;:</span><span class="ni">focus</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">&amp;</span><span class="nc">.active</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">white</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="na">border-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -971,7 +972,7 @@
</span><span class="c1">// Add modifier classes to change text and background color on individual items.
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
</span><span class="c1"></span>
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
<span class="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nv">$list-group-variant-bg</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
<span class="nv">$list-group-variant-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
@@ -1108,6 +1109,10 @@
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h3 id="events">Events</h3>
<p>When showing a new tab, the events fire in the following order:</p>
<ol>
@@ -1143,11 +1148,13 @@
</tr>
</tbody>
</table>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">tabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;a[data-bs-toggle=&#34;list&#34;]&#39;</span><span class="p">)</span>
<span class="nx">tabEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;shown.bs.tab&#39;</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">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
</span><span class="c1"></span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab
</span><span class="c1"></span><span class="p">})</span>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">tabElms</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;a[data-bs-toggle=&#34;list&#34;]&#39;</span><span class="p">)</span>
<span class="nx">tabElms</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">tabElm</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">tabElm</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;shown.bs.tab&#39;</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">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
</span><span class="c1"></span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab
</span><span class="c1"></span> <span class="p">})</span>
<span class="p">}</span>
</code></pre></div>
</div>
</main>
@@ -1165,7 +1172,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li>
<li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1212,7 +1219,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -1220,7 +1227,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>