A generic square placeholder image with rounded corners

-- cgit v1.2.3 From 94cb75ad2f956415eb676928cf37d464ef189536 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 18 Aug 2017 15:40:01 +0300 Subject: Update reboot.md (#23521) --- docs/4.0/content/reboot.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index f42332874..63a576c6f 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -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 `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. -- cgit v1.2.3 From 5c95dcc300b2f05f99f71347631b0f5dc2ddffe6 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2017 18:23:06 -0700 Subject: v4 docs Update Table docs with `.table-dark` and `.thead-light` changes --- docs/4.0/content/tables.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index db05e8378..9de7c5553 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -45,10 +45,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot {% 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 %} - +

@@ -82,11 +82,11 @@ 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 ``s appear light or dark gray. +Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray. {% example html %}

#

- + @@ -117,7 +117,7 @@ Similar to default and inverse tables, use one of two modifier classes to make `

#	First Name

- + @@ -186,7 +186,7 @@ Use `.table-striped` to add zebra-striping to any table row within the `` {% endexample %} {% example html %} -

#	First Name

@@ -261,7 +261,7 @@ Add `.table-bordered` for borders on all sides of the table and cells. {% endexample %} {% example html %} -

#

@@ -335,7 +335,7 @@ Add `.table-hover` to enable a hover state on table rows within a ``. {% endexample %} {% example html %} -

#

@@ -403,7 +403,7 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. {% endexample %} {% example html %} -

#

@@ -487,10 +487,10 @@ 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]({{ 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.

#

-- cgit v1.2.3 From 0fdbaaf8853b266f75777cf84295b1bfdedd8a8a Mon Sep 17 00:00:00 2001 From: Herst Date: Fri, 25 Aug 2017 14:01:34 +0200 Subject: Remove speculations about jQuery 3 --- docs/4.0/content/reboot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 63a576c6f..6fa38a381 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -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. -- cgit v1.2.3 From 59631a6f040bcd4f31fde87666e703ae0b8790e8 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 4 Sep 2017 15:35:24 -0700 Subject: v4 docs Update Table Responsive to include `.table-responsive{-sm|-md|-lg|-xl}` (#23665) --- docs/4.0/content/tables.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index 9de7c5553..515b9b19b 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -581,7 +581,9 @@ Regular table background variants are not available with the dark table, however ## 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 @@ -600,6 +602,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content + + + @@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content + + + @@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content + + + @@ -629,11 +640,14 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content + + +

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

- +

-- cgit v1.2.3 From 90f6912c993da239a0f10469b433dd4427a811f6 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 4 Sep 2017 19:40:13 -0300 Subject: adds captions and scop col on thead th (#23755) --- docs/4.0/content/tables.md | 185 +++++++++++++++++++++++++++------------------ 1 file changed, 112 insertions(+), 73 deletions(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index 515b9b19b..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

#

- - - - + + + + @@ -51,10 +51,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -88,10 +88,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -119,10 +119,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the ``

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -189,10 +189,10 @@ Use `.table-striped` to add zebra-striping to any table row within the ``

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -264,10 +264,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a ``.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -338,10 +338,10 @@ Add `.table-hover` to enable a hover state on table rows within a ``.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -406,10 +406,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells.

#	First Name	Last Name	Username	#	First Name	Last Name	Username

- - - - + + + + @@ -493,10 +493,10 @@ Regular table background variants are not available with the dark table, however

Type	Column heading	Column heading	Column heading	Type	Column heading	Column heading	Column heading

- - - - + + + + @@ -595,16 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content

#	Column heading	Column heading	Column heading	#	Column heading	Column heading	Column heading

- - - - - - - - - - + + + + + + + + + + @@ -650,13 +650,13 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading

- - - - - - - + + + + + + + @@ -696,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ...

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading

{% endhighlight %} + + +## Captions + +A `` 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 %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

List of users
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+{% endexample %} -- cgit v1.2.3 From 5da8ff61ad6dbe080f32f1bdc999466f247a3f7e Mon Sep 17 00:00:00 2001 From: vsn4ik Date: Fri, 8 Sep 2017 03:06:02 +0300 Subject: Use CSS3 pseudo elements in documentation --- docs/4.0/content/reboot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 6fa38a381..f69d2519e 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot: The `` and `` 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 ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. - The `` 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 `` has a declared `background-color`, defaulting to `#fff`. -- cgit v1.2.3 From 31c872191380d4cd32af379b9d24359d6a9dc34c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 15:24:14 +0300 Subject: Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one --- docs/4.0/content/reboot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index f69d2519e..58d6b201b 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -330,7 +330,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](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 %} -- cgit v1.2.3 From 0c03b70bcb81ebb83eb41bf3b561a3b2106ec76f Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 2 Oct 2017 18:59:07 -0700 Subject: adds a note on typography docs about rem units on font-size-base (#23988) --- docs/4.0/content/typography.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/4.0/content') 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 `` (`#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 %} -- cgit v1.2.3 From f2725a6721f222b084ab96059555ccf3c9fd3464 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Tue, 3 Oct 2017 16:59:39 -0700 Subject: #24176 adds a note on the image docs about how to use picture --- docs/4.0/content/images.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'docs/4.0/content') diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index 0bcbe3a03..4601dcc6d 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc