When you .btn-group
apply a ToolTip or popover to an element in, you must specify an container: ‘body‘
option that avoids unnecessary side effects (such as when a ToolTip or popover triggers, which causes the page element to widen/or lose rounded corners)?
for a button combination, it should be role="group"
, for toolbar (toolbars) should be role="toolbar"
.
button groups and toolbars should be given an explicit label label, although the correct properties are set and role
we use aria-label
, however, aria-labelledby
can also be used.
<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>
Vertical words are
class="btn-group-vertical"
<div class= "Btn-toolbar" role= "Toolbar" aria-label= "Toolbar with button groups" > <div class= "Btn-group" role= "group" aria-label= "first Group" > <button type= "button" class= "Btn Btn-default" >1</button> <button type= "button" class= "btn btn-default" >2</button> <button type= "button" class= "btn Btn-default ">3</button> <button type=" button "class=" btn Btn-default ">4</button> </div> </div>
can also be added size
Just .btn-group
add.btn-group-lg,sm,xs等即可。
You want to mix the drop-down menu into a series of buttons, just put .btn-group
in a large .btn-group
, nested.
About
<a>
Elements
Just .btn
wrap a series .btn-group.btn-group-justified
of elements in the box.
<div class= "Btn-group btn-group-justified" role= "group" aria-label= "Justified button Group" > <a href= "#" class= "btn btn-default" role= "button" >Left</a> <a href= "#" class= "btn btn-default" role= "button" > middle</a> <a href= "#" class= "btn btn-default" role= "button" >Right</a> </div>
About
<button>
Elements
In order for elements to be <button>
used in a group of aligned buttons, each button must be wrapped into a group of buttons.
<div class= "Btn-group btn-group-justified" role= "group" aria-label= "..." ><div class= "Btn-group" role= "group "><button type=" button "class=" btn btn-default ">left</button></div><div class=" Btn-group " role= "group" ><button type= "button" class= "Btn Btn-default" >middle</button></div><div class = "Btn-group" role= "group" ><button type= "button" class= "Btn Btn-default" >Right</button></div> </div>
Looks a more convenient?
Bootstrap about button Groups