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

Add v5.0.0-beta3 docs (#33440)

Browse Source
This commit is contained in:
XhmikosR
2021-03-23 18:32:27 +02:00
committed by GitHub
parent 8484574c52
commit e2460ba2f8
219 changed files with 13671 additions and 7651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
docs/5.0/examples/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<meta name="generator" content="Hugo 0.82.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -140,27 +140,91 @@
<header class="py-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<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-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.0.0-beta2/bootstrap-5.0.0-beta2-examples.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.0.0-beta2.zip" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<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-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.0.0-beta3/bootstrap-5.0.0-beta3-examples.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="https://github.com/twbs/bootstrap/archive/v5.0.0-beta3.zip" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" 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>
</div>
</div>
</div>
</header>
<main class="bd-content order-1 py-5" id="content">
<div class="container">
<h2 id="custom-components">Custom Components</h2>
<h2 id="snippets">Snippets</h2>
<p>Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/headers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/headers.png,
/docs/5.0/assets/img/examples/headers@2x.png 2x"
src="/docs/5.0/assets/img/examples/headers.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Headers</h3>
</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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/heroes.png,
/docs/5.0/assets/img/examples/heroes@2x.png 2x"
src="/docs/5.0/assets/img/examples/heroes.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Heroes</h3>
</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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/features.png,
/docs/5.0/assets/img/examples/features@2x.png 2x"
src="/docs/5.0/assets/img/examples/features.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Features</h3>
</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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sidebars.png,
/docs/5.0/assets/img/examples/sidebars@2x.png 2x"
src="/docs/5.0/assets/img/examples/sidebars.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Sidebars</h3>
</a>
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
</div>
<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>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/album/">
<a class="d-block" href="/docs/5.0/examples/album/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/album.png,
/docs/5.0/assets/img/examples/album@2x.png 2x"
src="/docs/5.0/assets/img/examples/album.png"
@@ -174,7 +238,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/pricing/">
<a class="d-block" href="/docs/5.0/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/pricing.png,
/docs/5.0/assets/img/examples/pricing@2x.png 2x"
src="/docs/5.0/assets/img/examples/pricing.png"
@@ -188,7 +252,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/checkout/">
<a class="d-block" href="/docs/5.0/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout.png,
/docs/5.0/assets/img/examples/checkout@2x.png 2x"
src="/docs/5.0/assets/img/examples/checkout.png"
@@ -202,7 +266,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/product/">
<a class="d-block" href="/docs/5.0/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/product.png,
/docs/5.0/assets/img/examples/product@2x.png 2x"
src="/docs/5.0/assets/img/examples/product.png"
@@ -216,7 +280,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/cover/">
<a class="d-block" href="/docs/5.0/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cover.png,
/docs/5.0/assets/img/examples/cover@2x.png 2x"
src="/docs/5.0/assets/img/examples/cover.png"
@@ -230,7 +294,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/carousel/">
<a class="d-block" href="/docs/5.0/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel.png,
/docs/5.0/assets/img/examples/carousel@2x.png 2x"
src="/docs/5.0/assets/img/examples/carousel.png"
@@ -244,7 +308,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/blog/">
<a class="d-block" href="/docs/5.0/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog.png,
/docs/5.0/assets/img/examples/blog@2x.png 2x"
src="/docs/5.0/assets/img/examples/blog.png"
@@ -258,7 +322,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/dashboard/">
<a class="d-block" href="/docs/5.0/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard.png,
/docs/5.0/assets/img/examples/dashboard@2x.png 2x"
src="/docs/5.0/assets/img/examples/dashboard.png"
@@ -272,7 +336,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/sign-in/">
<a class="d-block" href="/docs/5.0/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sign-in.png,
/docs/5.0/assets/img/examples/sign-in@2x.png 2x"
src="/docs/5.0/assets/img/examples/sign-in.png"
@@ -286,7 +350,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/sticky-footer/">
<a class="d-block" href="/docs/5.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer.png,
/docs/5.0/assets/img/examples/sticky-footer@2x.png 2x"
src="/docs/5.0/assets/img/examples/sticky-footer.png"
@@ -300,7 +364,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/sticky-footer-navbar/">
<a class="d-block" href="/docs/5.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/sticky-footer-navbar.png,
/docs/5.0/assets/img/examples/sticky-footer-navbar@2x.png 2x"
src="/docs/5.0/assets/img/examples/sticky-footer-navbar.png"
@@ -311,12 +375,26 @@
</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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/jumbotron.png,
/docs/5.0/assets/img/examples/jumbotron@2x.png 2x"
src="/docs/5.0/assets/img/examples/jumbotron.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Jumbotron</h3>
</a>
<p class="text-muted">Use utilities to recreate and enhance Bootstrap 4's jumbotron.</p>
</div>
</div>
<h2 id="framework">Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/starter-template/">
<a class="d-block" href="/docs/5.0/examples/starter-template/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/starter-template.png,
/docs/5.0/assets/img/examples/starter-template@2x.png 2x"
src="/docs/5.0/assets/img/examples/starter-template.png"
@@ -330,7 +408,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/grid/">
<a class="d-block" href="/docs/5.0/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/grid.png,
/docs/5.0/assets/img/examples/grid@2x.png 2x"
src="/docs/5.0/assets/img/examples/grid.png"
@@ -344,7 +422,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/cheatsheet/">
<a class="d-block" href="/docs/5.0/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet.png,
/docs/5.0/assets/img/examples/cheatsheet@2x.png 2x"
src="/docs/5.0/assets/img/examples/cheatsheet.png"
@@ -358,7 +436,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/cheatsheet-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/cheatsheet-rtl.png,
/docs/5.0/assets/img/examples/cheatsheet-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/cheatsheet-rtl.png"
@@ -374,7 +452,7 @@
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/navbars/">
<a class="d-block" href="/docs/5.0/examples/navbars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbars.png,
/docs/5.0/assets/img/examples/navbars@2x.png 2x"
src="/docs/5.0/assets/img/examples/navbars.png"
@@ -388,7 +466,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/navbar-static/">
<a class="d-block" href="/docs/5.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-static.png,
/docs/5.0/assets/img/examples/navbar-static@2x.png 2x"
src="/docs/5.0/assets/img/examples/navbar-static.png"
@@ -402,7 +480,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/navbar-fixed/">
<a class="d-block" href="/docs/5.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-fixed.png,
/docs/5.0/assets/img/examples/navbar-fixed@2x.png 2x"
src="/docs/5.0/assets/img/examples/navbar-fixed.png"
@@ -416,7 +494,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/navbar-bottom/">
<a class="d-block" href="/docs/5.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/navbar-bottom.png,
/docs/5.0/assets/img/examples/navbar-bottom@2x.png 2x"
src="/docs/5.0/assets/img/examples/navbar-bottom.png"
@@ -427,21 +505,19 @@
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
<h2 id="experiments">Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/offcanvas.png,
/docs/5.0/assets/img/examples/offcanvas@2x.png 2x"
src="/docs/5.0/assets/img/examples/offcanvas.png"
<a class="d-block" href="/docs/5.0/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/offcanvas-navbar.png,
/docs/5.0/assets/img/examples/offcanvas-navbar@2x.png 2x"
src="/docs/5.0/assets/img/examples/offcanvas-navbar.png"
alt=""
width="480" height="300"
loading="lazy">
<h3 class="h5 mb-1">Offcanvas</h3>
<h3 class="h5 mb-1">Offcanvas navbar</h3>
</a>
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu (doesn't use our offcanvas component).</p>
</div>
</div>
<h2 id="rtl">RTL</h2>
@@ -451,7 +527,7 @@
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/album-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/album-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/album-rtl.png,
/docs/5.0/assets/img/examples/album-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/album-rtl.png"
@@ -465,7 +541,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/checkout-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/checkout-rtl.png,
/docs/5.0/assets/img/examples/checkout-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/checkout-rtl.png"
@@ -479,7 +555,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/carousel-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/carousel-rtl.png,
/docs/5.0/assets/img/examples/carousel-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/carousel-rtl.png"
@@ -493,7 +569,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/blog-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/blog-rtl.png,
/docs/5.0/assets/img/examples/blog-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/blog-rtl.png"
@@ -507,7 +583,7 @@
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/dashboard-rtl/" hreflang="ar">
<a class="d-block" href="/docs/5.0/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/dashboard-rtl.png,
/docs/5.0/assets/img/examples/dashboard-rtl@2x.png 2x"
src="/docs/5.0/assets/img/examples/dashboard-rtl.png"
@@ -523,7 +599,7 @@
<p>Integrations with external libraries.</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/5.0/examples/masonry/">
<a class="d-block" href="/docs/5.0/examples/masonry/">
<img class="img-thumbnail mb-3" srcset="/docs/5.0/assets/img/examples/masonry.png,
/docs/5.0/assets/img/examples/masonry@2x.png 2x"
src="/docs/5.0/assets/img/examples/masonry.png"
@@ -573,11 +649,11 @@
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
</ul>
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>