mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 16:50:00 +02:00
Update docs for new XXL grid tier
- 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
@@ -607,7 +607,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
|
||||
|
||||
If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
|
||||
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
@@ -622,7 +622,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-left`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
|
||||
@@ -96,7 +96,7 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
|
||||
|
||||
## Horizontal
|
||||
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
|
||||
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Here's what you need to know before getting started with the navbar:
|
||||
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
|
||||
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
@@ -481,7 +481,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
|
||||
|
||||
## Responsive behaviors
|
||||
|
||||
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
|
||||
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
|
||||
|
||||
|
||||
@@ -721,7 +721,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
|
||||
|
||||
## Responsive tables
|
||||
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Vertical clipping/truncation
|
||||
@@ -802,7 +802,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
|
||||
|
||||
### Breakpoint specific
|
||||
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
|
||||
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
|
||||
|
||||
|
||||
@@ -46,6 +46,12 @@ include_js: false
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||||
<div class="row mb-3">
|
||||
@@ -168,7 +174,7 @@ include_js: false
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Containers</h2>
|
||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
|
||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
|
||||
</div>
|
||||
|
||||
<div class="container themed-container">.container</div>
|
||||
@@ -176,4 +182,5 @@ include_js: false
|
||||
<div class="container-md themed-container">.container-md</div>
|
||||
<div class="container-lg themed-container">.container-lg</div>
|
||||
<div class="container-xl themed-container">.container-xl</div>
|
||||
<div class="container-xxl themed-container">.container-xxl</div>
|
||||
<div class="container-fluid themed-container">.container-fluid</div>
|
||||
|
||||
@@ -198,6 +198,40 @@ extra_css:
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xxl</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
|
||||
@@ -65,16 +65,7 @@ Each breakpoint size was chosen to be a multiple of 12 and to be representative
|
||||
|
||||
These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
|
||||
|
||||
{{< highlight scss >}}
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px
|
||||
) !default;
|
||||
{{< /highlight >}}
|
||||
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
|
||||
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
|
||||
|
||||
|
||||
@@ -153,15 +153,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of
|
||||
|
||||
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
|
||||
|
||||
{{< highlight scss >}}
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
) !default;
|
||||
{{< /highlight >}}
|
||||
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
|
||||
|
||||
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
|
||||
|
||||
|
||||
@@ -141,7 +141,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
||||
|
||||
### Equal-width
|
||||
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
@@ -418,31 +418,12 @@ Variables and maps determine the number of columns, the gutter width, and the me
|
||||
{{< highlight scss >}}
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 1.5rem;
|
||||
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
// Small screen / phone
|
||||
sm: 576px,
|
||||
// Medium screen / tablet
|
||||
md: 768px,
|
||||
// Large screen / desktop
|
||||
lg: 992px,
|
||||
// Extra large screen / wide desktop
|
||||
xl: 1200px,
|
||||
// Extra extra large screen / wide desktop
|
||||
xxl: 1400px
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
);
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
|
||||
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
|
||||
|
||||
@@ -11,20 +11,6 @@ These higher values start at an arbitrary number, high and specific enough to id
|
||||
|
||||
We don't encourage customization of these individual values; should you change one, you likely need to change them all.
|
||||
|
||||
{{< highlight scss >}}
|
||||
{{< zindex.inline >}}
|
||||
{{- $file := readFile "scss/_variables.scss" -}}
|
||||
{{- $matches := findRE `\$zindex\-.+;` $file -}}
|
||||
|
||||
{{- if (eq (len $matches) 0) -}}
|
||||
{{- errorf "Got no matches for $zindex- in %q!" $.Page.Path -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- range $matches }}
|
||||
{{ . | replaceRE "\\s{13}" " " }}
|
||||
{{- end -}}
|
||||
|
||||
{{< /zindex.inline >}}
|
||||
{{< /highlight >}}
|
||||
{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
|
||||
|
||||
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user