mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-27 23:30:04 +02:00
Add v5.2.1 docs (#37099)
This commit is contained in:
XhmikosR
GitHub
@@ -18,7 +18,7 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -31,23 +31,21 @@
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Forms">
|
||||
<meta name="twitter:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta name="twitter:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/forms/overview/">
|
||||
<meta property="og:title" content="Forms">
|
||||
<meta property="og:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
@@ -145,6 +143,7 @@
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<div class="bd-navbar-toggle">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
@@ -152,14 +151,21 @@
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
<div class="d-flex">
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
@@ -189,12 +195,6 @@
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
@@ -218,7 +218,7 @@
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
@@ -254,7 +254,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
@@ -480,7 +480,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
@@ -504,70 +504,70 @@
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<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 & 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 <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
|
||||
<p>Bootstrap’s form controls expand on <a href="/docs/5.2/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>
|
||||
@@ -805,7 +805,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/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.2.0.</li>
|
||||
<li class="mb-2">Currently v5.2.1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -854,7 +854,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -863,12 +863,12 @@
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
|
||||
|
||||
|
||||
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
|
||||
|
||||
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
|
||||
@@ -882,10 +882,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.2.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
@@ -912,7 +912,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text" tabindex="-1"></div>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user