rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Use form elements in checkbox and radio button groups

Browse Source 
* Uses .btn on label elements with nested checkbox and radio controls within
* Updated examples to reflect change in HTML and CSS
* Had to add .active all buttons for proper state highlighting (mimicing the :active pseudo state)
* Still needs JavaScript plugin updated by @fat
This commit is contained in:
Mark Otto 2013-03-16 12:34:07 -07:00
parent be8f992c94
commit efbf8373a5
4 changed files with 88 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/assets/css/bootstrap.css vendored
View File

@ -1771,7 +1771,8 @@ input[type="button"].btn-block {
.btn:hover, .btn:hover,
.btn:focus, .btn:focus,
.btn:active { .btn:active,
.btn.active {
background-color: #9a9c9d; background-color: #9a9c9d;
border-color: #8d9091; border-color: #8d9091;
} }
@ -1784,7 +1785,10 @@ fieldset[disabled] .btn:hover,
fieldset[disabled] .btn:focus, fieldset[disabled] .btn:focus,
.btn.disabled:active, .btn.disabled:active,
.btn[disabled]:active, .btn[disabled]:active,
fieldset[disabled] .btn:active { fieldset[disabled] .btn:active,
.btn.disabled.active,
.btn[disabled].active,
fieldset[disabled] .btn.active {
background-color: #a7a9aa; background-color: #a7a9aa;
border-color: #a7a9aa; border-color: #a7a9aa;
} }
@ -1796,7 +1800,8 @@ fieldset[disabled] .btn:active {
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus, .btn-primary:focus,
.btn-primary:active { .btn-primary:active,
.btn-primary.active {
background-color: #357ebd; background-color: #357ebd;
border-color: #3071a9; border-color: #3071a9;
} }
@ -1809,7 +1814,10 @@ fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active, .btn-primary.disabled:active,
.btn-primary[disabled]:active, .btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active { fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #428bca; background-color: #428bca;
border-color: #428bca; border-color: #428bca;
} }
@ -1821,7 +1829,8 @@ fieldset[disabled] .btn-primary:active {
.btn-warning:hover, .btn-warning:hover,
.btn-warning:focus, .btn-warning:focus,
.btn-warning:active { .btn-warning:active,
.btn-warning.active {
background-color: #eea236; background-color: #eea236;
border-color: #ec971f; border-color: #ec971f;
} }
@ -1834,7 +1843,10 @@ fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active, .btn-warning.disabled:active,
.btn-warning[disabled]:active, .btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active { fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
background-color: #f0ad4e; background-color: #f0ad4e;
border-color: #f0ad4e; border-color: #f0ad4e;
} }
@ -1846,7 +1858,8 @@ fieldset[disabled] .btn-warning:active {
.btn-danger:hover, .btn-danger:hover,
.btn-danger:focus, .btn-danger:focus,
.btn-danger:active { .btn-danger:active,
.btn-danger.active {
background-color: #d43f3a; background-color: #d43f3a;
border-color: #c9302c; border-color: #c9302c;
} }
@ -1859,7 +1872,10 @@ fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active, .btn-danger.disabled:active,
.btn-danger[disabled]:active, .btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active { fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
background-color: #d9534f; background-color: #d9534f;
border-color: #d9534f; border-color: #d9534f;
} }
@ -1871,7 +1887,8 @@ fieldset[disabled] .btn-danger:active {
.btn-success:hover, .btn-success:hover,
.btn-success:focus, .btn-success:focus,
.btn-success:active { .btn-success:active,
.btn-success.active {
background-color: #4cae4c; background-color: #4cae4c;
border-color: #449d44; border-color: #449d44;
} }
@ -1884,7 +1901,10 @@ fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active, .btn-success.disabled:active,
.btn-success[disabled]:active, .btn-success[disabled]:active,
fieldset[disabled] .btn-success:active { fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c; background-color: #5cb85c;
border-color: #5cb85c; border-color: #5cb85c;
} }
@ -1896,7 +1916,8 @@ fieldset[disabled] .btn-success:active {
.btn-info:hover, .btn-info:hover,
.btn-info:focus, .btn-info:focus,
.btn-info:active { .btn-info:active,
.btn-info.active {
background-color: #46b8da; background-color: #46b8da;
border-color: #31b0d5; border-color: #31b0d5;
} }
@ -1909,7 +1930,10 @@ fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active, .btn-info.disabled:active,
.btn-info[disabled]:active, .btn-info[disabled]:active,
fieldset[disabled] .btn-info:active { fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de; background-color: #5bc0de;
border-color: #5bc0de; border-color: #5bc0de;
} }
@ -3671,6 +3695,11 @@ button.close {
width: 1%; width: 1%;
} }
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
display: none;
}
.breadcrumb { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
margin: 0 0 20px; margin: 0 0 20px;

48
docs/javascript.html
View File

@ -1172,16 +1172,28 @@ $('#my-alert').bind('closed', function () {
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox"> <div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button> <label class="btn btn-primary">
<button type="button" class="btn btn-primary">Middle</button> <input type="checkbox"> Option 1
<button type="button" class="btn btn-primary">Right</button> </label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-checkbox"> <div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button> <label class="btn btn-primary">
<button type="button" class="btn btn-primary">Middle</button> <input type="checkbox"> Option 1
<button type="button" class="btn btn-primary">Right</button> </label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1189,16 +1201,28 @@ $('#my-alert').bind('closed', function () {
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button> <label class="btn btn-primary">
<button type="button" class="btn btn-primary">Middle</button> <input type="radio" name="options" id="option1"> Option 1
<button type="button" class="btn btn-primary">Right</button> </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button> <label class="btn btn-primary">
<button type="button" class="btn btn-primary">Middle</button> <input type="radio" name="options" id="option1"> Option 1
<button type="button" class="btn btn-primary">Right</button> </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div> </div>
{% endhighlight %} {% endhighlight %}

7
less/button-groups.less
View File

@ -156,3 +156,10 @@
width: 1%; width: 1%;
} }
} }
// Checkbox and radio options
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
display: none;
}

6
less/mixins.less
View File

@ -401,7 +401,8 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active,
&.active {
background-color: darken(@background, 5%); background-color: darken(@background, 5%);
border-color: darken(@border, 10%); border-color: darken(@border, 10%);
} }
@ -411,7 +412,8 @@
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active,
&.active {
background-color: @background; background-color: @background;
border-color: @border border-color: @border
} }