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

119
docs/4.1/examples/index.html
View File

@@ -51,6 +51,7 @@
<meta property="og:image:height" content="630">
<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');
@@ -128,7 +129,7 @@
</header>
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<h1 class="bd-title mt-0">Examples</h1>
@@ -140,10 +141,10 @@
</header>
<main class="bd-content p-5" id="content" role="main">
<h2>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/4.1/examples/album/">
@@ -152,9 +153,9 @@
</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 href="/docs/4.1/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
@@ -162,9 +163,9 @@
</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 href="/docs/4.1/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
@@ -172,9 +173,9 @@
</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 href="/docs/4.1/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
@@ -182,9 +183,9 @@
</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 href="/docs/4.1/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
@@ -192,9 +193,9 @@
</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 href="/docs/4.1/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
@@ -202,9 +203,9 @@
</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 href="/docs/4.1/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
@@ -212,9 +213,9 @@
</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 href="/docs/4.1/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
@@ -222,9 +223,9 @@
</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 href="/docs/4.1/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
@@ -232,9 +233,9 @@
</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 href="/docs/4.1/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
@@ -242,9 +243,9 @@
</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 href="/docs/4.1/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
@@ -253,11 +254,11 @@
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
<h2>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/4.1/examples/starter-template/">
@@ -266,9 +267,9 @@
</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 href="/docs/4.1/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
@@ -276,9 +277,9 @@
</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 href="/docs/4.1/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
@@ -287,11 +288,11 @@
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
<h2>Navbars</h2>
<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/4.1/examples/navbars/">
@@ -300,9 +301,9 @@
</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 href="/docs/4.1/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
@@ -310,9 +311,9 @@
</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 href="/docs/4.1/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
@@ -320,9 +321,9 @@
</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 href="/docs/4.1/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
@@ -331,11 +332,11 @@
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
<h2>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/4.1/examples/floating-labels/">
@@ -344,9 +345,9 @@
</a>
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
</div>
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
<a href="/docs/4.1/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.1/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
@@ -355,12 +356,12 @@
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
</div>
</div>
</main>
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">