rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

add basic vertical button group support

Browse Source
This commit is contained in:
Mark Otto 2012-06-19 14:42:46 -07:00
parent 64ba423b6d
commit b54264cde0
4 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/assets/css/bootstrap.css vendored
View File

@ -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;

24
docs/components.html
View File

@ -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>

24
docs/templates/pages/components.mustache vendored
View File

@ -186,6 +186,30 @@
&lt;/div&gt;
</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>

30
less/button-groups.less
View File

@ -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);
}