move all JS buttons docs to regular buttons docs page, rewrite the callouts and some docs verbage

1 files changed, 0 insertions, 124 deletions

diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md
deleted file mode 100644
index 2a8e4ccd1..000000000
--- a/docs/javascript/buttons.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-layout: page
-title: Buttons
----
-
-
-Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
-
-{% callout danger %}
-#### Cross-browser compatibility
-
-[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
-{% endcallout %}
-
-
-## Stateful
-
-Add `data-loading-text="Loading..."` to use a loading state on a button.
-
-{% callout info %}
-#### Use whichever state you like!
-
-For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [See more on this below in the `$().button(string)` documentation](#buttons-methods).
-{% endcallout %}
-
-{% example html %}
-<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
-  Loading state
-</button>
-<script>
-  $('#myButton').on('click', function () {
-    var $btn = $(this).button('loading')
-    // business logic...
-    $btn.button('reset')
-  })
-</script>
-{% endexample %}
-
-### 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" aria-pressed="false" autocomplete="off">
-  Single toggle
-</button>
-{% endexample %}
-
-{% callout warning %}
-#### Pre-toggled buttons need `.active` and `aria-pressed="true"`
-
-For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself.
-{% endcallout %}
-
-## Checkbox and radio
-
-Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
-
-{% callout warning %}
-#### Preselected options need `.active`
-
-For preselected options, you must add the `.active` class to the input's `label` yourself.
-{% endcallout %}
-
-{% callout warning %}
-#### Visual checked state only updated on click
-
-If the checked state of a checkbox button is updated without firing a `click` event on the button (e.g. via `<input type="reset">` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself.
-{% endcallout %}
-
-{% example html %}
-<div class="bd-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 %}
-
-{% 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> Radio 1 (preselected)
-  </label>
-  <label class="btn btn-primary">
-    <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"> Radio 3
-  </label>
-</div>
-{% endexample %}
-
-### Methods
-
-#### $().button('toggle')
-
-Toggles push state. Gives the button the appearance that it has been activated.
-
-#### $().button('reset')
-
-Resets button state—swaps text to original text.
-
-#### $().button(string)
-
-Swaps text to any data defined text state.
-
-{% highlight html %}
-<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
-  ...
-</button>
-<script>
-  $('#myStateButton').on('click', function () {
-    $(this).button('complete') // button text will be "finished!"
-  })
-</script>
-{% endhighlight %}