mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
remove justified button groups
This commit is contained in:
parent
fd3b376e0d
commit
454cc55e31
@ -13,7 +13,6 @@ Group a series of buttons together on a single line with the button group. Add o
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
||||
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
@ -164,68 +163,3 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Justified button groups
|
||||
|
||||
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Handling borders</h4>
|
||||
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
|
||||
</div>
|
||||
|
||||
#### With `<a>` elements
|
||||
|
||||
Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<a class="btn btn-secondary" href="#" role="button">Left</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Middle</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Right</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
|
||||
<a class="btn btn-secondary" href="#" role="button">Left</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Middle</a>
|
||||
<div class="btn-group" role="group">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown"role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
#### With `<button>` elements
|
||||
|
||||
To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can work around that.
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -201,32 +201,6 @@
|
||||
}
|
||||
|
||||
|
||||
// Justified button groups
|
||||
// ----------------------
|
||||
|
||||
.btn-group-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
> .btn-group .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn-group .dropdown-menu {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
|
Loading…
x
Reference in New Issue
Block a user