Bootstrap is an open source toolkit launched by Twitter for front-end development. It was developed by Twitter designer Mark Otto and Jacob Thornton and is a CSS/HTML framework.
Button group
.btn-group>.btn : A set of .btn buttons are wrapped in .btn-group
Outsourcing elements.btn-group {position/display/}
Button element.btn
<div role="group"><button type="button">left</button><button type="button">middle</button><button type="button">right</button></div>
Button Toolbar
.btn-toolbar>.btn-group
Outsourcing element.btn-toolbar {margin-left}
<div role="toolbar"><div role="group">...</div><div role="group">...</div><div role="group">...</div></div>
Button size
.btn-group-*(lg/md/sm/xs)
.btn-group-*>.btn {padding/font-size/border-radius}
<div><button>left</button><button>middle</button><button>right</button></div>
Button nesting
.btn-group nesting.btn-group
<div role="btn-group"><button>Button1</button><button>Button2</button><div role="btn-group"><button data-toggle="dropdown">Drag down<span></span></button><ul><li><a>Project 1</a></li><li><a>Project 2</a></li></ul></div></div>
Button group vertically arranged
.btn-group-vertical
<div role="btn-group">...</div>
Align both ends of the button group
It is manifested as filling the width of the parent element
Flaw: Because margin does not support display:table-cell; the effect of double borders will appear
Need button nesting.btn-group-justified {display/width/float}
<div role="group"><div role="group"><button>left</button></div><div role="group"><button>left</button></div><div role="group"><button data-toggle="dropdown">right <span></span></button><ul><li><a>item1</a></li><li><a>item2</a></li></ul></div></div>
Button-style drop-down menu
Outsourcing element class.btn-group {display/position}
Relying on drop-down menu plugin
Single button drop-down menu
<div role="group"><button data-toggle="dropdown">button <span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>
Split Button Pull-down Menu
<div><button>button</button><button data-toggle="dropdown"><span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>
Button drop-down menu size
Control size.btn-*:.btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}
<div><button data-toggle="dropdown">button <span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>
Popup menu up
Control pop-up direction.dropup: .dropup.drop-menu {bottom/margin-bottom}
<div><button data-toggle="dropdown">button <span></span></button><ul><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div>
The above is the relevant knowledge about the Bootstrap component (2) buttons introduced to you by the editor. I hope it will be helpful to you!