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

Fathom

Browse Source
This commit is contained in:
Mark Otto
2022-05-09 16:59:05 -07:00
committed by Mark Otto
parent d0c6a9e12a
commit 0d0ca30f5d
825 changed files with 5120 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
docs/5.1/examples/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -62,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>
@@ -137,19 +138,19 @@
</header>
<header class="py-5 border-bottom">
<div class="container 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-sm-row">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.1.3/bootstrap-5.1.3-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.1.3.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>
@@ -161,7 +162,7 @@
<main class="bd-content order-1 py-5" id="content">
<div class="container">
<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">
@@ -177,8 +178,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/heroes.png,
@@ -191,8 +192,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/features.png,
@@ -205,8 +206,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sidebars.png,
@@ -219,8 +220,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/footers.png,
@@ -233,8 +234,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dropdowns.png,
@@ -247,8 +248,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/list-groups.png,
@@ -261,8 +262,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/modals.png,
@@ -291,8 +292,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/pricing.png,
@@ -305,8 +306,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout.png,
@@ -319,8 +320,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/product.png,
@@ -333,8 +334,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cover.png,
@@ -347,8 +348,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel.png,
@@ -361,8 +362,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog.png,
@@ -375,8 +376,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard.png,
@@ -389,8 +390,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sign-in.png,
@@ -403,8 +404,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer.png,
@@ -417,8 +418,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/sticky-footer-navbar.png,
@@ -431,8 +432,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/jumbotron.png,
@@ -461,8 +462,8 @@
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/grid.png,
@@ -475,8 +476,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet.png,
@@ -489,8 +490,8 @@
</a>
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/cheatsheet-rtl.png,
@@ -519,8 +520,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-static.png,
@@ -533,8 +534,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-fixed.png,
@@ -547,8 +548,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/navbar-bottom.png,
@@ -561,8 +562,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/offcanvas-navbar.png,
@@ -594,8 +595,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/checkout-rtl.png,
@@ -608,8 +609,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/carousel-rtl.png,
@@ -622,8 +623,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/blog-rtl.png,
@@ -636,8 +637,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 col-xl-3 mb-3">
<a class="d-block" href="/docs/5.1/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.1/assets/img/examples/dashboard-rtl.png,
@@ -667,10 +668,10 @@
<p class="text-muted">Combine the powers of the Bootstrap grid and the Masonry layout.</p>
</div>
</div>
<hr class="my-5">
<div class="container">
<div class="text-center">
@@ -691,7 +692,7 @@
src="/docs/5.1/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
</div>
</main>
@@ -762,7 +763,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>