diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3389eb4031a45a86add1cf07a8f594cf27b5baf2..d957e861a3405545ca9687fac383f06172b2c7b7 100644 --- 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 --- 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"> +<div class="btn-group btn-group-vertical"> + ... +</div> +</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 --- 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"> +<div class="btn-group btn-group-vertical"> + ... +</div> +</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 --- 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); +}