diff options
author | Pierre Vanduynslager <pierre.denis.vanduynslager@gmail.com> | 2017-04-02 22:44:38 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2017-04-02 22:44:38 +0300 |
commit | 7e64147adfc5715452860fc0733d252ac2cdeff0 (patch) | |
tree | 062e6df61be4259f682835d0563f867035745012 /docs | |
parent | 7d88f365c013474c6f6ac3f6c79ced60c687bb87 (diff) |
Rename navbar-toggleable to navbar-expand in docs (#22309)
Diffstat (limited to 'docs')
-rw-r--r-- | docs/components/navbar.md | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 005d830c7f..1aa83ae1cb 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -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> |