mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
docs(examples): ensure content sits in landmarks (#31579)
This commit is contained in:
Gaël Poupard
GitHub
parent
28a92234e5
commit
b2d7d29f6d
13 changed files with 853 additions and 841 deletions
|
|
@ -41,7 +41,9 @@ include_js: false
|
|||
<a class="p-2 link-secondary" href="#">Travel</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
||||
<div class="col-md-6 px-0">
|
||||
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
|
||||
|
|
@ -80,16 +82,14 @@ include_js: false
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 mb-4 font-italic border-bottom">
|
||||
From the Firehose
|
||||
</h3>
|
||||
|
||||
<div class="blog-post">
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
|
||||
|
||||
|
|
@ -120,9 +120,9 @@ include_js: false
|
|||
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
||||
</ol>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
</article><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">Another blog post</h2>
|
||||
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
|
||||
|
||||
|
|
@ -132,9 +132,9 @@ include_js: false
|
|||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
</article><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">New feature</h2>
|
||||
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
|
||||
|
||||
|
|
@ -146,16 +146,16 @@ include_js: false
|
|||
</ul>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
</article><!-- /.blog-post -->
|
||||
|
||||
<nav class="blog-pagination">
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
||||
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="col-md-4">
|
||||
<div class="col-md-4">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="font-italic">About</h4>
|
||||
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
|
|
@ -187,7 +187,7 @@ include_js: false
|
|||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ body_class: "bg-light"
|
|||
---
|
||||
|
||||
<div class="container">
|
||||
<main>
|
||||
<div class="py-5 text-center">
|
||||
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
||||
<h2>Checkout form</h2>
|
||||
|
|
@ -218,6 +219,7 @@ body_class: "bg-light"
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="my-5 pt-5 text-muted text-center text-small">
|
||||
<p class="mb-1">© 2017–{{< year >}} Company Name</p>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ extra_js:
|
|||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -22,7 +22,7 @@ extra_js:
|
|||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ extra_css:
|
|||
include_js: false
|
||||
---
|
||||
|
||||
<form class="form-signin">
|
||||
<main class="form-signin">
|
||||
<form>
|
||||
<div class="text-center mb-4">
|
||||
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
|
||||
|
|
@ -30,4 +31,5 @@ include_js: false
|
|||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted text-center">© 2017-{{< year >}}</p>
|
||||
</form>
|
||||
</form>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ body_class: "py-4"
|
|||
include_js: false
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
|
|
@ -168,19 +169,20 @@ include_js: false
|
|||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="containers">
|
||||
<div class="container" id="containers">
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Containers</h2>
|
||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container themed-container">.container</div>
|
||||
<div class="container-sm themed-container">.container-sm</div>
|
||||
<div class="container-md themed-container">.container-md</div>
|
||||
<div class="container-lg themed-container">.container-lg</div>
|
||||
<div class="container-xl themed-container">.container-xl</div>
|
||||
<div class="container-xxl themed-container">.container-xxl</div>
|
||||
<div class="container-fluid themed-container">.container-fluid</div>
|
||||
<div class="container themed-container">.container</div>
|
||||
<div class="container-sm themed-container">.container-sm</div>
|
||||
<div class="container-md themed-container">.container-md</div>
|
||||
<div class="container-lg themed-container">.container-lg</div>
|
||||
<div class="container-xl themed-container">.container-xl</div>
|
||||
<div class="container-xxl themed-container">.container-xxl</div>
|
||||
<div class="container-fluid themed-container">.container-fluid</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ extra_js:
|
|||
async: true
|
||||
---
|
||||
|
||||
<div class="container py-5">
|
||||
<main class="container py-5">
|
||||
<h1>Bootstrap and Masonry</h1>
|
||||
<p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p>
|
||||
|
||||
|
|
@ -102,4 +102,4 @@ extra_js:
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ layout: examples
|
|||
title: Bottom navbar example
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<main class="container">
|
||||
<div class="bg-light p-5 rounded mt-3">
|
||||
<h1>Bottom Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
|
||||
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Bottom navbar</a>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ extra_css:
|
|||
- "navbar.css"
|
||||
---
|
||||
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<main>
|
||||
<nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Never expand</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -37,9 +38,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Always expand</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -60,9 +61,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -94,9 +95,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at md</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -128,9 +129,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -162,9 +163,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -196,9 +197,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xxl</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -230,9 +231,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -264,9 +265,9 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
|
||||
<div class="container-xl">
|
||||
<a class="navbar-brand" href="#">Container XL</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -298,13 +299,13 @@ extra_css:
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<div class="container-xl mb-4">
|
||||
Matching .container-xl...
|
||||
</div>
|
||||
<div class="container-xl mb-4">
|
||||
<p>Matching .container-xl...</p>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -332,10 +333,10 @@ extra_css:
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -369,7 +370,7 @@ extra_css:
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -399,7 +400,7 @@ extra_css:
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
|
|
@ -410,5 +411,6 @@ extra_css:
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ extra_js:
|
|||
body_class: "bg-light"
|
||||
---
|
||||
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Offcanvas navbar</a>
|
||||
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
|
||||
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ body_class: "bg-light"
|
|||
</nav>
|
||||
|
||||
<div class="nav-scroller bg-white shadow-sm">
|
||||
<nav class="nav nav-underline">
|
||||
<nav class="nav nav-underline" aria-label="Secondary navigation">
|
||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
||||
<a class="nav-link" href="#">
|
||||
Friends
|
||||
|
|
@ -64,10 +64,10 @@ body_class: "bg-light"
|
|||
</div>
|
||||
|
||||
<main class="container">
|
||||
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
|
||||
<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
|
||||
<img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
|
||||
<div class="lh-1">
|
||||
<h6 class="mb-0 text-white lh-1">Bootstrap</h6>
|
||||
<h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
|
||||
<small>Since 2011</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ extra_css:
|
|||
include_js: false
|
||||
---
|
||||
|
||||
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
|
||||
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
|
||||
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
|
||||
<p class="h5 my-0 mr-md-auto font-weight-normal">Company name</p>
|
||||
<nav class="my-2 my-md-0 mr-md-3">
|
||||
<a class="p-2 text-dark" href="#">Features</a>
|
||||
<a class="p-2 text-dark" href="#">Enterprise</a>
|
||||
|
|
@ -15,14 +15,14 @@ include_js: false
|
|||
<a class="p-2 text-dark" href="#">Pricing</a>
|
||||
</nav>
|
||||
<a class="btn btn-outline-primary" href="#">Sign up</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
|
||||
<main class="container">
|
||||
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
|
||||
<h1 class="display-4">Pricing</h1>
|
||||
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||
<div class="col">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
|
|
@ -114,4 +114,4 @@ include_js: false
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ extra_css:
|
|||
- "product.css"
|
||||
---
|
||||
|
||||
<nav class="site-header sticky-top py-1">
|
||||
<div class="container d-flex flex-column flex-md-row justify-content-between">
|
||||
<header class="site-header sticky-top py-1">
|
||||
<nav class="container d-flex flex-column flex-md-row justify-content-between">
|
||||
<a class="py-2" href="#" aria-label="Product">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
||||
</a>
|
||||
|
|
@ -17,10 +17,11 @@ extra_css:
|
|||
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
|
||||
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
|
||||
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
|
||||
<main>
|
||||
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
|
||||
<div class="col-md-5 p-lg-5 mx-auto my-5">
|
||||
<h1 class="display-4 font-weight-normal">Punny headline</h1>
|
||||
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
|
||||
|
|
@ -28,9 +29,9 @@ extra_css:
|
|||
</div>
|
||||
<div class="product-device shadow-sm d-none d-md-block"></div>
|
||||
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
|
|
@ -45,9 +46,9 @@ extra_css:
|
|||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
|
|
@ -62,9 +63,9 @@ extra_css:
|
|||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
|
|
@ -79,9 +80,9 @@ extra_css:
|
|||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
||||
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
|
|
@ -96,7 +97,8 @@ extra_css:
|
|||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container py-5">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
backdrop-filter: saturate(180%) blur(20px);
|
||||
}
|
||||
.site-header a {
|
||||
color: #727272;
|
||||
color: #8e8e8e;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
.site-header a:hover {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ body_class: "text-center"
|
|||
include_js: false
|
||||
---
|
||||
|
||||
<form class="form-signin">
|
||||
<main class="form-signin">
|
||||
<form>
|
||||
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<label for="inputEmail" class="visually-hidden">Email address</label>
|
||||
|
|
@ -21,4 +22,5 @@ include_js: false
|
|||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017-{{< year >}}</p>
|
||||
</form>
|
||||
</form>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue