allow btn-groups to work in navbars
This commit is contained in:
parent
74c0fc17c8
commit
2c3365f99e
|
@ -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: Sat Jan 14 16:56:39 PST 2012
|
||||
* Date: Sat Jan 14 17:11:53 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
@ -1611,9 +1611,12 @@ i {
|
|||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar .btn {
|
||||
.navbar .btn, .navbar .btn-group {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.navbar .btn-group .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -1758,7 +1761,7 @@ i {
|
|||
top: -6px;
|
||||
left: 10px;
|
||||
}
|
||||
.navbar .dropdown-toggle .caret, .navbar .open.dropdown .caret {
|
||||
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.navbar .nav .active .caret {
|
||||
|
|
|
@ -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{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 .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-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;}
|
||||
|
@ -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 .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-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 .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;}
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<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="dropdown">
|
||||
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
|
||||
|
@ -102,6 +102,17 @@
|
|||
</a>
|
||||
</li>
|
||||
</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>
|
||||
|
|
|
@ -45,9 +45,13 @@
|
|||
}
|
||||
}
|
||||
// Buttons in navbar
|
||||
.btn {
|
||||
.btn,
|
||||
.btn-group {
|
||||
margin-top: 5px; // make buttons vertically centered in navbar
|
||||
}
|
||||
.btn-group .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar forms
|
||||
|
@ -218,8 +222,8 @@
|
|||
}
|
||||
|
||||
// Dropdown toggle caret
|
||||
.navbar .dropdown-toggle .caret,
|
||||
.navbar .open.dropdown .caret {
|
||||
.navbar .nav .dropdown-toggle .caret,
|
||||
.navbar .nav .open.dropdown .caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.navbar .nav .active .caret {
|
||||
|
|
Loading…
Reference in New Issue