Bootstrap5 按钮

在这一章中，我们将详细探讨如何使用 Bootstrap 5 来创建和定制按钮。Bootstrap 的按钮组件提供了多种样式和尺寸选项，使得你可以轻松地将功能性和美观性结合起来。

按钮的基本用法

按钮是用户界面中最常用的元素之一，它们用于触发操作或导航到其他页面。Bootstrap 提供了预定义的类来快速应用常见的按钮样式。

创建一个基本按钮

要创建一个基本的按钮，只需在 <button> 元素上添加 btn 类：

<button type="button" class="btn">默认按钮</button>

不同的按钮类型

Bootstrap 提供了不同样式的按钮类，包括主要按钮、次级按钮、成功按钮、信息按钮等。这些样式可以通过不同的类名实现：

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次级按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-light">浅色按钮</button>
<button type="button" class="btn btn-dark">深色按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

自定义按钮颜色

如果你想要自定义按钮的颜色，可以使用 text-* 和 bg-* 类来改变文本颜色和背景颜色：

<button type="button" class="btn text-white bg-primary">自定义颜色</button>

按钮尺寸

Bootstrap 提供了几种不同的按钮尺寸，使你的设计更具灵活性。这些尺寸通过添加特定的类来实现。

小型按钮

要创建一个小尺寸的按钮，可以使用 btn-sm 类：

<button type="button" class="btn btn-primary btn-sm">小型按钮</button>

大型按钮

要创建一个大尺寸的按钮，可以使用 btn-lg 类：

<button type="button" class="btn btn-primary btn-lg">大型按钮</button>

块级按钮

如果你希望按钮占据其父容器的全部宽度，可以使用 btn-block 类：

<button type="button" class="btn btn-primary btn-block">块级按钮</button>

按钮状态

Bootstrap 提供了一些类来表示按钮的不同状态，例如激活状态、禁用状态和悬停效果。

激活状态

要显示一个激活的按钮，可以使用 active 类：

<button type="button" class="btn btn-primary active">激活按钮</button>

禁用状态

要创建一个禁用的按钮，可以使用 disabled 属性：

<button type="button" class="btn btn-primary" disabled>禁用按钮</button>

悬停效果

虽然悬停效果是默认启用的，但你可以通过自定义 CSS 来增强这些效果：

<style>
.btn-primary:hover {
    background-color: #0069d9;
}
</style>

<button type="button" class="btn btn-primary">悬停效果</button>

按钮组

Bootstrap 还支持创建按钮组，这是一种将多个按钮组合在一起的便捷方式。按钮组可以水平或垂直排列。

水平按钮组

要创建一个水平排列的按钮组，可以使用 .btn-group 类，并将其包裹在一个带有 .btn-toolbar 类的容器中：

<div class="btn-toolbar">
    <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>

垂直按钮组

要创建一个垂直排列的按钮组，可以使用 .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>

结尾

本章介绍了如何使用 Bootstrap 5 创建和定制按钮。从基础按钮到按钮组，Bootstrap 提供了丰富的工具来帮助你快速构建美观且功能强大的用户界面。在下一章中，我们将探讨表单组件，包括输入框、选择框等。