Bootstrap 简明教程

Bootstrap - Buttons

本章将讨论 Bootstrap 按钮。你可以针对表单、对话框和更多操作使用 Bootstrap 的自定义按钮样式。这支持多种尺寸、状态等。Bootstrap 包括 .btn 类，它设置基本样式，例如填充和内容对齐方式。

Base button

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

Example

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

<!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>

Variants

Bootstrap 包括不同样式的按钮，每个按钮都有其语义目的，并提供一些附加功能，以便进一步控制。为了实现按钮样式，Bootstrap 提供以下类：

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Example

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

<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>

Disabled text wrapping

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

Example

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

<!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>

Button tags

可以在 <a> 和 <input> 元素上使用 .btn 类。

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

Example

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

    <!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>

Outline button

要获取没有厚重背景颜色的按钮，请使用 .btn-outline- * 类，该类允许你从任何按钮中移除所有背景图像和颜色。

Example

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

<!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>

Button sizes

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

Example

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

<!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>

Disabled state

Bootstrap 提供类 .disabled 。此功能会禁用点击事件的悬停和激活状态。

Example

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

<!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> 元素不支持 disabled 属性。你必须添加 .disabled 类才能使其看起来已被禁用。
为了禁用锚点按钮上的所有 pointer-events ，包含了一些面向未来的样式。
要使用 <a> 向辅助技术展示禁用按钮的元素状态，则应包含 aria-disabled="true" 属性。
在使用 <a> 的禁用按钮中不应包含 href 属性。

Example

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

<!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>

Link functionality caveat

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

Example

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

<!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>

Block buttons

我们可以像 Bootstrap 4 中那样，结合使用 display 和 gap 实用程序，创建完整的宽度、“块按钮”的响应式堆栈。
使用按钮特定类而不是实用程序，我们可以对间距、对齐和响应行为进行更重要的控制。

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

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

Example

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

<!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>

Button plugin

按钮插件允许你进行简单的开关按钮。

Toggle states

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

Example

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

<!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>

Example

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

<!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>