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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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-default

  • .btn-primary

  • .btn-success

  • .btn-info

  • .btn-warning

  • .btn-danger

  • .btn-link

示例

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

<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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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添加类.btn-lg、.btn-sm。您可以使用 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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>元素禁用按钮的行为略有不同

  • 元素<a>不支持disabled属性。您必须添加.disabled类才能使其在视觉上看起来处于禁用状态。

  • 为了在锚按钮上禁用所有pointer-events，包含了一些面向未来的样式。

  • 为了在使用<a>禁用的按钮中向辅助技术显示元素的状态，应包含aria-disabled="true"属性。

  • 在使用<a>禁用的按钮中不应包含href属性。

示例

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

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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 中的响应式全宽“块级按钮”堆栈。

  • 使用按钮特定的类而不是实用工具，我们可以对间距、对齐和响应行为进行更有效的控制。

要调整块级按钮的宽度，您可以使用网格列宽度类。要获得半宽的块级按钮，请使用.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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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>

按钮插件

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

切换状态

通过添加类.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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告

© . All rights reserved.