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

4.0.0 stable

Browse Source
This commit is contained in:
Mark Otto
2018-01-18 10:32:35 -08:00
parent b01323ae05
commit b9a6894a9d
147 changed files with 4562 additions and 4112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
docs/4.0/examples/index.html
View File

@@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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="Jekyll v3.6.2">
<meta name="generator" content="Jekyll v3.7.0">
<title>Examples · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Documentation extras -->
@@ -123,188 +123,244 @@
</li>
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
</header>
<div class="container my-5">
<main class="bd-content" role="main">
<h1 class="bd-title" id="content">Examples</h1>
<main id="content" role="main">
<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>
<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>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download the Bootstrap source code</a> to snag these examples.</p>
<h2 id="framework">Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/starter-template/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/starter-template.png" alt="" width="800" height="600" />
<h4>Starter template</h4>
</a>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
<a href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/grid/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/grid.png" alt="" width="800" height="600" />
<h4>Grids</h4>
</a>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/jumbotron/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="" width="800" height="600" />
<h4>Jumbotron</h4>
</a>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/narrow-jumbotron/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron-narrow.png" alt="" width="800" height="600" />
<h4>Narrow jumbotron</h4>
</a>
<p>Build a more custom page by narrowing the default container and jumbotron.</p>
</div>
</div>
</header>
<h2 id="navbars">Navbars</h2>
<main class="bd-content p-5" 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.0/examples/album/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/album.png" alt="Album screenshot" width="960" height="600">
<h5 class="mb-1">Album</h5>
</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.0/examples/pricing/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
<h5 class="mb-1">Pricing</h5>
</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.0/examples/checkout/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
<h5 class="mb-1">Checkout</h5>
</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.0/examples/product/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
<h5 class="mb-1">Product</h5>
</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.0/examples/cover/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
<h5 class="mb-1">Cover</h5>
</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.0/examples/carousel/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
<h5 class="mb-1">Carousel</h5>
</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.0/examples/blog/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
<h5 class="mb-1">Blog</h5>
</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.0/examples/dashboard/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
<h5 class="mb-1">Dashboard</h5>
</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.0/examples/sign-in/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
<h5 class="mb-1">Sign-in</h5>
</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.0/examples/sticky-footer/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
<h5 class="mb-1">Sticky footer</h5>
</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.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
<h5 class="mb-1">Sticky footer navbar</h5>
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<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.0/examples/starter-template/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/starter-template.png" alt="Starter template screenshot" width="960" height="600">
<h5 class="mb-1">Starter template</h5>
</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.0/examples/grid/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
<h5 class="mb-1">Grid</h5>
</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.0/examples/jumbotron/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
<h5 class="mb-1">Jumbotron</h5>
</a>
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbars/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar.png" alt="" width="800" height="600" />
<h4>Navbar</h4>
</a>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-top/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="" width="800" height="600" />
<h4>Static top navbar</h4>
</a>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix hidden-md-up"></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.0/examples/navbars/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbars.png" alt="Navbars screenshot" width="960" height="600">
<h5 class="mb-1">Navbars</h5>
</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.0/examples/navbar-static/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
<h5 class="mb-1">Navbar static</h5>
</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.0/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
<h5 class="mb-1">Navbar fixed</h5>
</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.0/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
<h5 class="mb-1">Navbar bottom</h5>
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="" width="800" height="600" />
<h4>Fixed navbar</h4>
</a>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-bottom/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="" />
<h4>Bottom navbar</h4>
</a>
<p>Super basic template 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.0/examples/floating-labels/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/floating-labels.png" alt="Floating labels screenshot" width="960" height="600">
<h5 class="mb-1">Floating labels</h5>
</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.0/examples/offcanvas/">
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
<h5 class="mb-1">Offcanvas</h5>
</a>
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</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 bd-examples">
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/album/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/album.png" alt="" width="800" height="600" />
<h4>Album</h4>
</a>
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/cover/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/cover.png" alt="" width="800" height="600" />
<h4>Cover</h4>
</a>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/carousel/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/carousel.png" alt="" width="800" height="600" />
<h4>Carousel</h4>
</a>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/blog/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/blog.png" alt="" width="800" height="600" />
<h4>Blog</h4>
</a>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/dashboard/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/dashboard.png" alt="" width="800" height="600" />
<h4>Dashboard</h4>
</a>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/signin/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sign-in.png" alt="" width="800" height="600" />
<h4>Sign-in page</h4>
</a>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/justified-nav/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/justified-nav.png" alt="" width="800" height="600" />
<h4>Justified nav</h4>
</a>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/sticky-footer/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="" width="800" height="600" />
<h4>Sticky footer</h4>
</a>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="" width="800" height="600" />
<h4>Sticky footer w/ navbar</h4>
</a>
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
<h2 id="experiments">Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/docs/4.0/examples/offcanvas/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="" width="800" height="600" />
<h4>Offcanvas</h4>
</a>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>
</main>
</div>
</main>
</main>
<footer class="bd-footer text-muted">
@@ -316,21 +372,13 @@
<li><a href="/docs/4.0/about/overview/">About</a></li>
</ul>
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Currently v4.0.0-beta.3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/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>Currently v4.0.0. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/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="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
});
</script>
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="/assets/js/docs.min.js"></script>
</body>
</html>