class触发后让另一个class加样式_Bootstrap的按钮组样式

将一系列的.btn包裹在.btn-group内，并使用我们提供的插件，可以实现选择按钮、选取块状区的行为功能。

<div class="row mt-5 d-block"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>

按钮工具栏

根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合组合成为更复杂组件的按钮工具栏。

<div class="row mt-5 btn-toolbar"><div class="btn-group mr-2"><button class="btn btn-success">1</button><button class="btn btn-success">2</button><button class="btn btn-success">3</button></div><div class="btn-group mr-2"><button class="btn btn-success">5</button><button class="btn btn-success">6</button><button class="btn btn-success">7</button></div><div class="btn-group"><button class="btn btn-success">9</button></div>
</div>

输入组与按钮组混合使用

<div class="row btn-toolbar mt-5"><div class="btn-group mr-2"><button class="btn btn-secondary">1</button><button class="btn btn-secondary">2</button><button class="btn btn-secondary">3</button><button class="btn btn-secondary">4</button></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" placeholder="Input group example"></div>
</div>

大小规格和尺寸缩放

定义大小缩放，不需要将按钮中每个子元素都逐一定义，只需在.btn-group-*中增加.btn-group-*，就能作用于组下的每个子按钮，实现样式缩放。

<div class="row mt-5"><div class="btn-group btn-group-lg"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
<div class="row mt-1"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>
<div class="row mt-1 "><div class="btn-group btn-group-sm"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div>
</div>

嵌套

将.btn-group放在另一个.btn-group里，可以实现按钮组与下拉菜单的组合。

<!-- 下拉菜单 -->
<div class="row mt-5"><div class="btn-group"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div>
</div>

垂直排列

将一组按钮垂直排列，而不是水平排列，不支持分割式下拉菜单的定义。

<div class="container"><!-- 垂直排列 --><div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-warning">北京</button><button class="btn btn-warning">上海</button><button class="btn btn-warning">广州</button></div></div>
</div>

<div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div>
</div>