From 5413787e403711a78843976a37a77b1c9ad51cc1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Sep 2016 20:39:33 -0700 Subject: fixes #20655: Update font stack list in the Reboot docs to match current CSS usage (#20666) --- docs/content/reboot.md | 8 -------- 1 file changed, 8 deletions(-) (limited to 'docs/content') diff --git a/docs/content/reboot.md b/docs/content/reboot.md index ad8a8a6f6..a6815e9db 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -46,14 +46,6 @@ $font-family-sans-serif: "Segoe UI", // Android "Roboto", - // Linux - "Oxygen", // KDE - "Ubuntu", - "Cantarell", // GNOME - // Firefox OS [R.I.P.] - "Fira Sans", - // Older Android - "Droid Sans", // Basic web fallback "Helvetica Neue", Arial, sans-serif !default; {% endhighlight %} -- cgit v1.2.3 From 18258cbd9936c020b5e30fea758fc1373f661039 Mon Sep 17 00:00:00 2001 From: Igor Tarasov Date: Thu, 8 Sep 2016 07:44:28 +0400 Subject: Fix docs for heading sizes (#20646) * Fix docs for heading sizes (sizes here were from v3) * Added rem sizes to header size docs * Fixed erroneous px sizes --- docs/content/typography.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index 139a7e00e..a59f50347 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -31,27 +31,27 @@ All HTML headings, `

` through `

`, are available.

h1. Bootstrap heading

- Semibold 36px + Semibold 2.5rem (40px)

h2. Bootstrap heading

- Semibold 30px + Semibold 2rem (32px)

h3. Bootstrap heading

- Semibold 24px + Semibold 1.75rem (28px)

h4. Bootstrap heading

- Semibold 18px + Semibold 1.5rem (24px)
h5. Bootstrap heading
- Semibold 14px + Semibold 1.25rem (20px)
h6. Bootstrap heading
- Semibold 12px + Semibold 1rem (16px) -- cgit v1.2.3 From 0be876359ed4ed7c8a3d315a6ef9a04eede8d765 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:16:28 -0700 Subject: Update docs to use new spacing util class names --- docs/content/images.md | 6 +++--- docs/content/typography.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index f21010f0f..905ff337b 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -47,7 +47,7 @@ Add classes to an `` element to easily style images in any project. ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
A generic square placeholder image with rounded corners @@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili {% endhighlight %}
- A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... +... {% endhighlight %}
diff --git a/docs/content/typography.md b/docs/content/typography.md index a59f50347..4a8e4c2d0 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -168,7 +168,7 @@ For quoting blocks of content from another source within your document. Wrap ` -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

{% endexample %} @@ -178,7 +178,7 @@ Add a `
` for identifying the source. Wrap the {% example html %}
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
{% endexample %} @@ -189,7 +189,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content. {% example html %}
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
{% endexample %} -- cgit v1.2.3 From 618081b86c005798d23da3e1e246c97561ca0127 Mon Sep 17 00:00:00 2001 From: judetucker Date: Mon, 25 Jul 2016 21:30:48 -0700 Subject: updated docs to reflect change in img-rounded class --- docs/content/figures.md | 4 ++-- docs/content/images.md | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) (limited to 'docs/content') diff --git a/docs/content/figures.md b/docs/content/figures.md index d57270518..36f431d19 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -10,7 +10,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov {% example html %}
- A generic square placeholder image with rounded corners in a figure. + A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
{% endexample %} @@ -19,7 +19,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %}
- A generic square placeholder image with rounded corners in a figure. + A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
{% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index 905ff337b..b710fcfc5 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -34,13 +34,13 @@ In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately s Add classes to an `` element to easily style images in any project.
- A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
{% highlight html %} -... +... ... ... {% endhighlight %} @@ -50,31 +50,31 @@ Add classes to an `` element to easily style images in any project. Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... -... +... +... {% endhighlight %}
- A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... +... {% endhighlight %}
- A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %}
- ... + ...
{% endhighlight %} -- cgit v1.2.3 From 91992ac70a7fe9e9411580d0857132f57be59e5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 23:21:40 -0700 Subject: Add new border utils - Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle - Add new .rounded-{direction} utils - New docs pages for border utils with TBD comments for the border property - Removes most image examples for rounding from the content/images docs in favor of new docs page --- docs/content/images.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index b710fcfc5..706badf7b 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -29,19 +29,15 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an 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. {% endcallout %} -## Image shapes +## Image thumbnails -Add classes to an `` element to easily style images in any project. +In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
- A generic square placeholder image with rounded corners - A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
{% highlight html %} -... -... ... {% endhighlight %} -- cgit v1.2.3 From 3dc4b3647ce2b27b0216fe8103253ffe9633fde9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Sep 2016 00:54:10 -0700 Subject: Rename pull-*-{left|right} classes to .float-*-left and .float-*-right --- docs/content/images.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index 706badf7b..26a4ff7a4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -46,13 +46,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... -... +... +... {% endhighlight %}
-- cgit v1.2.3 From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/content/code.md | 1 + docs/content/figures.md | 3 ++- docs/content/images.md | 1 + docs/content/reboot.md | 1 + docs/content/tables.md | 1 + docs/content/typography.md | 1 + 6 files changed, 7 insertions(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/code.md b/docs/content/code.md index 79059a1d1..a62e0845f 100644 --- a/docs/content/code.md +++ b/docs/content/code.md @@ -1,6 +1,7 @@ --- layout: docs title: Code +description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. group: content --- diff --git a/docs/content/figures.md b/docs/content/figures.md index d57270518..c24b5b2c8 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -1,10 +1,11 @@ --- layout: docs title: Figures +description: Documentation and examples for displaying related images and text with the figure component in Bootstrap. group: content --- -Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `
`. +Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
`. Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive. diff --git a/docs/content/images.md b/docs/content/images.md index f21010f0f..48a5dd3d4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -1,6 +1,7 @@ --- layout: docs title: Images +description: Documentation and examples for styling images with Bootstrap. group: content --- diff --git a/docs/content/reboot.md b/docs/content/reboot.md index a6815e9db..1d93cc9ce 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,6 +1,7 @@ --- layout: docs title: Reboot +description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. group: content redirect_from: "/content/" --- diff --git a/docs/content/tables.md b/docs/content/tables.md index 3b4d58b36..f1f32166d 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -1,6 +1,7 @@ --- layout: docs title: Tables +description: Documentation and examples for styling tables with Bootstrap. group: content --- diff --git a/docs/content/typography.md b/docs/content/typography.md index a59f50347..f9b5913d2 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -1,6 +1,7 @@ --- layout: docs title: Typography +description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more. group: content --- -- cgit v1.2.3 From 18b14d3c9f8cb4f0aa056709487ebbe27a3ebfa4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:27:53 -0700 Subject: Document that all table styles are inherited (#20699) --- docs/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index f1f32166d..f2741b734 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -14,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an ## Examples -Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. {% example html %} -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/content/figures.md | 2 +- docs/content/images.md | 2 +- docs/content/reboot.md | 4 ++-- docs/content/tables.md | 2 +- docs/content/typography.md | 6 +++--- 5 files changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/content') diff --git a/docs/content/figures.md b/docs/content/figures.md index c24b5b2c8..e1f8f93d2 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -16,7 +16,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov {% endexample %} -Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). +Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment). {% example html %}
diff --git a/docs/content/images.md b/docs/content/images.md index 48a5dd3d4..de8677f3d 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -48,7 +48,7 @@ Add classes to an `` element to easily style images in any project. ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering). +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 `.m-x-auto` margin utility class]({{ site.baseurl }}/spacing/#horizontal-centering).
A generic square placeholder image with rounded corners diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 1d93cc9ce..5cb4be175 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -321,7 +321,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o `[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. {% 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 }}/components/utilities/#invisible-content) instead. +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 }}/utilities/invisible-content/) instead. ## Click delay optimization for touch @@ -335,4 +335,4 @@ To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 o In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. -For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). +For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). diff --git a/docs/content/tables.md b/docs/content/tables.md index f2741b734..0e40c0ef7 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -576,7 +576,7 @@ Use contextual classes to color table rows or individual cells. {% 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. +Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.
diff --git a/docs/content/typography.md b/docs/content/typography.md index f9b5913d2..1d5c3589d 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 }}/components/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/). ## Contents @@ -16,7 +16,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](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. - 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 `` (`#fff` by default). @@ -150,7 +150,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant ## Text utilities -Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). +Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment). ## Abbreviations -- cgit v1.2.3 From d6cc0e017dcb205f417b4f74ffd8ec5762b44bf2 Mon Sep 17 00:00:00 2001 From: Rodrigo Castro Date: Tue, 1 Nov 2016 00:27:40 -0200 Subject: Fixes #21057, fixes utilities link on typography documentation page (#21058) --- docs/content/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index ae1378422..35d47886a 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 -- cgit v1.2.3 From ffaad0a819c6cf1e21d9a9d313673f9d7a260584 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:27:56 -0700 Subject: Responsive display utilities (#20934) * Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name * make floats use the same format, add float-none mixin --- docs/content/images.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index da342b546..c9323bcf2 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).
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... -... +... +... {% endhighlight %}
-- cgit v1.2.3 From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 10:54:34 -0600 Subject: Update docs to reflect new breakpoint naming convention --- docs/content/tables.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index 0e40c0ef7..b927f35d5 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -445,8 +445,8 @@ Use contextual classes to color table rows or individual cells.
- - + + -- cgit v1.2.3 From 967ee175dc8aeee307dfb36d141cc321f37e53cc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 01:45:40 -0800 Subject: Move .table-responsive to .table instead of as a parent --- docs/content/tables.md | 274 ++++++++++++++++++++++++------------------------- 1 file changed, 133 insertions(+), 141 deletions(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index b927f35d5..c1661e532 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. -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
- .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
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescription
+ .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
@@ -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 @@ -693,103 +691,97 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co {% endcallout %}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-{% highlight html %} -
- - ... +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
+ +{% highlight html %} + + ... +
{% endhighlight %} -- cgit v1.2.3 From b1e8d60348ab84895b7b722487a03264a53aedfb Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sat, 26 Nov 2016 21:33:46 -0700 Subject: Remove 'xs' from text utilities (#21217) --- docs/content/figures.md | 2 +- docs/content/images.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/content') 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 %}
A generic square placeholder image with rounded corners in a figure. -
A caption for the above image.
+
A caption for the above image.
{% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index c9323bcf2..fc8cda6b4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon {% endhighlight %}
-
+
A generic square placeholder image with rounded corners
{% highlight html %} -
+
...
{% endhighlight %} -- cgit v1.2.3 From af937836d95ebf7bc100288bef7a7f99b637d7f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Nov 2016 20:26:28 -0800 Subject: Fix #20908 (#21244) Remove the border-bottom from abbr elements since that's covered with an underline in Normalize.css. Updates the docs to match and tweaks some code comments, too. --- docs/content/typography.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index 35d47886a..073734768 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -154,7 +154,7 @@ Change text alignment, transform, style, weight, and color with our [text utilit ## Abbreviations -Stylized implementation of HTML's `` 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 `` 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. -- cgit v1.2.3 From e3a569f4f6ab326d78300c6a8ab3e3766075cfd0 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 2 Dec 2016 09:58:18 -0800 Subject: Remove soon-to-be-defunct callout about Firefox fieldset bug (#21262) The relevant bug has been fixed in Firefox 53: https://bugzilla.mozilla.org/show_bug.cgi?id=504622 --- docs/content/tables.md | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index c1661e532..da847611f 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -676,20 +676,6 @@ Create responsive tables by adding `.table-responsive` to any `.table` to make t 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 %} -
-- cgit v1.2.3 From da18d07d8e56ed162474028a53235cbf847466d4 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Fri, 16 Dec 2016 23:43:24 +1100 Subject: Add 'system-ui' to font stack. --- docs/content/reboot.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 5cb4be175..e37f23d7d 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", -- cgit v1.2.3 From 855a67b1d6364be9bf730871dd4914d8d760589d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Fri, 23 Dec 2016 08:41:31 +1100 Subject: Remove IE9 browser hacks. (#21393) --- docs/content/reboot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/reboot.md b/docs/content/reboot.md index e37f23d7d..08ad15a6a 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -311,7 +311,7 @@ The `` 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 %} -- cgit v1.2.3