Bootstrap Vue收藏本版 1 +发表新主题

[组件] 按钮组(Btn-group)

按钮组(Btn-group)

使用按钮组合,可以把一系列按钮编组在一行里,并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

基本示例

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

  1. <div class="btn-group" role="group" aria-label="Basic example">
  2. <button type="button" class="btn btn-secondary">Left</button>
  3. <button type="button" class="btn btn-secondary">Middle</button>
  4. <button type="button" class="btn btn-secondary">Right</button>
  5. </div>

使用正确的标签并引用合法的 role

为了辅助技术(如屏幕阅读器)正确传达一系列按钮的分组, role 需要定义适当的属性,对于按钮组,引用的样式应该是 role="group", 如果是工具栏则应是 role="toolbar"

此外,组和工具栏应该给予明确的标签,因为尽管存在正确的角色属性,大多数辅助设备并不能明确识别它们, 上面实例我们使用了 aria-label来定义,你也可以使用aria-labelledby 方法定义。

按钮工具栏

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

  1. <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  2. <div class="btn-group mr-2" role="group" aria-label="First group">
  3. <button type="button" class="btn btn-secondary">1</button>
  4. <button type="button" class="btn btn-secondary">2</button>
  5. <button type="button" class="btn btn-secondary">3</button>
  6. <button type="button" class="btn btn-secondary">4</button>
  7. </div>
  8. <div class="btn-group mr-2" role="group" aria-label="Second group">
  9. <button type="button" class="btn btn-secondary">5</button>
  10. <button type="button" class="btn btn-secondary">6</button>
  11. <button type="button" class="btn btn-secondary">7</button>
  12. </div>
  13. <div class="btn-group" role="group" aria-label="Third group">
  14. <button type="button" class="btn btn-secondary">8</button>
  15. </div>
  16. </div>

可以在工具栏中将输入组与按钮组混合使用。与上面的示例类似,您可能需要一些实用程序来正确地分配空间

  1. <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  2. <div class="btn-group mr-2" role="group" aria-label="First group">
  3. <button type="button" class="btn btn-secondary">1</button>
  4. <button type="button" class="btn btn-secondary">2</button>
  5. <button type="button" class="btn btn-secondary">3</button>
  6. <button type="button" class="btn btn-secondary">4</button>
  7. </div>
  8. <div class="input-group">
  9. <div class="input-group-prepend">
  10. <div class="input-group-text" id="btnGroupAddon">@</div>
  11. </div>
  12. <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  13. </div>
  14. </div>
  15. <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  16. <div class="btn-group" role="group" aria-label="First group">
  17. <button type="button" class="btn btn-secondary">1</button>
  18. <button type="button" class="btn btn-secondary">2</button>
  19. <button type="button" class="btn btn-secondary">3</button>
  20. <button type="button" class="btn btn-secondary">4</button>
  21. </div>
  22. <div class="input-group">
  23. <div class="input-group-prepend">
  24. <div class="input-group-text" id="btnGroupAddon2">@</div>
  25. </div>
  26. <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  27. </div>
  28. </div>

大小规格和尺寸缩放

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



  1. <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  2. <button type="button" class="btn btn-secondary">Left</button>
  3. <button type="button" class="btn btn-secondary">Middle</button>
  4. <button type="button" class="btn btn-secondary">Right</button>
  5. </div>
  6. <br />
  7. <div class="btn-group" role="group" aria-label="Default button group">
  8. <button type="button" class="btn btn-secondary">Left</button>
  9. <button type="button" class="btn btn-secondary">Middle</button>
  10. <button type="button" class="btn btn-secondary">Right</button>
  11. </div>
  12. <br />
  13. <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  14. <button type="button" class="btn btn-secondary">Left</button>
  15. <button type="button" class="btn btn-secondary">Middle</button>
  16. <button type="button" class="btn btn-secondary">Right</button>
  17. </div>

嵌套

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

  1. <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  2. <button type="button" class="btn btn-secondary">1</button>
  3. <button type="button" class="btn btn-secondary">2</button>
  4. <div class="btn-group" role="group">
  5. <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  6. Dropdown
  7. </button>
  8. <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
  9. <a class="dropdown-item" href="#">Dropdown link</a>
  10. <a class="dropdown-item" href="#">Dropdown link</a>
  11. </div>
  12. </div>
  13. </div>

垂直排列

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

  1. <div class="btn-group-vertical">
  2. ...
  3. </div>
扫描二维码,手机查看
声明:本文来源于互联网,观点仅代表作者本人,不代表欢乐你我,真实性请妥善甄别。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则