From b9f44d0c8b060d44815eabe8d6d64a9cf901a9ff Mon Sep 17 00:00:00 2001 From: Alice Young Date: Sat, 31 Dec 2016 07:25:52 -0500 Subject: minor rephrasing on layout/overview docs --- docs/layout/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index ee21b70f2..f0decede3 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -118,7 +118,7 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(lg) { ... } {% endhighlight %} -We also have media between the breakpoint's minimum and maximum widths for only the given screen size: +We can also use media queries to target a single segment of screen sizes, using the minimum and maximum breakpoint widths: {% highlight scss %} // Extra small devices (portrait phones, less than 576px) @@ -147,7 +147,7 @@ These media queries are also available via Sass mixins: @include media-breakpoint-only(xl) { ... } {% endhighlight %} -And finally media that spans multiple breakpoint widths: +Similarly, media queries may span multiple breakpoint widths: {% highlight scss %} // Example @@ -155,7 +155,7 @@ And finally media that spans multiple breakpoint widths: @media (min-width: 768px) and (max-width: 1199px) { ... } {% endhighlight %} -The Sass mixin for the above example look like that shown beneath: +The Sass mixin for targeting the same screen size range would be: {% highlight scss %} @include media-breakpoint-between(md, lg) { ... } -- cgit v1.2.3 From bccb8ce21300f8da0bfefe1fdde9ab9d87994769 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Dec 2016 11:48:55 -0800 Subject: tweak a few more things - adjust some verbiage - change the example to correct some labels and range names --- docs/layout/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index f0decede3..0bf0b33a1 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -118,7 +118,7 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(lg) { ... } {% endhighlight %} -We can also use media queries to target a single segment of screen sizes, using the minimum and maximum breakpoint widths: +There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. {% highlight scss %} // Extra small devices (portrait phones, less than 576px) @@ -151,14 +151,14 @@ Similarly, media queries may span multiple breakpoint widths: {% highlight scss %} // Example -// Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up) +// Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199px) { ... } {% endhighlight %} The Sass mixin for targeting the same screen size range would be: {% highlight scss %} -@include media-breakpoint-between(md, lg) { ... } +@include media-breakpoint-between(md, xl) { ... } {% endhighlight %} ## Z-index -- cgit v1.2.3 From ff8d28cf2501773ff6f7833865c8e2b2ebb76a3f Mon Sep 17 00:00:00 2001 From: Quy Date: Sat, 31 Dec 2016 16:12:28 -0800 Subject: Move .table-responsive from wrapper to .table --- docs/layout/grid.md | 142 +++++++++--------- docs/layout/responsive-utilities.md | 284 ++++++++++++++++++------------------ 2 files changed, 210 insertions(+), 216 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 056561b27..d0f5b2326 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -57,78 +57,76 @@ While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for See how aspects of the Bootstrap grid system work across multiple devices with a handy table. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small
- <576px - 		- Small
- ≥576px - 		- Medium
- ≥768px - 		- Large
- ≥992px - 		- Extra large
- ≥1200px -
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small
+ <576px + 		+ Small
+ ≥576px + 		+ Medium
+ ≥768px + 		+ Large
+ ≥992px + 		+ Extra large
+ ≥1200px +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
## Auto-layout columns diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 69f6ae1be..e207737d1 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -22,153 +22,149 @@ Try to use these on a limited basis and avoid creating entirely different versio * You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. * These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small devices - Portrait phones (<544px) - - Small devices - Landscape phones (≥544px - <768px) - - Medium devices - Tablets (≥768px - <992px) - - Large devices - Desktops (≥992px - <1200px) - - Extra large devices - Desktops (≥1200px) -
.hidden-xs-downVisibleVisibleVisibleVisible
.hidden-sm-downVisibleVisibleVisible
.hidden-md-downVisibleVisible
.hidden-lg-downVisible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-upVisible
.hidden-md-upVisibleVisible
.hidden-lg-upVisibleVisibleVisible
.hidden-xl-upVisibleVisibleVisibleVisible
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small devices + Portrait phones (<544px) + + Small devices + Landscape phones (≥544px - <768px) + + Medium devices + Tablets (≥768px - <992px) + + Large devices + Desktops (≥992px - <1200px) + + Extra large devices + Desktops (≥1200px) +
.hidden-xs-downVisibleVisibleVisibleVisible
.hidden-sm-downVisibleVisibleVisible
.hidden-md-downVisibleVisible
.hidden-lg-downVisible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-upVisible
.hidden-md-upVisibleVisible
.hidden-lg-upVisibleVisibleVisible
.hidden-xl-upVisibleVisibleVisibleVisible

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassBrowserPrint
.visible-print-blockVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-printVisible
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassBrowserPrint
.visible-print-blockVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-printVisible
## Test cases -- cgit v1.2.3 From 20b05e42e33bea09e0632d607e70bcf9552b8d65 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2017 11:48:51 -0800 Subject: update rest of docs, remove navbar specific modifiers, fix docs example css --- docs/layout/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 0bf0b33a1..736b9ed12 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -171,8 +171,8 @@ We don't encourage customization of these values; should you change one, you lik $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-navbar-fixed: 1030 !default; -$zindex-navbar-sticky: 1030 !default; +$zindex-fixed: 1030 !default; +$zindex-sticky: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; -- cgit v1.2.3