mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-07 04:54:24 +01:00
initial pass at removing navbar-inner from .navbar component
This commit is contained in:
parent
f12946be5a
commit
c59e5251e1
6
docs/assets/css/bootstrap-responsive.css
vendored
6
docs/assets/css/bootstrap-responsive.css
vendored
@ -590,8 +590,8 @@
|
|||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.navbar-fixed-top .navbar-inner,
|
.navbar-fixed-top,
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
.navbar-fixed-bottom {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
.navbar .container {
|
.navbar .container {
|
||||||
@ -711,7 +711,7 @@
|
|||||||
.navbar .btn-navbar {
|
.navbar .btn-navbar {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.navbar-static .navbar-inner {
|
.navbar-static {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
64
docs/assets/css/bootstrap.css
vendored
64
docs/assets/css/bootstrap.css
vendored
@ -4046,40 +4046,28 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
|
padding: 0 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
color: #777777;
|
color: #777777;
|
||||||
}
|
background-color: #f2f2f2;
|
||||||
|
|
||||||
.navbar-inner {
|
|
||||||
min-height: 40px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
background-color: #fafafa;
|
|
||||||
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
|
|
||||||
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
|
|
||||||
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
|
|
||||||
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
border: 1px solid #d4d4d4;
|
border: 1px solid #d4d4d4;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
|
|
||||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||||
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inner:before,
|
.navbar:before,
|
||||||
.navbar-inner:after {
|
.navbar:after {
|
||||||
display: table;
|
display: table;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inner:after {
|
.navbar:after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4206,9 +4194,6 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
.navbar-static-top {
|
.navbar-static-top {
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-static-top .navbar-inner {
|
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
-moz-border-radius: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -4220,27 +4205,19 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1030;
|
z-index: 1030;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-fixed-top .navbar-inner,
|
|
||||||
.navbar-static-top .navbar-inner {
|
|
||||||
border-width: 0 0 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-fixed-top .navbar-inner,
|
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-width: 0 0 1px;
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
-moz-border-radius: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-fixed-bottom {
|
||||||
|
border-width: 1px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-static-top .container,
|
.navbar-static-top .container,
|
||||||
.navbar-fixed-top .container,
|
.navbar-fixed-top .container,
|
||||||
.navbar-fixed-bottom .container {
|
.navbar-fixed-bottom .container {
|
||||||
@ -4251,8 +4228,8 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-fixed-top .navbar-inner,
|
.navbar-fixed-top,
|
||||||
.navbar-static-top .navbar-inner {
|
.navbar-static-top {
|
||||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||||
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||||
@ -4260,9 +4237,6 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
|
|
||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
||||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
||||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
|
||||||
@ -4459,18 +4433,8 @@ input[type="submit"].btn::-moz-focus-inner {
|
|||||||
|
|
||||||
.navbar-inverse {
|
.navbar-inverse {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
background-color: #111111;
|
||||||
|
|
||||||
.navbar-inverse .navbar-inner {
|
|
||||||
background-color: #1b1b1b;
|
|
||||||
background-image: -moz-linear-gradient(top, #222222, #111111);
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
|
|
||||||
background-image: -webkit-linear-gradient(top, #222222, #111111);
|
|
||||||
background-image: -o-linear-gradient(top, #222222, #111111);
|
|
||||||
background-image: linear-gradient(to bottom, #222222, #111111);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
border-color: #252525;
|
border-color: #252525;
|
||||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inverse .brand,
|
.navbar-inverse .brand,
|
||||||
|
@ -28,6 +28,7 @@ h3 code {
|
|||||||
|
|
||||||
body > .navbar {
|
body > .navbar {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
background-color: rgba(0,0,0,.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Change the docs' brand */
|
/* Change the docs' brand */
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
@ -1031,7 +1029,6 @@
|
|||||||
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
|
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
@ -1040,17 +1037,14 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
@ -1064,11 +1058,9 @@
|
|||||||
<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>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<a class="brand" href="#">Project name</a>
|
<a class="brand" href="#">Project name</a>
|
||||||
</pre>
|
</pre>
|
||||||
@ -1077,7 +1069,6 @@
|
|||||||
<p>Nav items are simple to add via unordered lists.</p>
|
<p>Nav items are simple to add via unordered lists.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
@ -1085,7 +1076,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active">
|
<li class="active">
|
||||||
@ -1122,14 +1112,12 @@
|
|||||||
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
|
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<form class="navbar-form pull-left">
|
<form class="navbar-form pull-left">
|
||||||
<input type="text" class="span2">
|
<input type="text" class="span2">
|
||||||
<button type="submit" class="btn">Submit</button>
|
<button type="submit" class="btn">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="navbar-form pull-left">
|
<form class="navbar-form pull-left">
|
||||||
<input type="text" class="span2">
|
<input type="text" class="span2">
|
||||||
@ -1141,13 +1129,11 @@
|
|||||||
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
|
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<form class="navbar-search pull-left">
|
<form class="navbar-search pull-left">
|
||||||
<input type="text" class="search-query" placeholder="Search">
|
<input type="text" class="search-query" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="navbar-search pull-left">
|
<form class="navbar-search pull-left">
|
||||||
<input type="text" class="search-query" placeholder="Search">
|
<input type="text" class="search-query" placeholder="Search">
|
||||||
@ -1188,8 +1174,7 @@
|
|||||||
<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
||||||
<div class="bs-docs-example bs-navbar-top-example">
|
<div class="bs-docs-example bs-navbar-top-example">
|
||||||
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
@ -1199,7 +1184,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
...
|
...
|
||||||
@ -1210,8 +1194,7 @@
|
|||||||
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
|
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
|
||||||
<div class="bs-docs-example bs-navbar-bottom-example">
|
<div class="bs-docs-example bs-navbar-bottom-example">
|
||||||
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
@ -1221,7 +1204,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-bottom">
|
<div class="navbar navbar-fixed-bottom">
|
||||||
...
|
...
|
||||||
@ -1232,8 +1214,7 @@
|
|||||||
<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>
|
<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="bs-docs-example bs-navbar-top-example">
|
||||||
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">Title</a>
|
<a class="brand" href="#">Title</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
@ -1243,7 +1224,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-static-top">
|
<div class="navbar navbar-static-top">
|
||||||
...
|
...
|
||||||
@ -1258,7 +1238,6 @@
|
|||||||
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
|
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -1303,12 +1282,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.nav-collapse -->
|
</div><!-- /.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /navbar-inner -->
|
|
||||||
</div><!-- /navbar -->
|
</div><!-- /navbar -->
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
||||||
@ -1327,7 +1304,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
@ -1342,7 +1318,6 @@
|
|||||||
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar navbar-inverse" style="position: static;">
|
<div class="navbar navbar-inverse" style="position: static;">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -1387,7 +1362,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.nav-collapse -->
|
</div><!-- /.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /navbar-inner -->
|
|
||||||
</div><!-- /navbar -->
|
</div><!-- /navbar -->
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Masthead
|
<!-- Masthead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="jumbotron masthead">
|
<div class="jumbotron masthead">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
@ -32,7 +32,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -67,7 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
2
docs/templates/layout.mustache
vendored
2
docs/templates/layout.mustache
vendored
@ -44,7 +44,6 @@
|
|||||||
<!-- Navbar
|
<!-- Navbar
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -79,7 +78,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{{>body}}
|
{{>body}}
|
||||||
|
|
||||||
|
30
docs/templates/pages/components.mustache
vendored
30
docs/templates/pages/components.mustache
vendored
@ -960,7 +960,6 @@
|
|||||||
<p>{{_i}}To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.{{/i}}</p>
|
<p>{{_i}}To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||||
@ -968,18 +967,15 @@
|
|||||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<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>
|
||||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
@ -993,10 +989,8 @@
|
|||||||
<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>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||||
@ -1006,14 +1000,12 @@
|
|||||||
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<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>
|
||||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
@ -1051,13 +1043,11 @@
|
|||||||
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
|
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<form class="navbar-form pull-left">
|
<form class="navbar-form pull-left">
|
||||||
<input type="text" class="span2">
|
<input type="text" class="span2">
|
||||||
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
|
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="navbar-form pull-left">
|
<form class="navbar-form pull-left">
|
||||||
@ -1070,12 +1060,10 @@
|
|||||||
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
|
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<form class="navbar-search pull-left">
|
<form class="navbar-search pull-left">
|
||||||
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
|
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="navbar-search pull-left">
|
<form class="navbar-search pull-left">
|
||||||
@ -1117,8 +1105,7 @@
|
|||||||
<p>{{_i}}Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
|
<p>{{_i}}Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
|
||||||
<div class="bs-docs-example bs-navbar-top-example">
|
<div class="bs-docs-example bs-navbar-top-example">
|
||||||
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||||
@ -1127,7 +1114,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
@ -1139,8 +1125,7 @@
|
|||||||
<p>{{_i}}Add <code>.navbar-fixed-bottom</code> instead.{{/i}}</p>
|
<p>{{_i}}Add <code>.navbar-fixed-bottom</code> instead.{{/i}}</p>
|
||||||
<div class="bs-docs-example bs-navbar-bottom-example">
|
<div class="bs-docs-example bs-navbar-bottom-example">
|
||||||
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||||
@ -1149,7 +1134,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-fixed-bottom">
|
<div class="navbar navbar-fixed-bottom">
|
||||||
@ -1161,8 +1145,7 @@
|
|||||||
<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>
|
<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="bs-docs-example bs-navbar-top-example">
|
||||||
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
||||||
<div class="navbar-inner">
|
<div class="container" style="width: auto;">
|
||||||
<div class="container" style="width: auto; padding: 0 20px;">
|
|
||||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||||
@ -1171,7 +1154,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar navbar-static-top">
|
<div class="navbar navbar-static-top">
|
||||||
@ -1187,7 +1169,6 @@
|
|||||||
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
|
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -1232,12 +1213,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.nav-collapse -->
|
</div><!-- /.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /navbar-inner -->
|
|
||||||
</div><!-- /navbar -->
|
</div><!-- /navbar -->
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} -->
|
<!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} -->
|
||||||
@ -1256,7 +1235,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
@ -1271,7 +1249,6 @@
|
|||||||
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-inverse</code>.{{/i}}</p>
|
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-inverse</code>.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="navbar navbar-inverse" style="position: static;">
|
<div class="navbar navbar-inverse" style="position: static;">
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -1316,7 +1293,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.nav-collapse -->
|
</div><!-- /.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /navbar-inner -->
|
|
||||||
</div><!-- /navbar -->
|
</div><!-- /navbar -->
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
|
@ -9,17 +9,10 @@
|
|||||||
// Base class and wrapper
|
// Base class and wrapper
|
||||||
.navbar {
|
.navbar {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
padding: 0 20px;
|
||||||
margin-bottom: @baseLineHeight;
|
margin-bottom: @baseLineHeight;
|
||||||
color: @navbarText;
|
color: @navbarText;
|
||||||
}
|
background-color: @navbarBackground;
|
||||||
|
|
||||||
// Inner for background effects
|
|
||||||
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
|
|
||||||
.navbar-inner {
|
|
||||||
min-height: @navbarHeight;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
|
|
||||||
border: 1px solid @navbarBorder;
|
border: 1px solid @navbarBorder;
|
||||||
.border-radius(4px);
|
.border-radius(4px);
|
||||||
.box-shadow(0 1px 4px rgba(0,0,0,.065));
|
.box-shadow(0 1px 4px rgba(0,0,0,.065));
|
||||||
@ -150,9 +143,7 @@
|
|||||||
.navbar-static-top {
|
.navbar-static-top {
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 0; // remove 18px margin for default navbar
|
margin-bottom: 0; // remove 18px margin for default navbar
|
||||||
.navbar-inner {
|
|
||||||
.border-radius(0);
|
.border-radius(0);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -168,20 +159,14 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: @zindexFixedNavbar;
|
z-index: @zindexFixedNavbar;
|
||||||
margin-bottom: 0; // remove 18px margin for default navbar
|
margin-bottom: 0; // remove 18px margin for default navbar
|
||||||
}
|
|
||||||
.navbar-fixed-top .navbar-inner,
|
|
||||||
.navbar-static-top .navbar-inner {
|
|
||||||
border-width: 0 0 1px;
|
border-width: 0 0 1px;
|
||||||
}
|
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
}
|
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
.navbar-fixed-bottom {
|
||||||
|
border-width: 1px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
// Reset container width
|
// Reset container width
|
||||||
// Required here as we reset the width earlier on and the grid mixins don't override early enough
|
// Required here as we reset the width earlier on and the grid mixins don't override early enough
|
||||||
@ -197,17 +182,13 @@
|
|||||||
}
|
}
|
||||||
.navbar-fixed-top,
|
.navbar-fixed-top,
|
||||||
.navbar-static-top {
|
.navbar-static-top {
|
||||||
.navbar-inner {
|
|
||||||
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
|
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fixed to bottom
|
// Fixed to bottom
|
||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
.navbar-inner {
|
|
||||||
.box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
|
.box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -376,11 +357,8 @@
|
|||||||
|
|
||||||
.navbar-inverse {
|
.navbar-inverse {
|
||||||
color: @navbarInverseText;
|
color: @navbarInverseText;
|
||||||
|
background-color: @navbarInverseBackground;
|
||||||
.navbar-inner {
|
|
||||||
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
|
||||||
border-color: @navbarInverseBorder;
|
border-color: @navbarInverseBorder;
|
||||||
}
|
|
||||||
|
|
||||||
.brand,
|
.brand,
|
||||||
.nav > li > a {
|
.nav > li > a {
|
||||||
|
@ -24,8 +24,8 @@
|
|||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
margin-top: @baseLineHeight;
|
margin-top: @baseLineHeight;
|
||||||
}
|
}
|
||||||
.navbar-fixed-top .navbar-inner,
|
.navbar-fixed-top,
|
||||||
.navbar-fixed-bottom .navbar-inner {
|
.navbar-fixed-bottom {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
.navbar .container {
|
.navbar .container {
|
||||||
@ -154,7 +154,7 @@
|
|||||||
|
|
||||||
// STATIC NAVBAR
|
// STATIC NAVBAR
|
||||||
// -------------
|
// -------------
|
||||||
.navbar-static .navbar-inner {
|
.navbar-static {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user