From 0fe396211df7d99725b79f43e72e9ef4aa38a3a0 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 7 Feb 2016 03:04:33 -0800 Subject: Fix bad localhost link in Typography docs Fixup for 27ba4beb228a4a5ad47ef40ff2c688b25cf9a8d5 /fyi @mdo [skip sauce] --- 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 0c6d53aa2..f0fc1a4bb 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -138,7 +138,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](http://localhost:9001/components/utilities/#text-alignment). +Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). ## Abbreviations -- cgit v1.2.3 From 9248602ecf776963719f34180ee12f4422bde563 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Feb 2016 03:53:59 -0800 Subject: Fixes+tweaks to native font stack docs [skip sauce] --- docs/content/reboot.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'docs/content') diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 2c65e6e21..73ea41171 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -34,20 +34,24 @@ The `` and `` elements are updated to provide better page-wide defau ## Native font stack -The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). +The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). {% highlight sass %} $font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, - // Chrome for OS X (San Francisco) and Windows (Segoe UI) + // Chrome for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", - // Linux distros - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + // Linux + "Oxygen", // KDE + "Ubuntu", + "Cantarell", // GNOME + // Firefox OS [R.I.P.] + "Fira Sans", // Older Android "Droid Sans", // Basic web fallback -- cgit v1.2.3 From 87d248a482d4d5a83f71c31d3d45f529f4631a1d Mon Sep 17 00:00:00 2001 From: Jaga Santagostino Date: Tue, 16 Feb 2016 20:29:59 +0100 Subject: Fix typos in plural tag names --- 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 73ea41171..de3f47a9f 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -193,7 +193,7 @@ Various form elements have been rebooted for simpler base styles. Here are some - `
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. - ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. - ``s are set to `display: inline-block` to allow `margin` to be applied. -- ``s, ``s, ``s, and ``s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. +- ``s, ``s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout. These changes, and more, are demonstrated below. -- cgit v1.2.3 From 40aee9325da27b479e2a907345edccde55fd05ec Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" <redux@splintered.co.uk> Date: Wed, 17 Feb 2016 10:22:48 +0000 Subject: - Conveying color meaning to AT as markdown include - Add/replace callout for color and AT with include --- docs/content/tables.md | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index 80bbbf854..01ec2239a 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -420,6 +420,9 @@ 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 %}  <tr class="table-active">...</tr> -- cgit v1.2.3 From 1f258ff6a1d679a1313a49f89c977bdeb58e9e06 Mon Sep 17 00:00:00 2001 From: Floris Verburg <floris.verburg@gmail.com> Date: Sun, 6 Mar 2016 13:17:11 +0100 Subject: Introduction for using table-reflow. --- docs/content/tables.md | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index 80bbbf854..9ebfbad64 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -564,6 +564,16 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co ### 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"> -- cgit v1.2.3 From a0a157db9339b129738face06ef72c10fbe3fbf3 Mon Sep 17 00:00:00 2001 From: Teo Dell'Amico <teo@lenda.com> Date: Sat, 2 Apr 2016 13:55:47 -0700 Subject: Finish killing .center-block; fixes #19443 Replace the leftover instances with .m-x-auto (and .d-block when necessary) Closes #19665 Refs #19102 [skip sauce] --- docs/content/images.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index e3e616de2..86d953354 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili {% endhighlight %} <div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners"> + <img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners"> </div> {% highlight html %} -<img src="..." class="img-rounded center-block" alt="..."> +<img src="..." class="img-rounded m-x-auto d-block" alt="..."> {% endhighlight %} <div class="bd-example bd-example-images"> -- cgit v1.2.3 From 835676b99a0dd15d5e3dd0bc925e686807c24972 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@chrisrebert.com> Date: Wed, 6 Apr 2016 19:07:37 -0700 Subject: Update lingering implicit prose reference to `.center-block` Closes #19339 Refs #19102, #19443, #19665 [skip sauce] --- docs/content/images.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index 86d953354..f21010f0f 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -47,7 +47,7 @@ Add classes to an `<img>` 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). A simple centering class can also be used for `block` level 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). <div class="bd-example bd-example-images"> <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners"> -- cgit v1.2.3 From 2cc75671e143587ace7efaf79c5b3350a711d57d Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 8 Apr 2016 20:41:44 -0500 Subject: Fixes #19690: Mention classes better for .list-inline and .list-inline-item --- 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 f0fc1a4bb..a49eadedb 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -211,7 +211,7 @@ Remove the default `list-style` and left margin on list items (immediate childre ### Inline -Place all list items on a single line with `display: inline-block;` and some basic margin between. +Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. {% example html %} <ul class="list-inline"> -- cgit v1.2.3 From f60e5a423a51731d59e33e73654d1e36a07b7d95 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@chrisrebert.com> Date: Sun, 10 Apr 2016 19:09:37 -0700 Subject: Update 300ms click delay docs to reflect iOS 9.3 improvements [skip sauce] --- docs/content/reboot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/content') diff --git a/docs/content/reboot.md b/docs/content/reboot.md index de3f47a9f..9df0a7559 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -334,12 +334,12 @@ To merely toggle the visibility of an element, meaning its `display` is not modi Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive. -Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) – though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) – and IE11 on Windows Phone 8.1. +Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) [prior to iOS 9.3](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/). On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here. To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay. -In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. +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). -- cgit v1.2.3 From ce249a555c8601e5d6a945c8438a930b903fb152 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 May 2016 13:51:25 -0700 Subject: document table border collapse change, move from old normalize to our reboot --- 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 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> -- cgit v1.2.3 From 44778465da5f6a13a8438d20e22c1ef6d823f8a1 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 May 2016 14:15:34 -0700 Subject: Update table docs - Change some things around, add some copy - Include table variant styles for the inverse tables thanks to bg and color utils --- docs/content/tables.md | 87 ++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 80 insertions(+), 7 deletions(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index 00f794693..0ab0b538d 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 %}  <tr class="table-active">...</tr> @@ -441,6 +440,80 @@ 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> + +{% 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. -- cgit v1.2.3 From 7322c8dc750718e1f2aba3c69b9a9523912db8d3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 May 2016 14:16:23 -0700 Subject: add code snippet --- docs/content/tables.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index 0ab0b538d..fc6a6b19b 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -511,6 +511,24 @@ Regular table background variants are not available with the inverse table, howe </table> </div> +{% highlight html %} + +<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> + + +<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 }} -- cgit v1.2.3 From b479efb9d639de1955d5aa4cfc4acd810352a6b2 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 May 2016 15:13:53 -0700 Subject: Fixes #18492: Document .h1-.h6, change docs mention of inline usage to varying elements --- docs/content/typography.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'docs/content') 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. -- cgit v1.2.3