作者:
WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin
通过按钮组容器(.btn-group)把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
注意:
- 按钮组中的工具提示和弹出框需要特别的设置。当为
.btn-group
中的元素应用工具提示或弹出框时,必须指定container: 'body'
选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。 - 确保设置正确的
role
属性并提供一个 label 标签。为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的role
属性。对于按钮组合,应该是role="group"
,对于toolbar(工具栏)应该是role="toolbar"
。 - 此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的
role
属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用aria-label
,但是,aria-labelledby
也可以使用。
基本实例
在.btn组中用.btn包装一系列按钮。
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
按钮工具栏
我们常常会看到将多个按钮组合在一起使用,那么把一组<div class="btn-group">
组合进一个<div class="btn-toolbar">
中就可以做成按钮组。
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="