diff options
author | Mark Otto <markotto@twitter.com> | 2012-06-20 01:42:46 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-06-20 01:42:46 +0400 |
commit | b54264cde0b1e72fbb463e4aa272ed1c2876bd02 (patch) | |
tree | 868d23d81c6cf39a002d196be438927f4450e14e /docs | |
parent | 64ba423b6d06c98e95e23d8c34df62a47a421a03 (diff) |
add basic vertical button group support
Diffstat (limited to 'docs')
-rw-r--r-- | docs/assets/css/bootstrap.css | 42 | ||||
-rw-r--r-- | docs/components.html | 24 | ||||
-rw-r--r-- | docs/templates/pages/components.mustache | 24 |
3 files changed, 90 insertions, 0 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3389eb4031..d957e861a3 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 ce931783f4..3b3f5a7830 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 1c33073a8e..f3d92dda6b 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> |