aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-01-28 23:40:52 -0800
committerMark Otto <[email protected]>2012-01-28 23:40:52 -0800
commitbca269299b242c55a2511e752429c07d7639f7d2 (patch)
treef5932ba1ba7bca96eda158374985a52b6bae57d6 /docs
parent62f4a1571a3801c867b80c228464cc9c695f1d13 (diff)
downloadbootstrap-bca269299b242c55a2511e752429c07d7639f7d2.tar.xz
bootstrap-bca269299b242c55a2511e752429c07d7639f7d2.zip
removing required .navbar-static class, rewrote docs to reflect the change, and updated the upgrade docs page to include the navbar section
Diffstat (limited to 'docs')
-rw-r--r--docs/assets/css/bootstrap.css24
-rw-r--r--docs/components.html8
-rw-r--r--docs/templates/pages/components.mustache8
-rw-r--r--docs/templates/pages/upgrading.mustache9
-rw-r--r--docs/upgrading.html9
5 files changed, 39 insertions, 19 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 37b774fb9..efd221991 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2296,9 +2296,11 @@ button.btn.small, input[type="submit"].btn.small {
}
.navbar {
overflow: visible;
+ margin-bottom: 18px;
}
.navbar-inner {
- background-color: #222222;
+ padding-left: 20px;
+ padding-right: 20px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
@@ -2308,6 +2310,9 @@ button.btn.small, input[type="submit"].btn.small {
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@@ -2452,16 +2457,6 @@ button.btn.small, input[type="submit"].btn.small {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0;
}
-.navbar-static {
- margin-bottom: 18px;
-}
-.navbar-static .navbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
.navbar-fixed-top {
position: fixed;
top: 0;
@@ -2469,6 +2464,13 @@ button.btn.small, input[type="submit"].btn.small {
left: 0;
z-index: 1030;
}
+.navbar-fixed-top .navbar-inner {
+ padding-left: 0;
+ padding-right: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
.navbar .nav {
position: relative;
left: 0;
diff --git a/docs/components.html b/docs/components.html
index 7ba72f34d..63a4b3dd0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -659,7 +659,7 @@
</div>
<h2>Static navbar example</h2>
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
- <div class="navbar navbar-static">
+ <div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -712,7 +712,7 @@
<h3>Navbar scaffolding</h3>
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
...
@@ -720,7 +720,7 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
- <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
+ <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
@@ -743,7 +743,7 @@
<h3>Optional responsive variation</h3>
<p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 11874b9f3..75ca3eb7e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -587,7 +587,7 @@
</div>
<h2>{{_i}}Static navbar example{{/i}}</h2>
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
- <div class="navbar navbar-static">
+ <div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -640,7 +640,7 @@
<h3>{{_i}}Navbar scaffolding{{/i}}</h3>
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
<pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
...
@@ -648,7 +648,7 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
- <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
+ <p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
@@ -671,7 +671,7 @@
<h3>{{_i}}Optional responsive variation{{/i}}</h3>
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1c..95587456a 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
<li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
</ul>
+ <h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
+ <ul>
+ <li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
+ <li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
+ <li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
+ <li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
+ <li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
+ <li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
+ </ul>
<h3>{{_i}}Dropdown menus{{/i}}</h3>
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index c0778d9d0..d7ad30f56 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -186,6 +186,15 @@
<li>Pills were restyled to be less rounded by default</li>
<li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
</ul>
+ <h3>Navbar (formerly topbar)</h3>
+ <ul>
+ <li>Base class changed from <code>.topbar</code> to <code>.navbar</code></li>
+ <li>Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed)</li>
+ <li>Added vertical dividers to top-level nav</li>
+ <li>Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.</li>
+ <li>Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.</li>
+ <li>Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.</li>
+ </ul>
<h3>Dropdown menus</h3>
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>