From 2ed265c1d7bffd999bd973c9cf9e067aa2243df7 Mon Sep 17 00:00:00 2001 From: Luke Vivier Date: Wed, 21 Sep 2011 21:30:21 -0700 Subject: [PATCH 1/6] Add radio and toggle button groups. Not yet tested in IE. --- bootstrap.css | 44 +++++++++++++++++++++- bootstrap.min.css | 7 ++++ docs/assets/js/application.js | 4 ++ docs/index.html | 35 ++++++++++++++++++ docs/javascript.html | 69 +++++++++++++++++++++++++++++++++++ js/bootstrap-radiotoggle.js | 29 +++++++++++++++ lib/patterns.less | 38 +++++++++++++++++++ 7 files changed, 225 insertions(+), 1 deletion(-) create mode 100644 js/bootstrap-radiotoggle.js diff --git a/bootstrap.css b/bootstrap.css index 69c53f484d55..fd0e5db9bddd 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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: Sun Sep 18 14:19:52 PDT 2011 + * Date: Wed 21 Sep 2011 20:49:00 PDT */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1888,6 +1888,48 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } +.btn.toggle.active { + background-position: 0 -15px; + color: #333; + text-decoration: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); +} +.radio .active { + color: #ffffff; + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btngroup { + display: inline-block; + vertical-align: bottom; +} +.btn.left, .btn.middle, .btn.right { + float: left; +} +.btn.left { + border-right: none; + border-radius: 4px 0 0 4px; +} +.btn.middle { + border-right: none; + border-radius: 0; +} +.btn.right { + border-radius: 0px 4px 4px 0px; +} .close { float: right; color: #000000; diff --git a/bootstrap.min.css b/bootstrap.min.css index aabdf2428b30..26765292257d 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -272,6 +272,13 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} +.btn.toggle.active{background-position:0 -15px;color:#333;text-decoration:none;-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);} +.radio .active{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btngroup{display:inline-block;vertical-align:bottom;} +.btn.left,.btn.middle,.btn.right{float:left;} +.btn.left{border-right:none;border-radius:4px 0 0 4px;} +.btn.middle{border-right:none;border-radius:0;} +.btn.right{border-radius:0px 4px 4px 0px;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 5beba46e1fa4..ed5b16a75299 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -26,6 +26,10 @@ $(document).ready(function(){ e.preventDefault() }) + // radios and toggles + $('.radio .btn').radio() + $('.toggle.btn').toggleBtn(); + // Copy code blocks in docs $(".copy-code").focus(function () { var el = this; diff --git a/docs/index.html b/docs/index.html index 9fcc5c368f31..ea87a8e258bb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,6 +24,7 @@ + @@ -1291,6 +1292,36 @@

Buttons

+ +
+
+

Radios and Toggles

+

Two flavours of button groups. First, wrap your group in a div.btngroup and assign .left, .middle and .right classes to the buttons.

+

Get the javascript »

+
+
+

Radios

+

In a radio group, only one button may be active at a time. Add the class .radio to the button group.

+
+
+ Left + Middle + Right +
+
+

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.

+
+
+ Left + Middle + Right +
+ + Toggle +
+
+
@@ -1726,6 +1757,10 @@

What's included

bootstrap-dropdown.js This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. + + bootstrap-radiotoggle.js + This plugin adds interaction to radio and toggle button groups. + bootstrap-scrollspy.js The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. diff --git a/docs/javascript.html b/docs/javascript.html index bb8864d463d3..9a623597f0a8 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -22,6 +22,7 @@ + @@ -52,6 +53,7 @@

Bootstrap JS

  • Twipsy
  • Popover
  • Alerts
    • +
  • Radios & Toggles
    • @@ -658,6 +660,73 @@

    Demo

    + +
    +
    +

    Radios and Toggles radiotoggle.js

    +
    +
    +
    +

    This plugin adds interaction to radio and toggle button groups.

    + Download +
    +
    +

    Using bootstrap-radiotoggle.js

    + 
    +$('.radio .btn').radio()
+
+$('.toggle.btn').toggleBtn();
    +

    Markup

    +

    For radio buttons:

    + 
    +<div class="btngroup radio">
+  <a class="btn left">Left</a>
+  <a class="btn middle">Middle</a>
+  <a class="btn right">Right</a>
+</div>
    +

    For toggle buttons:

    + 
    +<div class="btngroup">
+  <a class="btn toggle left">Left</a>
+  <a class="btn toggle right">Right</a>
+</div>
    +

    Toggles need not be in a button group:

    + 
    +<a class="btn toggle">Toggle</a>
    +

    Methods

    +

    $().radio()

    +

    Adds radio button functionality to selected buttons.

    +

    $().toggleBtn()

    +

    Adds toggle button functionality to selected buttons.

    +

    Demo

    +
    +
    + Left + Middle + Right +
    +
    +
    +
    + Left + Middle + Right +
    + + Toggle +
    + +
    +
    +
    diff --git a/js/bootstrap-radiotoggle.js b/js/bootstrap-radiotoggle.js new file mode 100644 index 000000000000..dcc89057432e --- /dev/null +++ b/js/bootstrap-radiotoggle.js @@ -0,0 +1,29 @@ +/* Radio and toggle buttons */ + +( function( $ ) { + + function activate ( element, container ) { + container.find('.active').removeClass('active'); + element.addClass('active'); + } + + jQuery.fn.radio = function() { + + return this.each( function() { + var $this = $(this); + $this.click( function() { + activate( $this, $this.parent() ); + } ); + } ); + }; + + jQuery.fn.toggleBtn = function() { + return this.each( function() { + var $this = $(this); + $this.click( function() { + $this.toggleClass('active'); + } ); + } ); + } + +} )( window.jQuery || window.ender ); \ No newline at end of file diff --git a/lib/patterns.less b/lib/patterns.less index ce387614e9a1..448650185905 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,43 @@ input[type=submit].btn { } } +// RADIO, TOGGLE AND GROUPED BUTTONS +// --------------------------------- + +// active state for radio and toggle buttons +.btn.toggle.active { + background-position: 0 -15px; + 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) +} + +// Left, right and centre classes for button groups +.btngroup { + display: inline-block; + vertical-align: bottom; +} +.btn.left, +.btn.middle, +.btn.right { + float: left; +} +.btn.left { + border-right: none; + border-radius: 4px 0 0 4px; +} +.btn.middle { + border-right: none; + border-radius: 0; +} +.btn.right { + border-radius: 0px 4px 4px 0px; +} // CLOSE ICONS // ----------- From 330725b08da5c4244828e8fd80176e02ced0b5bd Mon Sep 17 00:00:00 2001 From: Luke Vivier Date: Sun, 25 Sep 2011 13:06:48 -0700 Subject: [PATCH 2/6] Corrected JS style, docs --- bootstrap.css | 2 +- docs/index.html | 25 +++++++++++++++++++------ docs/javascript.html | 10 +++++----- js/bootstrap-radiotoggle.js | 28 ++++++++++++++-------------- 4 files changed, 39 insertions(+), 26 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index fd0e5db9bddd..9524c3089450 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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: Wed 21 Sep 2011 20:49:00 PDT + * Date: Thu 22 Sep 2011 10:45:18 PDT */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). diff --git a/docs/index.html b/docs/index.html index ea87a8e258bb..1a405c6fed25 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1295,11 +1295,24 @@

    Buttons

    -

    Radios and Toggles

    -

    Two flavours of button groups. First, wrap your group in a div.btngroup and assign .left, .middle and .right classes to the buttons.

    +

    Button Groups

    +

    Three flavours: regular, radios and toggles. First, wrap your group in a .btngroup and assign .left, .middle and .right classes to the buttons.

    Get the javascript »

    +

    Groups

    +
    +
    + Left + Right +
    +
    + 1 + 2 + 3 + 4 +
    +

    Radios

    In a radio group, only one button may be active at a time. Add the class .radio to the button group.

    @@ -1757,10 +1770,6 @@

    What's included

    bootstrap-dropdown.js This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. - - bootstrap-radiotoggle.js - This plugin adds interaction to radio and toggle button groups. - bootstrap-scrollspy.js The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. @@ -1777,6 +1786,10 @@

    What's included

    bootstrap-popover.js The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project! + + bootstrap-radiotoggle.js + This plugin adds interaction to radio and toggle button groups. +

    Is javascript necessary?

    diff --git a/docs/javascript.html b/docs/javascript.html index 9a623597f0a8..4bf1a154c357 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -53,7 +53,7 @@

    Bootstrap JS

  • Twipsy
  • Popover
  • Alerts
    • -
  • Radios & Toggles
    • +
  • Toggles
    • @@ -663,11 +663,11 @@

    Demo

    -

    Radios and Toggles radiotoggle.js

    +

    Toggles radiotoggle.js

    -

    This plugin adds interaction to radio and toggle button groups.

    +

    Toggle buttons and radio buttons in button groups.

    Download
    @@ -675,7 +675,7 @@

    Using bootstrap-radiotoggle.js

     $('.radio .btn').radio()
 
-$('.toggle.btn').toggleBtn();
    +$('.toggle.btn').toggleBtn()

    Markup

    For radio buttons:

    @@ -717,7 +717,7 @@ 
    Demo
    + @@ -25,6 +26,8 @@ + +
    diff --git a/js/tests/unit/bootstrap-radiotoggle.js b/js/tests/unit/bootstrap-radiotoggle.js new file mode 100644 index 000000000000..e302eca93fb7 --- /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 = '
    ' + + 'OneTwo' + + '
    ' + , 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 From 12bcb5eafe7851d4f8e356c02bd755ab7f38fb03 Mon Sep 17 00:00:00 2001 From: Luke Vivier Date: Sun, 25 Sep 2011 16:41:04 -0700 Subject: [PATCH 6/6] Removed .left, .middle and .right classes from CSS and docs Realized browsers that can't do `:nth-child()` can't do `border-radius:` either! --- bootstrap.css | 17 ++++++++-------- bootstrap.min.css | 8 ++++---- docs/index.html | 27 +++++++++++++------------- docs/javascript.html | 22 ++++++++++----------- js/tests/unit/bootstrap-radiotoggle.js | 2 +- lib/patterns.less | 19 ++++++++---------- 6 files changed, 46 insertions(+), 49 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 206aa5deab35..48441bbc8833 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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: Sun 25 Sep 2011 13:52:22 PDT + * Date: Sun 25 Sep 2011 16:29:58 PDT */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1925,18 +1925,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: inline-block; vertical-align: bottom; } -.btn.left, .btn.middle, .btn.right { +.btngroup .btn { float: left; + border-radius: 0; } -.btn.left { - border-right: none; - border-radius: 4px 0 0 4px; +.btngroup .btn:nth-child(n+2) { + border-left: none; } -.btn.middle { - border-right: none; - border-radius: 0; +.btngroup .btn:first-child { + border-radius: 4px 0 0 4px; } -.btn.right { +.btngroup .btn:last-child { border-radius: 0px 4px 4px 0px; } .close { diff --git a/bootstrap.min.css b/bootstrap.min.css index 11a7e5d27257..b8220d47f941 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -275,10 +275,10 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .toggle.active{background-color:#bfbfbf;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#bfbfbf), to(#bfbfbf));background-image:-moz-linear-gradient(top, #bfbfbf, #bfbfbf);background-image:-ms-linear-gradient(top, #bfbfbf, #bfbfbf);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(100%, #bfbfbf));background-image:-webkit-linear-gradient(top, #bfbfbf, #bfbfbf);background-image:-o-linear-gradient(top, #bfbfbf, #bfbfbf);background-image:linear-gradient(top, #bfbfbf, #bfbfbf);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);color:#333;text-decoration:none;-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);} .radio .active{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btngroup{display:inline-block;vertical-align:bottom;} -.btn.left,.btn.middle,.btn.right{float:left;} -.btn.left{border-right:none;border-radius:4px 0 0 4px;} -.btn.middle{border-right:none;border-radius:0;} -.btn.right{border-radius:0px 4px 4px 0px;} +.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{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} diff --git a/docs/index.html b/docs/index.html index 1a405c6fed25..01961c6139e0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1296,39 +1296,40 @@

    Buttons

    Button Groups

    -

    Three flavours: regular, radios and toggles. First, wrap your group in a .btngroup and assign .left, .middle and .right classes to the buttons.

    +

    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

    - Left - Right + Left + Right
    - 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4

    Radios

    In a radio group, only one button may be active at a time. Add the class .radio to the button group.

    - Left - Middle - Right + Left + Middle + Right

    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.

    - Left - Middle - Right + Left + Middle + Right
    Toggle diff --git a/docs/javascript.html b/docs/javascript.html index 4bf1a154c357..92151a48d1e4 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -680,15 +680,15 @@

    Markup

    For radio buttons:

     <div class="btngroup radio">
-  <a class="btn left">Left</a>
-  <a class="btn middle">Middle</a>
-  <a class="btn right">Right</a>
+  <a class="btn">Left</a>
+  <a class="btn">Middle</a>
+  <a class="btn">Right</a>
 </div>

    For toggle buttons:

     <div class="btngroup">
-  <a class="btn toggle left">Left</a>
-  <a class="btn toggle right">Right</a>
+  <a class="btn toggle">Left</a>
+  <a class="btn toggle">Right</a>
 </div>

    Toggles need not be in a button group:

    @@ -701,16 +701,16 @@ 
    $().toggleBtn()
    
                 
    Demo
    
                 
    
                     
    
-                        Left
-                        Middle
-                        Right
+                        Left
+                        Middle
+                        Right
                     
    
                 
    
                 
    
                     
    
-                        Left
-                        Middle
-                        Right
+                        Left
+                        Middle
+                        Right
                     
    
                     
                     Toggle
diff --git a/js/tests/unit/bootstrap-radiotoggle.js b/js/tests/unit/bootstrap-radiotoggle.js
index e302eca93fb7..75ac8fde8106 100644
--- a/js/tests/unit/bootstrap-radiotoggle.js
+++ b/js/tests/unit/bootstrap-radiotoggle.js
@@ -27,7 +27,7 @@ $(function () {
     
     test("should activate focused radio on click (radio)", function () {
         var radioHTML = '
    '
-        + 'OneTwo'
+        + 'OneTwo'
         + '
    '
         , radio = $(radioHTML).find('a').radio()
         
diff --git a/lib/patterns.less b/lib/patterns.less
index 7c9f0df1ce14..9b674ac916fa 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -623,25 +623,22 @@ input[type=submit].btn {
     .gradientBar(@blue, @blueDark)
 }
 
-// Left, right and centre classes for button groups
+// Classes for button groups
 .btngroup {
     display: inline-block;
     vertical-align: bottom;
 }
-.btn.left,
-.btn.middle,
-.btn.right {
+.btngroup .btn {
     float: left;
+    border-radius: 0;
 }
-.btn.left {
-    border-right: none;
-    border-radius: 4px 0 0 4px;
+.btngroup .btn:nth-child(n+2) {
+    border-left: none;
 }
-.btn.middle {
-    border-right: none;
-    border-radius: 0;
+.btngroup .btn:first-child {
+    border-radius: 4px 0 0 4px;
 }
-.btn.right {
+.btngroup .btn:last-child {
     border-radius: 0px 4px 4px 0px;
 }