Merge branch 'master' into derp

Conflicts:
	Gruntfile.js
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/fonts/glyphicons-halflings-regular.svg
	docs/_includes/components/badges.html
	docs/_includes/components/input-groups.html
	docs/_includes/components/pagination.html
	docs/_includes/css/forms.html
	docs/_includes/footer.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/grunt.html
	docs/_includes/home-nav.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/modal.html
	docs/_includes/js/popovers.html
	docs/_includes/js/tooltips.html
	docs/_includes/nav/getting-started.html
	docs/_includes/nav/javascript.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/browser-bugs.html
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/fonts/glyphicons-halflings-regular.svg
	fonts/glyphicons-halflings-regular.svg
	less/_button-group.less
	less/_jumbotron.less
	less/_variables.less
	less/mixins/vendor-prefixes.less
	less/panels.less
	less/thumbnails.less
	package.json

1 files changed, 48 insertions, 98 deletions

diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md
index b577479aa..9db269f8d 100644
--- a/docs/javascript/buttons.md
+++ b/docs/javascript/buttons.md
@@ -3,111 +3,88 @@ layout: page
 title: Buttons
 ---
 
+
 Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
 
-## Uses
+<div class="bs-callout bs-callout-danger">
+  <h4>Cross-browser compatibility</h4>
+  <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+</div>
 
-#### Stateful
+## Stateful
 
 Add `data-loading-text="Loading..."` to use a loading state on a button.
 
+<div class="bs-callout bs-callout-info">
+  <h4>Use whichever state you like!</h4>
+  <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
+</div>
+
 {% example html %}
-<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
   Loading state
 </button>
 <script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
+  $('#myButton').on('click', function () {
+    var $btn = $(this).button('loading')
+    // business logic...
+    $btn.button('reset')
+  })
 </script>
 {% endexample %}
 
-#### Single toggle
+### Single toggle
 
 Add `data-toggle="button"` to activate toggling on a single button.
 
 {% example html %}
-<button type="button" class="btn btn-primary" data-toggle="button">
+<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
   Single toggle
 </button>
 {% endexample %}
 
-#### Checkbox
+## Checkbox and radio
 
-Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
+Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
 
 <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>
+  <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-callout bs-callout-warning">
   <h4>Visual checked state only updated on click</h4>
   <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
 </div>
 
 {% example html %}
-<div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary active">
-    <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
-  </label>
-  <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Option 2
-  </label>
-  <label class="btn btn-primary">
-    <input type="checkbox" autocomplete="off"> Option 3
-  </label>
+<div class="bs-example">
+  <div class="btn-group" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
+    </label>
+    <label class="btn btn-primary">
+      <input type="checkbox" autocomplete="off"> Checkbox 2
+    </label>
+    <label class="btn btn-primary">
+      <input type="checkbox" autocomplete="off"> Checkbox 3
+    </label>
+  </div>
 </div>
 {% endexample %}
 
-#### Radio
-
-Add `data-toggle="buttons"` to a group of radio inputs for radio style toggling on btn-group.
-
-<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-callout bs-callout-warning">
-  <h4>Visual checked state only updated on click</h4>
-  <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
-</div>
-
-{% highlight html %}
+{% example html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
   </label>
   <label class="btn btn-primary">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
   </label>
 </div>
-{% endhighlight %}
-
-
-## Usage
-
-Enable buttons via JavaScript:
-
-{% highlight js %}
-$('.btn').button()
-{% endhighlight %}
-
-### Markup
-
-Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
-
-### Options
-
-*None.*
+{% endexample %}
 
 ### Methods
 
@@ -115,48 +92,21 @@ Data attributes are integral to the button plugin. Check out the example code be
 
 Toggles push state. Gives the button the appearance that it has been activated.
 
-<div class="bs-callout bs-callout-info">
-  <h4>Auto toggling</h4>
-  <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
-</div>
-
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">...</button>
-{% endhighlight %}
-
-#### $().button('loading')</h4>
-
-Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute `data-loading-text`.
-
-{% highlight html %}
-<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
-<script>
-  $('#loading-example-btn').click(function () {
-    var btn = $(this)
-    btn.button('loading')
-    $.ajax(...).always(function () {
-      btn.button('reset')
-    });
-  });
-</script>
-{% endhighlight %}
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Cross-browser compatibility</h4>
-  <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
-</div>
-
 #### $().button('reset')
 
-Resets button state - swaps text to original text.
+Resets button state—swaps text to original text.
 
 #### $().button(string)
 
-Resets button state - swaps text to any data defined text state.
+Swaps text to any data defined text state.
 
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
+<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
+  ...
+</button>
 <script>
-  $('.btn').button('complete')
+  $('#myStateButton').on('click', function () {
+    $(this).button('complete') // button text will be "finished!"
+  })
 </script>
 {% endhighlight %}