按钮
使用Bootstrap的自定义按钮样式来操作表单、对话框等，并支持多种大小、状态等。更新于: 2023-04-30 14:28:21 查看: 525
发布于: 2021-9-2 20:09 发布者: 大米
示例
Bootstrap包括几个预定义的按钮样式，每个样式都有自己的语义目的，还有一些额外的控件
<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>
禁止文字换行
如果你不想让按钮文本自动换行，你可以添加.text-nowrap类到按钮。
按钮标签
.btn类旨在与<button>元素一起使用。 但是，您也可以在<a>或<input>元素上使用这些类（尽管某些浏览器可能会使用略有不同的呈现方式）。
在 <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">
轮廓按钮
需要一个按钮，但是他们带来的沉重背景颜色不是吗？ 用
.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>
按钮大小
喜欢大一点的按钮还是小一点的按钮?增加
.btn-lg或.btn-sm的额外尺寸。
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
禁用按钮
通过将
disabled的boolean属性添加到任何<button>元素，可使按钮看起来不活动。 禁用的按钮具有pointer-events: none未应用任何指针事件，以防止触发悬停和活动状态
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
使用 <a> 元素的禁用按钮的行为略有不同：
<a>不支持disabled属性，因此您必须添加.disabled类以使其在外观上看起来是禁用的。- 包括一些将来友好的样式，以禁用锚点按钮上的所有
pointer-events。 - 禁用的按钮应包含
aria-disabled="true"属性，以向辅助技术指示元素的状态。
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
链接警告功能
.disabled 类使用 pointer-events: none 试图禁用 <a>
的链接功能，但是CSS属性尚未标准化。 此外，即使在支持 pointer-events: none
的浏览器中，键盘导航也不会受到影响，这意味着有经验的键盘用户和辅助技术用户仍将能够激活这些链接。 因此，为了安全起见，除了 aria-disabled="true"之外，还应在这些链接上包含
tabindex="-1" 属性，以防止它们接收键盘焦点，并使用自定义JavaScript完全禁用其功能。
块级按钮
混合使用我们的显示和间隙实用工具，创建像Bootstrap 4中一样的全宽度“阻止按钮”响应式堆栈。 通过使用实用工具而不是按钮特定的类，我们可以更好地控制间距，对齐方式和响应行为。
<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>
在这里，我们创建了一个响应式变化，从垂直堆叠的按钮开始，直到 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>
<button class="btn btn-primary" type="button">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>
<button class="btn btn-primary" type="button">Button</button>
</div>
其他实用工具可用于水平调整按钮的对齐方式。这里，我们采用了前面的响应式示例，并在按钮上添加了一些flex实用工具和一个边距实用工具，以便在按钮不再堆叠时右对齐。
<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>
<button class="btn btn-primary" type="button">Button</button>
</div>