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

docs/templates/pages/base-css.mustache

@@ -756,11 +756,6 @@
         <td><code>.form-vertical</code> <span class="muted">({{_i}}not required{{/i}})</span></td>
         <td>{{_i}}Stacked, left-aligned labels over controls{{/i}}</td>
       </tr>
-      <tr>
-        <th>{{_i}}Horizontal{{/i}}</th>
-        <td><code>.form-horizontal</code></td>
-        <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
-      </tr>
       <tr>
         <th>{{_i}}Inline{{/i}}</th>
         <td><code>.form-inline</code></td>
@@ -771,6 +766,11 @@
         <td><code>.form-search</code></td>
         <td>{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}</td>
       </tr>
+      <tr>
+        <th>{{_i}}Horizontal{{/i}}</th>
+        <td><code>.form-horizontal</code></td>
+        <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
+      </tr>
     </tbody>
   </table>
 
@@ -879,7 +879,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -972,7 +972,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -1096,7 +1096,7 @@
             </div>
           </div>
           <div class="form-actions">
-            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
             <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
@@ -1139,28 +1139,28 @@
         <td>{{_i}}Standard gray button with gradient{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn primary" href="#">{{_i}}Primary{{/i}}</a></td>
-        <td><code>.primary</code></td>
+        <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
+        <td><code>.btn-primary</code></td>
         <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn info" href="#">{{_i}}Info{{/i}}</a></td>
-        <td><code>.info</code></td>
+        <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
+        <td><code>.btn-info</code></td>
         <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn success" href="#">{{_i}}Success{{/i}}</a></td>
-        <td><code>.success</code></td>
+        <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
+        <td><code>.btn-success</code></td>
         <td>{{_i}}Indicates a successful or positive action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn warning" href="#">{{_i}}Warning{{/i}}</a></td>
-        <td><code>.warning</code></td>
+        <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
+        <td><code>.btn-warning</code></td>
         <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn danger" href="#">{{_i}}Danger{{/i}}</a></td>
-        <td><code>.danger</code></td>
+        <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
+        <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
       </tr>
     </tbody>
@@ -1185,24 +1185,24 @@
       <h3>{{_i}}Multiple sizes{{/i}}</h3>
       <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
       <p>
-        <a href="#" class="btn large primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn large">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
       </p>
       <p>
-        <a href="#" class="btn small primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn small">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
       </p>
     </div>
     <div class="span4">
       <h3>{{_i}}Disabled state{{/i}}</h3>
-      <p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>
-        <a href="#" class="btn large primary disabled">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn large disabled">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary btn-disabled">{{_i}}Primary action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-disabled">{{_i}}Action{{/i}}</a>
       </p>
       <p>
-        <button class="btn large primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
-        <button class="btn large" disabled>{{_i}}Action{{/i}}</button>
+        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
       </p>
     </div>
     <div class="span4">
@@ -1415,8 +1415,8 @@
           <a class="btn" href="#"><i class="icon align-justify"></i></a>
         </div>
         <div class="btn-group">
-          <a class="btn primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
-          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#"><i class="icon pencil"></i> {{_i}}Edit{{/i}}</a></li>
             <li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
@@ -1428,13 +1428,13 @@
       </div>
       <p>
         <a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
-        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
-        <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
+        <a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
+        <a class="btn btn-danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
       </p>
       <p>
-        <a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
-        <a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
-        <a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
+        <a class="btn btn-large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
+        <a class="btn btn-small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
+        <a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
       </p>
     </div>
     <div class="span4">