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
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<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">
|
||||
@@ -420,10 +420,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
@@ -518,19 +518,19 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various <em>optional</em> keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
<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">$transition-collapse</span><span class="o">:</span> <span class="no">height</span> <span class="mf">.35</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$transition-collapse</span><span class="o">:</span> <span class="n">height</span> <span class="mf">.35</span><span class="kt">s</span> <span class="ni">ease</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="classes">Classes</h3>
|
||||
<p>Collapse transition classes can be found in <code>scss/_transitions.scss</code> as these are shared across multiple components (collapse and accordion).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.collapse</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:not</span><span class="o">(</span><span class="nc">.show</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="na">display</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.collapsing</span> <span class="p">{</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">overflow</span><span class="nd">:</span> <span class="nt">hidden</span><span class="p">;</span>
|
||||
<span class="na">height</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="na">overflow</span><span class="o">:</span> <span class="ni">hidden</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> transition</span><span class="p">(</span><span class="nv">$transition-collapse</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
@@ -616,8 +616,21 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getInstance</code></td>
|
||||
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
|
||||
<td>
|
||||
<code>getInstance</code>
|
||||
</td>
|
||||
<td>
|
||||
Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: <code>bootstrap.Collapse.getInstance(element)</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>getOrCreateInstance</code>
|
||||
</td>
|
||||
<td>
|
||||
Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised.
|
||||
You can use it like this: <code>bootstrap.Collapse.getOrCreateInstance(element)</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -670,7 +683,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<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">
|
||||
@@ -717,7 +730,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
</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>
|
||||
@@ -725,7 +738,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user