markdownify js buttons

1 files changed, 74 insertions, 88 deletions

diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md
index 831840a34..3afc7793a 100644
--- a/docs/javascript/buttons.md
+++ b/docs/javascript/buttons.md
@@ -3,20 +3,15 @@ layout: page
 title: Buttons
 ---
 
-<div class="bs-docs-section">
-  <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
-
-  <h2 id="buttons-examples">Example uses</h2>
-  <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
-
-  <h4>Stateful</h4>
-  <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
-      Loading state
-    </button>
-  </div><!-- /example -->
-{% highlight html %}
+Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
+
+## Uses
+
+#### Stateful
+
+Add `data-loading-text="Loading..."` to use a loading state on a button.
+
+{% example html %}
 <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
   Loading state
 </button>
@@ -29,37 +24,28 @@ title: Buttons
     });
   });
 </script>
-{% endhighlight %}
+{% endexample %}
 
-  <h4>Single toggle</h4>
-  <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
-  <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
-  </div><!-- /example -->
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
-{% endhighlight %}
+#### Single toggle
 
-  <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 active">
-        <input type="checkbox" checked> Option 1 (pre-checked)
-      </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 %}
+Add `data-toggle="button"` to activate toggling on a single button.
+
+{% example html %}
+<button type="button" class="btn btn-primary" data-toggle="button">
+  Single toggle
+</button>
+{% endexample %}
+
+#### Checkbox
+
+Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
+
+<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>
+
+{% example html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
     <input type="checkbox" checked> Option 1 (pre-checked)
@@ -71,27 +57,17 @@ title: Buttons
     <input type="checkbox"> Option 3
   </label>
 </div>
-{% endhighlight %}
+{% 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>
 
-  <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 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
-      </label>
-      <label class="btn btn-primary">
-        <input type="radio" name="options" id="option3"> Option 3
-      </label>
-    </div>
-  </div><!-- /example -->
 {% highlight html %}
 <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
@@ -107,33 +83,41 @@ title: Buttons
 {% endhighlight %}
 
 
-  <h2 id="buttons-usage">Usage</h2>
-  <p>Enable buttons via JavaScript:</p>
+## Usage
+
+Enable buttons via JavaScript:
+
 {% highlight js %}
 $('.btn').button()
 {% endhighlight %}
 
-  <h3>Markup</h3>
-  <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
+### Markup
+
+Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
+
+### Options
+
+*None.*
+
+### Methods
 
-  <h3>Options</h3>
-  <p><em>None</em></p>
+#### $().button('toggle')
 
-  <h3>Methods</h3>
+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>
 
-  <h4>$().button('toggle')</h4>
-  <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-  <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 %}
 
-  <h4>$().button('loading')</h4>
-  <p>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 <code>data-loading-text</code>.
-  </p>
+#### $().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>
@@ -147,20 +131,22 @@ $('.btn').button()
 </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 across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
-  </div>
+<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 across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+</div>
 
-  <h4>$().button('reset')</h4>
-  <p>Resets button state - swaps text to original text.</p>
+#### $().button('reset')
+
+Resets button state - swaps text to original text.
+
+#### $().button(string)
+
+Resets button state - swaps text to any data defined text state.
 
-  <h4>$().button(string)</h4>
-  <p>Resets button state - swaps text to any data defined text state.</p>
 {% highlight html %}
 <button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
 </script>
 {% endhighlight %}
-</div>