Merge pull request #13260 from twbs/doc-12651

document that label.active on preselected inputs in btn-groups is manual
twbs · Apr 3, 2014 · 4c049e3 · 4c049e3
2 parents 9056fe0 + 2d1d575
commit 4c049e3
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
@@ -37,10 +37,14 @@ <h4>Single toggle</h4>
 
   <h4>Checkbox</h4>
   <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Pre-checked options need <code>.active</code></h4>
+    <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
+  </div>
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
-      <label class="btn btn-primary">
-        <input type="checkbox"> Option 1
+      <label class="btn btn-primary active">
+        <input type="checkbox" checked> Option 1 (pre-checked)
       </label>
       <label class="btn btn-primary">
         <input type="checkbox"> Option 2
@@ -52,8 +56,8 @@ <h4>Checkbox</h4>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary">
-    <input type="checkbox"> Option 1
+  <label class="btn btn-primary active">
+    <input type="checkbox" checked> Option 1 (pre-checked)
   </label>
   <label class="btn btn-primary">
     <input type="checkbox"> Option 2
@@ -66,10 +70,14 @@ <h4>Checkbox</h4>
 
   <h4>Radio</h4>
   <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Preselected options need <code>.active</code></h4>
+    <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
+  </div>
   <div class="bs-example" style="padding-bottom: 24px;">
     <div class="btn-group" data-toggle="buttons">
-      <label class="btn btn-primary">
-        <input type="radio" name="options" id="option1"> Option 1
+      <label class="btn btn-primary active">
+        <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
       </label>
       <label class="btn btn-primary">
         <input type="radio" name="options" id="option2"> Option 2
@@ -81,8 +89,8 @@ <h4>Radio</h4>
   </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary">
-    <input type="radio" name="options" id="option1"> Option 1
+  <label class="btn btn-primary active">
+    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
   </label>
   <label class="btn btn-primary">
     <input type="radio" name="options" id="option2"> Option 2