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

reorder classes because i like it this way :p

Browse Source
This commit is contained in:
Mark Otto 2016-12-28 17:04:07 -08:00 committed by Mark Otto
parent a41d241ecc
commit 0e26b14ffb
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/components/navbar.md
View File

@ -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 `md` (medium) breakpoint.
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -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-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -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-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -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-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -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-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -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-inverse navbar-toggleable-md bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -306,7 +306,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</nav>
<nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -334,7 +334,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</nav>
<nav class="navbar navbar-light navbar-toggleable-md" style="background-color: #e3f2fd;">
<nav class="navbar navbar-toggleable-md navbar-light" style="background-color: #e3f2fd;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -383,7 +383,7 @@ 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-light bg-faded navbar-toggleable-md">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
@ -392,7 +392,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable-*` 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-light bg-faded navbar-toggleable-md">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@ -432,7 +432,7 @@ Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.na
With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md 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>
@ -460,7 +460,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-light navbar-toggleable-md bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>