按钮
使用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>