root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Update examples to the Bootstrap 5 grid

This commit is contained in:
Martijn Cuppens 2019-09-28 16:16:03 +02:00
parent 9daf36fdb7
commit df8f64d195
13 changed files with 173 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
site/content/docs/4.3/examples/album/index.html
View File

@ -53,9 +53,9 @@ title: Album example
<div class="album py-5 bg-light"> <div class="album py-5 bg-light">
<div class="container"> <div class="container">
<div class="row"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -69,8 +69,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -84,8 +84,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -100,8 +100,8 @@ title: Album example
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -115,8 +115,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -130,8 +130,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -146,8 +146,8 @@ title: Album example
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -161,8 +161,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -176,8 +176,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

4
site/content/docs/4.3/examples/blog/index.html
View File

@ -52,7 +52,7 @@ include_js: false
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-6"> <div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong> <strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3> <h3 class="mb-0">Featured post</h3>
@ -66,7 +66,7 @@ include_js: false
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong> <strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3> <h3 class="mb-0">Post title</h3>

8
site/content/docs/4.3/examples/carousel/index.html
View File

@ -13,7 +13,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -24,9 +24,9 @@ extra_css:
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>

107
site/content/docs/4.3/examples/checkout/index.html
View File

@ -2,7 +2,7 @@
layout: examples layout: examples
title: Checkout example title: Checkout example
extra_css: extra_css:
- "form-validation.css" - "form-validation.css"
extra_js: extra_js:
- src: "form-validation.js" - src: "form-validation.js"
body_class: "bg-light" body_class: "bg-light"
@ -15,8 +15,8 @@ body_class: "bg-light"
<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> <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>
<div class="row"> <div class="row g-3">
<div class="col-md-4 order-md-2 mb-4"> <div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3"> <h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span> <span class="text-muted">Your cart</span>
<span class="badge bg-secondary rounded-pill">3</span> <span class="badge bg-secondary rounded-pill">3</span>
@ -65,62 +65,61 @@ body_class: "bg-light"
</div> </div>
</form> </form>
</div> </div>
<div class="col-md-8 order-md-1"> <div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4> <h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate> <form class="needs-validation" novalidate>
<div class="row"> <div class="row g-3">
<div class="col-md-6 mb-3"> <div class="col-sm-6">
<label for="firstName">First name</label> <label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required> <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid first name is required. Valid first name is required.
</div> </div>
</div> </div>
<div class="col-md-6 mb-3">
<div class="col-sm-6">
<label for="lastName">Last name</label> <label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required> <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid last name is required. Valid last name is required.
</div> </div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="username">Username</label> <label for="username">Username</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text">@</span> <span class="input-group-text">@</span>
</div> </div>
<input type="text" class="form-control" id="username" placeholder="Username" required> <input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback w-100"> <div class="invalid-feedback w-100">
Your username is required. Your username is required.
</div>
</div> </div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="email">Email <span class="text-muted">(Optional)</span></label> <label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com"> <input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter a valid email address for shipping updates. Please enter a valid email address for shipping updates.
</div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="address">Address</label> <label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required> <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter your shipping address. Please enter your shipping address.
</div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label> <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div> </div>
<div class="row"> <div class="col-md-5">
<div class="col-md-5 mb-3">
<label for="country">Country</label> <label for="country">Country</label>
<select class="form-select" id="country" required> <select class="form-select" id="country" required>
<option value="">Choose...</option> <option value="">Choose...</option>
@ -130,7 +129,8 @@ body_class: "bg-light"
Please select a valid country. Please select a valid country.
</div> </div>
</div> </div>
<div class="col-md-4 mb-3">
<div class="col-md-4">
<label for="state">State</label> <label for="state">State</label>
<select class="form-select" id="state" required> <select class="form-select" id="state" required>
<option value="">Choose...</option> <option value="">Choose...</option>
@ -140,7 +140,8 @@ body_class: "bg-light"
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3">
<div class="col-md-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required> <input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
@ -148,20 +149,24 @@ body_class: "bg-light"
</div> </div>
</div> </div>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address"> <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> <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" id="save-info"> <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> <label class="form-check-label" for="save-info">Save this information for next time</label>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<h4 class="mb-3">Payment</h4> <h4 class="mb-3">Payment</h4>
<div class="d-block my-3"> <div class="my-3">
<div class="form-check"> <div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required> <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Credit card</label> <label class="form-check-label" for="credit">Credit card</label>
@ -175,8 +180,9 @@ body_class: "bg-light"
<label class="form-check-label" for="paypal">PayPal</label> <label class="form-check-label" for="paypal">PayPal</label>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-6 mb-3"> <div class="row gy-3">
<div class="col-md-6">
<label for="cc-name">Name on card</label> <label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required> <input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small> <small class="text-muted">Full name as displayed on card</small>
@ -184,23 +190,24 @@ body_class: "bg-light"
Name on card is required Name on card is required
</div> </div>
</div> </div>
<div class="col-md-6 mb-3">
<div class="col-md-6">
<label for="cc-number">Credit card number</label> <label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required> <input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Credit card number is required Credit card number is required
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="col-md-3">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label> <label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required> <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Expiration date required Expiration date required
</div> </div>
</div> </div>
<div class="col-md-3 mb-3">
<div class="col-md-3">
<label for="cc-cvv">CVV</label> <label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required> <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
@ -208,7 +215,9 @@ body_class: "bg-light"
</div> </div>
</div> </div>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button> <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form> </form>
</div> </div>

8
site/content/docs/4.3/examples/grid/grid.css
View File

@ -1,13 +1,13 @@
.themed-grid-col { .themed-grid-col {
padding-top: 15px; padding-top: .75rem;
padding-bottom: 15px; padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15); background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2); border: 1px solid rgba(86, 61, 124, .2);
} }
.themed-container { .themed-container {
padding: 15px; padding: .75rem;
margin-bottom: 30px; margin-bottom: 1.5rem;
background-color: rgba(0, 123, 255, .15); background-color: rgba(0, 123, 255, .15);
border: 1px solid rgba(0, 123, 255, .2); border: 1px solid rgba(0, 123, 255, .2);
} }

40
site/content/docs/4.3/examples/grid/index.html
View File

@ -54,6 +54,14 @@ include_js: false
<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>
<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> <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> <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="row mb-3">
@ -124,9 +132,41 @@ include_js: false
<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> </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>
<div class="container" id="containers"> <div class="container" id="containers">
<hr class="my-4">
<h2 class="mt-4">Containers</h2> <h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p> <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
</div> </div>

2
site/content/docs/4.3/examples/navbar-bottom/index.html
View File

@ -17,7 +17,7 @@ title: Bottom navbar example
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>

8
site/content/docs/4.3/examples/navbar-fixed/index.html
View File

@ -12,7 +12,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -23,9 +23,9 @@ extra_css:
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>

8
site/content/docs/4.3/examples/navbar-static/index.html
View File

@ -12,7 +12,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -23,9 +23,9 @@ extra_css:
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>

34
site/content/docs/4.3/examples/navbars/index.html
View File

@ -13,7 +13,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample01"> <div class="collapse navbar-collapse" id="navbarsExample01">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -32,7 +32,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
@ -55,7 +55,7 @@ extra_css:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
@ -70,7 +70,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample03"> <div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-sm-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -89,7 +89,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
@ -104,7 +104,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample04"> <div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -123,7 +123,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
@ -138,7 +138,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample05"> <div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -157,7 +157,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
@ -172,7 +172,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample06"> <div class="collapse navbar-collapse" id="navbarsExample06">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -191,7 +191,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
@ -206,7 +206,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample07"> <div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -225,7 +225,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
@ -240,7 +240,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample07XL"> <div class="collapse navbar-collapse" id="navbarsExample07XL">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -259,7 +259,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
@ -309,7 +309,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample09"> <div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -328,7 +328,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>

24
site/content/docs/4.3/examples/offcanvas/index.html
View File

@ -16,7 +16,7 @@ body_class: "bg-light"
</button> </button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Dashboard</a> <a class="nav-link" aria-current="page" href="#">Dashboard</a>
</li> </li>
@ -38,9 +38,9 @@ body_class: "bg-light"
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
@ -73,24 +73,24 @@ body_class: "bg-light"
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
@ -101,10 +101,10 @@ body_class: "bg-light"
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
@ -114,7 +114,7 @@ body_class: "bg-light"
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
@ -124,7 +124,7 @@ body_class: "bg-light"
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>

8
site/content/docs/4.3/examples/starter-template/index.html
View File

@ -13,7 +13,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -32,9 +32,9 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>

8
site/content/docs/4.3/examples/sticky-footer-navbar/index.html
View File

@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100"
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -27,9 +27,9 @@ body_class: "d-flex flex-column h-100"
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>