* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Thu Jan 5 22:37:16 PST 2012
+ * Date: Thu Jan 5 23:24:01 PST 2012
*/
html, body {
margin: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
-.search-form .search-query {
+.search-query {
padding-left: 14px;
padding-right: 14px;
+ margin-bottom: 0;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
-.nav .divider {
+.nav .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
background: rgba(255, 255, 255, 0.05);
}
.nav .dropdown-menu li a {
+ padding: 4px 15px;
color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.search-form .search-query{padding-left:14px;padding-right:14px;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
+.search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;}
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
+.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
+.nav .dropdown-menu li a{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
.nav .dropdown-menu .active a{color:#ffffff;}
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
<div class="page-header">
<h1>Navbar</h1>
</div>
- <h2>Fixed navbar</h2>
<div class="navbar navbar-static" >
<div class="navbar-inner">
<div class="container" style="width: auto;">
</ul>
</li>
</ul>
- <form class="form-search navbar-search pull-left" action="">
+ <form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
- <li class="divider"></li>
+ <li class="vertical-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<div class="row">
<div class="span4">
- <h4>What is it</h4>
+ <h3>What is it</h3>
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
<div class="span4">
- <h4>Customizable</h4>
+ <h3>Customizable</h3>
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
</div>
<div class="span4">
- <h4>Dropdowns included</h4>
+ <h3>Dropdowns included</h3>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
</div>