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
parent
e3583115c6
commit
7dedccfb9a
|
|
@ -271,6 +271,7 @@ $paragraph-margin-bottom: 1rem !default;
|
|||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
// scss-docs-start grid-breakpoints
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
|
|
@ -279,6 +280,7 @@ $grid-breakpoints: (
|
|||
xl: 1200px,
|
||||
xxl: 1400px
|
||||
) !default;
|
||||
// scss-docs-end grid-breakpoints
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
||||
|
|
@ -288,6 +290,7 @@ $grid-breakpoints: (
|
|||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// scss-docs-start container-max-widths
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
|
|
@ -295,6 +298,7 @@ $container-max-widths: (
|
|||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
) !default;
|
||||
// scss-docs-end container-max-widths
|
||||
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
|
@ -795,6 +799,7 @@ $form-validation-states: (
|
|||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
|
||||
// scss-docs-start zindex-stack
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-sticky: 1020 !default;
|
||||
$zindex-fixed: 1030 !default;
|
||||
|
|
@ -802,6 +807,7 @@ $zindex-modal-backdrop: 1040 !default;
|
|||
$zindex-modal: 1050 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
// scss-docs-end zindex-stack
|
||||
|
||||
|
||||
// Navs
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
.bd-layout {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: grid;
|
||||
gap: $grid-gutter-width;
|
||||
grid-template-areas:
|
||||
"sidebar intro"
|
||||
"sidebar toc"
|
||||
"sidebar content";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-areas:
|
||||
"sidebar intro toc"
|
||||
"sidebar content toc";
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.bd-intro {
|
||||
grid-area: intro;
|
||||
}
|
||||
|
||||
.bd-toc {
|
||||
grid-area: toc;
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
grid-area: content;
|
||||
min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// stylelint-disable selector-max-type, selector-max-compound-selectors
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
.bd-toc-wrap {
|
||||
.bd-toc {
|
||||
@include media-breakpoint-up(lg) {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
|
|
@ -11,34 +11,34 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc nav {
|
||||
@include font-size(.875rem);
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
nav {
|
||||
@include font-size(.875rem);
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: .25rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a code {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
@import "content";
|
||||
@import "skippy";
|
||||
@import "sidebar";
|
||||
@import "layout";
|
||||
@import "toc";
|
||||
@import "footer";
|
||||
@import "component-examples";
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
- breakpoint: xs
|
||||
abbr: ""
|
||||
name: Extra small
|
||||
name: X-Small
|
||||
min-width: 0px
|
||||
container: ""
|
||||
|
||||
|
|
@ -24,6 +24,12 @@
|
|||
|
||||
- breakpoint: xl
|
||||
abbr: -xl
|
||||
name: Extra large
|
||||
name: X-Large
|
||||
min-width: 1200px
|
||||
container: 1140px
|
||||
|
||||
- breakpoint: xxl
|
||||
abbr: -xxl
|
||||
name: XX-Large
|
||||
min-width: 1400px
|
||||
container: 1320px
|
||||
|
|
|
|||
|
|
@ -9,50 +9,40 @@
|
|||
{{ partial "docs-navbar" . }}
|
||||
{{ partial "docs-subnav" . }}
|
||||
|
||||
<div class="container-xxl my-4">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
|
||||
<main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
|
||||
<div class="col-xl-10 px-0">
|
||||
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
{{ partial "ads" . }}
|
||||
</div>
|
||||
|
||||
{{ if .Page.Params.sections }}
|
||||
<div class="row my-5">
|
||||
{{ range .Page.Params.sections }}
|
||||
<div class="col-md-6 mb-4">
|
||||
<a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
|
||||
<strong class="d-block h5 mb-0">{{ .title }}</strong>
|
||||
<span class="text-secondary">{{ .description }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="row position-relative flex-xl-row-reverse">
|
||||
<div class="col-xl-3">
|
||||
{{ if (eq .Page.Params.toc true) }}
|
||||
<div class="bd-toc-wrap pl-xl-3 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<div class="bd-toc mb-5 mb-xl-0">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col-xl-9">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<div class="container-xxl my-4 bd-layout">
|
||||
<div class="bd-sidebar">
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
|
||||
<div class="bd-intro pt-md-3 pl-lg-4">
|
||||
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
{{ partial "ads" . }}
|
||||
</div>
|
||||
|
||||
{{ if (eq .Page.Params.toc true) }}
|
||||
<div class="bd-toc pl-xl-3 text-muted mb-lg-5">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<main class="bd-content pl-lg-4">
|
||||
{{ if .Page.Params.sections }}
|
||||
<div class="row g-3">
|
||||
{{ range .Page.Params.sections }}
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
|
||||
<strong class="d-block h5 mb-0">{{ .title }}</strong>
|
||||
<span class="text-secondary">{{ .description }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ .Content }}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue