mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Require .btn-default for regular buttons
* Instead of , use for standard, gray button * Improves ability to customize buttons by encouraging folks to not override .btn and thus overriding all button modifier classes * Updates docs to reflect the change * Reorganize buttons CSS
This commit is contained in:
Mark Otto
parent
ad5f88e1c5
commit
d7f84d1220
111
docs/assets/css/bootstrap.css
vendored
111
docs/assets/css/bootstrap.css
vendored
@ -1830,7 +1830,7 @@ select:focus:invalid:focus {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid #a7a9aa;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -1865,72 +1865,38 @@ fieldset[disabled] .btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn-default {
|
||||
color: #ffffff;
|
||||
background-color: #a7a9aa;
|
||||
border-color: #a7a9aa;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:focus,
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default:active,
|
||||
.btn-default.active {
|
||||
background-color: #9a9c9d;
|
||||
border-color: #8d9091;
|
||||
}
|
||||
|
||||
.btn.disabled:hover,
|
||||
.btn[disabled]:hover,
|
||||
fieldset[disabled] .btn:hover,
|
||||
.btn.disabled:focus,
|
||||
.btn[disabled]:focus,
|
||||
fieldset[disabled] .btn:focus,
|
||||
.btn.disabled:active,
|
||||
.btn[disabled]:active,
|
||||
fieldset[disabled] .btn:active,
|
||||
.btn.disabled.active,
|
||||
.btn[disabled].active,
|
||||
fieldset[disabled] .btn.active {
|
||||
.btn-default.disabled:hover,
|
||||
.btn-default[disabled]:hover,
|
||||
fieldset[disabled] .btn-default:hover,
|
||||
.btn-default.disabled:focus,
|
||||
.btn-default[disabled]:focus,
|
||||
fieldset[disabled] .btn-default:focus,
|
||||
.btn-default.disabled:active,
|
||||
.btn-default[disabled]:active,
|
||||
fieldset[disabled] .btn-default:active,
|
||||
.btn-default.disabled.active,
|
||||
.btn-default[disabled].active,
|
||||
fieldset[disabled] .btn-default.active {
|
||||
background-color: #a7a9aa;
|
||||
border-color: #a7a9aa;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #ffffff;
|
||||
background-color: #428bca;
|
||||
border-color: #428bca;
|
||||
}
|
||||
@ -1960,6 +1926,7 @@ fieldset[disabled] .btn-primary.active {
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: #ffffff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
@ -1989,6 +1956,7 @@ fieldset[disabled] .btn-warning.active {
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: #ffffff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
@ -2018,6 +1986,7 @@ fieldset[disabled] .btn-danger.active {
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #ffffff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
@ -2047,6 +2016,7 @@ fieldset[disabled] .btn-success.active {
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
color: #ffffff;
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
@ -2114,6 +2084,41 @@ fieldset[disabled] .btn-link:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 11px 14px;
|
||||
font-size: 17.5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
|
||||
187
docs/docs.html
187
docs/docs.html
@ -2047,7 +2047,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
<h2 id="buttons-options">Button options</h2>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements for the best rendering.</p>
|
||||
<p>Use any of the available button classes to quickly create a styled button.</p>
|
||||
<div class="bs-docs-example">
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
@ -2080,56 +2080,55 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="buttons-sizes">Button sizes</h2>
|
||||
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p>
|
||||
<button type="button" class="btn btn-large btn-primary">Large button</button>
|
||||
<button type="button" class="btn btn-large">Large button</button>
|
||||
<button type="button" class="btn btn-primary btn-large">Large button</button>
|
||||
<button type="button" class="btn btn-default btn-large">Large button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn">Default button</button>
|
||||
<button type="button" class="btn btn-default">Default button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-small btn-primary">Small button</button>
|
||||
<button type="button" class="btn btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-primary btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-small">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
|
||||
<button type="button" class="btn btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-default btn-mini">Mini button</button>
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p>
|
||||
<button type="button" class="btn btn-large btn-primary">Large button</button>
|
||||
<button type="button" class="btn btn-large">Large button</button>
|
||||
<button type="button" class="btn btn-primary btn-large">Large button</button>
|
||||
<button type="button" class="btn btn-default btn-large">Large button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn">Default button</button>
|
||||
<button type="button" class="btn btn-default">Default button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-small btn-primary">Small button</button>
|
||||
<button type="button" class="btn btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-primary btn-small">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-small">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
|
||||
<button type="button" class="btn btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
|
||||
<button type="button" class="btn btn-default btn-mini">Mini button</button>
|
||||
</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
|
||||
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-large btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-large btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -2139,12 +2138,12 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<h3>Button element</h3>
|
||||
<p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
|
||||
<p class="bs-docs-example">
|
||||
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
|
||||
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
|
||||
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
|
||||
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
|
||||
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
|
||||
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-docs-sidenote">
|
||||
@ -2155,12 +2154,12 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<h3>Anchor element</h3>
|
||||
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
|
||||
<p class="bs-docs-example">
|
||||
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-large disabled">Link</a>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-large disabled">Link</a>
|
||||
{% endhighlight %}
|
||||
<p>
|
||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
|
||||
@ -2171,19 +2170,19 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="buttons-tags">One class, multiple tags</h2>
|
||||
<p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<h2 id="buttons-tags">Using multiple tags</h2>
|
||||
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<form class="bs-docs-example">
|
||||
<a class="btn" href="">Link</a>
|
||||
<button class="btn" type="submit">Button</button>
|
||||
<input class="btn" type="button" value="Input">
|
||||
<input class="btn" type="submit" value="Submit">
|
||||
<a class="btn btn-default" href="#">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<a class="btn" href="">Link</a>
|
||||
<button class="btn" type="submit">Button</button>
|
||||
<input class="btn" type="button" value="Input">
|
||||
<input class="btn" type="submit" value="Submit">
|
||||
<a class="btn btn-default" href="#">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-docs-sidenote">
|
||||
@ -2599,20 +2598,20 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /bs-docs-example -->
|
||||
{% highlight html %}
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
|
||||
<a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
|
||||
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
@ -2638,8 +2637,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div><!-- /bs-docs-example -->
|
||||
{% highlight html %}
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
|
||||
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
|
||||
<a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
|
||||
<li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
|
||||
@ -2652,18 +2651,18 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<h5>Large button</h5>
|
||||
<div class="bs-docs-example">
|
||||
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
|
||||
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
|
||||
</div><!-- /bs-docs-example -->
|
||||
{% highlight html %}
|
||||
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
|
||||
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
|
||||
{% endhighlight %}
|
||||
|
||||
<h5>Small button</h5>
|
||||
<div class="bs-docs-example">
|
||||
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
|
||||
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
|
||||
</div><!-- /bs-docs-example -->
|
||||
{% highlight html %}
|
||||
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
|
||||
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -2878,16 +2877,16 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group" style="margin: 9px 0 5px;">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -2896,18 +2895,18 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
<button type="button" class="btn">4</button>
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-default">3</button>
|
||||
<button type="button" class="btn btn-default">4</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn">5</button>
|
||||
<button type="button" class="btn">6</button>
|
||||
<button type="button" class="btn">7</button>
|
||||
<button type="button" class="btn btn-default">5</button>
|
||||
<button type="button" class="btn btn-default">6</button>
|
||||
<button type="button" class="btn btn-default">7</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn">8</button>
|
||||
<button type="button" class="btn btn-default">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2923,12 +2922,12 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-default">3</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -2945,10 +2944,10 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-vertical">
|
||||
<button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
|
||||
<button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
|
||||
<button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
|
||||
<button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
|
||||
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
|
||||
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
|
||||
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
|
||||
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-justify"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -2961,9 +2960,9 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a href="#" class="btn">Left</a>
|
||||
<a href="#" class="btn">Right</a>
|
||||
<a href="#" class="btn">Middle</a>
|
||||
<a href="#" class="btn btn-default">Left</a>
|
||||
<a href="#" class="btn btn-default">Right</a>
|
||||
<a href="#" class="btn btn-default">Middle</a>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -2994,7 +2993,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin-bottom: 10px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -3048,7 +3047,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% highlight html %}
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
Action <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3066,8 +3065,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<button class="btn">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<button class="btn btn-default">Action</button>
|
||||
<button class="btn btn-default 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>
|
||||
@ -3125,8 +3124,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% highlight html %}
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button class="btn">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<button class="btn btn-default">Action</button>
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3144,7 +3143,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Large button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3156,7 +3155,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Small button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3168,7 +3167,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Mini button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3184,7 +3183,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Large button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3194,7 +3193,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<!-- Small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Small button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3204,7 +3203,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<!-- Mini button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Mini button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@ -3218,8 +3217,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<button class="btn btn-default">Dropup</button>
|
||||
<button class="btn btn-default 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>
|
||||
@ -3229,8 +3228,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn primary">Right dropup</button>
|
||||
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<button class="btn btn-primary">Right dropup</button>
|
||||
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -3243,8 +3242,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
<button class="btn btn-default">Dropup</button>
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
|
||||
// Button carets
|
||||
.btn .caret {
|
||||
border-top-color: @btn-color;
|
||||
border-top-color: @btn-default-color;
|
||||
}
|
||||
.dropup .btn .caret {
|
||||
border-bottom-color: @btn-color;
|
||||
border-bottom-color: @btn-default-color;
|
||||
}
|
||||
|
||||
// Make the div behave like a button
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid @btn-border;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -50,91 +50,35 @@
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
padding: @padding-large;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
// Small
|
||||
.btn-small {
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.btn-mini {
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
||||
// Icons in buttons
|
||||
// -------------------------
|
||||
|
||||
// TODO: figure this shit out
|
||||
|
||||
// Block button
|
||||
// -------------------------
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
color: @btn-color;
|
||||
.btn-pseudo-states(@btn-bg, @btn-border);
|
||||
.btn-default {
|
||||
.btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
|
||||
}
|
||||
.btn-primary {
|
||||
.btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
|
||||
.btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
|
||||
}
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
.btn-pseudo-states(@btn-warning-bg, @btn-warning-border);
|
||||
.btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
|
||||
.btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.btn-pseudo-states(@btn-success-bg, @btn-success-border);
|
||||
.btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
|
||||
}
|
||||
// Info appears as blue-green
|
||||
.btn-info {
|
||||
.btn-pseudo-states(@btn-info-bg, @btn-info-border);
|
||||
.btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
|
||||
}
|
||||
|
||||
|
||||
// Link buttons
|
||||
// --------------------------------------------------
|
||||
// -------------------------
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link,
|
||||
@ -173,3 +117,48 @@ fieldset[disabled] .btn-link {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-large {
|
||||
padding: @padding-large;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.btn-small {
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
.btn-mini {
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
||||
// Block button
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -350,7 +350,8 @@
|
||||
// -------------------------
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
.btn-pseudo-states(@background, @border) {
|
||||
.btn-pseudo-states(@color, @background, @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
|
||||
|
||||
@ -84,22 +84,27 @@
|
||||
// Buttons
|
||||
// -------------------------
|
||||
|
||||
@btn-color: #fff;
|
||||
@btn-bg: #a7a9aa;
|
||||
@btn-border: @btn-bg;
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: #a7a9aa;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user