rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

revamp button group with flexbox

Browse Source
This commit is contained in:
Mark Otto 2016-12-21 23:29:16 -08:00 committed by Mark Otto
parent 2cb2979908
commit fd75c41279
2 changed files with 33 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/components/button-group.md
View File

@ -26,17 +26,17 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
## Button toolbar ## Button toolbar
Combine sets of button groups into button toolbars for more complex components. Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
{% example html %} {% example html %}
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group"> <div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">4</button>
</div> </div>
<div class="btn-group" role="group" aria-label="Second group"> <div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button> <button type="button" class="btn btn-secondary">7</button>
@ -102,6 +102,18 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
<div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
</div>
</div>
<div class="bd-example"> <div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button>

56
scss/_button-group.scss
View File

@ -4,28 +4,27 @@
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
display: inline-block; display: flex;
// display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above vertical-align: middle; // match .btn alignment given font-size hack above
> .btn { > .btn {
position: relative; position: relative;
float: left; flex: 0 1 auto;
margin-bottom: 0;
// Bring the "active" button to the front // Bring the hover, focused, and "active" buttons to the fron to overlay
// the borders properly
@include hover {
z-index: 2;
}
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
z-index: 2; z-index: 2;
} }
@include hover {
z-index: 2;
} }
}
}
// Prevent double borders when buttons are next to each other // Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn, .btn + .btn,
.btn + .btn-group, .btn + .btn-group,
.btn-group + .btn, .btn-group + .btn,
@ -36,19 +35,8 @@
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
margin-left: -$btn-toolbar-margin; // Offset the first child's margin display: flex;
@include clearfix(); justify-content: flex-start;
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: $btn-toolbar-margin;
}
} }
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
@ -158,22 +146,14 @@
// //
.btn-group-vertical { .btn-group-vertical {
> .btn, display: flex;
> .btn-group, flex-direction: column;
> .btn-group > .btn { justify-content: center;
display: block; align-items: flex-start;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed .btn,
> .btn-group { .btn-group {
@include clearfix(); flex: 0 1 auto;
> .btn {
float: none;
}
} }
> .btn + .btn, > .btn + .btn,