mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 16:44:17 +02:00
Code Issues Releases Wiki Activity

Fathom

Browse Source
This commit is contained in:
Mark Otto
2022-05-09 16:59:05 -07:00
committed by Mark Otto
parent d0c6a9e12a
commit 0d0ca30f5d
825 changed files with 5120 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/5.0/forms/checks-radios/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -429,10 +430,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="approach">Approach</h2>
<p>Browser default checkboxes and radios are replaced with the help of <code>.form-check</code>, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
@@ -906,7 +907,7 @@ Visually, these checkbox toggle buttons are identical to the <a href="/docs/5.0/
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/floating-labels/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -410,10 +411,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="example">Example</h2>
<p>Wrap a pair of <code>&lt;input class=&quot;form-control&quot;&gt;</code> and <code>&lt;label&gt;</code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap&rsquo;s textual form fields. A <code>placeholder</code> is required on each <code>&lt;input&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code>&lt;input&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
@@ -621,7 +622,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/form-control/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -414,10 +415,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="example">Example</h2>
<div class="bd-example">
@@ -724,7 +725,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/input-group/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -421,10 +422,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="basic-example">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code>&lt;label&gt;</code>s outside the input group.</p>
@@ -998,7 +999,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/layout/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -413,10 +414,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="forms">Forms</h2>
<p>Every group of form fields should reside in a <code>&lt;form&gt;</code> element. Bootstrap provides no default styling for the <code>&lt;form&gt;</code> element, but there are some powerful browser features that are provided by default.</p>
@@ -1014,7 +1015,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

33
docs/5.0/forms/overview/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -410,70 +411,70 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<div class="row g-3">
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../form-control/">
<strong class="d-block h5 mb-0">Form control</strong>
<span class="text-secondary">Style textual inputs and textareas with support for multiple states.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../select/">
<strong class="d-block h5 mb-0">Select</strong>
<span class="text-secondary">Improve browser default select elements with a custom initial appearance.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../checks-radios/">
<strong class="d-block h5 mb-0">Checks &amp; radios</strong>
<span class="text-secondary">Use our custom radio buttons and checkboxes in forms for selecting input options.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../range/">
<strong class="d-block h5 mb-0">Range</strong>
<span class="text-secondary">Replace browser default range inputs with our custom version.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../input-group/">
<strong class="d-block h5 mb-0">Input group</strong>
<span class="text-secondary">Attach labels and buttons to your inputs for increased semantic value.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../floating-labels/">
<strong class="d-block h5 mb-0">Floating labels</strong>
<span class="text-secondary">Create beautifully simple form labels that float over your input fields.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../layout/">
<strong class="d-block h5 mb-0">Layout</strong>
<span class="text-secondary">Create inline, horizontal, or complex grid-based layouts with your forms.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../validation/">
<strong class="d-block h5 mb-0">Validation</strong>
<span class="text-secondary">Validate your forms with custom or native validation behaviors and styles.</span>
</a>
</div>
</div>
<h2 id="overview">Overview</h2>
<p>Bootstrap&rsquo;s form controls expand on <a href="/docs/5.0/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
@@ -722,7 +723,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/range/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -410,10 +411,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="overview">Overview</h2>
<p>Create custom <code>&lt;input type=&quot;range&quot;&gt;</code> controls with <code>.form-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports &ldquo;filling&rdquo; their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
@@ -536,7 +537,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/forms/select/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -409,10 +410,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="default">Default</h2>
<p>Custom <code>&lt;select&gt;</code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles. Custom styles are limited to the <code>&lt;select&gt;</code>&rsquo;s initial appearance and cannot modify the <code>&lt;option&gt;</code>s due to browser limitations.</p>
@@ -615,7 +616,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/forms/validation/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -416,10 +417,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<div class="bd-callout bd-callout-warning">
We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we&rsquo;d recommend either using the server-side option or the default browser validation method.
@@ -1268,7 +1269,7 @@ We are aware that currently the client-side custom validation styles and tooltip
<script src="/docs/5.0/assets/js/docs.min.js"></script>
<script async src="/docs/5.0/assets/js/validate-forms.js"></script>
</body>
</html>