mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Add v5.0.0-beta3 docs (#33440)
This commit is contained in:
XhmikosR
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -419,6 +421,11 @@
|
||||
<li><a href="#outlined-styles">Outlined styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -791,6 +798,42 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
|
||||
|
||||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">name</span><span class="o">=</span><span class="s">"options-outlined"</span> <span class="na">id</span><span class="o">=</span><span class="s">"danger-outlined"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span> <span class="na">for</span><span class="o">=</span><span class="s">"danger-outlined"</span><span class="p">></span>Danger radio<span class="p"></</span><span class="nt">label</span><span class="p">></span></code></pre></div>
|
||||
<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-check-input-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-min-height</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="nv">$line-height-base</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-padding-start</span><span class="o">:</span> <span class="nv">$form-check-input-width</span> <span class="o">+</span> <span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-margin-bottom</span><span class="o">:</span> <span class="mf">.125</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-label-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-label-cursor</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-transition</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
|
||||
<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="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mi">0</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>
|
||||
<span class="nv">$form-check-input-focus-box-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-check-input-checked-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-checked-bg-color</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-checked-border-color</span><span class="o">:</span> <span class="nv">$form-check-input-checked-bg-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-checked-bg-image</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='</span><span class="si">#{</span><span class="nv">$form-check-input-checked-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-radio-checked-bg-image</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='</span><span class="si">#{</span><span class="nv">$form-check-input-checked-color</span><span class="si">}</span><span class="sx">'/></svg>")</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-check-input-indeterminate-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-indeterminate-bg-color</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-indeterminate-border-color</span><span class="o">:</span> <span class="nv">$form-check-input-indeterminate-bg-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-input-indeterminate-bg-image</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='</span><span class="si">#{</span><span class="nv">$form-check-input-indeterminate-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-check-input-disabled-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-label-disabled-opacity</span><span class="o">:</span> <span class="nv">$form-check-input-disabled-opacity</span><span class="p">;</span>
|
||||
<span class="nv">$form-check-btn-check-disabled-opacity</span><span class="o">:</span> <span class="nv">$btn-disabled-opacity</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-check-inline-margin-end</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -806,11 +849,11 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -400,6 +402,11 @@
|
||||
<li><a href="#textareas">Textareas</a></li>
|
||||
<li><a href="#selects">Selects</a></li>
|
||||
<li><a href="#layout">Layout</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -530,6 +537,17 @@
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<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-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>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -545,11 +563,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Give textual form controls like <input>s and <textarea>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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -404,6 +406,11 @@
|
||||
<li><a href="#file-input">File input</a></li>
|
||||
<li><a href="#color">Color</a></li>
|
||||
<li><a href="#datalists">Datalists</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -575,6 +582,71 @@
|
||||
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"Los Angeles"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"Chicago"</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">datalist</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p><code>$input-*</code> are shared across most of our form controls (and not buttons).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$input-padding-y</span><span class="o">:</span> <span class="nv">$input-btn-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$input-padding-x</span><span class="o">:</span> <span class="nv">$input-btn-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$input-font-family</span><span class="o">:</span> <span class="nv">$input-btn-font-family</span><span class="p">;</span>
|
||||
<span class="nv">$input-font-size</span><span class="o">:</span> <span class="nv">$input-btn-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$input-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-base</span><span class="p">;</span>
|
||||
<span class="nv">$input-line-height</span><span class="o">:</span> <span class="nv">$input-btn-line-height</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-padding-y-sm</span><span class="o">:</span> <span class="nv">$input-btn-padding-y-sm</span><span class="p">;</span>
|
||||
<span class="nv">$input-padding-x-sm</span><span class="o">:</span> <span class="nv">$input-btn-padding-x-sm</span><span class="p">;</span>
|
||||
<span class="nv">$input-font-size-sm</span><span class="o">:</span> <span class="nv">$input-btn-font-size-sm</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-padding-y-lg</span><span class="o">:</span> <span class="nv">$input-btn-padding-y-lg</span><span class="p">;</span>
|
||||
<span class="nv">$input-padding-x-lg</span><span class="o">:</span> <span class="nv">$input-btn-padding-x-lg</span><span class="p">;</span>
|
||||
<span class="nv">$input-font-size-lg</span><span class="o">:</span> <span class="nv">$input-btn-font-size-lg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$input-disabled-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
<span class="nv">$input-disabled-border-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
<span class="nv">$input-border-color</span><span class="o">:</span> <span class="nv">$gray-400</span><span class="p">;</span>
|
||||
<span class="nv">$input-border-width</span><span class="o">:</span> <span class="nv">$input-btn-border-width</span><span class="p">;</span>
|
||||
<span class="nv">$input-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-inset</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$input-border-radius-sm</span><span class="o">:</span> <span class="nv">$border-radius-sm</span><span class="p">;</span>
|
||||
<span class="nv">$input-border-radius-lg</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-focus-bg</span><span class="o">:</span> <span class="nv">$input-bg</span><span class="p">;</span>
|
||||
<span class="nv">$input-focus-border-color</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">50</span><span class="kt">%</span><span class="p">);</span>
|
||||
<span class="nv">$input-focus-color</span><span class="o">:</span> <span class="nv">$input-color</span><span class="p">;</span>
|
||||
<span class="nv">$input-focus-width</span><span class="o">:</span> <span class="nv">$input-btn-focus-width</span><span class="p">;</span>
|
||||
<span class="nv">$input-focus-box-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-placeholder-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$input-plaintext-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-height-border</span><span class="o">:</span> <span class="nv">$input-border-width</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
|
||||
|
||||
<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</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>
|
||||
</code></pre></div>
|
||||
<p><code>$form-label-*</code> and <code>$form-text-*</code> are for our <code><label></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>
|
||||
<span class="nv">$form-label-font-size</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-label-font-style</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-label-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-label-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$form-text-margin-top</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$form-text-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$form-text-font-style</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-text-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$form-text-color</span><span class="o">:</span> <span class="nv">$text-muted</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -590,11 +662,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -411,6 +413,11 @@
|
||||
<li><a href="#custom-file-input">Custom file input</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -910,6 +917,15 @@
|
||||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"file"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputGroupFile04"</span> <span class="na">aria-describedby</span><span class="o">=</span><span class="s">"inputGroupFileAddon04"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Upload"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputGroupFileAddon04"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<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">$input-group-addon-padding-y</span><span class="o">:</span> <span class="nv">$input-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$input-group-addon-padding-x</span><span class="o">:</span> <span class="nv">$input-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$input-group-addon-font-weight</span><span class="o">:</span> <span class="nv">$input-font-weight</span><span class="p">;</span>
|
||||
<span class="nv">$input-group-addon-color</span><span class="o">:</span> <span class="nv">$input-color</span><span class="p">;</span>
|
||||
<span class="nv">$input-group-addon-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
<span class="nv">$input-group-addon-border-color</span><span class="o">:</span> <span class="nv">$input-border-color</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -925,11 +941,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -874,7 +876,7 @@
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">form</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="inline-forms">Inline forms</h2>
|
||||
<p>Use the <code>.col-auto</code> class to create horizontal layouts. By adding <a href="/docs/5.0/layout/gutters/">gutter modifier classes</a>, we’ll have gutters in horizontal and vertical directions. The <code>.align-items-center</code> aligns the form elements to the middle, making the <code>.form-checkbox</code> align properly.</p>
|
||||
<p>Use the <code>.row-cols-*</code> classes to create responsive horizontal layouts. By adding <a href="/docs/5.0/layout/gutters/">gutter modifier classes</a>, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the <code>.col-12</code> helps stack the form controls and more. The <code>.align-items-center</code> aligns the form elements to the middle, making the <code>.form-checkbox</code> align properly.</p>
|
||||
<div class="bd-example">
|
||||
<form class="row row-cols-lg-auto g-3 align-items-center">
|
||||
<div class="col-12">
|
||||
@@ -955,11 +957,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -400,6 +402,11 @@
|
||||
<li><a href="#form-text">Form text</a></li>
|
||||
<li><a href="#disabled-forms">Disabled forms</a></li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -617,6 +624,32 @@
|
||||
</ul>
|
||||
<p>If none of these are present, assistive technologies may resort to using the <code>placeholder</code> attribute as a fallback for the accessible name on <code><input></code> and <code><textarea></code> elements. The examples in this section provide a few suggested, case-specific approaches.</p>
|
||||
<p>While using visually hidden content (<code>.visually-hidden</code>, <code>aria-label</code>, and even <code>placeholder</code> content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<p>Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as <code>$btn-input-*</code> and <code>$input-*</code> variables.</p>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p><code>$btn-input-*</code> variables are shared global variables between our <a href="/docs/5.0/components/buttons/">buttons</a> and our form components. You’ll find these frequently reassigned as values to other component-specific variables.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$input-btn-padding-y</span><span class="o">:</span> <span class="mf">.375</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-padding-x</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-font-family</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-line-height</span><span class="o">:</span> <span class="nv">$line-height-base</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-btn-focus-width</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-focus-color-opacity</span><span class="o">:</span> <span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-focus-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$component-active-bg</span><span class="o">,</span> <span class="nv">$input-btn-focus-color-opacity</span><span class="p">);</span>
|
||||
<span class="nv">$input-btn-focus-blur</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-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-btn-focus-width</span> <span class="nv">$input-btn-focus-color</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-btn-padding-y-sm</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-padding-x-sm</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-font-size-sm</span><span class="o">:</span> <span class="nv">$font-size-sm</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-btn-padding-y-lg</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-padding-x-lg</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$input-btn-font-size-lg</span><span class="o">:</span> <span class="nv">$font-size-lg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$input-btn-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -632,11 +665,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -400,6 +402,11 @@
|
||||
<li><a href="#disabled">Disabled</a></li>
|
||||
<li><a href="#min-and-max">Min and max</a></li>
|
||||
<li><a href="#steps">Steps</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -436,6 +443,27 @@
|
||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"customRange3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-label"</span><span class="p">></span>Example range<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"range"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-range"</span> <span class="na">min</span><span class="o">=</span><span class="s">"0"</span> <span class="na">max</span><span class="o">=</span><span class="s">"5"</span> <span class="na">step</span><span class="o">=</span><span class="s">"0.5"</span> <span class="na">id</span><span class="o">=</span><span class="s">"customRange3"</span><span class="p">></span></code></pre></div>
|
||||
<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-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-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>
|
||||
|
||||
<span class="nv">$form-range-thumb-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$form-range-thumb-height</span><span class="o">:</span> <span class="nv">$form-range-thumb-width</span><span class="p">;</span>
|
||||
<span class="nv">$form-range-thumb-bg</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$form-range-thumb-border</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="nv">$form-range-thumb-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-thumb-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mf">.1</span><span class="kt">rem</span> <span class="mf">.25</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.1</span><span class="p">);</span>
|
||||
<span class="nv">$form-range-thumb-focus-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="nv">$body-bg</span><span class="o">,</span> <span class="nv">$input-focus-box-shadow</span><span class="p">;</span>
|
||||
<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>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -451,11 +479,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Customize the native <select>s with custom CSS that changes the element’s initial appearance.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -399,6 +401,11 @@
|
||||
<li><a href="#default">Default</a></li>
|
||||
<li><a href="#sizing">Sizing</a></li>
|
||||
<li><a href="#disabled">Disabled</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -494,6 +501,46 @@
|
||||
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Two<span class="p"></</span><span class="nt">option</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>Three<span class="p"></</span><span class="nt">option</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">select</span><span class="p">></span></code></pre></div>
|
||||
<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-select-padding-y</span><span class="o">:</span> <span class="nv">$input-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-padding-x</span><span class="o">:</span> <span class="nv">$input-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-font-family</span><span class="o">:</span> <span class="nv">$input-font-family</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-font-size</span><span class="o">:</span> <span class="nv">$input-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-indicator-padding</span><span class="o">:</span> <span class="nv">$form-select-padding-x</span> <span class="o">*</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// Extra padding for background-image
|
||||
</span><span class="c1"></span><span class="nv">$form-select-font-weight</span><span class="o">:</span> <span class="nv">$input-font-weight</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-line-height</span><span class="o">:</span> <span class="nv">$input-line-height</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-color</span><span class="o">:</span> <span class="nv">$input-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-bg</span><span class="o">:</span> <span class="nv">$input-bg</span><span class="p">;</span>
|
||||
<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-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("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='</span><span class="si">#{</span><span class="nv">$form-select-indicator-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>")</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-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>
|
||||
<span class="nv">$form-select-border-color</span><span class="o">:</span> <span class="nv">$input-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-inset</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-select-focus-border-color</span><span class="o">:</span> <span class="nv">$input-focus-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-focus-width</span><span class="o">:</span> <span class="nv">$input-focus-width</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-focus-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$form-select-focus-width</span> <span class="nv">$input-btn-focus-color</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-select-padding-y-sm</span><span class="o">:</span> <span class="nv">$input-padding-y-sm</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-padding-x-sm</span><span class="o">:</span> <span class="nv">$input-padding-x-sm</span><span class="p">;</span>
|
||||
<span class="nv">$form-select-font-size-sm</span><span class="o">:</span> <span class="nv">$input-font-size-sm</span><span class="p">;</span>
|
||||
|
||||
<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>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -509,11 +556,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -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.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -402,7 +404,15 @@
|
||||
<li><a href="#server-side">Server side</a></li>
|
||||
<li><a href="#supported-elements">Supported elements</a></li>
|
||||
<li><a href="#tooltips">Tooltips</a></li>
|
||||
<li><a href="#customizing">Customizing</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#map">Map</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
<li><a href="#customizing">Customizing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -1009,10 +1019,153 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">></span>Submit form<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">form</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="customizing">Customizing</h2>
|
||||
<p>Validation states can be customized via Sass with the <code>$form-validation-states</code> map. Located in our <code>_variables.scss</code> file, this Sass map is how we generate the default <code>valid</code>/<code>invalid</code> validation states. Included is a nested map for customizing each state’s color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code>form-validation-state</code> mixin.</p>
|
||||
<p>This is the Sass map from <code>_variables.scss</code>. Override this and recompile your Sass to generate different states:</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">$form-feedback-margin-top</span><span class="o">:</span> <span class="nv">$form-text-margin-top</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-font-size</span><span class="o">:</span> <span class="nv">$form-text-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-font-style</span><span class="o">:</span> <span class="nv">$form-text-font-style</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-valid-color</span><span class="o">:</span> <span class="nv">$success</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-invalid-color</span><span class="o">:</span> <span class="nv">$danger</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$form-feedback-icon-valid-color</span><span class="o">:</span> <span class="nv">$form-feedback-valid-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-icon-valid</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='</span><span class="si">#{</span><span class="nv">$form-feedback-icon-valid-color</span><span class="si">}</span><span class="sx">' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-icon-invalid-color</span><span class="o">:</span> <span class="nv">$form-feedback-invalid-color</span><span class="p">;</span>
|
||||
<span class="nv">$form-feedback-icon-invalid</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='</span><span class="si">#{</span><span class="nv">$form-feedback-icon-invalid-color</span><span class="si">}</span><span class="sx">'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='</span><span class="si">#{</span><span class="nv">$form-feedback-icon-invalid-color</span><span class="si">}</span><span class="sx">' stroke='none'/></svg>")</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<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">"valid"</span> <span class="ow">or</span> <span class="nv">$state</span> <span class="o">==</span> <span class="s2">"invalid"</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">&</span><span class="o">,</span> <span class="s2">"&"</span><span class="o">,</span> <span class="s2">""</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">&</span><span class="o">,</span> <span class="s2">"&"</span><span class="o">,</span> <span class="s2">""</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="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">&</span><span class="o">,</span> <span class="s2">"&"</span><span class="o">,</span> <span class="s2">""</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="k">@content</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> form-validation-state</span><span class="p">(</span>
|
||||
<span class="nv">$state</span><span class="o">,</span>
|
||||
<span class="nv">$color</span><span class="o">,</span>
|
||||
<span class="nv">$icon</span><span class="o">,</span>
|
||||
<span class="nv">$tooltip-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$color</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$tooltip-bg-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$form-feedback-tooltip-opacity</span><span class="p">)</span><span class="o">,</span>
|
||||
<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="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="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="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="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="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="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="p">}</span>
|
||||
|
||||
<span class="k">&</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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// stylelint-disable-next-line selector-no-qualifying-type
|
||||
</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="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="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">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="p">}</span>
|
||||
|
||||
<span class="k">&</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="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="k">&</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="p">}</span>
|
||||
|
||||
<span class="k">&</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="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="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="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.input-group</span> <span class="nc">.form-control</span><span class="o">,</span>
|
||||
<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="nt">z-index</span><span class="nd">:</span> <span class="nt">3</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="map">Map</h3>
|
||||
<p>This is the validation Sass map from <code>_variables.scss</code>. Override or extend this to generate different or additional states.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$form-validation-states</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"valid"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"color"</span><span class="o">:</span> <span class="nv">$form-feedback-valid-color</span><span class="o">,</span>
|
||||
@@ -1025,11 +1178,15 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Maps of <code>$form-validation-states</code> can contain three optional parameters to override tooltips and focus styles.</p>
|
||||
<p>This is the loop from <code>forms/_validation.scss</code>. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:</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>
|
||||
<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>
|
||||
<h3 id="customizing">Customizing</h3>
|
||||
<p>Validation states can be customized via Sass with the <code>$form-validation-states</code> map. Located in our <code>_variables.scss</code> file, this Sass map is how we generate the default <code>valid</code>/<code>invalid</code> validation states. Included is a nested map for customizing each state’s color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
<p>Please note that <strong>we do not recommend customizing <code>$form-validation-states</code> values without also modifying the <code>form-validation-state</code> mixin</strong>.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -1045,11 +1202,11 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user