Bootstrap 4 按钮组 - 组织与布局指南

最后编辑于2025-04-14 13:50:38.6085956 +0800 CST

Bootstrap 4 按钮组

按钮组允许将多个按钮放置在同一行或垂直堆叠。这在创建工具栏、导航元素或相关操作集合时非常有用。

基础按钮组

使用 .btn-group 类创建水平按钮组：

<div class="btn-group">
  <button type="button" class="btn btn-primary">苹果</button>
  <button type="button" class="btn btn-primary">三星</button>
  <button type="button" class="btn btn-primary">索尼</button>
</div>

不同样式的按钮组

按钮组内的按钮可以使用任何Bootstrap按钮样式：

<div class="btn-group">
  <button type="button" class="btn btn-success">操作</button>
  <button type="button" class="btn btn-warning">设置</button>
  <button type="button" class="btn btn-danger">删除</button>
</div>

设计提示

在同一个按钮组中混合使用不同颜色的按钮可以帮助用户区分不同的操作类型。但请注意保持一致的设计语言，避免过于花哨的界面。

按钮组大小

可以通过添加 .btn-group-lg、.btn-group-sm 或 .btn-group-xs 类来调整整个按钮组的大小：

<!-- 大号按钮组 -->
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">苹果</button>
  <button type="button" class="btn btn-primary">三星</button>
  <button type="button" class="btn btn-primary">索尼</button>
</div>

<!– 默认大小按钮组 –>
<div class=“btn-group”>
<button type=“button” class=“btn btn-primary”>苹果</button>
<button type=“button” class=“btn btn-primary”>三星</button>
<button type=“button” class=“btn btn-primary”>索尼</button>
</div>


<!– 小号按钮组 –>
<div class=“btn-group btn-group-sm”>
<button type=“button” class=“btn btn-primary”>苹果</button>
<button type=“button” class=“btn btn-primary”>三星</button>
<button type=“button” class=“btn btn-primary”>索尼</button>
</div>



垂直按钮组

使用 .btn-group-vertical 类创建垂直排列的按钮组：

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">苹果</button>
  <button type="button" class="btn btn-primary">三星</button>
  <button type="button" class="btn btn-primary">索尼</button>
</div>

垂直按钮组样式变化

垂直按钮组也支持不同的样式和大小调整：

<div class="btn-group-vertical btn-group-lg">
  <button type="button" class="btn btn-outline-success">上传</button>
  <button type="button" class="btn btn-outline-info">下载</button>
  <button type="button" class="btn btn-outline-danger">删除</button>
</div>

内联与对齐

按钮组默认是内联元素（inline-block），可以通过额外的CSS调整其对齐方式：

<!-- 居中对齐的按钮组 -->
<div class="text-center">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">左</button>
    <button type="button" class="btn btn-primary">中</button>
    <button type="button" class="btn btn-primary">右</button>
  </div>
</div>

<!– 右对齐的按钮组 –>
<div class=“text-right”>
<div class=“btn-group”>
<button type=“button” class=“btn btn-primary”>左</button>
<button type=“button” class=“btn btn-primary”>中</button>
<button type=“button” class=“btn btn-primary”>右</button>
</div>
</div>

嵌套按钮组与下拉菜单

在按钮组中可以嵌套下拉菜单，创建更复杂的交互界面：

<div class="btn-group">
  <button type="button" class="btn btn-primary">苹果</button>
  <button type="button" class="btn btn-primary">三星</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      索尼
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">平板</a>
      <a class="dropdown-item" href="#">手机</a>
    </div>
  </div>
</div>
平板 手机

分离式下拉按钮

可以创建分离式下拉按钮，将按钮和下拉触发器分开：

<div class="btn-group">
  <button type="button" class="btn btn-primary">主要操作</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="sr-only">展开下拉菜单</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">操作 1</a>
    <a class="dropdown-item" href="#">操作 2</a>
    <a class="dropdown-item" href="#">操作 3</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">其他操作</a>
  </div>
</div>
操作 1 操作 2 操作 3
其他操作

垂直按钮组与下拉菜单

垂直按钮组同样支持下拉菜单：

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">按钮</button>
  <button type="button" class="btn btn-primary">按钮</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      下拉菜单
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">选项 1</a>
      <a class="dropdown-item" href="#">选项 2</a>
    </div>
  </div>
  <button type="button" class="btn btn-primary">按钮</button>
</div>
选项 1 选项 2

按钮工具栏

将多个按钮组组合在一起创建复杂的按钮工具栏：

<div class="btn-toolbar" role="toolbar" aria-label="工具栏示例">
  <div class="btn-group mr-2" role="group" aria-label="第一组">
    <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>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="第二组">
    <button type="button" class="btn btn-secondary">4</button>
    <button type="button" class="btn btn-secondary">5</button>
  </div>
  <div class="btn-group" role="group" aria-label="第三组">
    <button type="button" class="btn btn-secondary">6</button>
  </div>
</div>

复杂的工具栏示例

下面是一个更复杂的工具栏示例，类似于文本编辑器的格式化工具栏：

<div class="btn-toolbar mb-3" role="toolbar" aria-label="文本格式化工具栏">
  <div class="btn-group mr-2" role="group" aria-label="文字样式">
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-bold"></i></button>
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-italic"></i></button>
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-underline"></i></button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="对齐方式">
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-align-left"></i></button>
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-align-center"></i></button>
    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-align-right"></i></button>
  </div>
  <div class="btn-group" role="group" aria-label="更多选项">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      更多选项
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#"><i class="fa fa-link"></i> 插入链接</a>
      <a class="dropdown-item" href="#"><i class="fa fa-image"></i> 插入图片</a>
    </div>
  </div>
</div>

按钮组的响应式设计

在响应式设计中，可以根据屏幕大小调整按钮组的显示方式：

<!-- 桌面端水平，移动端垂直 -->
<div class="d-none d-md-block">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">首页</button>
    <button type="button" class="btn btn-primary">产品</button>
    <button type="button" class="btn btn-primary">服务</button>
  </div>
</div>

<div class=“d-block d-md-none”>
<div class=“btn-group-vertical btn-block”>
<button type=“button” class=“btn btn-primary”>首页</button>
<button type=“button” class=“btn btn-primary”>产品</button>
<button type=“button” class=“btn btn-primary”>服务</button>
</div>
</div>

实际应用场景

按钮组在实际项目中有许多应用场景。下面是几个典型例子：

分页控制 

<div class="btn-group">
  <button type="button" class="btn btn-outline-primary">«</button>
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-outline-primary">2</button>
  <button type="button" class="btn btn-outline-primary">3</button>
  <button type="button" class="btn btn-outline-primary">»</button>
</div>

筛选控制 

<div class="btn-group" role="group" aria-label="筛选选项">
  <button type="button" class="btn btn-secondary active">全部</button>
  <button type="button" class="btn btn-secondary">待付款</button>
  <button type="button" class="btn btn-secondary">已发货</button>
  <button type="button" class="btn btn-secondary">已完成</button>
</div>

表单操作按钮 

<form>
  <!-- 表单字段 -->
  <div class="form-group">
    <label for="exampleInput">示例输入</label>
    <input type="text" class="form-control" id="exampleInput">
  </div>

<!– 表单操作按钮组 –>
<div class=“btn-group”>
<button type=“submit” class=“btn btn-success”>提交</button>
<button type=“reset” class=“btn btn-secondary”>重置</button>
<button type=“button” class=“btn btn-outline-danger”>取消</button>
</div>
</form>


<!-- 表单操作按钮组 -->
<div class="btn-group">
  <button type="submit" class="btn btn-success">提交</button>
  <button type="reset" class="btn btn-secondary">重置</button>
  <button type="button" class="btn btn-outline-danger">取消</button>
</div>

可访问性考虑

为了增强按钮组的可访问性，应添加适当的ARIA角色和标签：

可访问性最佳实践

  • 为按钮组添加 role="group" 属性
  • 使用 aria-label 描述按钮组的功能
  • 确保每个按钮都有描述性的文本或屏幕阅读器可访问的标签
  • 对于仅包含图标的按钮，添加 aria-label 或 title 属性
<div class="btn-group" role="group" aria-label="文本格式化选项">
  <button type="button" class="btn btn-secondary" aria-label="粗体">
    <i class="fa fa-bold" aria-hidden="true"></i>
  </button>
  <button type="button" class="btn btn-secondary" aria-label="斜体">
    <i class="fa fa-italic" aria-hidden="true"></i>
  </button>
  <button type="button" class="btn btn-secondary" aria-label="下划线">
    <i class="fa fa-underline" aria-hidden="true"></i>
  </button>
</div>

总结与最佳实践

按钮组使用注意事项

  1. 保持一致性：在同一个按钮组中使用统一的按钮样式和大小
  2. 明确的视觉层次：通过颜色区分不同优先级的操作
  3. 合理分组：将相关的操作放在一个按钮组中
  4. 响应式考虑：在小屏幕上可能需要调整按钮组的布局
  5. 不要过度使用：一个页面上不要有太多按钮组，以免造成视觉混乱
  6. 添加适当间距：使用 mr-2 等工具类在不同按钮组之间添加间距

按钮组是Bootstrap中非常实用的组件，通过合理使用可以创建直观、易用的用户界面。无论是简单的操作集合还是复杂的工具栏，按钮组都能提供良好的解决方案。 </rewritten_file>

		Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。 可以在

元素上添加 .btn-group 类来创建按钮组。

实例

尝试一下 » 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

实例

尝试一下 »

垂直按钮组

可以使用 .btn-group-vertical 类来创建垂直的按钮组：

实例

尝试一下 »

内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单：

实例

Tablet Smartphone

尝试一下 »

拆分按钮下拉菜单

实例

Tablet Smartphone

尝试一下 »

垂直按钮组及下拉菜单

实例

Tablet Smartphone

尝试一下 »