add basic vertical button group support

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3389eb4031a45a86add1cf07a8f594cf27b5baf2..d957e861a3405545ca9687fac383f06172b2c7b7 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3171,6 +3171,48 @@ input[type="submit"].btn.btn-mini {
   filter: alpha(opacity=75);
 }
 
+.btn-group-vertical {
+  display: inline-block;
+}
+
+.btn-group-vertical .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  margin-left: 0;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-group-vertical .btn + .btn {
+  margin-top: -1px;
+}
+
+.btn-group-vertical .btn:first-child {
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.btn-group-vertical .btn:last-child {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.btn-group-vertical .btn-large:first-child {
+  -webkit-border-radius: 6px 6px 0 0;
+     -moz-border-radius: 6px 6px 0 0;
+          border-radius: 6px 6px 0 0;
+}
+
+.btn-group-vertical .btn-large:last-child {
+  -webkit-border-radius: 0 0 6px 6px;
+     -moz-border-radius: 0 0 6px 6px;
+          border-radius: 0 0 6px 6px;
+}
+
 .alert {
   padding: 8px 35px 8px 14px;
   margin-bottom: 18px;

diff --git a/docs/components.html b/docs/components.html
index ce931783f4f23f5ae1a3570ff3937bb8396a9701..3b3f5a7830e33b82da3eea873643fc8fff54acae 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -263,6 +263,30 @@
 </div>
 </pre>
 
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>Vertical button groups</h2>
+  <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
+  <div class="bs-docs-example">
+    <div class="btn-group btn-group-vertical">
+      <button type="button" class="btn"><i class="icon-align-left"></i></button>
+      <button type="button" class="btn"><i class="icon-align-center"></i></button>
+      <button type="button" class="btn"><i class="icon-align-right"></i></button>
+      <button type="button" class="btn"><i class="icon-align-justify"></i></button>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group btn-group-vertical"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
   <h3>Checkbox and radio flavors</h3>
   <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
 

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 1c33073a8ef3c5d4ad93f4df8bd19b9c0c3da7c9..f3d92dda6bfab5b4472eb03d38299c6c39855bc7 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -186,6 +186,30 @@
 </div>
 </pre>
 
+
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Vertical button groups{{/i}}</h2>
+  <p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
+  <div class="bs-docs-example">
+    <div class="btn-group btn-group-vertical">
+      <button type="button" class="btn"><i class="icon-align-left"></i></button>
+      <button type="button" class="btn"><i class="icon-align-center"></i></button>
+      <button type="button" class="btn"><i class="icon-align-right"></i></button>
+      <button type="button" class="btn"><i class="icon-align-justify"></i></button>
+    </div>
+  </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group btn-group-vertical"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator">
+
+
   <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
   <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
 

diff --git a/less/button-groups.less b/less/button-groups.less
index 5338c5a4502c347c4fe900a2a1535c28e21bb30e..e3c1de8adf885eca4f4276d34049215c95711118 100644 (file)
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -189,3 +189,33 @@
   }
 }
 
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+  display: inline-block; // makes buttons only take up the width they need
+}
+.btn-group-vertical .btn {
+  display: block;
+  float: none;
+  margin-left: 0;
+  width: 100%;
+  .border-radius(0);
+}
+.btn-group-vertical .btn + .btn {
+  margin-top: -1px;
+}
+.btn-group-vertical .btn:first-child {
+  .border-radius(4px 4px 0 0);
+}
+.btn-group-vertical .btn:last-child {
+  .border-radius(0 0 4px 4px);
+}
+.btn-group-vertical .btn-large:first-child {
+  .border-radius(6px 6px 0 0);
+}
+.btn-group-vertical .btn-large:last-child {
+  .border-radius(0 0 6px 6px);
+}