diff options
Diffstat (limited to 'docs/content')
| -rw-r--r-- | docs/content/figures.md | 2 | ||||
| -rw-r--r-- | docs/content/images.md | 12 | ||||
| -rw-r--r-- | docs/content/reboot.md | 6 | ||||
| -rw-r--r-- | docs/content/tables.md | 288 | ||||
| -rw-r--r-- | docs/content/typography.md | 4 |
5 files changed, 146 insertions, 166 deletions
diff --git a/docs/content/figures.md b/docs/content/figures.md index b85ca8a4a..4f90018c9 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %} <figure class="figure"> <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure."> - <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption> + <figcaption class="figure-caption text-right">A caption for the above image.</figcaption> </figure> {% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index da342b546..fc8cda6b4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -47,13 +47,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering). <div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners"> + <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> + <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners"> </div> {% highlight html %} -<img src="..." class="rounded float-xs-left" alt="..."> -<img src="..." class="rounded float-xs-right" alt="..."> +<img src="..." class="rounded float-left" alt="..."> +<img src="..." class="rounded float-right" alt="..."> {% endhighlight %} <div class="bd-example bd-example-images"> @@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon {% endhighlight %} <div class="bd-example bd-example-images"> - <div class="text-xs-center"> + <div class="text-center"> <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> </div> </div> {% highlight html %} -<div class="text-xs-center"> +<div class="text-center"> <img src="..." class="rounded" alt="..."> </div> {% endhighlight %} diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 5cb4be175..08ad15a6a 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -41,7 +41,9 @@ The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped i $font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, - // Chrome for OS X (San Francisco) + // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android + system-ui, + // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", @@ -309,7 +311,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra ## HTML5 `[hidden]` attribute -HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. {% highlight html %} <input type="text" hidden> diff --git a/docs/content/tables.md b/docs/content/tables.md index 0e40c0ef7..da847611f 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -442,52 +442,50 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. Use contextual classes to color table rows or individual cells. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <colgroup> - <col class="col-xs-1"> - <col class="col-xs-7"> - </colgroup> - <thead> - <tr> - <th>Class</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> - <code>.table-active</code> - </th> - <td>Applies the hover color to a particular row or cell</td> - </tr> - <tr> - <th scope="row"> - <code>.table-success</code> - </th> - <td>Indicates a successful or positive action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-info</code> - </th> - <td>Indicates a neutral informative change or action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-warning</code> - </th> - <td>Indicates a warning that might need attention</td> - </tr> - <tr> - <th scope="row"> - <code>.table-danger</code> - </th> - <td>Indicates a dangerous or potentially negative action</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <colgroup> + <col class="col-1"> + <col class="col-7"> + </colgroup> + <thead> + <tr> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> + <code>.table-active</code> + </th> + <td>Applies the hover color to a particular row or cell</td> + </tr> + <tr> + <th scope="row"> + <code>.table-success</code> + </th> + <td>Indicates a successful or positive action</td> + </tr> + <tr> + <th scope="row"> + <code>.table-info</code> + </th> + <td>Indicates a neutral informative change or action</td> + </tr> + <tr> + <th scope="row"> + <code>.table-warning</code> + </th> + <td>Indicates a warning that might need attention</td> + </tr> + <tr> + <th scope="row"> + <code>.table-danger</code> + </th> + <td>Indicates a dangerous or potentially negative action</td> + </tr> + </tbody> +</table> <div class="bd-example"> <table class="table"> @@ -670,7 +668,7 @@ Regular table background variants are not available with the inverse table, howe ## Responsive tables -Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. +Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. {% callout warning %} #### Vertical clipping/truncation @@ -678,118 +676,98 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. {% endcallout %} -{% callout warning %} -#### Firefox and fieldsets - -Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we **don't** provide in Bootstrap: - -{% highlight css %} -@-moz-document url-prefix() { - fieldset { display: table-cell; } -} -{% endhighlight %} - -For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). -{% endcallout %} - <div class="bd-example"> - <div class="table-responsive"> - <table class="table"> - <thead> - <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> - </table> - </div> - - <div class="table-responsive"> - <table class="table table-bordered"> - <thead> - <tr> - <th>#</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">2</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <th scope="row">3</th> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> - </table> - </div> -</div> + <table class="table table-responsive"> + <thead> + <tr> + <th>#</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> -{% highlight html %} -<div class="table-responsive"> - <table class="table"> - ... + <table class="table table-bordered table-responsive"> + <thead> + <tr> + <th>#</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> </table> </div> + +{% highlight html %} +<table class="table table-responsive""> + ... +</table> {% endhighlight %} diff --git a/docs/content/typography.md b/docs/content/typography.md index ae1378422..073734768 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap typography, including glob group: content --- -Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/). +Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/typography). ## Contents @@ -154,7 +154,7 @@ Change text alignment, transform, style, weight, and color with our [text utilit ## Abbreviations -Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies. +Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline from Normalize.css and gain a help cursor to provide additional context on hover and to users of assistive technologies. Add `.initialism` to an abbreviation for a slightly smaller font-size. |