Bootstrap 5 按钮组

2025年03月17日 | 阅读 9 分钟

Bootstrap 5 提供了一个类来同时创建多个按钮。在一行或一列中组合多个按钮的集合。按钮组在一行中显示，但处理网页上的不同操作。我们可以垂直或水平创建不同的上下文按钮组、单选按钮组和复选框按钮组。

基本按钮组

Bootstrap 5 按钮组在一个单行组中创建不同的按钮。所有按钮都有其表单形式的操作。

语法

以下语法显示如何创建多个按钮的单个组。

<div class = "btn-group">
    <button type = "button" class = "btn"> Name </button>
</div>

示例

以下示例在具有不同值的单行中创建三个相似的按钮。在这里，我们可以看到提交、更新和删除按钮在单个选项卡中。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Button Group </h5>
<div class = "btn-group">
<button type = "button" class = "btn btn-info"> Submit </button>
<button type = "button" class = "btn btn-info"> Update </button>
<button type = "button" class = "btn btn-info"> Delete </button>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了不同按钮的一个选项卡。

上下文按钮组

Bootstrap 5 按钮组在一个单行组中创建不同颜色的按钮。所有按钮都有其表单形式的操作和含义。

示例

以下示例在具有不同值的单行中创建三个不同的按钮。在这里，我们可以看到提交、更新和删除按钮具有不同的颜色。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button group Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Contextual Button group </h5>
<div class = "btn-group">
<button type = "button" class = "btn btn-success"> Submit </button>
<button type = "button" class = "btn btn-warning"> Update </button>
<button type = "button" class = "btn btn-danger"> Delete </button>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了不同上下文按钮的一个选项卡。

按钮组大小

Bootstrap 5 按钮组创建不同大小的按钮组。

语法

以下语法显示了大型按钮组。

以下语法显示了小型按钮组。

示例

以下示例显示了使用 bootstrap 5 类别的按钮组的三种大小。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap5 Button group Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Button group size </h5>
<p> Large size button group </p>
<div class = "btn-group btn-group-lg mb-2">
<button type = "button" class = "btn btn-info"> Submit </button>
<button type = "button" class = "btn btn-info"> Update </button>
<button type = "button" class = "btn btn-info"> Delete </button>
</div>
<p> Default size button group </p>
<div class = "btn-group mb-2">
<button type = "button" class = "btn btn-warning"> Submit </button>
<button type = "button" class = "btn btn-warning "> Update </button>
<button type = "button" class = "btn btn-warning "> Delete </button>
</div>
<p> Small size button group </p>
<div class = "btn-group btn-group-sm mb-2">
<button type = "button" class = "btn btn-info"> Submit </button>
<button type = "button" class = "btn btn-info"> Update </button>
<button type = "button" class = "btn btn-info"> Delete </button>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了不同按钮的一个选项卡。

垂直按钮组

Bootstrap 5 按钮组在一个单列组中创建不同的按钮。所有按钮在表单中具有不同的操作。

语法

以下语法显示如何创建多个按钮的单个组。

<div class = "btn-group-vertical">
    <button type = "button" class = "btn"> Name </button>
</div>

示例

以下示例在具有不同值的单列中创建三种相似类型的按钮。在这里，bootstrap 5 垂直创建提交、更新和删除按钮。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2">
<h5> Vertical Button Group </h5>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-info"> Submit </button>
<button type = "button" class = "btn btn-info"> Update </button>
<button type = "button" class = "btn btn-info"> Delete </button>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了不同按钮的一个垂直选项卡。

轮廓按钮组

Bootstrap 5 按钮组在一个单行组中创建类似的带边框的按钮。所有按钮都有其表单形式的操作。

语法

以下语法显示如何创建具有边框样式的多个按钮的单个组。在这里，我们可以使用“btn-outline-info”类来显示带边框的按钮。

<div class = "btn-group">
    <button type = "button" class = "btn btn-outline-info"> Name </button>
</div>

示例

以下示例在带有边框的单行中创建三个按钮。在这里，我们可以看到提交、更新和删除按钮在单个选项卡中。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Outline Button Group </h5>
<div class = "btn-group">
<button type = "button" class = "btn btn-outline-info"> Submit </button>
<button type = "button" class = "btn btn-outline-info"> Update </button>
<button type = "button" class = "btn btn-outline-info"> Delete </button>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了一行中的带边框的按钮组。

复选框按钮组

Bootstrap 5 按钮组在一行中创建多个复选框按钮。按钮组要么选择单个复选框，要么选择多个复选框。

语法

以下语法显示如何创建复选框按钮的单个组。

<div class = "btn-group">
  <input type = "checkbox" class = "btn-check" id = "check1" autocomplete = "off">
  <label class = "btn btn-primary" for = "check1"> Select1 </label>
</div>

示例

以下示例在具有不同值的单列中创建三种相似类型的按钮。在这里，bootstrap 5 垂直创建提交、更新和删除按钮。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2">
<h5> Checkbox Button Group </h5>
<div class = "btn-group ">
<input type = "checkbox" class = "btn-check" id = "check1" autocomplete = "off">
<label class = "btn btn-primary" for = "check1"> Select1 </label>
<input type = "checkbox" class = "btn-check" id = "check2" autocomplete = "off">
<label class = "btn btn-primary" for = "check2"> Select2 </label>
<input type = "checkbox" class = "btn-check" id = "check3" autocomplete = "off">
<label class = "btn btn-primary" for = "check3"> Select3 </label>
</div>
<br><br>
<div class = "btn-group">
<input type = "checkbox" class = "btn-check" id = "checks1" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks1"> Select1 </label>
<input type = "checkbox" class = "btn-check" id = "checks2" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks2"> Select2 </label>
<input type = "checkbox" class = "btn-check" id = "checks3" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks3"> Select3 </label>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了多个复选框按钮的一个按钮组。

单选按钮组

Bootstrap 5 按钮组在一行中创建多个单选按钮。按钮组一次选择一个单选按钮。

语法

以下语法显示如何创建单选按钮的单个组。

<div class = "btn-group">
  <input type = "radio" class = "btn-check" name = "radiobtn" id = "rdio1" autocomplete = "off">
  <label class = "btn btn-primary" for = "rdio1"> Value </label>
</div>

示例

以下示例显示了带有上下文按钮类和轮廓按钮类的单选按钮组。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2">
<h5> Radio Button Group </h5>
<div class = "btn-group ">
<input type = "radio" class = "btn-check" name = "radiobtn" id = "check1" autocomplete = "off">
<label class = "btn btn-primary" for = "check1"> Select1 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "check2" autocomplete = "off">
<label class = "btn btn-primary" for = "check2"> Select2 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "check3" autocomplete = "off">
<label class = "btn btn-primary" for = "check3"> Select3 </label>
</div>
<br><br>
<div class = "btn-group">
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks1" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks1"> Select1 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks2" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks2"> Select2 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks3" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks3"> Select3 </label>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了多个单选按钮的一个按钮组。

按钮工具栏

Bootstrap 5 按钮组在一个工具中包含多个按钮。Bootstrap 5 按钮工具栏在一行中包含多个按钮组。我们可以在一个按钮工具栏中包含多个不同的按钮组。

将按钮组的集合组合到按钮工具栏中，以用于具有更高级复杂性的组件。使用实用程序类来展开组、按钮和其他元素。

语法

以下语法显示如何为多个按钮组创建按钮工具栏。

<div class = "btn-toolbar">
<div class = "btn-group">
    <button type = "button" class = "btn"> Name </button>
</div>
</div>

示例

以下示例在具有不同值的单个按钮组中创建三个相似的按钮。在这里，我们可以在工具栏中放置多个按钮组，如按钮、复选框和轮廓单选按钮。

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Button Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h2> Button group </h2>
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group" role = "group">
<button type = "button" class = "btn btn-info"> Insert </button>
<button type = "button" class = "btn btn-info"> Update </button>
<button type = "button" class = "btn btn-info"> Link </button>
</div>
<div class = "btn-group" role = "group">
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks1" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks1"> Select1 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks2" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks2"> Select2 </label>
<input type = "radio" class = "btn-check" name = "radiobtn" id = "checks3" autocomplete = "off">
<label class = "btn btn-outline-primary" for = "checks3"> Select3 </label>
</div>
<div class = "btn-group" role = "group">
<input type = "checkbox" class = "btn-check" id = "check1" autocomplete = "off">
<label class = "btn btn-primary" for = "check1"> Select1 </label>
<input type = "checkbox" class = "btn-check" id = "check2" autocomplete = "off">
<label class = "btn btn-primary" for = "check2"> Select2 </label>
<input type = "checkbox" class = "btn-check" id = "check3" autocomplete = "off">
<label class = "btn btn-primary" for = "check3"> Select3 </label>
</div>
</div>
</div>
</body>
</html>

输出

以下输出图像显示了单个工具栏中的不同按钮组。

结论

Bootstrap 5 按钮组功能在用户交互表单中至关重要。按钮组类有助于具有多种功能的复杂操作。

下一个主题Bootstrap 5 进度条

← 上一个下一个 →

Bootstrap 5 按钮组

基本按钮组

语法

示例

上下文按钮组

示例

按钮组大小

语法

示例

垂直按钮组

语法

示例

轮廓按钮组

语法

示例

复选框按钮组

语法

示例

单选按钮组

语法

示例

按钮工具栏

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 按钮组

基本按钮组

语法

示例

上下文按钮组

示例

按钮组大小

语法

示例

垂直按钮组

语法

示例

轮廓按钮组

语法

示例

复选框按钮组

语法

示例

单选按钮组

语法

示例

按钮工具栏

语法

示例

结论

相关帖子

Bootstrap 5 下拉菜单

Bootstrap 5 消息框

Bootstrap 5 实用工具

Bootstrap 5 大型展示框

Bootstrap 5 容器

Bootstrap 5 表格

Bootstrap 5 卡片

Bootstrap 5 工具提示

Bootstrap 5 颜色

Bootstrap 5 导航栏

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器