rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Rename navbar-toggleable to navbar-expand in docs (#22309)

Browse Source
This commit is contained in:
Pierre Vanduynslager 2017-04-02 15:44:38 -04:00 committed by Mark Otto
parent 7d88f365c0
commit 7e64147adf
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/components/navbar.md
View File

@ -16,7 +16,7 @@ The navbar is a wrapper that positions branding, navigation, and other elements
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-toggleable{-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}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
@ -38,7 +38,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -108,7 +108,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -135,7 +135,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -154,7 +154,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -249,7 +249,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -278,7 +278,7 @@ Mix and match with other components and utilities as needed.
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -306,7 +306,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</nav>
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-primary">
<nav class="navbar navbar-expand-lg navbar-inverse bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -334,7 +334,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</nav>
<nav class="navbar navbar-toggleable-lg navbar-light" style="background-color: #e3f2fd;">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -383,16 +383,16 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %}
<div class="container">
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
{% endexample %}
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@ -429,9 +429,9 @@ Use our position utilities to place navbars in non-static positions. Choose from
## Responsive behaviors
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable{-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}` 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-toggleable` class on the navbar. For navbars that always collapse, don't add any `.navbar-toggleable` class.
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.
### Toggler
@ -440,7 +440,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -468,7 +468,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
With a brand name shown on the left and toggler on the right:
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -497,7 +497,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
{% example html %}
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>