Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
This document uses PHP Chinese website manual Release

characters

使用按钮组将一系列按钮分组在一行上，并通过 JavaScript 超级供电。

基本示例

在.btn-group中用.btn包裹一系列按钮。使用我们的按钮插件添加可选的 JavaScript 广播和复选框样式行为。

<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>

确保正确role并提供标签

为了帮助技术（如屏幕阅读器）传达一系列按钮被分组，需要提供适当的role属性。对于按钮组，这将是role="group"，而工具栏应该有一个role="toolbar"。

另外，应该给组和工具栏一个明确的标签，因为尽管存在正确的角色属性，大多数辅助技术将不会公布它们。在这里提供的例子中，我们使用了aria-label，但也可以使用例如aria-labelledby的其他替代方法。

按钮工具栏

将多组按钮组组合到按钮工具栏中，以获取更复杂的组件。根据需要使用实用程序类来划分组，按钮等。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">  <div class="btn-group mr-2" 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 mr-2" 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>

随意将输入组与工具栏中的按钮组混合。与上面的示例类似，尽管您可能需要一些实用程序才能正确地分配内容。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">  <div class="btn-group mr-2" 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="input-group">    <span class="input-group-addon" id="btnGroupAddon">@</span>    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">  </div></div><div class="btn-toolbar justify-content-between" 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="input-group">    <span class="input-group-addon" id="btnGroupAddon2">@</span>    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">  </div></div>

大小

除了将按钮大小分类应用于组中的每个按钮，只需将其添加.btn-group-*到每个.btn-group按钮，包括嵌套多个组时的每个按钮。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div><div class="btn-group" role="group" aria-label="...">...</div><div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

嵌套

当你想要下拉菜单与一系列按钮混合在一起时，放置.btn-group在另一个.btn-group之内。

<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>

垂直变化

使一组按钮垂直堆叠而不是水平放置。此处不支持分组按钮下拉列表。

<div class="btn-group-vertical">  ...</div>
Previous article： Next article：