Bootstrap 5 按钮组
Bootstrap 2023-08-10 09:26:52小码哥的IT人生shichen
Bootstrap 5 按钮组
按钮组
Bootstrap 5 允许您在按钮组中将一系列按钮组合在一起（在一行上）：
请使用带有 .btn-group 类的 <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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>按钮组</h2>
<p>.btn-group 类创建按钮组：</p>
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：请不要将按钮大小应用于组中的每个按钮，而是将类 .btn-group-lg 用于大按钮组或将 .btn-group-sm 用于小按钮组：
示例代码：
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>按钮组大小</h2>
<p>添加类 .btn-group-*，可调整按钮组中所有按钮的大小。</p>
<h3>大型按钮：</h3>
<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>
<hr>
<h3>默认按钮：</h3>
<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>
<hr>
<h3>小型按钮：</h3>
<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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
垂直按钮组
Bootstrap 5 还支持垂直按钮组：
请使用类 .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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>垂直按钮组</h2>
<p>使用 .btn-group-vertical 类，可创建垂直按钮组：</p>
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
并排按钮组
默认情况下，按钮组是 "inline" 的，存在多个按钮组时会并排显示：
示例代码：
<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">
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>按钮组</h2>
<p>默认情况下，按钮组是“行内”的，这使它们在存在多个组时并排显示：</p>
<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">
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
嵌套按钮组和下拉菜单
嵌套按钮组，可创建下拉菜单（您将在后面的章节中学习有关下拉菜单的更多内容）：
示例代码：
<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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>嵌套按钮组</h2>
<p>嵌套按钮组可创建下拉菜单：</p>
<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-bs-toggle="dropdown">小米</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">手机</a></li>
<li><a class="dropdown-item" href="#">平板电脑</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
