adding button groups and toolbars like a boss

1 files changed, 80 insertions, 5 deletions

diff --git a/docs/index.html b/docs/index.html
index d24bb1afd..137144991 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -898,7 +898,7 @@
     <div class="span-one-third">
       <h3></h3>
     </div>
-  </div>
+  </div><!-- /row -->
   <div class="row">
     <div class="span4">
       <h2>Search form</h2>
@@ -911,7 +911,7 @@
         </form>
       </div><!--/well-->
     </div>
-  </div>
+  </div><!-- /row -->
   <div class="row">
     <div class="span4">
       <h2>Inline form</h2>
@@ -928,7 +928,7 @@
         </form>
       </div><!--/well-->
     </div>
-  </div>
+  </div><!-- /row -->
   <div class="row">
     <div class="span4">
       <h2>Horizontal form</h2>
@@ -1032,7 +1032,7 @@
         </fieldset>
       </form>
     </div>
-  </div>
+  </div><!-- /row -->
   <div class="row">
     <div class="span4">
       <h2>Vertical form</h2>
@@ -1075,7 +1075,82 @@
         </fieldset>
       </form>
     </div>
-  </div>
+  </div><!-- /row -->
+
+  <div class="row">
+    <div class="span4">
+      <h2>Buttons</h2>
+      <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
+      <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+    </div>
+    <div class="span12">
+      <h3>Example buttons</h3>
+      <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
+      <div class="well" style="padding: 14px 19px;">
+        <button class="btn primary">Primary</button>&nbsp;<button class="btn">Default</button>&nbsp;<button class="btn info">Info</button>&nbsp;<button class="btn success">Success</button>&nbsp;<button class="btn danger">Danger</button>
+      </div>
+      <h3>Alternate sizes</h3>
+      <p>Fancy larger or smaller buttons? Have at it!</p>
+      <div class="well">
+        <a href="#" class="btn large primary">Primary action</a>
+        <a href="#" class="btn large">Action</a>
+      </div>
+      <div class="well" style="padding: 16px 19px;">
+        <a href="#" class="btn small primary">Primary action</a>
+        <a href="#" class="btn small">Action</a>
+      </div>
+      <h3>Disabled state</h3>
+      <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
+      <h4>Links</h4>
+      <div class="well">
+        <a href="#" class="btn large primary disabled">Primary action</a>
+        <a href="#" class="btn large disabled">Action</a>
+      </div>
+      <h4>Buttons</h4>
+      <div class="well">
+        <button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
+      </div>
+    </div>
+  </div><!-- /row -->
+
+  <div class="row">
+    <div class="span4">
+      <h2>Button groups</h2>
+    </div>
+    <div class="span12">
+      <h3>Example</h3>
+      <div class="well">
+        <div class="btn-group">
+          <a class="btn" href="#">Left</a>
+          <a class="btn" href="#">Middle</a>
+          <a class="btn" href="#">Right</a>
+        </div>
+      </div>
+      <div class="well">
+        <div class="btn-toolbar">
+          <div class="btn-group">
+            <a class="btn" href="#">1</a>
+            <a class="btn" href="#">2</a>
+            <a class="btn" href="#">3</a>
+            <a class="btn" href="#">4</a>
+            <a class="btn" href="#">5</a>
+          </div>
+          <div class="btn-group">
+            <a class="btn" href="#">6</a>
+            <a class="btn" href="#">7</a>
+            <a class="btn" href="#">8</a>
+          </div>
+          <div class="btn-group">
+            <a class="btn" href="#">9</a>
+          </div>
+          <div class="btn-group">
+            <a class="btn" href="#">10</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!-- /row -->
+
 </section>