From efbf8373a5060b2c9b4d97cdfd2c288124d339c6 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 16 Mar 2013 12:34:07 -0700
Subject: Use form elements in checkbox and radio button groups

* 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
---
 docs/javascript.html | 48 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 12 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index bbf54b53a..e42444541 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -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>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <div class="btn-group" data-toggle="buttons-checkbox">
-                <button type="button" class="btn btn-primary">Left</button>
-                <button type="button" class="btn btn-primary">Middle</button>
-                <button type="button" class="btn btn-primary">Right</button>
+                <label class="btn btn-primary">
+                  <input type="checkbox"> Option 1
+                </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><!-- /example -->
 {% highlight html linenos %}
 <div class="btn-group" data-toggle="buttons-checkbox">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 1
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 2
+  </label>
+  <label class="btn btn-primary">
+    <input type="checkbox"> Option 3
+  </label>
 </div>
 {% 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>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <div class="btn-group" data-toggle="buttons-radio">
-                <button type="button" class="btn btn-primary">Left</button>
-                <button type="button" class="btn btn-primary">Middle</button>
-                <button type="button" class="btn btn-primary">Right</button>
+                <label class="btn btn-primary">
+                  <input type="radio" name="options" id="option1"> Option 1
+                </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><!-- /example -->
 {% highlight html linenos %}
 <div class="btn-group" data-toggle="buttons-radio">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
+  <label class="btn btn-primary">
+    <input type="radio" name="options" id="option1"> Option 1
+  </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>
 {% endhighlight %}
 
-- 
cgit v1.2.3