Detailed introduction to Bootstrap button group

The use of a single button in a Web page sometimes does not meet our business needs. We often see multiple buttons used together, such as a set of small icon buttons in a rich text editor. This article will introduce in detail the Bootstrap button group

How to use

The button group, like the drop-down menu component, needs to rely on the button.js plug-in to run properly. However, we can also directly call only the bootstrap.js file. Because this file has integrated button.js plug-in function

Similarly, because Bootstrap’s component interaction effects all rely on plug-ins written by the jQuery library, jquery.js must be loaded before using bootstrap.js Only then will the effect be produced

Basic usage

The button group structure is very simple. Use a container named "btn-group" and put multiple buttons into this container

In order to convey the correct grouping of buttons to screen reader users, you need to provide an appropriateroleAttributes. For button groups, it should berole="group", for toolbar (toolbar) it should berole="toolbar"

In addition, button groups and toolbars An explicit label should be given, as most assistive technologies will not read them correctly despite setting the correctroleattributes. You can usearia-labelor aria-labelledby

In addition to the element, you can also use other label elements, such as thelabel. The only thing to ensure is that no matter what tag is used, the tag element in the ".btn-group" container needs to have the class name ".btn"