]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
fixes #4421: add static top navbar class
authorMark Otto <markotto@twitter.com>
Fri, 17 Aug 2012 18:46:23 +0000 (11:46 -0700)
committerMark Otto <markotto@twitter.com>
Fri, 17 Aug 2012 18:46:23 +0000 (11:46 -0700)
docs/assets/css/bootstrap.css
docs/components.html
docs/templates/pages/components.mustache
less/navbar.less

index b658de19a7ebb1479158d1f8955fb36934e476fb..9a6bb867d4ade4a0e1a4d65206a7bf011dfc3ef8 100644 (file)
@@ -4138,6 +4138,18 @@ input[type="submit"].btn.btn-mini {
           border-radius: 15px;
 }
 
+.navbar-static-top {
+  position: static;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.navbar-static-top .navbar-inner {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
 .navbar-fixed-top,
 .navbar-fixed-bottom {
   position: fixed;
index 0b2ba25c7b98e7a068a94ffb686f2934f5d96999..f3803201aa7d6e85f1a65029bd1f0158dbdb06cf 100644 (file)
           <hr class="bs-docs-separator">
 
 
-          <h2>Fixed navigation</h2>
+          <h2>Optional display variations</h2>
           <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
 
           <h3>Fixed to top</h3>
 &lt;/div&gt;
 </pre>
 
+          <h3>Static top navbar</h3>
+          <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
+          <div class="bs-docs-example bs-navbar-top-example">
+            <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+              <div class="navbar-inner">
+                <div class="container" style="width: auto; padding: 0 20px;">
+                  <a class="brand" href="#">Title</a>
+                  <ul class="nav">
+                    <li class="active"><a href="#">Home</a></li>
+                    <li><a href="#">Link</a></li>
+                    <li><a href="#">Link</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-static-top"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
 
           <hr class="bs-docs-separator">
 
index f0c4cc73a020ab26cb915941108e66fef686fa4d..8335ccdf9687e7ccb5168f9536d931d2641c5780 100644 (file)
           <hr class="bs-docs-separator">
 
 
-          <h2>{{_i}}Fixed navigation{{/i}}</h2>
+          <h2>{{_i}}Optional display variations{{/i}}</h2>
           <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
 
           <h3>Fixed to top</h3>
 &lt;/div&gt;
 </pre>
 
+          <h3>{{_i}}Static top navbar{{/i}}</h3>
+          <p>{{_i}}Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.{{/i}}</p>
+          <div class="bs-docs-example bs-navbar-top-example">
+            <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+              <div class="navbar-inner">
+                <div class="container" style="width: auto; padding: 0 20px;">
+                  <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+                  <ul class="nav">
+                    <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+                    <li><a href="#">{{_i}}Link{{/i}}</a></li>
+                    <li><a href="#">{{_i}}Link{{/i}}</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-static-top"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
 
           <hr class="bs-docs-separator">
 
index 8d82bec318ca8aa8a78ec9c940319e062218da5b..3a7e074b29c0b74b88619e44a15f79bc3c023d86 100644 (file)
 
 
 
-// FIXED NAVBAR
-// ------------
+// Static navbar
+// -------------------------
+
+.navbar-static-top {
+  position: static;
+  width: 100%;
+  margin-bottom: 0; // remove 18px margin for default navbar
+  .navbar-inner {
+    .border-radius(0);
+  }
+}
+
+
+
+// Fixed navbar
+// -------------------------
 
 // Shared (top/bottom) styles
 .navbar-fixed-top,
   right: 0;
   left: 0;
   z-index: @zindexFixedNavbar;
-  margin-bottom: 0; // remove 18px margin for static navbar
+  margin-bottom: 0; // remove 18px margin for default navbar
   .navbar-inner {
     border: 0;
   }