*really* refactor the buttons and update them all over the docs

1 files changed, 15 insertions, 15 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index 4297fe652..2789198e6 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -214,7 +214,7 @@
                 <p>One fine body…</p>
               </div>
               <div class="modal-footer">
-                <a href="#" class="btn primary">Save changes</a>
+                <a href="#" class="btn btn-primary">Save changes</a>
                 <a href="#" class="btn">Close</a>
               </div>
             </div>
@@ -239,11 +239,11 @@
               <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn primary">Save changes</a>
+              <a href="#" class="btn btn-primary">Save changes</a>
               <a href="#" class="btn" data-dismiss="modal" >Close</a>
             </div>
           </div>
-          <a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a>
+          <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
 
           <hr>
 
@@ -292,7 +292,7 @@
     &lt;p&gt;One fine body…&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
     &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
@@ -802,7 +802,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>Example hover popover</h2>
           <p>Hover over the button to trigger the popover.</p>
           <div class="well">
-            <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
+            <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
           </div>
           <hr>
           <h2>Using bootstrap-popover.js</h2>
@@ -917,7 +917,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             <h4 class="alert-heading">Oh snap! You got an error!</h4>
             <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <p>
-              <a class="btn danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+              <a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
             </p>
           </div>
           <hr>
@@ -983,7 +983,7 @@ $('#my-alert').bind('closed', function () {
              <tr>
                <td>Stateful</td>
                <td>
-                  <button id="fat-btn" data-loading-text="loading..." class="btn primary">
+                  <button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
                     Loading State
                   </button>
                 </td>
@@ -991,16 +991,16 @@ $('#my-alert').bind('closed', function () {
              <tr>
                <td>Single toggle</td>
                <td>
-                  <button class="btn primary" data-toggle="button">Single Toggle</button>
+                  <button class="btn btn-primary" data-toggle="button">Single Toggle</button>
                 </td>
              </tr>
              <tr>
                <td>Checkbox</td>
                <td>
                   <div class="btn-group" data-toggle="buttons-checkbox">
-                    <button class="btn primary">Left</button>
-                    <button class="btn primary">Middle</button>
-                    <button class="btn primary">Right</button>
+                    <button class="btn btn-primary">Left</button>
+                    <button class="btn btn-primary">Middle</button>
+                    <button class="btn btn-primary">Right</button>
                   </div>
                </td>
              </tr>
@@ -1008,9 +1008,9 @@ $('#my-alert').bind('closed', function () {
                <td>Radio</td>
                <td>
                   <div class="btn-group" data-toggle="buttons-radio">
-                    <button class="btn primary">Left</button>
-                    <button class="btn primary">Middle</button>
-                    <button class="btn primary">Right</button>
+                    <button class="btn btn-primary">Left</button>
+                    <button class="btn btn-primary">Middle</button>
+                    <button class="btn btn-primary">Right</button>
                   </div>
                </td>
              </tr>
@@ -1158,7 +1158,7 @@ $('#my-alert').bind('closed', function () {
           <h3>Markup</h3>
           <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
           <pre class="prettyprint linenums">
-&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
+&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
   simple collapsible
 &lt;/button&gt;