]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
update docs and examples to use new utils
authorMark Otto <markdotto@gmail.com>
Mon, 2 Jan 2017 19:48:05 +0000 (11:48 -0800)
committerMark Otto <markdotto@gmail.com>
Mon, 2 Jan 2017 19:48:05 +0000 (11:48 -0800)
docs/components/navbar.md
docs/examples/carousel/index.html
docs/examples/dashboard/index.html
docs/examples/jumbotron/index.html
docs/examples/navbar-top-fixed/index.html
docs/examples/offcanvas/index.html
docs/examples/starter-template/index.html
docs/examples/sticky-footer-navbar/index.html

index ea4245b462d6bea5c1069e73849f27e2505389f6..5c6f95198356f9874059e4f028c75e347823803c 100644 (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.
index 9bae2d69adecb90e2650db00d81441733fd07716..6815c3bd7adad8363e5a1ef42ac07b8486b77f7e 100644 (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>
index 650b396750bba0d57b3103bbfcec6ad3308278c8..954a1132bfc327c81fbf98627a4013cfd781dbb1 100644 (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>
index d5be203938202d02227f987860dc3646982c985d..9213c31cdbbbd04425fa95bba573d4f030bd688d 100644 (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>
index ea2c05b63b3ebbe300237ab53c34ec5ecd67cf9c..a52d296332793ed23785583401aa932d7099caa8 100644 (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>
index 6757120f11fbeec5aa9a8c2b9e28c7acf1372ac3..401c6f92afa07346a3f75b6c1547221c88a3b1a2 100644 (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>
index 9fcc8df80833d2a09e7411145b82d6d0c98f6626..7540e4121f1207bba871dc1a8a24fd345cfb1601 100644 (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>
index 83fd29112f771aeea6eaa56053d8a91a78c3b412..f8e3020171ed23014d699dedbd90756c41bd30dd 100644 (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>