| 按钮 | class="" | 按钮 | class="" |
|---|---|---|---|
btn btn-default |
btn btn-primary |
||
btn btn-success |
btn btn-info |
||
btn btn-warning |
btn btn-danger |
||
btn btn-secondary |
btn btn-dark |
||
btn btn-purple |
btn btn-pink |
||
btn btn-cyan |
btn btn-yellow |
||
btn btn-brown |
btn btn-link |
||
btn btn-light |
btn btn-indigo |
||
btn btn-teal |
如果你不希望按钮中的文字换行的话，可以为按钮添加 .text-nowrap 类。
可用作按钮的 HTML 标签
.btn 系列类（class）被设计为用于 <button> 元素。不过，你也可以将这些类用于 <a> 或 <input> 元素（但是某些浏览器可能会使用略有不同的渲染方式）。
当 .btn 系列类（class）用于 <a> 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 role="button" 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
边框按钮
当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜色。
class 中增加 .btn-round。
这里放弃跟v4版本那样使用 label 的情况，直接在按钮中放图标按钮元素即可。
指定按钮宽度
可使用 .btn-w-xs, .btn-w-sm, .btn-w-md, .btn-w-lg 和 .btn-w-xl 类指定按钮宽度。
需要更大或更小的按钮吗？使用 .btn-lg 或 .btn-sm 类可以设置按钮的不同尺寸
通过为 <button> 元素设置 disabled 属性（此属性是布尔类型的）可以使按钮看起来处于禁用状态。处于禁用状态的按钮被设置了 pointer-events: none 属性，以防止触发鼠标悬停（hover）和活动（active）状态。
创建块级元素按钮，不再像 Bootstrap 4 一样给按钮指定相关的类，这里是在父元素上指定 display 和 gap 相关。
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
在这里，我们创建了一个响应式变化，从垂直堆叠的按钮开始，直到 md 断点，其中 .d-md-block 取代了 .d-grid 类，从而使 gap-2 类无效。调整浏览器大小以查看它们的变化。
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
可以使用网格列宽类调整块按钮的宽度。例如，对于半宽“块级元素按钮”，使用 .col-6 和 .mx-auto 将其水平居中放置。
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
当按钮水平时，可使用其他类调整按钮的对齐方式。这里我们以前面的响应示例为例，在按钮上添加了一些 flex 类和 margin相关类，以便在按钮不再堆叠时右对齐按钮。
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>