mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +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/components/dropdowns.md
+2 -2
View File
@@ -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">
site/content/docs/4.3/components/list-group.md
+1 -1
View File
@@ -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.
site/content/docs/4.3/components/navbar.md
+2 -2
View File
@@ -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.