diff options
Diffstat (limited to 'docs/content')
| -rw-r--r-- | docs/content/images.md | 4 | ||||
| -rw-r--r-- | docs/content/reboot.md | 6 | ||||
| -rw-r--r-- | docs/content/tables.md | 115 | ||||
| -rw-r--r-- | docs/content/typography.md | 5 |
4 files changed, 18 insertions, 112 deletions
diff --git a/docs/content/images.md b/docs/content/images.md index fc8cda6b4..a89206488 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -25,9 +25,9 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an {% endhighlight %} {% callout warning %} -#### SVG images and IE 9-10 +#### SVG images and IE 10 -In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. +In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. {% endcallout %} ## Image thumbnails diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 08ad15a6a..ab65fe172 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,7 +1,7 @@ --- layout: docs title: Reboot -description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. +description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that heavily builds on Normalize.css. group: content redirect_from: "/content/" --- @@ -29,7 +29,7 @@ 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. -- A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queries. + - 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. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. @@ -311,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 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> diff --git a/docs/content/tables.md b/docs/content/tables.md index da847611f..62579ac69 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -442,50 +442,13 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. Use contextual classes to color table rows or individual cells. -<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> +| Class | Description | +| --- | --- | +| `.table-active` | Applies the hover color to a particular row or cell | +| `.table-success` | Indicates a successful or positive action | +| `.table-info` | Indicates a neutral informative change or action | +| `.table-warning` | Indicates a warning that might need attention | +| `.table-danger` | Indicates a dangerous or potentially negative action | <div class="bd-example"> <table class="table"> @@ -560,17 +523,17 @@ Use contextual classes to color table rows or individual cells. <!-- On rows --> <tr class="table-active">...</tr> <tr class="table-success">...</tr> +<tr class="table-info">...</tr> <tr class="table-warning">...</tr> <tr class="table-danger">...</tr> -<tr class="table-info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-success">...</td> + <td class="table-info">...</td> <td class="table-warning">...</td> <td class="table-danger">...</td> - <td class="table-info">...</td> </tr> {% endhighlight %} @@ -765,65 +728,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content </div> {% highlight html %} -<table class="table table-responsive""> +<table class="table table-responsive"> ... </table> {% endhighlight %} - - -### Reflow -Turn traditional tables on their side by using `table-reflow`. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc. - -{% callout warning %} -#### Content order and complex tables - -Beware that the `table-reflow` style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don't use this for layout tables) with appropriate `<th>` table header cells for each row and column. - -In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using `rowspan` or `colspan` attributes). - -{% endcallout %} - -{% example html %} -<table class="table table-reflow"> - <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> -{% endexample %} diff --git a/docs/content/typography.md b/docs/content/typography.md index 073734768..4fe5bbe02 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/typography). +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 @@ -17,6 +17,7 @@ Bootstrap includes simple and easily customized typography for headings, body te Bootstrap sets basic global display, typography, and link styles. Specifically, we: - Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`. - 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). @@ -154,7 +155,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 have a default underline from Normalize.css and gain a help cursor to provide 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 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. |