diff options
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/grid.md | 142 | ||||
| -rw-r--r-- | docs/layout/overview.md | 14 | ||||
| -rw-r--r-- | docs/layout/responsive-utilities.md | 284 |
3 files changed, 217 insertions, 223 deletions
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. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th></th> - <th class="text-center"> - Extra small<br> - <small><576px</small> - </th> - <th class="text-center"> - Small<br> - <small>≥576px</small> - </th> - <th class="text-center"> - Medium<br> - <small>≥768px</small> - </th> - <th class="text-center"> - Large<br> - <small>≥992px</small> - </th> - <th class="text-center"> - Extra large<br> - <small>≥1200px</small> - </th> - </tr> - </thead> - <tbody> - <tr> - <th class="text-nowrap" scope="row">Grid behavior</th> - <td>Horizontal at all times</td> - <td colspan="4">Collapsed to start, horizontal above breakpoints</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Max container width</th> - <td>None (auto)</td> - <td>540px</td> - <td>720px</td> - <td>960px</td> - <td>1140px</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Class prefix</th> - <td><code>.col-</code></td> - <td><code>.col-sm-</code></td> - <td><code>.col-md-</code></td> - <td><code>.col-lg-</code></td> - <td><code>.col-xl-</code></td> - </tr> - <tr> - <th class="text-nowrap" scope="row"># of columns</th> - <td colspan="5">12</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Gutter width</th> - <td colspan="5">30px (15px on each side of a column)</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Nestable</th> - <td colspan="5">Yes</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Offsets</th> - <td colspan="5">Yes</td> - </tr> - <tr> - <th class="text-nowrap" scope="row">Column ordering</th> - <td colspan="5">Yes</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th></th> + <th class="text-center"> + Extra small<br> + <small><576px</small> + </th> + <th class="text-center"> + Small<br> + <small>≥576px</small> + </th> + <th class="text-center"> + Medium<br> + <small>≥768px</small> + </th> + <th class="text-center"> + Large<br> + <small>≥992px</small> + </th> + <th class="text-center"> + Extra large<br> + <small>≥1200px</small> + </th> + </tr> + </thead> + <tbody> + <tr> + <th class="text-nowrap" scope="row">Grid behavior</th> + <td>Horizontal at all times</td> + <td colspan="4">Collapsed to start, horizontal above breakpoints</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Max container width</th> + <td>None (auto)</td> + <td>540px</td> + <td>720px</td> + <td>960px</td> + <td>1140px</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Class prefix</th> + <td><code>.col-</code></td> + <td><code>.col-sm-</code></td> + <td><code>.col-md-</code></td> + <td><code>.col-lg-</code></td> + <td><code>.col-xl-</code></td> + </tr> + <tr> + <th class="text-nowrap" scope="row"># of columns</th> + <td colspan="5">12</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Gutter width</th> + <td colspan="5">30px (15px on each side of a column)</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Nestable</th> + <td colspan="5">Yes</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Offsets</th> + <td colspan="5">Yes</td> + </tr> + <tr> + <th class="text-nowrap" scope="row">Column ordering</th> + <td colspan="5">Yes</td> + </tr> + </tbody> +</table> ## Auto-layout columns diff --git a/docs/layout/overview.md b/docs/layout/overview.md index ee21b70f2..736b9ed12 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: +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) @@ -147,18 +147,18 @@ 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 -// 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 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) { ... } +@include media-breakpoint-between(md, xl) { ... } {% endhighlight %} ## Z-index @@ -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; 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. -<div class="table-responsive"> - <table class="table table-bordered table-striped responsive-utilities"> - <thead> - <tr> - <th></th> - <th> - Extra small devices - <small>Portrait phones (<544px)</small> - </th> - <th> - Small devices - <small>Landscape phones (≥544px - <768px)</small> - </th> - <th> - Medium devices - <small>Tablets (≥768px - <992px)</small> - </th> - <th> - Large devices - <small>Desktops (≥992px - <1200px)</small> - </th> - <th> - Extra large devices - <small>Desktops (≥1200px)</small> - </th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"><code>.hidden-xs-down</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th scope="row"><code>.hidden-sm-down</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th scope="row"><code>.hidden-md-down</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th scope="row"><code>.hidden-lg-down</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th scope="row"><code>.hidden-xl-down</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th scope="row"><code>.hidden-xs-up</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th scope="row"><code>.hidden-sm-up</code></th> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th scope="row"><code>.hidden-md-up</code></th> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th scope="row"><code>.hidden-lg-up</code></th> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th scope="row"><code>.hidden-xl-up</code></th> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped responsive-utilities table-responsive"> + <thead> + <tr> + <th></th> + <th> + Extra small devices + <small>Portrait phones (<544px)</small> + </th> + <th> + Small devices + <small>Landscape phones (≥544px - <768px)</small> + </th> + <th> + Medium devices + <small>Tablets (≥768px - <992px)</small> + </th> + <th> + Large devices + <small>Desktops (≥992px - <1200px)</small> + </th> + <th> + Extra large devices + <small>Desktops (≥1200px)</small> + </th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><code>.hidden-xs-down</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + </tr> + <tr> + <th scope="row"><code>.hidden-sm-down</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + </tr> + <tr> + <th scope="row"><code>.hidden-md-down</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + </tr> + <tr> + <th scope="row"><code>.hidden-lg-down</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + </tr> + <tr> + <th scope="row"><code>.hidden-xl-down</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> + <tr> + <th scope="row"><code>.hidden-xs-up</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> + <tr> + <th scope="row"><code>.hidden-sm-up</code></th> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> + <tr> + <th scope="row"><code>.hidden-md-up</code></th> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> + <tr> + <th scope="row"><code>.hidden-lg-up</code></th> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> + <tr> + <th scope="row"><code>.hidden-xl-up</code></th> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + </tr> + </tbody> +</table> <h2 id="responsive-utilities-print">Print classes</h2> <p>Similar to the regular responsive classes, use these for toggling content for print.</p> -<div class="table-responsive"> - <table class="table table-bordered table-striped responsive-utilities"> - <thead> - <tr> - <th>Class</th> - <th>Browser</th> - <th>Print</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>.visible-print-block</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible<br>(as <code>display: block</code>)</td> - </tr> - <tr> - <th><code>.visible-print-inline</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td> - </tr> - <tr> - <th><code>.visible-print-inline-block</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td> - </tr> - <tr> - <th><code>.hidden-print</code></th> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped responsive-utilities table-responsive"> + <thead> + <tr> + <th>Class</th> + <th>Browser</th> + <th>Print</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>.visible-print-block</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible<br>(as <code>display: block</code>)</td> + </tr> + <tr> + <th><code>.visible-print-inline</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td> + </tr> + <tr> + <th><code>.visible-print-inline-block</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td> + </tr> + <tr> + <th><code>.hidden-print</code></th> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + </tr> + </tbody> +</table> ## Test cases |