Bootstrap5 按钮

https://v5.bootcss.com/docs/components/buttons/

Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮。
任何带有.btn类的元素都会继承圆角按钮的默认外观。

按钮类可用于<a>、<button>、或<input>元素。

用于<button>

用于<a>

用于<input>

带轮廓线的按钮

https://v5.bootcss.com/docs/components/buttons/#%E5%B8%A6%E8%BD%AE%E5%BB%93%E7%BA%BF%E7%9A%84%E6%8C%89%E9%92%AE

当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜色。鼠标移到按钮上添加突出效果。

例如：

鼠标移到第一个按钮上：

按钮尺寸

https://v5.bootcss.com/docs/components/buttons/#%E6%8C%89%E9%92%AE%E7%9A%84%E5%B0%BA%E5%AF%B8

需要更大或更小的按钮吗？使用 .btn-lg 或 .btn-sm 类可以设置按钮的不同尺寸。

例如：

块级按钮

https://v5.bootcss.com/docs/components/buttons/#block-buttons

提醒： .btn-block 类在新的版本中已经去掉了：
https://getbootstrap.com/docs/5.3/migration/#buttons

块级按钮会横跨父元素的宽度。在父级元素上设置.d-grid类，在父级元素上通过.gap-*调整按钮之间的间距，例如：

活动/禁用按钮

https://v5.bootcss.com/docs/components/buttons/#%E7%A6%81%E7%94%A8%E7%8A%B6%E6%80%81

通过为 <button> 元素设置 disabled 属性（此属性是布尔类型的）可以使按钮看起来处于禁用状态。处于禁用状态的按钮被设置了 pointer-events: none 属性，以防止触发鼠标悬停（hover）和活动（active）状态。

注意：<a>元素不支持disabled属性，你可以通过添加.disabled类来禁止链接的点击。.disabled类只会使链接在视觉上看起来象已禁用，但是除非从链接中删除href属性，否则该链接将保持可点击状态。

例如：

既然disabled是个属性，也可以不放在类里面：

<a>元素中添加.disabled类：