kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

allow btn-groups to work in navbars

Browse source
This commit is contained in:
Mark Otto 2012-01-14 17:16:46 -08:00
parent 74c0fc17c8
commit 2c3365f99e
4 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
bootstrap.css vendored
View file

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sat Jan 14 16:56:39 PST 2012 * Date: Sat Jan 14 17:11:53 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;
@ -1611,9 +1611,12 @@ i {
color: #ffffff; color: #ffffff;
background-color: transparent; background-color: transparent;
} }
.navbar .btn { .navbar .btn, .navbar .btn-group {
margin-top: 5px; margin-top: 5px;
} }
.navbar .btn-group .btn {
margin-top: 0;
}
.navbar-form { .navbar-form {
margin-bottom: 0; margin-bottom: 0;
} }
@ -1758,7 +1761,7 @@ i {
top: -6px; top: -6px;
left: 10px; left: 10px;
} }
.navbar .dropdown-toggle .caret, .navbar .open.dropdown .caret { .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #fff; border-top-color: #fff;
} }
.navbar .nav .active .caret { .navbar .nav .active .caret {

5
bootstrap.min.css vendored
View file

@ -317,7 +317,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.navbar .brand:hover{color:#ffffff;text-decoration:none;} .navbar .brand:hover{color:#ffffff;text-decoration:none;}
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
.navbar .btn{margin-top:5px;} .navbar .btn,.navbar .btn-group{margin-top:5px;}
.navbar .btn-group .btn{margin-top:0;}
.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;} .navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;}
.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;}
@ -336,7 +337,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.navbar .nav.pull-right{margin-left:10px;margin-right:0;} .navbar .nav.pull-right{margin-left:10px;margin-right:0;}
.navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;} .navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;}
.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;} .navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;}
.navbar .dropdown-toggle .caret,.navbar .open.dropdown .caret{border-top-color:#fff;} .navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#fff;}
.navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
.navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;} .navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;}
.navbar .nav .active>.dropdown-toggle:hover{color:#fff;} .navbar .nav .active>.dropdown-toggle:hover{color:#fff;}

13
docs/index.html
View file

@ -33,7 +33,7 @@
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav" style="display: none">
<li class="active"><a href="./index.html">Overview</a></li> <li class="active"><a href="./index.html">Overview</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
@ -102,6 +102,17 @@
</a> </a>
</li> </li>
</ul> </ul>
<div class="btn-group">
<a class="btn" href="#">Action</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div> </div>
</div> </div>
</div> </div>

10
lib/navbar.less
View file

@ -45,9 +45,13 @@
} }
} }
// Buttons in navbar // Buttons in navbar
.btn { .btn,
.btn-group {
margin-top: 5px; // make buttons vertically centered in navbar margin-top: 5px; // make buttons vertically centered in navbar
} }
.btn-group .btn {
margin-top: 0;
}
} }
// Navbar forms // Navbar forms
@ -218,8 +222,8 @@
} }
// Dropdown toggle caret // Dropdown toggle caret
.navbar .dropdown-toggle .caret, .navbar .nav .dropdown-toggle .caret,
.navbar .open.dropdown .caret { .navbar .nav .open.dropdown .caret {
border-top-color: #fff; border-top-color: #fff;
} }
.navbar .nav .active .caret { .navbar .nav .active .caret {