add button sizes to docs for button dropdowns, clean up styles for them

1 files changed, 44 insertions, 0 deletions

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 354c4d54d..b52919995 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -213,6 +213,50 @@
 </pre>
     </div>
   </div>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Works with all button sizes{{/i}}</h3>
+      <p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+  </div><!--/row-->
   <div class="alert alert-info">
     <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
   </div>