0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

update docs and examples to use new utils

This commit is contained in:
Mark Otto 2017-01-02 11:48:05 -08:00
parent 2239ea6b53
commit 4dc6f44796
8 changed files with 16 additions and 10 deletions

View File

@ -401,7 +401,7 @@ When the container is within your navbar, its horizontal padding is removed at b
## Placement
Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, isn't fully supported in every browser.**
{% example html %}
<nav class="navbar navbar-light bg-faded">
@ -410,17 +410,23 @@ Navbars can be statically placed (their default behavior), static without rounde
{% endexample %}
{% example html %}
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<nav class="navbar fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
<nav class="navbar fixed-bottom navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar sticky-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
{% endexample %}
## Responsive behaviors
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` 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.

View File

@ -17,7 +17,7 @@
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -17,7 +17,7 @@
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-toggleable-md navbar-fixed-top navbar-inverse bg-inverse">
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-fixed-top">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -19,7 +19,7 @@
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>