- 引导布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 排水沟
- Bootstrap - 实用程序
- Bootstrap - Z 索引
- Bootstrap - CSS 网格
- 引导组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑导航
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 轮播
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - Offcanvas
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 弹出窗口
- Bootstrap - 进展
- Bootstrap-Scrollspy
- Bootstrap - 旋转器
- Bootstrap - 吐司
- Bootstrap - 工具提示
- 引导表单
- Bootstrap - 表单
- Bootstrap - 表单控制
- 引导程序 - 选择
- Bootstrap - 支票和收音机
- Bootstrap - 范围
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- 引导程序 - 验证
- 引导助手
- Bootstrap-Clearfix
- Bootstrap - 颜色和背景
- Bootstrap - 彩色链接
- Bootstrap - 聚焦环
- Bootstrap - 图标链接
- Bootstrap - 位置
- Bootstrap - 比率
- Bootstrap - 堆栈
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直规则
- Bootstrap - 视觉隐藏
- 引导实用程序
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap-Flex
- Bootstrap - 浮动
- Bootstrap - 交互
- 引导程序 - 链接
- Bootstrap - 对象拟合
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 位置
- Bootstrap - 阴影
- Bootstrap - 尺寸调整
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- 引导演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 轮播演示
- Bootstrap - 标头演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - Jumbotrons 演示
- Bootstrap-粘性页脚演示
- Bootstrap-相册演示
- Bootstrap-登录演示
- Bootstrap 定价演示
- Bootstrap-Checkout 演示
- Bootstrap-产品演示
- Bootstrap-封面演示
- Bootstrap-仪表板演示
- Bootstrap-粘性页脚导航栏演示
- Bootstrap-Masonry 演示
- Bootstrap-Starter 模板演示
- Bootstrap-Album RTL 演示
- Bootstrap-Checkout RTL 演示
- Bootstrap-Carousel RTL 演示
- Bootstrap-博客 RTL 演示
- Bootstrap-仪表板 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用的资源
- Bootstrap - 讨论
Bootstrap - 按钮组
本章将讨论 Bootstrap 按钮组。Bootstrap 按钮组将多个按钮水平或垂直地放在一行上。
基本示例
您可以使用.btn-group类中的.btn创建一组按钮。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label="Basic Example"> <button type="button" class="btn btn-info">Register</button> <button type="button" class="btn btn-danger">Submit</button> <button type="button" class="btn btn-warning">Cancel</button> </div> </body> </html>
为了确保屏幕阅读器等辅助技术的可访问性,使用适当的角色属性并为按钮组提供明确的标签非常重要。您可以使用role="group"作为按钮组,或使用 role="toolbar"作为按钮工具栏。要标记它们,您可以使用aria-label或aria-labelledby。
作为.nav 导航组件的替代方案,这些类也可以应用于链接组。
您可以使用.active类突出显示链接。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2"> <a href="#" class="btn btn-success active" aria-current="page">Registration Link</a> <a href="#" class="btn btn-success">Submit</a> <a href="#" class="btn btn-success">Cancel</a> </div> </body> </html>
混合风格
在按钮组混合样式的情况下,可以形成其中每个按钮具有不同背景颜色的按钮组。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group mt-2" role="group" aria-label="Mixed styles"> <button type="button" class="btn btn-info">Register</button> <button type="button" class="btn btn-success">Cancel</button> <button type="button" class="btn btn-warning">Submit</button> </div> </body> </html>
轮廓样式
使用btn-outline-primary、btn-outline-dark等按钮样式仅显示组中按钮元素边框的颜色。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2" role="group" aria-label="Basic outlined"> <button type="button" class="btn btn-outline-primary">Register</button> <button type="button" class="btn btn-outline-dark">Submit</button> <button type="button" class="btn btn-outline-warning">Cancel</button> </div> </body> </html>
复选框和单选按钮组
使用类似复选框切换按钮的按钮,我们可以创建看起来无缝的按钮组。要实现此目的,请使用.btn-check类和type="checkbox"。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2" role="group" aria-label="checkbox toggle button group"> <input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off"> <label class="btn btn-outline-primary" for="btnCheckbox1">Register</label> <input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off"> <label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label> <input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off"> <label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label> </div> </body> </html>
使用类似单选按钮的按钮,我们可以创建一个看起来无缝的按钮组。要实现此目的,请使用.btn-check和type="radio"。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label="radio toggle button group"> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="buttonRadio1">Register</label> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off"> <label class="btn btn-outline-warning" for="buttonRadio2">Submit</label> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off"> <label class="btn btn-outline-success" for="buttonRadio3">Cancel</label> </div> </body> </html>
按钮工具栏
可以通过组合按钮组集来创建按钮工具栏。使用实用程序类在组、按钮等之间添加空格。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups"> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-secondary">Secondary</button> </div> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-dark">Dark</button> </div> <div class="btn-group" role="group" aria-label="toolbarButtonGroup3"> <button type="button" class="btn btn-warning">Warning</button> </div> </div> </body> </html>
组合工具栏中的输入组和按钮组。使用实用程序适当地间隔事物。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1"> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-secondary">secondary</button> </div> <div class="input-group"> <div class="input-group-text" id="inputbtnGroup1">@</div> <input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1"> </div> </div> <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4"> <div class="btn-group" role="group" aria-label="toolbarButtonGroup1"> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-success">Success</button> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2"> <div class="input-group-text" id="inputbtnGroup2">@example.com</div> </div> </div> </body> </html>
浆纱
嵌套多个组时,请在每个.btn-group上使用.btn-group-*,而不是为每个按钮使用按钮大小调整类。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h6 class="mt-4">Default size button group</h6> <div class="btn-group" role="group" aria-label="Default size button group"> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-warning">Warning</button> </div> <h6 class="mt-4">Small size button group</h6> <div class="btn-group btn-group-sm" role="group" aria-label="Small size button group"> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> </div> <h6 class="mt-4">Large size button group</h6> <div class="btn-group btn-group-lg" role="group" aria-label="Large size button group"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-info">Info</button> </div> </body> </html>
嵌套
要获得与按钮系列混合的下拉菜单,请在另一个.btn-group中使用.btn-group。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group mt-2" role="group" aria-label="Nested dropdown"> <button type="button" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-warning">Cancel</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Languages </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">English</a></li> <li><a class="dropdown-item" href="#">Hindi</a></li> </ul> </div> </div> </body> </html>
垂直变化
要创建垂直堆叠的按钮组,请使用.btn-group-vertical类。在这种情况下,Bootstrap 不支持拆分按钮下拉菜单。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> </div> </body> </html>
使用下拉菜单创建垂直按钮组。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Secondary</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Languages </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">English</a></li> <li><a class="dropdown-item" href="#">French</a></li> </ul> </div> <button type="button" class="btn btn-success">Success</button> </div> </div> </body> </html>
使用单选按钮创建垂直按钮组。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio"> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" > <label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked> <label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off"> <label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label> </div> </body> </html>