diff options
Diffstat (limited to 'docs/4.0/content')
| -rw-r--r-- | docs/4.0/content/images.md | 14 | ||||
| -rw-r--r-- | docs/4.0/content/reboot.md | 14 | ||||
| -rw-r--r-- | docs/4.0/content/tables.md | 219 | ||||
| -rw-r--r-- | docs/4.0/content/typography.md | 10 |
4 files changed, 161 insertions, 96 deletions
diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index aa6fe4bcc..4601dcc6d 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). <div class="bd-example bd-example-images"> <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> @@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc <img src="..." class="rounded" alt="..."> </div> {% endhighlight %} + + +## Picture + +If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag. + +{% highlight html %} +<picture> + <source srcset="..." type="image/svg+xml"> + <img src="..." class="img-fluid img-thumbnail" alt="..."> +</picture> +{% endhighlight %} diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 7565bb41a..58d6b201b 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -22,9 +22,9 @@ Here are our guidelines and reasons for choosing what to override in Reboot: The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: -- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. +- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. -- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. +- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. ## Native font stack @@ -35,8 +35,6 @@ 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 >= 56 for OS X (San Francisco), Windows, Linux and Android - system-ui, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows @@ -44,7 +42,9 @@ $font-family-sans-serif: // Android "Roboto", // Basic web fallback - "Helvetica Neue", Arial, sans-serif !default; + "Helvetica Neue", Arial, sans-serif, + // Emoji fonts + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; {% endhighlight %} This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. @@ -330,7 +330,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](https://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. +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](https://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> @@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o {% callout warning %} #### jQuery incompatibility -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index db05e8378..59bdb6373 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot <table class="table"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -45,16 +45,16 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot </table> {% endexample %} -You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`. +You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. {% example html %} -<table class="table table-inverse"> +<table class="table table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -82,16 +82,16 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta ## Table head options -Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray. +Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray. {% example html %} <table class="table"> - <thead class="thead-inverse"> + <thead class="thead-dark"> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -117,12 +117,12 @@ Similar to default and inverse tables, use one of two modifier classes to make ` </table> <table class="table"> - <thead class="thead-default"> + <thead class="thead-light"> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` <table class="table table-striped"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -186,13 +186,13 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` {% endexample %} {% example html %} -<table class="table table-striped table-inverse"> +<table class="table table-striped table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells. <table class="table table-bordered"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -261,13 +261,13 @@ Add `.table-bordered` for borders on all sides of the table and cells. {% endexample %} {% example html %} -<table class="table table-bordered table-inverse"> +<table class="table table-bordered table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. <table class="table table-hover"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -335,13 +335,13 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. {% endexample %} {% example html %} -<table class="table table-hover table-inverse"> +<table class="table table-hover table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. <table class="table table-sm"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -403,13 +403,13 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. {% endexample %} {% example html %} -<table class="table table-sm table-inverse"> +<table class="table table-sm table-dark"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> </tr> </thead> <tbody> @@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells. <table class="table"> <thead> <tr> - <th>Type</th> - <th>Column heading</th> - <th>Column heading</th> - <th>Column heading</th> + <th scope="col">Type</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> </tr> </thead> <tbody> @@ -487,16 +487,16 @@ Use contextual classes to color table rows or individual cells. </tr> {% endhighlight %} -Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. +Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. <div class="bd-example"> - <table class="table table-inverse"> + <table class="table table-dark"> <thead> <tr> - <th>#</th> - <th>Column heading</th> - <th>Column heading</th> - <th>Column heading</th> + <th scope="col">#</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> + <th scope="col">Column heading</th> </tr> </thead> <tbody> @@ -581,7 +581,9 @@ Regular table background variants are not available with the inverse table, howe ## Responsive 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. +Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively. + +For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`. {% callout warning %} #### Vertical clipping/truncation @@ -593,13 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <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> + <th scope="col">#</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> </tr> </thead> <tbody> @@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <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> @@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <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> @@ -629,20 +640,23 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content <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> - <table class="table table-bordered table-responsive"> + <table class="table table-bordered table-responsive-lg"> <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> + <th scope="col">#</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> + <th scope="col">Table heading</th> </tr> </thead> <tbody> @@ -682,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ... </table> {% endhighlight %} + + +## Captions + +A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it. + +{% example html %} +<table class="table"> + <caption>List of users</caption> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First Name</th> + <th scope="col">Last Name</th> + <th scope="col">Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 74ecbe614..d76070889 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -16,7 +16,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default). -These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. ## Headings @@ -297,24 +297,24 @@ Here's an example of it in practice. Choose whatever `font-size`s and media quer {% highlight scss %} html { - font-size: 14px; + font-size: 1rem; } @include media-breakpoint-up(sm) { html { - font-size: 16px; + font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { - font-size: 20px; + font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { - font-size: 28px; + font-size: 1.6rem; } } {% endhighlight %} |