mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Add v5.2.1 docs (#37099)

Browse Source
This commit is contained in:
XhmikosR
2022-09-07 18:36:43 +03:00
committed by GitHub
parent c2b4f59e0c
commit 1510239c8f
188 changed files with 4103 additions and 3875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
docs/5.2/examples/index.html
View File

@@ -18,7 +18,7 @@
<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="Examples">
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<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/examples/">
<meta property="og:title" content="Examples">
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta property="og:type" content="website">
<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>
@@ -65,7 +63,7 @@
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
</div>
</div>
@@ -145,15 +143,19 @@
<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="d-lg-none" style="width: 2.25rem;"></div>
<div class="d-lg-none" style="width: 1.5rem;"></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">
<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">
@@ -183,8 +185,6 @@
<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">
@@ -208,7 +208,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">
@@ -244,24 +244,24 @@
</header>
<header class="py-5 border-bottom">
<div class="container-xxl bd-gutter pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
<div class="d-flex flex-column flex-md-row gap-3">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.2.0/bootstrap-5.2.0-examples.zip" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.2.1/bootstrap-5.2.1-examples.zip" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Download examples
</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.2.0.zip" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
<a href="https://github.com/twbs/bootstrap/archive/v5.2.1.zip" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
Download source code
</a>
</div>
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
@@ -273,7 +273,7 @@
<main class="bd-content order-1 py-5" id="content">
<div class="container-xxl bd-gutter">
<div class="row g-lg-5 mb-5">
<div class="bd-content col-lg-3">
<h2 id="snippets">Snippets</h2>
@@ -294,8 +294,8 @@
</a>
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/heroes.png,
@@ -308,8 +308,8 @@
</a>
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/features.png,
@@ -322,8 +322,8 @@
</a>
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sidebars.png,
@@ -336,8 +336,8 @@
</a>
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/footers.png,
@@ -350,8 +350,8 @@
</a>
<p class="text-muted">Finish every page strong with an awesome footer, big or small.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dropdowns.png,
@@ -364,8 +364,8 @@
</a>
<p class="text-muted">Enhance your dropdowns with filters, icons, custom styles, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/list-groups.png,
@@ -378,8 +378,8 @@
</a>
<p class="text-muted">Extend list groups with utilities and custom styles for any content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/modals.png,
@@ -398,7 +398,7 @@
<div class="row g-lg-5 mb-5">
<div class="bd-content col-lg-3">
<h2 id="custom-components">Custom Components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
<p>Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
</div>
<div class="col-lg-9">
@@ -415,8 +415,8 @@
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/pricing.png,
@@ -429,8 +429,8 @@
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout.png,
@@ -443,8 +443,8 @@
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/product.png,
@@ -457,8 +457,8 @@
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cover.png,
@@ -471,8 +471,8 @@
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel.png,
@@ -485,8 +485,8 @@
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog.png,
@@ -499,8 +499,8 @@
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard.png,
@@ -513,8 +513,8 @@
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sign-in.png,
@@ -527,8 +527,8 @@
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer.png,
@@ -541,8 +541,8 @@
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer-navbar.png,
@@ -555,8 +555,8 @@
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/jumbotron.png,
@@ -592,8 +592,8 @@
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/grid.png,
@@ -606,8 +606,8 @@
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet.png,
@@ -620,8 +620,8 @@
</a>
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet-rtl.png,
@@ -657,8 +657,8 @@
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbars-offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbars-offcanvas.png,
@@ -671,8 +671,8 @@
</a>
<p class="text-muted">Same as the Navbars example, but with our offcanvas component.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-static.png,
@@ -685,8 +685,8 @@
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-fixed.png,
@@ -699,8 +699,8 @@
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-bottom.png,
@@ -713,8 +713,8 @@
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/offcanvas-navbar.png,
@@ -738,7 +738,7 @@
<p>
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
</p>
<p><a href="https://github.com/twbs/bootstrap/issues/new">Please open an issue.</a></p>
<p><a href="https://github.com/twbs/bootstrap/issues/new/choose">Please open an issue.</a></p>
</div>
</div>
@@ -756,8 +756,8 @@
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout-rtl.png,
@@ -770,8 +770,8 @@
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel-rtl.png,
@@ -784,8 +784,8 @@
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog-rtl.png,
@@ -798,8 +798,8 @@
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard-rtl.png,
@@ -841,7 +841,7 @@
<hr class="my-5">
<div class="container">
<div class="text-center">
@@ -862,7 +862,7 @@
src="/docs/5.2/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
</div>
</main>
@@ -878,7 +878,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">
@@ -927,7 +927,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>
@@ -937,7 +937,7 @@
</body>
</html>