mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Update docs for new XXL grid tier

Browse Source 
- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant
This commit is contained in:
Mark Otto
2020-04-13 14:40:47 -07:00
parent e3583115c6
commit 7dedccfb9a
18 changed files with 183 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/utilities/display.md
+14 -6
View File
@@ -12,12 +12,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
## Notation
Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
* `.d-{value}` for `xs`
* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *value* is one of:
@@ -33,7 +33,7 @@ Where *value* is one of:
The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
## Examples
@@ -51,9 +51,9 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
<table class="table">
<thead>
@@ -87,6 +87,10 @@ To show an element only on a given interval of screen sizes you can combine one
<td>Hidden only on xl</td>
<td><code>.d-xl-none</code></td>
</tr>
<tr>
<td>Hidden only on xxl</td>
<td><code>.d-xxl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code>.d-block</code></td>
@@ -109,7 +113,11 @@ To show an element only on a given interval of screen sizes you can combine one
</tr>
<tr>
<td>Visible only on xl</td>
<td><code>.d-none .d-xl-block</code></td>
<td><code>.d-none .d-xl-block .d-xxl-none</code></td>
</tr>
<tr>
<td>Visible only on xxl</td>
<td><code>.d-none .d-xxl-block</code></td>
</tr>
</tbody>
</table>
site/content/docs/4.3/utilities/spacing.md
+2 -2
View File
@@ -12,9 +12,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
## Notation
Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *property* is one of: