Bootstrap - 按钮

本章将讨论 Bootstrap 按钮。您可以将 Bootstrap 的自定义按钮样式用于表单、对话框等中的操作。支持多种尺寸、状态等。Bootstrap 包含设置基本样式（例如填充和内容对齐）的.btn类。

基本按钮

添加实现基本样式（例如填充和内容对齐）的.btn类。.btn类提供透明边框、背景颜色，并且没有明确的焦点和悬停样式。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
      <button type="button" class="btn btn-primary">Base Button </button>
</body>
</html>

变种

Bootstrap 包含不同样式的按钮，每个按钮都有自己的语义目的，并添加了一些额外的功能以进行进一步的控制。为了实现按钮样式，Bootstrap提供了以下类：

.btn
.btn-默认
.btn-primary
.btn-成功
.btn-信息
.btn-警告
.btn-危险
.btn-链接

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
</body>
</html>

禁用文本换行

要禁用按钮文本上的文本换行，请将.text-nowrap类添加到按钮。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary text-nowrap">this button's text has disabled text wrapping. Here we see the test in a single line</button><br><br><br>
    <button type="button" class="btn btn-primary">this button's text does not have text wrapping enabled. Here we see the text being wrapped to next line</button>
</body>
</html>

按钮标签

.btn类可用于<a>和<input>元素。

当您在用于触发页内功能的<a>元素上使用按钮类而不是链接到当前页面中的新页面或部分时，这些链接具有元素role="button"以适当地将其目的传达给辅助技术，例如屏幕阅读器。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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>
        <title>Bootstrap - Buttons</title>
    </head>
    <body>
        <a href="#"role="button"  class="btn btn-info">Download Link</a>
        <button type="button" class="btn btn-primary">Button</button>
        <input type="submit" class="btn btn-secondary" value="Submit">
        <input type="button" class="btn btn-danger" value="Login">
        <input type="reset" class="btn btn-light" value="Reset">
    </body>
    </html>

轮廓按钮

要获得没有浓重背景颜色的按钮，请使用.btn-outline-*类，它允许您从任何按钮中删除所有背景图像和颜色。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
 <body>
    <button type="button" class="btn btn-outline-primary">Primary Button</button>
    <button type="submit" class="btn btn-outline-secondary">Secondary Button</button>
    <button type="button" class="btn btn-outline-warning">Warning Button</button>
    <button type="button" class="btn btn-outline-success">Sucess Button</button>
    <button type="button" class="btn btn-outline-light">Light Button</button>
    <button type="button" class="btn btn-outline-danger">Danger Button</button>
    <button type="button" class="btn btn-outline-dark">Dark Button</button>
    <button type="button" class="btn btn-outline-info">Info Button</button>
    <button type="button" class="btn btn-outline-link">Link</button>
</button>
</body>
</html>

按钮尺寸

要获得更大或更小的按钮，请将类.btn-lg、.btn-sm添加到.btn中。您可以使用 CSS 变量创建自己的自定义尺寸按钮。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-info btn-sm">Small Button</button>
    <button type="button" class="btn btn-warning"
        style="--bs-btn-padding-y: .24rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .75rem;">
    Custom Button
</button>
</body>
</html>

禁用状态

Bootstrap 提供了.disabled类。此功能禁用单击事件的悬停和活动状态。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary disabled">Primary Disabled Button</button>
    <button type="button" class="btn btn-secondary" disabled>Secondary Disabled Button</button>
    <button type="button" class="btn btn-outline-primary" disabled>Outline Primary Disabled button</button>
    <button type="button" class="btn btn-outline-secondary" disabled>Outline Secondary Disabled Button</button>
</button>
</body>
</html>

使用<a>元素禁用按钮，其Behave略有不同：

元素<a>不支持disabled属性。您必须添加.disabled类以使其在视觉上看起来被禁用。
为了禁用锚点按钮上的所有指针事件，包含了一些面向未来的样式。
要使用<a>在禁用按钮中向辅助技术显示元素的状态，应包含aria-disabled="true"属性。
href 属性不应包含在使用<a> 的禁用按钮中。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary Disabled</a>
    <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Secondary Disabled</a>
    <a class="btn btn-outline-danger disabled" role="button" aria-disabled="true">Outline Primary Disabled Button</a>
    <a class="btn btn-outline-warning disabled" role="button" aria-disabled="true">Outline Secondary Disabled Button</a>
</button>
</body>
</html>

链接功能警告

当您必须保存禁用链接上的 href 属性时，.disabled类会利用 pointer-events: none来尝试禁用元素<a>的链接功能。
键盘用户和辅助技术用户始终能够激活这些链接。
您可以在这些链接上包含aria-disabled="true"和tabindex="-1"属性，以控制它们接收键盘焦点，并利用自定义 JavaScript 完全禁用它们的功能。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disables Primary Link</a>
    <a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a>
    </button>
</body>
</html>

块按钮

我们可以结合显示和间隙实用程序来创建全宽“块按钮”的响应式堆栈，就像 Bootstrap 4 中的按钮一样。
使用按钮特定的类而不是实用程序，我们可以对间距、对齐和响应Behave进行更有效的控制。

要调整块按钮的宽度，您可以使用网格列宽度类。要获得半角的块按钮，请使用.col-6类。.mx -auto类将按钮水平居中。

以下示例演示了使用类.col-6的基本块按钮和半角块。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
        <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>
        <title>Bootstrap - Buttons</title>
</head>
<body>
    <div class="d-grid gap-2 mt-1">
        <button class="btn btn-primary" type="button">Primary Block Button</button>
        <button class="btn btn-secondary" type="button">Secondary Block Button</button>
    </div>

    <div class="d-grid gap-2 col-6 mx-auto mt-4">
        <button class="btn btn-primary" type="button">Primary Button Using Grid Column Width Classes</button>
        <button class="btn btn-secondary" type="button">Secondary Button Using Grid Column Width Classes</button>
    </div>
</button>
</body>
</html>

按钮插件

按钮插件允许您制作简单的开关按钮。

切换状态

通过添加 class .data-bs-toggle="button" 来切换按钮的活动状态。.aria -pressed="true"类确保它与辅助技术进行适当的通信。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <button type="button" class="btn btn-primary" data-bs-toggle="button">Primary Toggle Button</button>
    <button type="button" class="btn btn-secondary active" data-bs-toggle="button" aria-pressed="true">Secondary Active Toggle Button</button>
    <button type="button" class="btn btn-info" disabled data-bs-toggle="button">Info Disabled Toggle Button</button>
</button>
</body>
</html>

您可以使用元素<a>创建切换状态链接。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <title>Bootstrap - Buttons</title>
</head>
<body>
    <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Primary Toggle link</a>
    <a href="#" class="btn btn-secondary active" role="button" data-bs-toggle="button" aria-pressed="true">SecondaryActive toggle link</a>
    <a class="btn btn-info disabled" aria-disabled="true" role="button" data-bs-toggle="button">Info Disabled togglelink</a>
    </button>
</body>
</html>