mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-15 10:05:40 +02:00
Code Issues Releases Wiki Activity

Add v5.3.0 docs (#38658)

Browse Source
This commit is contained in:
XhmikosR
2023-05-30 18:21:02 +03:00
committed by GitHub
parent 87498ceeb2
commit 4be8b59d15
232 changed files with 4200 additions and 3253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/5.3/forms/layout/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.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/layout.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/layout.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
</div>
@@ -584,7 +584,7 @@
<h2 id="utilities">Utilities <a class="anchor-link" href="#utilities" aria-label="Link to this section: Utilities"></a></h2>
<p><a href="/docs/5.3/utilities/spacing/">Margin utilities</a> are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to <code>margin-bottom</code> utilities, and using a single direction throughout the form for consistency.</p>
<p>Feel free to build your forms however you like, with <code>&lt;fieldset&gt;</code>s, <code>&lt;div&gt;</code>s, or nearly any other element.</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">
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
@@ -614,7 +614,7 @@
<h2 id="form-grid">Form grid <a class="anchor-link" href="#form-grid" aria-label="Link to this section: Form grid"></a></h2>
<p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. <strong>Requires the <code>$enable-grid-classes</code> Sass variable to be enabled</strong> (on by default).</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">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
@@ -644,7 +644,7 @@
<h2 id="gutters">Gutters <a class="anchor-link" href="#gutters" aria-label="Link to this section: Gutters"></a></h2>
<p>By adding <a href="/docs/5.3/layout/gutters/">gutter modifier classes</a>, you can have control over the gutter width in as well the inline as block direction. <strong>Also requires the <code>$enable-grid-classes</code> Sass variable to be enabled</strong> (on by default).</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">
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
@@ -673,7 +673,7 @@
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>More complex layouts can also be created with the grid system.</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-6">
<label for="inputEmail4" class="form-label">Email</label>
@@ -776,7 +776,7 @@
<h2 id="horizontal-form">Horizontal form <a class="anchor-link" href="#horizontal-form" aria-label="Link to this section: Horizontal form"></a></h2>
<p>Create horizontal forms with the grid by adding the <code>.row</code> class to form groups and using the <code>.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code>.col-form-label</code> to your <code>&lt;label&gt;</code>s as well so they&rsquo;re vertically centered with their associated form controls.</p>
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we&rsquo;ve removed the <code>padding-top</code> on our stacked radio inputs label to better align the text baseline.</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>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@@ -886,7 +886,7 @@
<h3 id="horizontal-form-label-sizing">Horizontal form label sizing <a class="anchor-link" href="#horizontal-form-label-sizing" aria-label="Link to this section: Horizontal form label sizing"></a></h3>
<p>Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to your <code>&lt;label&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</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">
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
@@ -936,7 +936,7 @@
<h2 id="column-sizing">Column sizing <a class="anchor-link" href="#column-sizing" aria-label="Link to this section: Column sizing"></a></h2>
<p>As shown in the previous examples, our grid system allows you to place any number of <code>.col</code>s within a <code>.row</code>. They&rsquo;ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code>.col</code>s equally split the rest, with specific column classes like <code>.col-sm-7</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">
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
@@ -972,7 +972,7 @@
<h2 id="auto-sizing">Auto-sizing <a class="anchor-link" href="#auto-sizing" aria-label="Link to this section: Auto-sizing"></a></h2>
<p>The example below uses a flexbox utility to vertically center the contents and changes <code>.col</code> to <code>.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</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 gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
@@ -1051,7 +1051,7 @@
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>You can then remix that once again with size-specific column classes.</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 gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
@@ -1131,7 +1131,7 @@
<h2 id="inline-forms">Inline forms <a class="anchor-link" href="#inline-forms" aria-label="Link to this section: Inline forms"></a></h2>
<p>Use the <code>.row-cols-*</code> classes to create responsive horizontal layouts. By adding <a href="/docs/5.3/layout/gutters/">gutter modifier classes</a>, we&rsquo;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-check</code> align properly.</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 row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
@@ -1224,7 +1224,7 @@
<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">
@@ -1273,7 +1273,7 @@
</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>
@@ -1301,10 +1301,10 @@
<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}">