mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +02:00
Code Issues Releases Wiki Activity

Restyle code element, remove docs example overflow, improve docs examples (#25054)

Browse Source 
* Restyle code element, clean up variables

- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously

* only break between words, and override it in the pre

* make file inputs 100% wide

* scope custom file changes in input group for sizing

* shorter button labels for responsive

* narrower cards

* button was too wide

* downsize

* fewer links in pagination

* redo cell text

* improve overflow docs
This commit is contained in:
Mark Otto
2017-12-22 16:49:57 -08:00
committed by GitHub
parent e49871489b
commit 0a420124ea
13 changed files with 121 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/scss/_component-examples.scss
View File

@@ -118,7 +118,6 @@
position: relative; position: relative;
padding: 1rem; padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2); margin: 1rem (-$grid-gutter-width / 2);
overflow: auto;
border: solid #f7f7f9; border: solid #f7f7f9;
border-width: .2rem 0 0; border-width: .2rem 0 0;
@include clearfix(); @include clearfix();

14
docs/4.0/components/buttons.md
View File

@@ -125,27 +125,27 @@ Note that pre-checked buttons require you to manually add the `.active` class to
{% example html %} {% example html %}
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active"> <label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) <input type="checkbox" checked autocomplete="off"> Active
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 2 <input type="checkbox" autocomplete="off"> Check
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 3 <input type="checkbox" autocomplete="off"> Check
</label> </label>
</div> </div>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="btn-group" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active"> <label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 <input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 <input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label> </label>
</div> </div>
{% endexample %} {% endexample %}

26
docs/4.0/components/card.md
View File

@@ -17,7 +17,7 @@ Cards are built with as little markup and styles as possible, but still manage t
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing). Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
@@ -50,7 +50,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely. Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
@@ -66,7 +66,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. `.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -79,7 +79,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
Create lists of content in a card with a flush list group. Create lists of content in a card with a flush list group.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -89,7 +89,7 @@ Create lists of content in a card with a flush list group.
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<div class="card-header"> <div class="card-header">
Featured Featured
</div> </div>
@@ -106,7 +106,7 @@ Create lists of content in a card with a flush list group.
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
@@ -242,7 +242,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
Use custom CSS in your stylesheets or as inline styles to set a width. Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -256,7 +256,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -264,7 +264,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div> </div>
</div> </div>
<div class="card text-center" style="width: 20rem;"> <div class="card text-center" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -272,7 +272,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div> </div>
</div> </div>
<div class="card text-right" style="width: 20rem;"> <div class="card text-right" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -383,7 +383,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
{% example html %} {% example html %}
{% for color in site.data.theme-colors %} {% for color in site.data.theme-colors %}
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 20rem;"> <div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4> <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
@@ -401,7 +401,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
{% example html %} {% example html %}
{% for color in site.data.theme-colors %} {% for color in site.data.theme-colors %}
<div class="card border-{{ color.name }} mb-3" style="max-width: 20rem;"> <div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}"> <div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4> <h4 class="card-title">{{ color.name | capitalize }} card title</h4>
@@ -415,7 +415,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`. You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
{% example html %} {% example html %}
<div class="card border-success mb-3" style="max-width: 20rem;"> <div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div> <div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success"> <div class="card-body text-success">
<h4 class="card-title">Success card title</h4> <h4 class="card-title">Success card title</h4>

2
docs/4.0/components/dropdowns.md
View File

@@ -563,7 +563,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% example html %} {% example html %}
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned Right-aligned menu
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>

4
docs/4.0/components/jumbotron.md
View File

@@ -9,7 +9,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
{% example html %} {% example html %}
<div class="jumbotron"> <div class="jumbotron">
<h1 class="display-3">Hello, world!</h1> <h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4"> <hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
@@ -24,7 +24,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr
{% example html %} {% example html %}
<div class="jumbotron jumbotron-fluid"> <div class="jumbotron jumbotron-fluid">
<div class="container"> <div class="container">
<h1 class="display-3">Fluid jumbotron</h1> <h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div> </div>
</div> </div>

12
docs/4.0/components/pagination.md
View File

@@ -105,14 +105,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a> <a class="page-link" href="#" tabindex="-1">1</a>
</li> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul> </ul>
</nav> </nav>
{% endexample %} {% endexample %}
@@ -121,14 +117,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a> <a class="page-link" href="#" tabindex="-1">1</a>
</li> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul> </ul>
</nav> </nav>
{% endexample %} {% endexample %}

166
docs/4.0/content/tables.md
View File

@@ -17,9 +17,9 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -52,9 +52,9 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -89,9 +89,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -120,9 +120,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -157,9 +157,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -190,9 +190,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -227,9 +227,9 @@ Add `.table-bordered` for borders on all sides of the table and cells.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -241,18 +241,12 @@ Add `.table-bordered` for borders on all sides of the table and cells.
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>@fat</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<th scope="row">4</th> <th scope="row">3</th>
<td colspan="2">Larry the Bird</td> <td colspan="2">Larry the Bird</td>
<td>@twitter</td> <td>@twitter</td>
</tr> </tr>
@@ -265,9 +259,9 @@ Add `.table-bordered` for borders on all sides of the table and cells.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -279,18 +273,12 @@ Add `.table-bordered` for borders on all sides of the table and cells.
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>@fat</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<th scope="row">4</th> <th scope="row">3</th>
<td colspan="2">Larry the Bird</td> <td colspan="2">Larry the Bird</td>
<td>@twitter</td> <td>@twitter</td>
</tr> </tr>
@@ -307,9 +295,9 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -339,9 +327,9 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -375,9 +363,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -407,9 +395,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -442,32 +430,28 @@ Use contextual classes to color table rows or individual cells.
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">Type</th> <th scope="col">Class</th>
<th scope="col">Column heading</th> <th scope="col">Heading</th>
<th scope="col">Column heading</th> <th scope="col">Heading</th>
<th scope="col">Column heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="table-active"> <tr class="table-active">
<th scope="row">Active</th> <th scope="row">Active</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">Default</th> <th scope="row">Default</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
{% for color in site.data.theme-colors %} {% for color in site.data.theme-colors %}
<tr class="table-{{ color.name }}"> <tr class="table-{{ color.name }}">
<th scope="row">{{ color.name | capitalize }}</th> <th scope="row">{{ color.name | capitalize }}</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr>{% endfor %} </tr>{% endfor %}
</tbody> </tbody>
</table> </table>
@@ -494,65 +478,55 @@ Regular table background variants are not available with the dark table, however
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Column heading</th> <th scope="col">Heading</th>
<th scope="col">Column heading</th> <th scope="col">Heading</th>
<th scope="col">Column heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="bg-primary"> <tr class="bg-primary">
<th scope="row">1</th> <th scope="row">1</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr class="bg-success"> <tr class="bg-success">
<th scope="row">3</th> <th scope="row">3</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">4</th> <th scope="row">4</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr class="bg-info"> <tr class="bg-info">
<th scope="row">5</th> <th scope="row">5</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">6</th> <th scope="row">6</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr class="bg-warning"> <tr class="bg-warning">
<th scope="row">7</th> <th scope="row">7</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">8</th> <th scope="row">8</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
<tr class="bg-danger"> <tr class="bg-danger">
<th scope="row">9</th> <th scope="row">9</th>
<td>Column content</td> <td>Cell</td>
<td>Column content</td> <td>Cell</td>
<td>Column content</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -594,9 +568,9 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First</th>
<th scope="col">Last Name</th> <th scope="col">Last</th>
<th scope="col">Username</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

12
docs/4.0/utilities/flex.md
View File

@@ -262,17 +262,7 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
<div class="bd-example"> <div class="bd-example">
<div class="d-flex flex-nowrap bd-highlight"> <div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>

9
docs/4.0/utilities/text.md
View File

@@ -32,13 +32,8 @@ For left, right, and center alignment, responsive classes are available that use
Prevent text from wrapping with a `.text-nowrap` class. Prevent text from wrapping with a `.text-nowrap` class.
{% example html %} {% example html %}
<div class="row"> <div class="text-nowrap bd-highlight" style="width: 8rem;">
<div class="col-1 text-nowrap"> This text should overflow the parent.
Curabitur blandit tempus ardua ridiculus sed magna.
</div>
<div class="col-11">
<img data-src="holder.js/50x50" alt="An image to show the text doesn't wrap">
</div>
</div> </div>
{% endexample %} {% endexample %}

14
scss/_code.scss
View File

@@ -8,24 +8,20 @@ samp {
// Inline code // Inline code
code { code {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size; font-size: $code-font-size;
color: $code-color; color: $code-color;
background-color: $code-bg; word-break: break-word;
@include border-radius($border-radius);
// Streamline the style when inside anchors to avoid broken underline and more // Streamline the style when inside anchors to avoid broken underline and more
a > & { a > & {
padding: 0;
color: inherit; color: inherit;
background-color: inherit;
} }
} }
// User input typically entered via keyboard // User input typically entered via keyboard
kbd { kbd {
padding: $code-padding-y $code-padding-x; padding: $kbd-padding-y $kbd-padding-x;
font-size: $code-font-size; font-size: $kbd-font-size;
color: $kbd-color; color: $kbd-color;
background-color: $kbd-bg; background-color: $kbd-bg;
@include border-radius($border-radius-sm); @include border-radius($border-radius-sm);
@@ -47,11 +43,9 @@ pre {
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
padding: 0;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
background-color: transparent; word-break: normal;
@include border-radius(0);
} }
} }

1
scss/_forms.scss
View File

@@ -76,6 +76,7 @@ select.form-control {
.form-control-file, .form-control-file,
.form-control-range { .form-control-range {
display: block; display: block;
width: 100%;
} }

13
scss/_input-group.scss
View File

@@ -41,6 +41,15 @@
// Custom file inputs have more complex markup, thus requiring different // Custom file inputs have more complex markup, thus requiring different
// border-radius overrides. // border-radius overrides.
.custom-file { .custom-file {
display: flex;
align-items: center;
width: 100%;
.custom-file-input {
width: 100%;
min-width: 0;
}
&:not(:first-child):not(:last-of-type) .custom-file-control, &:not(:first-child):not(:last-of-type) .custom-file-control,
&:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); } &:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
&:first-child .custom-file-control, &:first-child .custom-file-control,
@@ -48,6 +57,10 @@
&:last-of-type:not(:first-child) .custom-file-control, &:last-of-type:not(:first-child) .custom-file-control,
&:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); } &:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
} }
.custom-select {
width: 100%;
}
} }

10
scss/_variables.scss
View File

@@ -865,12 +865,12 @@ $close-text-shadow: 0 1px 0 $white !default;
// Code // Code
$code-font-size: 90% !default; $code-font-size: 87.5% !default;
$code-padding-y: .2rem !default; $code-color: $pink !default;
$code-padding-x: .4rem !default;
$code-color: #bd4147 !default;
$code-bg: $gray-100 !default;
$kbd-padding-y: .2rem !default;
$kbd-padding-x: .4rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $white !default; $kbd-color: $white !default;
$kbd-bg: $gray-900 !default; $kbd-bg: $gray-900 !default;