+
+
Button Groups
+
Three flavours: regular, radios and toggles. First, wrap your buttons in a .btngroup.
+
For radios, apply .radio to the wrapper. For toggles, apply .toggle to each button in the group.
+
Get the javascript »
+
+
+
Groups
+
+
Radios
+
In a radio group, only one button may be active at a time. Add the class .radio to the button group.
+
+
Toggles
+
Toggles work like radios, but each button in the group can be set independently. Add .toggle to each button in the button group. Lone buttons can also be toggles.
+
+
+
diff --git a/js/tests/unit/bootstrap-radiotoggle.js b/js/tests/unit/bootstrap-radiotoggle.js
new file mode 100644
index 000000000000..75ac8fde8106
--- /dev/null
+++ b/js/tests/unit/bootstrap-radiotoggle.js
@@ -0,0 +1,39 @@
+$(function () {
+
+ module("bootstrap-radiotoggle")
+
+ test("should be defined on jquery object", function () {
+ ok($(document.body).radio, 'radio method is defined')
+ ok($(document.body).toggleBtn, 'toggleBtn method is defined')
+ })
+
+ test("should return element", function () {
+ ok($(document.body).radio()[0] == document.body, 'radio method returned document.body' )
+ ok($(document.body).toggleBtn()[0] == document.body, 'toggleBtn method returned document.body')
+ })
+
+ test("should toggle element on click (toggleBtn)", function () {
+ var toggleHTML = '
Toggle'
+ , toggle = $(toggleHTML).toggleBtn()
+
+ toggle.click()
+
+ ok(toggle.hasClass('active'), 'add .active on click')
+
+ toggle.click()
+
+ ok(!toggle.hasClass('active'), 'remove .active on next click')
+ })
+
+ test("should activate focused radio on click (radio)", function () {
+ var radioHTML = '
'
+ , radio = $(radioHTML).find('a').radio()
+
+ radio.eq(0).click()
+
+ ok(radio.eq(0).hasClass('active'), 'add .active to focused button')
+ ok(!radio.eq(1).hasClass('active'), 'remove .active from other buttons')
+ })
+})
\ No newline at end of file
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9a1..9b674ac916fa 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -591,6 +591,7 @@ footer {
font-size: @basefont - 2px;
}
}
+
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
:root .alert-message,
:root .btn {
@@ -606,6 +607,40 @@ input[type=submit].btn {
}
}
+// RADIO, TOGGLE AND GROUPED BUTTONS
+// ---------------------------------
+
+// active state for radio and toggle buttons
+.toggle.active {
+ #gradient > .vertical(darken(#ffffff, 25%), darken(#ffffff, 25%));
+ color: #333;
+ text-decoration: none;
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+}
+.radio .active {
+ color: @white;
+ .gradientBar(@blue, @blueDark)
+}
+
+// Classes for button groups
+.btngroup {
+ display: inline-block;
+ vertical-align: bottom;
+}
+.btngroup .btn {
+ float: left;
+ border-radius: 0;
+}
+.btngroup .btn:nth-child(n+2) {
+ border-left: none;
+}
+.btngroup .btn:first-child {
+ border-radius: 4px 0 0 4px;
+}
+.btngroup .btn:last-child {
+ border-radius: 0px 4px 4px 0px;
+}
// CLOSE ICONS
// -----------