rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

add support and docs for .navbar-fixed-bottom

Browse Source
This commit is contained in:
Mark Otto 2012-02-21 21:12:16 -08:00
parent e3ae517555
commit b4cc6c74f5
5 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

12
docs/assets/css/bootstrap.css vendored
View File

@ -2840,20 +2840,26 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0;
}
.navbar-fixed-top {
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner {
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .nav {
position: relative;
left: 0;

15
docs/components.html
View File

@ -849,13 +849,24 @@
</div>
</pre>
<h3>Fixed navbar</h3>
<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>.</p>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<div class="row">
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
</div><!--/span-->
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-bottom"&gt;
...
&lt;/div&gt;
</pre>
</div><!--/span-->
</div><!--/row-->
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">

15
docs/templates/pages/components.mustache vendored
View File

@ -773,13 +773,24 @@
&lt;/div&gt;
</pre>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<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>.{{/i}}</p>
<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>
<div class="row">
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
</div><!--/span-->
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-bottom"&gt;
...
&lt;/div&gt;
</pre>
</div><!--/span-->
</div><!--/row-->
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums">

21
less/navbar.less
View File

@ -153,22 +153,37 @@
}
// FIXED NAVBAR
// ------------
.navbar-fixed-top {
// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for static navbar
}
.navbar-fixed-top .navbar-inner {
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
}
// NAVIGATION
// ----------