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="Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.">
<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">
@@ -428,10 +428,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="about">About</h2>
<p>Bootstrap &ldquo;spinners&rdquo; can be used to show the loading state in your projects. They&rsquo;re built only with HTML and CSS, meaning you don&rsquo;t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
@@ -577,7 +577,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>Loading...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div>
<h3 id="placement">Placement</h3>
<p>Use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a>, <a href="/docs/5.0/utilities/float/">float utilities</a>, or <a href="/docs/5.0/content/typography/">text alignment</a> utilities to place spinners exactly where you need them in any situation.</p>
<p>Use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a>, <a href="/docs/5.0/utilities/float/">float utilities</a>, or <a href="/docs/5.0/utilities/text/">text alignment</a> utilities to place spinners exactly where you need them in any situation.</p>
<h4 id="flex">Flex</h4>
<div class="bd-example">
<div class="d-flex justify-content-center">
@@ -692,7 +692,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<h3 id="variables">Variables</h3>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$spinner-width</span><span class="o">:</span> <span class="mi">2</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$spinner-height</span><span class="o">:</span> <span class="nv">$spinner-width</span><span class="p">;</span>
<span class="nv">$spinner-vertical-align</span><span class="o">:</span> <span class="mf">-.125</span><span class="kt">em</span><span class="p">;</span>
<span class="nv">$spinner-vertical-align</span><span class="o">:</span> <span class="o">-</span><span class="mf">.125</span><span class="kt">em</span><span class="p">;</span>
<span class="nv">$spinner-border-width</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">em</span><span class="p">;</span>
<span class="nv">$spinner-animation-speed</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">s</span><span class="p">;</span>
@@ -703,16 +703,16 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<h3 id="keyframes">Keyframes</h3>
<p>Used for creating the CSS animations for our spinners. Included in <code>scss/_spinners.scss</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-border</span> <span class="p">{</span>
<span class="nt">to</span> <span class="p">{</span> <span class="nt">transform</span><span class="nd">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="nt">360deg</span><span class="o">)</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="p">}</span>
<span class="nt">to</span> <span class="p">{</span> <span class="na">transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">)</span> <span class="si">#{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="si">}</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-grow</span> <span class="p">{</span>
<span class="nt">0</span><span class="err">%</span> <span class="p">{</span>
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">scale</span><span class="o">(</span><span class="nt">0</span><span class="o">)</span><span class="p">;</span>
<span class="na">transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt">50</span><span class="err">%</span> <span class="p">{</span>
<span class="nt">opacity</span><span class="nd">:</span> <span class="nt">1</span><span class="p">;</span>
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
<span class="na">opacity</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="na">transform</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
@@ -733,7 +733,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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">
@@ -780,7 +780,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</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>
@@ -788,7 +788,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>