kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Examples: use our utilities more. (#29358)

Browse source
This commit is contained in:
XhmikosR 2019-09-02 19:19:25 +03:00 • committed by GitHub
parent 88d7d8b822
commit d0affaa2ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
site/content/docs/4.3/examples/checkout/form-validation.css
View file

@ -1,5 +1,3 @@
.container { .container {
max-width: 960px; max-width: 960px;
} }
.lh-condensed { line-height: 1.25; }

8
site/content/docs/4.3/examples/checkout/index.html
View file

@ -22,21 +22,21 @@ body_class: "bg-light"
<span class="badge bg-secondary rounded-pill">3</span> <span class="badge bg-secondary rounded-pill">3</span>
</h4> </h4>
<ul class="list-group mb-3"> <ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Product name</h6> <h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small> <small class="text-muted">Brief description</small>
</div> </div>
<span class="text-muted">$12</span> <span class="text-muted">$12</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-condensed"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Second product</h6> <h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small> <small class="text-muted">Brief description</small>
</div> </div>
<span class="text-muted">$8</span> <span class="text-muted">$8</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-condensed"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Third item</h6> <h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small> <small class="text-muted">Brief description</small>
@ -92,7 +92,7 @@ body_class: "bg-light"
<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" style="width: 100%;"> <div class="invalid-feedback w-100">
Your username is required. Your username is required.
</div> </div>
</div> </div>

1
site/content/docs/4.3/examples/floating-labels/floating-labels.css
View file

@ -36,7 +36,6 @@ body {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */ margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057; color: #495057;
pointer-events: none; pointer-events: none;
cursor: text; /* Match the input under the label */ cursor: text; /* Match the input under the label */

16
site/content/docs/4.3/examples/offcanvas/index.html
View file

@ -64,8 +64,8 @@ body_class: "bg-light"
<main role="main" class="container"> <main role="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-50 bg-purple rounded shadow-sm">
<img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48"> <img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100"> <div class="lh-1">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6> <h6 class="mb-0 text-white lh-1">Bootstrap</h6>
<small>Since 2011</small> <small>Since 2011</small>
</div> </div>
</div> </div>
@ -74,21 +74,21 @@ body_class: "bg-light"
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<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="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<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="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<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>
@ -102,7 +102,7 @@ body_class: "bg-light"
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6> <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
@ -112,7 +112,7 @@ body_class: "bg-light"
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
@ -122,7 +122,7 @@ body_class: "bg-light"
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>

4
site/content/docs/4.3/examples/offcanvas/offcanvas.css
View file

@ -65,7 +65,3 @@ body {
.text-white-50 { color: rgba(255, 255, 255, .5); } .text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; } .bg-purple { background-color: #6f42c1; }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }