Bootstrap5 按钮(Buttons)

半兽人 发表于: 2020-06-25   最后更新时间: 2020-07-01  

示例

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类。 在Sass中,您可以设置$ btn-white-space: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>

在线运行

通过添加.btn-block,创建块级按钮(跨越父级的整个宽度)。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

在线运行

禁用状态

通过将disabled布尔属性添加到<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的浏览器中,keyboard导航也不受影响,这意味着有键盘用户和辅助技术用户仍将能够激活这些链接。为安全起见,请在这些链接上添加tabindex="-1"属性(以防止它们获得键盘焦点),并使用自定义JavaScript禁用其功能。

按钮插件

按钮插件使您可以创建简单的on/off(开/关)切换按钮。

切换状态

添加data-toggle="button"来切换按钮的有效状态。如果要预切换按钮,则必须手动将.active类和aria-pressed="true"添加到<button>中。

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

在线运行

<a href="#" class="btn btn-primary" role="button" data-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" role="button" data-toggle="button">Disabled toggle link</a>

在线运行

方法

可以使用按钮构造函数创建按钮实例,例如:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

在线运行

方法 描述
toggle 切换按压状态。给予按钮已被激活的外观。
dispose 销毁元素的按钮。

例如,切换所有按钮

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

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 面包屑导航(Breadcrumb)
下一条: Bootstrap5 按钮组(Button group)