网页
综合
更新时间 2026-11-14 01:34:12
Button group · Bootstrap v6.0
自动蜘蛛
getbootstrap.com
正文约 1912 字
Group a series of buttons together on a single line or stack them in a vertical column.
Wrap a series of buttons in .btn-group.
Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars. Then use aria-label or aria-labelledby to label them.
These classes can also be added to groups of links, as an alternative to the .nav navigation components.
Add a divider between buttons by adding the .btn-group-divider class to the .btn-group. Most useful when used with buttons that have the same theme color and a solid fill.
Works with vertical button groups, too.
Ue the .theme-{color} classes to apply a theme color to a set of buttons.
You can mix and match button variants in a button group.
All button styles are supported in button groups. Mix and match with the .btn-group-divider class to add dividers between some styles or just use the button borders in others.
Checkbox toggle buttons can be grouped together. Any or all of the buttons can be checked.
By design, radio toggle button groups can only have one button checked at a time.
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
Place a .btn-group within another .btn-group when you want menus mixed with a series of buttons.
Make a set of buttons appear vertically stacked rather than horizontally. Split button menus are not supported here.
本页为82搜索生成的网页快照,内容来自站内索引;演示数据的原文链接仅作示例。