mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-16 10:34:07 +02:00
Add v5.3.0 docs (#38658)
This commit is contained in:
XhmikosR
GitHub
@@ -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.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -531,7 +531,7 @@
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/forms/validation.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/forms/validation.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -564,8 +564,8 @@
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#sass-variables">Sass variables</a></li>
|
||||
<li><a href="#sass-mixins">Sass mixins</a></li>
|
||||
<li><a href="#sass-map">Sass map</a></li>
|
||||
<li><a href="#sass-loop">Sass loop</a></li>
|
||||
<li><a href="#sass-maps">Sass maps</a></li>
|
||||
<li><a href="#sass-loops">Sass loops</a></li>
|
||||
<li><a href="#customizing">Customizing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -598,7 +598,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<h2 id="custom-styles">Custom styles <a class="anchor-link" href="#custom-styles" aria-label="Link to this section: Custom styles"></a></h2>
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code>novalidate</code> boolean attribute to your <code><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your form controls.</p>
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code><select></code>s are only available with <code>.form-select</code>, and not <code>.form-control</code>.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom01" class="form-label">First name</label>
|
||||
@@ -761,7 +761,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<h2 id="browser-defaults">Browser defaults <a class="anchor-link" href="#browser-defaults" aria-label="Link to this section: Browser defaults"></a></h2>
|
||||
<p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.</p>
|
||||
<p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault01" class="form-label">First name</label>
|
||||
@@ -863,7 +863,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code>.is-invalid</code> and <code>.is-valid</code>. Note that <code>.invalid-feedback</code> is also supported with these classes.</p>
|
||||
<p>For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using <code>aria-describedby</code> (noting that this attribute allows more than one <code>id</code> to be referenced, in case the field already points to additional form text).</p>
|
||||
<p>To fix <a href="https://github.com/twbs/bootstrap/issues/25110">issues with border radius</a>, input groups require an additional <code>.has-validation</code> class.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer01" class="form-label">First name</label>
|
||||
@@ -1010,7 +1010,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<li><code><select></code>s with <code>.form-select</code></li>
|
||||
<li><code>.form-check</code>s</li>
|
||||
</ul>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<form class="was-validated">
|
||||
<div class="mb-3">
|
||||
<label for="validationTextarea" class="form-label">Textarea</label>
|
||||
@@ -1112,7 +1112,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
|
||||
<h2 id="tooltips">Tooltips <a class="anchor-link" href="#tooltips" aria-label="Link to this section: Tooltips"></a></h2>
|
||||
<p>If your form layout allows it, you can swap the <code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip01" class="form-label">First name</label>
|
||||
@@ -1235,9 +1235,9 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v5.3.0</small>
|
||||
|
||||
<p>As part of Bootstrap’s evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_root.scss">scss/_root.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_root.scss">scss/_root.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1249,9 +1249,9 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}form-invalid-border-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$form-invalid-border-color</span><span class="si">}</span><span class="p">;</span></span></span></code></pre></div></div>
|
||||
<p>These variables are also color mode adaptive, meaning they change color while in dark mode.</p>
|
||||
<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1268,9 +1268,9 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"><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></span><span class="line"><span class="cl"><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>
|
||||
</span></span></code></pre></div></div>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1281,9 +1281,9 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$form-invalid-color</span><span class="o">:</span> <span class="nv">$form-feedback-invalid-color</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$form-invalid-border-color</span><span class="o">:</span> <span class="nv">$form-feedback-invalid-color</span><span class="p">;</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables-dark.scss">scss/_variables-dark.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables-dark.scss">scss/_variables-dark.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1295,10 +1295,10 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$form-invalid-border-color-dark</span><span class="o">:</span> <span class="nv">$red-300</span><span class="p">;</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<h3 id="sass-mixins">Sass mixins <a class="anchor-link" href="#sass-mixins" aria-label="Link to this section: Sass mixins"></a></h3>
|
||||
<p>Two mixins are combined, through our <a href="#loop">loop</a>, to generate our form validation feedback styles.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<p>Two mixins are combined, through our <a href="#sass-loops">loop</a>, to generate our form validation feedback styles.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/mixins/_forms.scss">scss/mixins/_forms.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/mixins/_forms.scss">scss/mixins/_forms.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1453,11 +1453,11 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<h3 id="sass-map">Sass map <a class="anchor-link" href="#sass-map" aria-label="Link to this section: Sass map"></a></h3>
|
||||
<h3 id="sass-maps">Sass maps <a class="anchor-link" href="#sass-maps" aria-label="Link to this section: Sass maps"></a></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="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1483,11 +1483,11 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<p>Maps of <code>$form-validation-states</code> can contain three optional parameters to override tooltips and focus styles.</p>
|
||||
<h3 id="sass-loop">Sass loop <a class="anchor-link" href="#sass-loop" aria-label="Link to this section: Sass loop"></a></h3>
|
||||
<h3 id="sass-loops">Sass loops <a class="anchor-link" href="#sass-loops" aria-label="Link to this section: Sass loops"></a></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="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/forms/_validation.scss">scss/forms/_validation.scss</a>
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/forms/_validation.scss">scss/forms/_validation.scss</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
@@ -1516,7 +1516,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.3.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -1565,7 +1565,7 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -1593,10 +1593,10 @@ We are aware that currently the client-side custom validation styles and tooltip
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user