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

docs/_data/nav.yml

@@ -41,8 +41,18 @@
         - title: Print
         - title: Test cases
 
-- title: Content
+- title: Components
   pages:
+    - title: Reboot
+      sections:
+        - title: Approach
+        - title: Page defaults
+        - title: Headings and paragraphs
+        - title: Lists
+        - title: Preformatted text
+        - title: Tables
+        - title: Forms
+        - title: Misc elements
     - title: Typography
       sections:
         # - title: Scale
@@ -67,22 +77,20 @@
         - title: Sample output
     - title: Tables
     - title: Forms
-
-- title: Components
-  pages:
-    - title: Reboot
-      sections:
-        - title: Approach
-        - title: Page defaults
-        - title: Headings and paragraphs
-        - title: Lists
-        - title: Preformatted text
-        - title: Tables
-        - title: Forms
-        - title: Misc elements
     - title: Jumbotron
     - title: Page header
     - title: Buttons
+      sections:
+        - title: Examples
+        - title: Button tags
+        - title: Sizes
+        - title: Active state
+        - title: Disabled state
+        # - title: JavaScript behavior
+        - title: Custom states
+        - title: Single toggle
+        - title: Checkbox and radio
+        - title: Methods
     - title: Custom forms
       sections:
         - title: Checkboxes and radios

docs/assets/scss/_layout.scss

@@ -56,7 +56,6 @@
 .bd-content {
   > h2 {
     margin-top: 3rem;
-    font-weight: normal;
   }
 
   > h3 {

docs/assets/scss/_sidebar.scss

@@ -16,10 +16,6 @@
   }
 }
 
-.bd-sidebar .navbar-toggle .icon-bar {
-  background-color: #fff;
-}
-
 .bd-sidebar .navbar-header {
   float: none;
   margin-right: -15px;
@@ -32,16 +28,14 @@
 
 @media (min-width: 992px) {
   .bd-docs {
-    padding-left: 240px;
+    margin-left: 240px;
   }
   .bd-sidebar {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 100; // Ensure scrolling always works in Safari
     width: 240px;
-    overflow-x: hidden;
     overflow-y: auto;
     border-right: 1px solid #eee;
     // @include gradient-vertical(#29262f, #322f38);

docs/components/buttons.md

@@ -126,3 +126,99 @@ This class uses `pointer-events: none` to try to disable the link functionality
 
 While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
 {% endcallout %}
+
+## JavaScript behavior
+
+Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
+
+### Custom states
+
+Use JavaScript to change the text and "state" of a particular button. 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. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
+
+**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
+
+{% 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 toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
+
+{% example html %}
+<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+  Single toggle
+</button>
+{% endexample %}
+
+### Checkbox and radio
+
+Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
+
+The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
+
+Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
+
+{% 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 %}

docs/javascript/buttons.md

----
-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 %}