mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
docs(examples): ensure content sits in landmarks (#31579)
This commit is contained in:
Gaël Poupard
GitHub
parent
28a92234e5
commit
b2d7d29f6d
@ -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,215 +9,217 @@ body_class: "bg-light"
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<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>
|
||||
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-muted">Your cart</span>
|
||||
<span class="badge bg-secondary rounded-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Product name</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Second product</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Third item</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between bg-light">
|
||||
<div class="text-success">
|
||||
<h6 class="my-0">Promo code</h6>
|
||||
<small>EXAMPLECODE</small>
|
||||
</div>
|
||||
<span class="text-success">−$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between">
|
||||
<span>Total (USD)</span>
|
||||
<strong>$20</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Promo code">
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">Billing address</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="firstName" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid first name is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<label for="lastName" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid last name is required.
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-muted">Your cart</span>
|
||||
<span class="badge bg-secondary rounded-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Product name</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-muted">$12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Second product</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Third item</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between bg-light">
|
||||
<div class="text-success">
|
||||
<h6 class="my-0">Promo code</h6>
|
||||
<small>EXAMPLECODE</small>
|
||||
</div>
|
||||
<span class="text-success">−$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between">
|
||||
<span>Total (USD)</span>
|
||||
<strong>$20</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">@</span>
|
||||
<input type="text" class="form-control" id="username" placeholder="Username" required>
|
||||
<div class="invalid-feedback">
|
||||
Your username is required.
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Promo code">
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">Billing address</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="firstName" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid first name is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<label for="lastName" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid last name is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">@</span>
|
||||
<input type="text" class="form-control" id="username" placeholder="Username" required>
|
||||
<div class="invalid-feedback">
|
||||
Your username is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
|
||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email address for shipping updates.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your shipping address.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
|
||||
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>United States</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid country.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">State</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>California</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="zip" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Zip code required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
|
||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email address for shipping updates.
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your shipping address.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
|
||||
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>United States</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid country.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">State</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>California</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="zip" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Zip code required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="same-address">
|
||||
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="save-info">
|
||||
<label class="form-check-label" for="save-info">Save this information for next time</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h4 class="mb-3">Payment</h4>
|
||||
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
||||
<label class="form-check-label" for="credit">Credit card</label>
|
||||
<input type="checkbox" class="form-check-input" id="same-address">
|
||||
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="debit">Debit card</label>
|
||||
<input type="checkbox" class="form-check-input" id="save-info">
|
||||
<label class="form-check-label" for="save-info">Save this information for next time</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6">
|
||||
<label for="cc-name" class="form-label">Name on card</label>
|
||||
<input type="text" class="form-control" id="cc-name" placeholder="" required>
|
||||
<small class="text-muted">Full name as displayed on card</small>
|
||||
<div class="invalid-feedback">
|
||||
Name on card is required
|
||||
<hr class="my-4">
|
||||
|
||||
<h4 class="mb-3">Payment</h4>
|
||||
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
||||
<label class="form-check-label" for="credit">Credit card</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="debit">Debit card</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label">Credit card number</label>
|
||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Credit card number is required
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6">
|
||||
<label for="cc-name" class="form-label">Name on card</label>
|
||||
<input type="text" class="form-control" id="cc-name" placeholder="" required>
|
||||
<small class="text-muted">Full name as displayed on card</small>
|
||||
<div class="invalid-feedback">
|
||||
Name on card is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label">Credit card number</label>
|
||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Credit card number is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label">Expiration</label>
|
||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Expiration date required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label">CVV</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Security code required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label">Expiration</label>
|
||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Expiration date required
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label">CVV</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Security code required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
|
||||
</form>
|
||||
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
|
||||
</form>
|
||||
</div>
|
||||
</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,28 +6,30 @@ extra_css:
|
||||
include_js: false
|
||||
---
|
||||
|
||||
<form class="form-signin">
|
||||
<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>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
|
||||
</div>
|
||||
<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>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputEmail">Email address</label>
|
||||
</div>
|
||||
<div class="form-label-group">
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputEmail">Email address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<label for="inputPassword">Password</label>
|
||||
</div>
|
||||
<div class="form-label-group">
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<label for="inputPassword">Password</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</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>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</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>
|
||||
</main>
|
||||
|
||||
@ -7,180 +7,182 @@ 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>
|
||||
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
|
||||
|
||||
<h2 class="mt-4">Five grid tiers</h2>
|
||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
||||
<h2 class="mt-4">Five grid tiers</h2>
|
||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns alternative</h2>
|
||||
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
|
||||
<div class="row row-cols-md-3 mb-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three unequal columns</h2>
|
||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Two columns</h2>
|
||||
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Full width, single column</h2>
|
||||
<p class="text-warning">
|
||||
No grid classes are necessary for full-width elements.
|
||||
</p>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Two columns with two nested columns</h2>
|
||||
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
||||
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">
|
||||
<div class="pb-3">
|
||||
.col-md-8
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns alternative</h2>
|
||||
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
|
||||
<div class="row row-cols-md-3 mb-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three unequal columns</h2>
|
||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Two columns</h2>
|
||||
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Full width, single column</h2>
|
||||
<p class="text-warning">
|
||||
No grid classes are necessary for full-width elements.
|
||||
</p>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Two columns with two nested columns</h2>
|
||||
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
||||
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">
|
||||
<div class="pb-3">
|
||||
.col-md-8
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile and desktop</h2>
|
||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
|
||||
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Gutters</h2>
|
||||
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gx-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gy-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-3">
|
||||
<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 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 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 class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<div class="container" id="containers">
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile and desktop</h2>
|
||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
<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>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
|
||||
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Gutters</h2>
|
||||
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gx-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gy-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-3">
|
||||
<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 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 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 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 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,345 +5,16 @@ extra_css:
|
||||
- "navbar.css"
|
||||
---
|
||||
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav mr-auto mb-2">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown03">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown04">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown05">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown06">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown07">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xl mb-4">
|
||||
Matching .container-xl...
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown08">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<main>
|
||||
<nav class="navbar navbar-dark bg-dark" aria-label="First 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">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav mr-auto mb-2">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@ -354,8 +25,8 @@ extra_css:
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown09">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
@ -369,13 +40,278 @@ extra_css:
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second 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">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown03">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown04">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown05">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown06">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown07">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xl mb-4">
|
||||
<p>Matching .container-xl...</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
@ -387,8 +323,8 @@ extra_css:
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown10">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown08">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
@ -399,16 +335,82 @@ extra_css:
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown09">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown10">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</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">
|
||||
<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>
|
||||
<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 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,86 +17,88 @@ 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">
|
||||
<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>
|
||||
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
|
||||
<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>
|
||||
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
|
||||
</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 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 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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-primary 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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<div class="bg-primary 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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<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 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<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 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
<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 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></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,18 +7,20 @@ body_class: "text-center"
|
||||
include_js: false
|
||||
---
|
||||
|
||||
<form class="form-signin">
|
||||
<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>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="visually-hidden">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</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>
|
||||
<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>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="visually-hidden">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</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>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user