19.1 按钮标签

.btn类设计用于button元素。但是，您也可以在a或input元素上使用这些类。下面是几个例子及效果，从外观上来看几乎没什么区别。一般情况下，按钮要设置颜色，否则不容易分辨。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>按钮组件</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <a class="btn btn-primary" href="#" role="button">链接按钮</a>
      <button class="btn btn-primary" type="submit">Button按钮</button>
      <input class="btn btn-primary" type="button" value="Input Button按钮">
      <input class="btn btn-primary" type="submit" value="Submit 按钮">
      <input class="btn btn-primary" type="reset" value="Reset 按钮">

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

19.2 按钮的颜色

按钮的颜色设置非常简单，和前面的颜色都是通用的，只是前缀改成了bt-，另外还有种链接样式，如下例子

<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>
复制代码

19.3 禁止文字换行

一般来说，按钮是长度可变的，文字不会换行，但当上级容器设置了宽度且宽度不满足按钮长度的时候，按钮文本会自动换行，如果不希望按钮文本换行，可以将 .text-nowrap类添加到按钮。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>按钮组件</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <button class="btn btn-primary" type="submit">你见过我这么长的按钮吗？</button>
          <button class="btn btn-primary" type="submit">你见过我这么长的按钮吗？</button>
        </div>
        <div class="col-3">
          <button class="btn btn-primary text-nowrap" type="submit">你见过我这么长的按钮吗？</button>
          <button class="btn btn-primary text-nowrap" type="submit">你见过我这么长的按钮吗？</button>
        </div>
        <div class="col-3">
          <button class="btn btn-primary" type="submit">你见过我这么长的按钮吗？</button>
          <button class="btn btn-primary" type="submit">你见过我这么长的按钮吗？</button>
        </div>
       
      </div>
    </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

从这个例子中我们可以看出三点

按钮组件是响应式的，一行放不开会自动换行。
按钮组件只有左右间隙，没有上下间隙
使用text-nowrap后，按钮会强制溢出上级容器的宽度设置，所以使用一定要慎重。

19.4 外边框按钮

需要一个按钮，却不需要它们带来的厚重背景色？将默认修饰符类替换为.btn-outline-*类，以删除任何按钮上的所有背景图像和颜色。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
复制代码

19.5 大小设置

喜欢大的还是小的按钮？添加.btn-lg 或者 .btn-sm以获得其他尺寸。

      <button class="btn btn-primary btn-sm" type="submit">btn-sm Button</button>
      <button class="btn btn-primary" type="submit">Button</button>
      <button class="btn btn-primary btn-lg" type="submit">btn-lg Button</button>
复制代码

19.6 禁用状态

通过向任何button元素添加disabled属性，使按钮看起来不起作用。

使用a元素禁用的按钮的行为有些不同：

a不支持disabled属性，因此必须添加.disabled类以使其在视觉上显示为禁用。
禁用的按钮应该包含 aria-disabled="true" 属性，以指示辅助技术的元素状态。

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

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">禁用 a 按钮</a>
复制代码

可能不细心地朋友看不出来，button的disabled是加在class外面的，是html属性。a是加在class内的，是css样式类。tabindex="-1"是禁止通过键盘激活链接，aria-disabled="true"是指示辅助技术的元素状态（比如盲文阅读器）。

19.7 区块按钮

19.7.1 全宽按钮

混合使用display和gap通用类别，建立跟Bootstrap 4一样的响应式、满版的的内存块级别按钮堆叠。透过使用通用类别而非指定button class，你可以更好的控制间距、对齐以及响应式等行为。

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
复制代码

7.1.png

19.7.2 半宽按钮

可以使用网格系统的栏（column）类别来调整内存块级别按钮的宽度。举例来说，可以用.col-6建立宽度50%的内存块级别按钮，再用.mx-auto将其水平置中。当然，你可以将col-6中的6改为1-12，得到不同宽度的按钮。

<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
复制代码

7.2.png

19.7.3 响应式按钮

以下为一个响应式的示例，从垂直堆叠的按钮群组开始，直到遇到md断点才会把.d-grid替换为.d-md-block，进而使gap-2通用类别无效化。你可以缩放浏览器的大小以观察它们的改变，我这里就不演示了。

<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
复制代码

19.8 按钮水平对齐

方向为水平时，可以添加弹性盒子通用类别来对齐、调整按钮。以下使其在非堆叠的情况下对齐右边。

 <div class="d-flex justify-content-end">
        <button class="btn btn-primary me-md-2" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>
复制代码

19.9 js切换按钮状态

19.9.1 显示效果

加入data-bs-toggle="button"来切换按钮的active状态。如果想要预先切换按钮状态，则必须手动添加.active以及aria-pressed="true"以确保状态有正确的传达至辅助性技术。

 <button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
        <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off"
            aria-pressed="true">Active toggle button</button>
        <button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled
            toggle button</button>

        <br><br><br>
        <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
        <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active
            toggle link</a>
        <a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button"
            data-bs-toggle="button">Disabled toggle link</a>
复制代码

从效果来看，激活的按钮颜色更深一些。

19.9.2 js控制

可以使用按钮构造函数创建按钮实例，例如：

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
复制代码

方法

toggle 切换推送状态。使按钮看起来已被激活。
dispose 销毁元素的按钮。（删除DOM元素上存储的数据）

例如，切换所有按钮

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})
复制代码

有兴趣的朋友可以自己完善代码试验一下。

今天的课程就到这里，请关注我，及时学习俺老刘原创的《Bootstrap5零基础到精通》第20节 Bootstrap5按钮组Button group组件用法，从字面也可以看出，按钮组就是多个按钮的组合。

第19节 Bootstrap5按钮Buttons组件用法