4.2、Bootstrap V4自学之路------组件---按钮组
1、基本示例
用.btn-group把一系列带有.btn的按钮包裹起来。
<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
PS：在button的外层加入类 .btn_group 包裹。
2、按钮工具栏
将一系列按钮组组合成工具栏以实现更复杂的组件。
<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-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="btn-group" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">8</button> </div> </div>
在多个 .btn-group 外层加入一个 .btn-toolbar类。（按钮工具栏）
3、尺寸
这里就显示出 .btn-groud 类的样子实用性了。
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
4、嵌套
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>
这里要注意说明的地方有：
1、按钮层一个.btn-group，在其中包含一个 .btn-group用来包含下拉按钮。
2、下拉按钮的属性中，需要加入data-toggle="dropdown"开启切换。
需要再加入 .dropdown-toggle 类。
3、下拉按钮的子层中，需要加入属性 aria-labelledby="同层按钮的ID"，作为指向。（作废，不传ID可以）
4、每层的简写。 注意，ID的对应要写对！
<div class=btn-group>
--> <button>1</button>
--> <button>2</button>
--> <div class="btn-group">
--> --> <button id="XXOO"></button>
--> --> <div class=dropdown-menu aria-labelleddby="XXOO">
--> --> <a class=dropdown-item>
--> --> <a class=dropdown-item>
5、垂直变动
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>
偷个懒，已上例为例。外层类 .btn-group 更换为 .btn-group-vertical。则竖向显示了。
vertical 英文翻译是：垂直、竖向。
6、提示冒泡和提示框
由于某些特殊的实际用途（和一些组件），需要在按钮组中出现提示冒泡或者提示框。**你必须指定选项 container: 'body'以避免不想要的副作用（如元素越来越大或者在提示冒泡和提示框触发时失去其圆角）。