font-weight: bold;
line-height: 20px;
text-align: center;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: middle;
cursor: pointer;
border: 1px solid #a7a9aa;
text-decoration: none;
}
+.caret {
+ border-top-color: #fff;
+ border-bottom-color: #fff;
+}
+
.btn-group {
position: relative;
display: inline-block;
margin-left: 1px;
}
-.btn-group > .btn-mini {
- font-size: 10.5px;
-}
-
-.btn-group > .btn-small {
- font-size: 11.9px;
-}
-
-.btn-group > .btn-large {
- font-size: 17.5px;
-}
-
.btn-group > .btn:first-child {
margin-left: 0;
border-bottom-left-radius: 4px;
}
.btn-large .caret {
- border-top-width: 5px;
- border-right-width: 5px;
- border-left-width: 5px;
+ border-width: 5px;
}
.btn-mini .caret,
border-bottom-width: 5px;
}
-.btn-primary .caret,
-.btn-warning .caret,
-.btn-danger .caret,
-.btn-info .caret,
-.btn-success .caret,
-.btn-inverse .caret {
- border-top-color: #fff;
- border-bottom-color: #fff;
-}
-
.btn-group-vertical > .btn {
display: block;
float: none;
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
- <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 class="btn-group">
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
- <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><!-- /btn-toolbar -->
</div>
<pre class="prettyprint linenums">
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info">Info</button>
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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 class="btn-group">
- <button class="btn btn-inverse">Inverse</button>
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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><!-- /btn-toolbar -->
</div>
<pre class="prettyprint linenums">
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
- <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 class="btn-group">
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
- <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><!-- /btn-toolbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info">Info</button>
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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 class="btn-group">
- <button class="btn btn-inverse">Inverse</button>
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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><!-- /btn-toolbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
// Button groups
// --------------------------------------------------
+// Button carets
+.caret {
+ border-top-color: #fff;
+ border-bottom-color: #fff;
+}
// Make the div behave like a button
.btn-group {
margin-top: 6px;
}
.btn-large .caret {
- border-left-width: 5px;
- border-right-width: 5px;
- border-top-width: 5px;
+ border-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
}
-
-// Account for other colors
-.btn-primary,
-.btn-warning,
-.btn-danger,
-.btn-info,
-.btn-success,
-.btn-inverse {
- .caret {
- border-top-color: #fff;
- border-bottom-color: #fff;
- }
-}
-
-
-
// Vertical button groups
// ----------------------
font-weight: bold;
line-height: @line-height-base;
text-align: center;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
vertical-align: middle;
cursor: pointer;
border: 1px solid @btn-border;