fixing conflict in dividers in navbar, fix navbar docs, fix search form in navbar

This commit is contained in:
Mark Otto 2012-01-05 23:24:19 -08:00
parent 7582520808
commit 5cb76037ae
7 changed files with 18 additions and 16 deletions

8
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* 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;
@ -957,9 +957,10 @@ input::-webkit-input-placeholder {
-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;
@ -1764,7 +1765,7 @@ i {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
.nav .divider {
.nav .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
@ -1796,6 +1797,7 @@ i {
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);
}

6
bootstrap.min.css vendored
View File

@ -156,7 +156,7 @@ input::-webkit-input-placeholder{color:#999999;}
.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;}
@ -294,11 +294,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.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;}

View File

@ -41,7 +41,6 @@ body > .navbar-fixed .brand:hover {
}
.page-header h1 {
margin-bottom: 17px;
font-size: 36px;
line-height: 1;
}

View File

@ -1181,7 +1181,7 @@
<div class="row">
<div class="span4">
<h2>Button groups</h2>
<p>Use button groups to join multiple buttons together as one composite component. Button groups can be built with not only <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements, but also radios and checkboxes.</p>
<p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p>
<p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
<p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>

View File

@ -267,7 +267,6 @@
<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;">
@ -287,11 +286,11 @@
</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">
@ -308,15 +307,15 @@
<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 websites 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&mdash;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, weve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how its done. Dropdowns <code>&lt;li&gt;</code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
</div>

View File

@ -372,9 +372,10 @@ input::-webkit-input-placeholder {
// SEARCH FORM
// -----------
.search-form .search-query {
.search-query {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0; // remove the default margin on all inputs
.border-radius(14px);
}

View File

@ -153,7 +153,7 @@
background-color: rgba(0,0,0,.5);
}
// Dividers (basically a vertical hr)
.divider {
.vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
@ -188,6 +188,7 @@
}
}
li a {
padding: 4px 15px;
color: #999;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
&:hover {