mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Add v5.0.2 docs

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
docs/5.0/forms/checks-radios/index.html
+11 -11
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.">
<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">
@@ -429,10 +429,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
@@ -811,7 +811,7 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
<span class="nv">$form-check-input-active-filter</span><span class="o">:</span> <span class="nf">brightness</span><span class="p">(</span><span class="mi">90</span><span class="kt">%</span><span class="p">);</span>
<span class="nv">$form-check-input-bg</span><span class="o">:</span> <span class="nv">$input-bg</span><span class="p">;</span>
<span class="nv">$form-check-input-border</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.25</span><span class="p">);</span>
<span class="nv">$form-check-input-border</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="ni">solid</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.25</span><span class="p">);</span>
<span class="nv">$form-check-input-border-radius</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">em</span><span class="p">;</span>
<span class="nv">$form-check-radio-border-radius</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
<span class="nv">$form-check-input-focus-border</span><span class="o">:</span> <span class="nv">$input-focus-border-color</span><span class="p">;</span>
@@ -851,7 +851,7 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
<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">
@@ -898,7 +898,7 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
</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>
@@ -906,7 +906,7 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/floating-labels/index.html
+13 -12
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Create beautifully simple form labels that float over your input fields.">
<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">
@@ -410,10 +410,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="example">Example</h2>
<p>Wrap a pair of <code>&lt;input class=&quot;form-control&quot;&gt;</code> and <code>&lt;label&gt;</code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap&rsquo;s textual form fields. A <code>placeholder</code> is required on each <code>&lt;input&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code>&lt;input&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
@@ -540,13 +540,14 @@
<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">$form-floating-height</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="mi">3</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span> <span class="nv">$input-height-border</span><span class="p">);</span>
<span class="nv">$form-floating-line-height</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
<span class="nv">$form-floating-padding-x</span><span class="o">:</span> <span class="nv">$input-padding-x</span><span class="p">;</span>
<span class="nv">$form-floating-padding-y</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$form-floating-input-padding-t</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.625</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$form-floating-input-padding-b</span><span class="o">:</span> <span class="mf">.625</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$form-floating-label-opacity</span><span class="o">:</span> <span class="mf">.65</span><span class="p">;</span>
<span class="nv">$form-floating-label-transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mf">.85</span><span class="p">)</span> <span class="nf">translateY</span><span class="p">(</span><span class="mf">-.5</span><span class="kt">rem</span><span class="p">)</span> <span class="nf">translateX</span><span class="p">(</span><span class="mf">.15</span><span class="kt">rem</span><span class="p">);</span>
<span class="nv">$form-floating-transition</span><span class="o">:</span> <span class="no">opacity</span> <span class="mf">.1</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">transform</span> <span class="mf">.1</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
<span class="nv">$form-floating-label-transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mf">.85</span><span class="p">)</span> <span class="nf">translateY</span><span class="p">(</span><span class="o">-</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">)</span> <span class="nf">translateX</span><span class="p">(</span><span class="mf">.15</span><span class="kt">rem</span><span class="p">);</span>
<span class="nv">$form-floating-transition</span><span class="o">:</span> <span class="ni">opacity</span> <span class="mf">.1</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="ni">transform</span> <span class="mf">.1</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="p">;</span>
</code></pre></div>
</div>
@@ -565,7 +566,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">
@@ -612,7 +613,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>
@@ -620,7 +621,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/form-control/index.html
+17 -17
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Give textual form controls like &lt;input&gt;s and &lt;textarea&gt;s an upgrade with custom styles, sizing, focus states, and more.">
<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">
@@ -414,10 +414,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="example">Example</h2>
<div class="bd-example">
@@ -450,14 +450,14 @@
<p>Add the <code>disabled</code> boolean attribute on an input to give it a grayed out appearance and remove pointer events.</p>
<div class="bd-example">
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;Disabled input&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Disabled input example&#34;</span> <span class="na">disabled</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;Disabled readonly input&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Disabled input example&#34;</span> <span class="na">disabled</span> <span class="na">readonly</span><span class="p">&gt;</span></code></pre></div>
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;Disabled readonly input&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Disabled input example&#34;</span> <span class="na">disabled</span> <span class="na">readonly</span><span class="p">&gt;</span></code></pre></div>
<h2 id="readonly">Readonly</h2>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&rsquo;s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input&rsquo;s value.</p>
<div class="bd-example">
<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;Readonly input here...&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;readonly input example&#34;</span> <span class="na">readonly</span><span class="p">&gt;</span></code></pre></div>
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;Readonly input here...&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;readonly input example&#34;</span> <span class="na">readonly</span><span class="p">&gt;</span></code></pre></div>
<h2 id="readonly-plain-text">Readonly plain text</h2>
<p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
<div class="bd-example">
@@ -626,13 +626,13 @@
<span class="nv">$input-height-inner</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mi">1</span><span class="kt">em</span><span class="o">,</span> <span class="nv">$input-padding-y</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
<span class="nv">$input-height-inner-half</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mf">.5</span><span class="kt">em</span><span class="o">,</span> <span class="nv">$input-padding-y</span><span class="p">);</span>
<span class="nv">$input-height-inner-quarter</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mf">.25</span><span class="kt">em</span><span class="o">,</span> <span class="nv">$input-padding-y</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
<span class="nv">$input-height-inner-quarter</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mf">.25</span><span class="kt">em</span><span class="o">,</span> <span class="nv">$input-padding-y</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">);</span>
<span class="nv">$input-height</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mi">1</span><span class="kt">em</span><span class="o">,</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-padding-y</span> <span class="o">*</span> <span class="mi">2</span><span class="o">,</span> <span class="nv">$input-height-border</span><span class="o">,</span> <span class="n">false</span><span class="p">));</span>
<span class="nv">$input-height-sm</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mi">1</span><span class="kt">em</span><span class="o">,</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-padding-y-sm</span> <span class="o">*</span> <span class="mi">2</span><span class="o">,</span> <span class="nv">$input-height-border</span><span class="o">,</span> <span class="n">false</span><span class="p">));</span>
<span class="nv">$input-height-lg</span><span class="o">:</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-line-height</span> <span class="o">*</span> <span class="mi">1</span><span class="kt">em</span><span class="o">,</span> <span class="nf">add</span><span class="p">(</span><span class="nv">$input-padding-y-lg</span> <span class="o">*</span> <span class="mi">2</span><span class="o">,</span> <span class="nv">$input-height-border</span><span class="o">,</span> <span class="n">false</span><span class="p">));</span>
<span class="nv">$input-transition</span><span class="o">:</span> <span class="no">border</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
<span class="nv">$input-transition</span><span class="o">:</span> <span class="n">border-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="p">;</span>
</code></pre></div>
<p><code>$form-label-*</code> and <code>$form-text-*</code> are for our <code>&lt;label&gt;</code>s and <code>.form-text</code> component.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$form-label-margin-bottom</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
@@ -669,7 +669,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">
@@ -716,7 +716,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>
@@ -724,7 +724,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/input-group/index.html
+10 -10
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
<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">
@@ -421,10 +421,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code>&lt;label&gt;</code>s outside the input group.</p>
@@ -943,7 +943,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">
@@ -990,7 +990,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>
@@ -998,7 +998,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/layout/index.html
+10 -10
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
<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">
@@ -413,10 +413,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code>&lt;form&gt;</code> element. Bootstrap provides no default styling for the <code>&lt;form&gt;</code> element, but there are some powerful browser features that are provided by default.</p>
@@ -959,7 +959,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">
@@ -1006,7 +1006,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>
@@ -1014,7 +1014,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/overview/index.html
+20 -20
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
<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">
@@ -410,70 +410,70 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<div class="row g-3">
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../form-control/">
<strong class="d-block h5 mb-0">Form control</strong>
<span class="text-secondary">Style textual inputs and textareas with support for multiple states.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../select/">
<strong class="d-block h5 mb-0">Select</strong>
<span class="text-secondary">Improve browser default select elements with a custom initial appearance.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../checks-radios/">
<strong class="d-block h5 mb-0">Checks &amp; radios</strong>
<span class="text-secondary">Use our custom radio buttons and checkboxes in forms for selecting input options.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../range/">
<strong class="d-block h5 mb-0">Range</strong>
<span class="text-secondary">Replace browser default range inputs with our custom version.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../input-group/">
<strong class="d-block h5 mb-0">Input group</strong>
<span class="text-secondary">Attach labels and buttons to your inputs for increased semantic value.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../floating-labels/">
<strong class="d-block h5 mb-0">Floating labels</strong>
<span class="text-secondary">Create beautifully simple form labels that float over your input fields.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../layout/">
<strong class="d-block h5 mb-0">Layout</strong>
<span class="text-secondary">Create inline, horizontal, or complex grid-based layouts with your forms.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../validation/">
<strong class="d-block h5 mb-0">Validation</strong>
<span class="text-secondary">Validate your forms with custom or native validation behaviors and styles.</span>
</a>
</div>
</div>
<h2 id="overview">Overview</h2>
<p>Bootstrap&rsquo;s form controls expand on <a href="/docs/5.0/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
@@ -667,7 +667,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">
@@ -714,7 +714,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>
@@ -722,7 +722,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/range/index.html
+12 -12
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use our custom range inputs for consistent cross-browser styling and built-in customization.">
<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">
@@ -410,10 +410,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="overview">Overview</h2>
<p>Create custom <code>&lt;input type=&quot;range&quot;&gt;</code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports &ldquo;filling&rdquo; their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
@@ -447,7 +447,7 @@
<h3 id="variables">Variables</h3>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$form-range-track-width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="nv">$form-range-track-height</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$form-range-track-cursor</span><span class="o">:</span> <span class="no">pointer</span><span class="p">;</span>
<span class="nv">$form-range-track-cursor</span><span class="o">:</span> <span class="ni">pointer</span><span class="p">;</span>
<span class="nv">$form-range-track-bg</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
<span class="nv">$form-range-track-border-radius</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$form-range-track-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-inset</span><span class="p">;</span>
@@ -462,7 +462,7 @@
<span class="nv">$form-range-thumb-focus-box-shadow-width</span><span class="o">:</span> <span class="nv">$input-focus-width</span><span class="p">;</span> <span class="c1">// For focus box shadow issue in Edge
</span><span class="c1"></span><span class="nv">$form-range-thumb-active-bg</span><span class="o">:</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$component-active-bg</span><span class="o">,</span> <span class="mi">70</span><span class="kt">%</span><span class="p">);</span>
<span class="nv">$form-range-thumb-disabled-bg</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="p">;</span>
<span class="nv">$form-range-thumb-transition</span><span class="o">:</span> <span class="no">background</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
<span class="nv">$form-range-thumb-transition</span><span class="o">:</span> <span class="n">background-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">border-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="p">;</span>
</code></pre></div>
</div>
@@ -481,7 +481,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">
@@ -528,7 +528,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>
@@ -536,7 +536,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/select/index.html
+14 -12
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Customize the native &lt;select&gt;s with custom CSS that changes the element&rsquo;s initial appearance.">
<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">
@@ -409,10 +409,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="default">Default</h2>
<p>Custom <code>&lt;select&gt;</code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code>&lt;select&gt;</code>&rsquo;s initial appearance and cannot modify the <code>&lt;option&gt;</code>s due to browser limitations.</p>
@@ -515,13 +515,13 @@
<span class="nv">$form-select-disabled-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
<span class="nv">$form-select-disabled-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
<span class="nv">$form-select-disabled-border-color</span><span class="o">:</span> <span class="nv">$input-disabled-border-color</span><span class="p">;</span>
<span class="nv">$form-select-bg-position</span><span class="o">:</span> <span class="no">right</span> <span class="nv">$form-select-padding-x</span> <span class="no">center</span><span class="p">;</span>
<span class="nv">$form-select-bg-position</span><span class="o">:</span> <span class="ni">right</span> <span class="nv">$form-select-padding-x</span> <span class="ni">center</span><span class="p">;</span>
<span class="nv">$form-select-bg-size</span><span class="o">:</span> <span class="mi">16</span><span class="kt">px</span> <span class="mi">12</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// In pixels because image dimensions
</span><span class="c1"></span><span class="nv">$form-select-indicator-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="p">;</span>
<span class="nv">$form-select-indicator</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39;&gt;&lt;path fill=&#39;none&#39; stroke=&#39;</span><span class="si">#{</span><span class="nv">$form-select-indicator-color</span><span class="si">}</span><span class="sx">&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;M2 5l6 6 6-6&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span>
<span class="nv">$form-select-feedback-icon-padding-end</span><span class="o">:</span> <span class="nv">$form-select-padding-x</span> <span class="o">*</span> <span class="mi">2</span><span class="mf">.5</span> <span class="o">+</span> <span class="nv">$form-select-indicator-padding</span><span class="p">;</span>
<span class="nv">$form-select-feedback-icon-position</span><span class="o">:</span> <span class="no">center</span> <span class="no">right</span> <span class="nv">$form-select-indicator-padding</span><span class="p">;</span>
<span class="nv">$form-select-feedback-icon-position</span><span class="o">:</span> <span class="ni">center</span> <span class="ni">right</span> <span class="nv">$form-select-indicator-padding</span><span class="p">;</span>
<span class="nv">$form-select-feedback-icon-size</span><span class="o">:</span> <span class="nv">$input-height-inner-half</span> <span class="nv">$input-height-inner-half</span><span class="p">;</span>
<span class="nv">$form-select-border-width</span><span class="o">:</span> <span class="nv">$input-border-width</span><span class="p">;</span>
@@ -540,6 +540,8 @@
<span class="nv">$form-select-padding-y-lg</span><span class="o">:</span> <span class="nv">$input-padding-y-lg</span><span class="p">;</span>
<span class="nv">$form-select-padding-x-lg</span><span class="o">:</span> <span class="nv">$input-padding-x-lg</span><span class="p">;</span>
<span class="nv">$form-select-font-size-lg</span><span class="o">:</span> <span class="nv">$input-font-size-lg</span><span class="p">;</span>
<span class="nv">$form-select-transition</span><span class="o">:</span> <span class="nv">$input-transition</span><span class="p">;</span>
</code></pre></div>
</div>
@@ -558,7 +560,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">
@@ -605,7 +607,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>
@@ -613,7 +615,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>
docs/5.0/forms/validation/index.html
+57 -57
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and 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">
@@ -416,10 +416,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we&rsquo;d recommend either using the server-side option or the default browser validation method.
@@ -1035,12 +1035,12 @@ We are aware that currently the client-side custom validation styles and tooltip
<p>Two mixins are combined together, through our <a href="#loop">loop</a>, to generate our form validation feedback styles.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@if</span> <span class="p">(</span><span class="nv">$state</span> <span class="o">==</span> <span class="s2">&#34;valid&#34;</span> <span class="ow">or</span> <span class="nv">$state</span> <span class="o">==</span> <span class="s2">&#34;invalid&#34;</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.was-validated</span> <span class="nn">#</span><span class="p">{</span><span class="nt">if</span><span class="o">(</span><span class="k">&amp;</span><span class="o">,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="o">)</span><span class="p">}</span><span class="nd">:</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="o">,</span>
<span class="nn">#</span><span class="p">{</span><span class="nt">if</span><span class="o">(</span><span class="k">&amp;</span><span class="o">,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="o">)</span><span class="p">}</span><span class="nc">.is-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
<span class="nc">.was-validated</span> <span class="si">#{</span><span class="nf">if</span><span class="p">(</span><span class="o">&amp;,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="p">)</span><span class="si">}</span><span class="nd">:</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="o">,</span>
<span class="si">#{</span><span class="nf">if</span><span class="p">(</span><span class="o">&amp;,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="p">)</span><span class="si">}</span><span class="nc">.is-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
<span class="k">@content</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
<span class="nn">#</span><span class="p">{</span><span class="nt">if</span><span class="o">(</span><span class="k">&amp;</span><span class="o">,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="o">)</span><span class="p">}</span><span class="nc">.is-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
<span class="si">#{</span><span class="nf">if</span><span class="p">(</span><span class="o">&amp;,</span> <span class="s2">&#34;&amp;&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</span><span class="p">)</span><span class="si">}</span><span class="nc">.is-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
<span class="k">@content</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -1055,51 +1055,51 @@ We are aware that currently the client-side custom validation styles and tooltip
<span class="nv">$focus-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$input-btn-focus-blur</span> <span class="nv">$input-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$input-btn-focus-color-opacity</span><span class="p">)</span>
<span class="p">)</span> <span class="p">{</span>
<span class="nc">.</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="nc">-feedback</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="nt">width</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
<span class="nt">margin-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-feedback-margin-top</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="na">width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="na">margin-top</span><span class="o">:</span> <span class="nv">$form-feedback-margin-top</span><span class="p">;</span>
<span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="nv">$form-feedback-font-size</span><span class="p">);</span>
<span class="nt">font-style</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-feedback-font-style</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="na">font-style</span><span class="o">:</span> <span class="nv">$form-feedback-font-style</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="p">}</span>
<span class="nc">.</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="nc">-tooltip</span> <span class="p">{</span>
<span class="nt">position</span><span class="nd">:</span> <span class="nt">absolute</span><span class="p">;</span>
<span class="nt">top</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
<span class="nt">z-index</span><span class="nd">:</span> <span class="nt">5</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="nt">max-width</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span> <span class="c1">// Contain to parent when possible
</span><span class="c1"></span> <span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-feedback-tooltip-padding-y</span> <span class="err">$</span><span class="nt">form-feedback-tooltip-padding-x</span><span class="p">;</span>
<span class="nt">margin-top</span><span class="nd">:</span> <span class="nc">.1rem</span><span class="p">;</span>
<span class="na">position</span><span class="o">:</span> <span class="ni">absolute</span><span class="p">;</span>
<span class="na">top</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<span class="na">z-index</span><span class="o">:</span> <span class="mi">5</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="na">max-width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="c1">// Contain to parent when possible
</span><span class="c1"></span> <span class="na">padding</span><span class="o">:</span> <span class="nv">$form-feedback-tooltip-padding-y</span> <span class="nv">$form-feedback-tooltip-padding-x</span><span class="p">;</span>
<span class="na">margin-top</span><span class="o">:</span> <span class="mf">.1</span><span class="kt">rem</span><span class="p">;</span>
<span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="nv">$form-feedback-tooltip-font-size</span><span class="p">);</span>
<span class="nt">line-height</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-feedback-tooltip-line-height</span><span class="p">;</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">tooltip-color</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">tooltip-bg-color</span><span class="p">;</span>
<span class="na">line-height</span><span class="o">:</span> <span class="nv">$form-feedback-tooltip-line-height</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$tooltip-color</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$tooltip-bg-color</span><span class="p">;</span>
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="nv">$form-feedback-tooltip-border-radius</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</span> <span class="p">{</span>
<span class="o">~</span> <span class="nc">.</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="nc">-feedback</span><span class="o">,</span>
<span class="o">~</span> <span class="nc">.</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="nc">-tooltip</span> <span class="p">{</span>
<span class="nt">display</span><span class="nd">:</span> <span class="nt">block</span><span class="p">;</span>
<span class="na">display</span><span class="o">:</span> <span class="ni">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.form-control</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</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">border-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="k">@if</span> <span class="nv">$enable-validation-icons</span> <span class="p">{</span>
<span class="nt">padding-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">input-height-inner</span><span class="p">;</span>
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">escape-svg</span><span class="o">(</span><span class="err">$</span><span class="nt">icon</span><span class="o">)</span><span class="p">;</span>
<span class="nt">background-repeat</span><span class="nd">:</span> <span class="nt">no-repeat</span><span class="p">;</span>
<span class="nt">background-position</span><span class="nd">:</span> <span class="nt">right</span> <span class="err">$</span><span class="nt">input-height-inner-quarter</span> <span class="nt">center</span><span class="p">;</span>
<span class="nt">background-size</span><span class="nd">:</span> <span class="err">$</span><span class="nt">input-height-inner-half</span> <span class="err">$</span><span class="nt">input-height-inner-half</span><span class="p">;</span>
<span class="na">padding-right</span><span class="o">:</span> <span class="nv">$input-height-inner</span><span class="p">;</span>
<span class="na">background-image</span><span class="o">:</span> <span class="nf">escape-svg</span><span class="p">(</span><span class="nv">$icon</span><span class="p">);</span>
<span class="na">background-repeat</span><span class="o">:</span> <span class="ni">no-repeat</span><span class="p">;</span>
<span class="na">background-position</span><span class="o">:</span> <span class="ni">right</span> <span class="nv">$input-height-inner-quarter</span> <span class="ni">center</span><span class="p">;</span>
<span class="na">background-size</span><span class="o">:</span> <span class="nv">$input-height-inner-half</span> <span class="nv">$input-height-inner-half</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:focus</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="nt">box-shadow</span><span class="nd">:</span> <span class="err">$</span><span class="nt">focus-box-shadow</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="na">box-shadow</span><span class="o">:</span> <span class="nv">$focus-box-shadow</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -1108,53 +1108,53 @@ We are aware that currently the client-side custom validation styles and tooltip
</span><span class="c1"></span> <span class="nt">textarea</span><span class="nc">.form-control</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@if</span> <span class="nv">$enable-validation-icons</span> <span class="p">{</span>
<span class="nt">padding-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">input-height-inner</span><span class="p">;</span>
<span class="nt">background-position</span><span class="nd">:</span> <span class="nt">top</span> <span class="err">$</span><span class="nt">input-height-inner-quarter</span> <span class="nt">right</span> <span class="err">$</span><span class="nt">input-height-inner-quarter</span><span class="p">;</span>
<span class="na">padding-right</span><span class="o">:</span> <span class="nv">$input-height-inner</span><span class="p">;</span>
<span class="na">background-position</span><span class="o">:</span> <span class="ni">top</span> <span class="nv">$input-height-inner-quarter</span> <span class="ni">right</span> <span class="nv">$input-height-inner-quarter</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.form-select</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</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">border-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="k">@if</span> <span class="nv">$enable-validation-icons</span> <span class="p">{</span>
<span class="k">&amp;</span><span class="nd">:not</span><span class="o">([</span><span class="nt">multiple</span><span class="o">])</span><span class="nd">:not</span><span class="o">([</span><span class="nt">size</span><span class="o">]),</span>
<span class="k">&amp;</span><span class="nd">:not</span><span class="o">([</span><span class="nt">multiple</span><span class="o">])[</span><span class="nt">size</span><span class="o">=</span><span class="s2">&#34;1&#34;</span><span class="o">]</span> <span class="p">{</span>
<span class="nt">padding-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-select-feedback-icon-padding-end</span><span class="p">;</span>
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">escape-svg</span><span class="o">(</span><span class="err">$</span><span class="nt">form-select-indicator</span><span class="o">),</span> <span class="nt">escape-svg</span><span class="o">(</span><span class="err">$</span><span class="nt">icon</span><span class="o">)</span><span class="p">;</span>
<span class="nt">background-position</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-select-bg-position</span><span class="o">,</span> <span class="err">$</span><span class="nt">form-select-feedback-icon-position</span><span class="p">;</span>
<span class="nt">background-size</span><span class="nd">:</span> <span class="err">$</span><span class="nt">form-select-bg-size</span><span class="o">,</span> <span class="err">$</span><span class="nt">form-select-feedback-icon-size</span><span class="p">;</span>
<span class="na">&amp;</span><span class="o">:</span><span class="nf">not</span><span class="p">([</span><span class="n">multiple</span><span class="p">])</span><span class="o">:</span><span class="nf">not</span><span class="p">([</span><span class="n">size</span><span class="p">])</span><span class="o">,</span>
<span class="o">&amp;:</span><span class="nf">not</span><span class="p">([</span><span class="n">multiple</span><span class="p">])[</span><span class="n">size</span><span class="o">=</span><span class="s2">&#34;1&#34;</span><span class="p">]</span> <span class="p">{</span>
<span class="na">padding-right</span><span class="o">:</span> <span class="nv">$form-select-feedback-icon-padding-end</span><span class="p">;</span>
<span class="na">background-image</span><span class="o">:</span> <span class="nf">escape-svg</span><span class="p">(</span><span class="nv">$form-select-indicator</span><span class="p">)</span><span class="o">,</span> <span class="nf">escape-svg</span><span class="p">(</span><span class="nv">$icon</span><span class="p">);</span>
<span class="na">background-position</span><span class="o">:</span> <span class="nv">$form-select-bg-position</span><span class="o">,</span> <span class="nv">$form-select-feedback-icon-position</span><span class="p">;</span>
<span class="na">background-size</span><span class="o">:</span> <span class="nv">$form-select-bg-size</span><span class="o">,</span> <span class="nv">$form-select-feedback-icon-size</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:focus</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="nt">box-shadow</span><span class="nd">:</span> <span class="err">$</span><span class="nt">focus-box-shadow</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="na">box-shadow</span><span class="o">:</span> <span class="nv">$focus-box-shadow</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.form-check-input</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</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">border-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:checked</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="na">background-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span>
<span class="nt">box-shadow</span><span class="nd">:</span> <span class="err">$</span><span class="nt">focus-box-shadow</span><span class="p">;</span>
<span class="na">box-shadow</span><span class="o">:</span> <span class="nv">$focus-box-shadow</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">~</span> <span class="nc">.form-check-label</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="na">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>
<span class="nc">.form-check-inline</span> <span class="nc">.form-check-input</span> <span class="p">{</span>
<span class="o">~</span> <span class="nc">.</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span><span class="nc">-feedback</span> <span class="p">{</span>
<span class="nt">margin-left</span><span class="nd">:</span> <span class="nc">.5em</span><span class="p">;</span>
<span class="na">margin-left</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -1162,12 +1162,12 @@ We are aware that currently the client-side custom validation styles and tooltip
<span class="nc">.input-group</span> <span class="nc">.form-select</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state-selector</span><span class="p">(</span><span class="nv">$state</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@if</span> <span class="nv">$state</span> <span class="o">==</span> <span class="s2">&#34;valid&#34;</span> <span class="p">{</span>
<span class="nt">z-index</span><span class="nd">:</span> <span class="nt">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">@else</span> <span class="nt">if</span> <span class="err">$</span><span class="nt">state</span> <span class="o">==</span> <span class="s2">&#34;invalid&#34;</span> <span class="p">{</span>
<span class="nt">z-index</span><span class="nd">:</span> <span class="nt">2</span><span class="p">;</span>
<span class="na">z-index</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">@else if</span> <span class="nv">$state</span> <span class="o">==</span> <span class="s2">&#34;invalid&#34;</span> <span class="p">{</span>
<span class="na">z-index</span><span class="o">:</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span>
<span class="nt">z-index</span><span class="nd">:</span> <span class="nt">3</span><span class="p">;</span>
<span class="na">z-index</span><span class="o">:</span> <span class="mi">3</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -1189,7 +1189,7 @@ We are aware that currently the client-side custom validation styles and tooltip
<p>Maps of <code>$form-validation-states</code> can contain three optional parameters to override tooltips and focus styles.</p>
<h3 id="loop">Loop</h3>
<p>Used to iterate over <code>$form-validation-states</code> map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><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">data</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">form-validation-states</span> <span class="p">{</span>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$data</span> <span class="ow">in</span> <span class="nv">$form-validation-states</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> form-validation-state</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$data</span><span class="o">...</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
@@ -1213,7 +1213,7 @@ We are aware that currently the client-side custom validation styles and tooltip
<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">
@@ -1260,7 +1260,7 @@ We are aware that currently the client-side custom validation styles and tooltip
</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>
@@ -1268,7 +1268,7 @@ We are aware that currently the client-side custom validation styles and tooltip
<script src="/docs/5.0/assets/js/docs.min.js"></script>
<script async src="/docs/5.0/assets/js/validate-forms.js"></script>
</body>
</html>