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:
parent
2239ea6b53
commit
4dc6f44796
@ -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.
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user