diff options
Diffstat (limited to 'docs/content')
| -rw-r--r-- | docs/content/reboot.md | 2 | ||||
| -rw-r--r-- | docs/content/tables.md | 105 | ||||
| -rw-r--r-- | docs/content/typography.md | 13 |
3 files changed, 111 insertions, 9 deletions
diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 9df0a7559..20a76c82c 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -148,7 +148,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for ## Tables -Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/). +Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/). <div class="bd-example"> <table> diff --git a/docs/content/tables.md b/docs/content/tables.md index 00f794693..fc6a6b19b 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -4,14 +4,16 @@ title: Tables group: content --- -Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`. +Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Basic example +## Examples + +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. {% example html %} <table class="table"> @@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an </table> {% endexample %} -## Inverse table +You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`. {% example html %} <table class="table table-inverse"> @@ -83,7 +85,7 @@ Due to the widespread use of tables across third-party widgets like calendars an ## Table head options -Use one of two modifier classes to make `<thead>`s appear light or dark gray. +Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray. {% example html %} <table class="table"> @@ -420,9 +422,6 @@ Use contextual classes to color table rows or individual cells. </table> </div> -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - {% highlight html %} <!-- On rows --> <tr class="table-active">...</tr> @@ -441,6 +440,98 @@ 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](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles. + +<div class="bd-example"> + <table class="table table-inverse"> + <thead> + <tr> + <th>#</th> + <th>Column heading</th> + <th>Column heading</th> + <th>Column heading</th> + </tr> + </thead> + <tbody> + <tr class="bg-primary"> + <th scope="row">1</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="bg-success"> + <th scope="row">3</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="bg-info"> + <th scope="row">5</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="bg-warning"> + <th scope="row">7</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="bg-danger"> + <th scope="row">9</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="bg-primary">...</tr> +<tr class="bg-success">...</tr> +<tr class="bg-warning">...</tr> +<tr class="bg-danger">...</tr> +<tr class="bg-info">...</tr> + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="bg-primary">...</td> + <td class="bg-success">...</td> + <td class="bg-warning">...</td> + <td class="bg-danger">...</td> + <td class="bg-info">...</td> +</tr> +{% endhighlight %} + +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## 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. diff --git a/docs/content/typography.md b/docs/content/typography.md index a49eadedb..139a7e00e 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -24,7 +24,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de ## Headings -All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. +All HTML headings, `<h1>` through `<h6>`, are available. <div class="bd-example bd-example-type"> <table class="table"> @@ -66,6 +66,17 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla <h6>h6. Bootstrap heading</h6> {% endhighlight %} +`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. + +{% example html %} +<p class="h1">h1. Bootstrap heading</p> +<p class="h2">h2. Bootstrap heading</p> +<p class="h3">h3. Bootstrap heading</p> +<p class="h4">h4. Bootstrap heading</p> +<p class="h5">h5. Bootstrap heading</p> +<p class="h6">h6. Bootstrap heading</p> +{% endexample %} + ### Customizing headings Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. |