在前端开发中，按钮是一个非常重要的元素。Bootstrap 是一款流行的 CSS 框架，它提供了许多有用的组件，包括按钮组。在本文中，我们将学习如何使用 Bootstrap 来创建漂亮的按钮组。
步骤
首先，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文件中，添加以下代码：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-LRvi6KjFz+Ql6UvDCeX9qK3qZ8WfPc20J30/CSDyHnFqUVmMN+mNMbT7RkID9Iub" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-8t/1h7VdSXQ2+zIqlIdzPjIEAwMv44rD9r/XfV7OuMDGp1V7HgGCBwYqHSyTwnXd" crossorigin="anonymous"></script>
创建一个按钮组。在 HTML 中，添加下面的代码：
<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
运行代码，你应该看到一个带有三个按钮的按钮组。按钮组是由一个
div元素和多个按钮元素组成的。在这个例子中，我们使用了一个btn-group类来定义按钮组。您可以使用不同的颜色和样式来定制您的按钮组。Bootstrap 提供了许多不同的按钮样式，例如
btn-primary,btn-secondary,btn-success, 等等。-- -------------------- ---- ------- ---- ------------------ ------- ------------- ---------- ----------------------------- ------- ------------- ---------- --------------------------------- ------- ------------- ---------- ----------------------------- ------- ------------- ---------- --------------------------- ------- ------------- ---------- ----------------------------- ------- ------------- ---------- ----------------------- ------- ------------- ---------- ----------------------- ------- ------------- ---------- ------------------------- ------
如果您想要更多的自定义选项，您可以使用 Bootstrap 的按钮工厂来创建自定义按钮。以下是一个示例：
<div class="btn-group" role="group" aria-label="Button factory example"> <button type="button" class="btn btn-outline-primary">Outline primary</button> <button type="button" class="btn btn-outline-secondary">Outline secondary</button> <button type="button" class="btn btn-outline-success">Outline success</button> </div>
总结
Bootstrap 提供了一个简单易用的按钮组组件，可以让开发者快速构建漂亮的按钮组。通过本文的学习，您应该能够理解如何创建和定制 Bootstrap 按钮组，并且可以在自己的项目中使用它们。如果您想要深入了解 Bootstrap 的其他组件和功能，请查看 Bootstrap 文档。
示例代码：https://codepen.io/chatgpt/pen/qBjVwzr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1563