mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
add support and docs for .navbar-fixed-bottom
This commit is contained in:
parent
e3ae517555
commit
b4cc6c74f5
Binary file not shown.
12
docs/assets/css/bootstrap.css
vendored
12
docs/assets/css/bootstrap.css
vendored
@ -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);
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
.navbar-fixed-top {
|
.navbar-fixed-top, .navbar-fixed-bottom {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1030;
|
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-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
-moz-border-radius: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
.navbar-fixed-top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.navbar-fixed-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
.navbar .nav {
|
.navbar .nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -849,13 +849,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
<h3>Fixed navbar</h3>
|
<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">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</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><body></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">
|
||||||
|
<div class="navbar navbar-fixed-bottom">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</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><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
||||||
<h3>Brand name</h3>
|
<h3>Brand name</h3>
|
||||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
|
15
docs/templates/pages/components.mustache
vendored
15
docs/templates/pages/components.mustache
vendored
@ -773,13 +773,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
<h3>{{_i}}Fixed navbar{{/i}}</h3>
|
<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">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</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><body></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">
|
||||||
|
<div class="navbar navbar-fixed-bottom">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</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><body></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>
|
<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>
|
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
|
@ -153,22 +153,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// FIXED NAVBAR
|
// FIXED NAVBAR
|
||||||
// ------------
|
// ------------
|
||||||
|
|
||||||
.navbar-fixed-top {
|
// Shared (top/bottom) styles
|
||||||
|
.navbar-fixed-top,
|
||||||
|
.navbar-fixed-bottom {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: @zindexFixedNavbar;
|
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-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
.border-radius(0);
|
.border-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fixed to top
|
||||||
|
.navbar-fixed-top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fixed to bottom
|
||||||
|
.navbar-fixed-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// NAVIGATION
|
// NAVIGATION
|
||||||
// ----------
|
// ----------
|
||||||
|
Loading…
Reference in New Issue
Block a user