按钮(Button)
使用Bootstrap的自定义按钮样式,并广泛用于表单、对话框等场景中的操作,并支持多种大小、状态等一系列变量定义。
示例
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>
网页中传达辅助技术及其背后的意义
使用颜色添加意义只提供一个视觉指示,这不会传达给需要辅助技术(如盲人、听力障碍者)的用户,也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过替代方法,例如隐藏在.sr-only
该类中的附加文本来创造更多的辅助传达技术。
.sr-only
,全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素,比如说“菜单按钮”,只有视力正常的人才能清楚辨识这些元素的作用。而残障人士,比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器,也就是 screen reader(sr),屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢?因此我们还要写上这些元素的文本说明,但是又不需要展示给普通用户看到,于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现(译者补充)。
按钮标签
.btn
可以在<button>
元素上使用,您也可以在 <a>
、 或 <input>
元素上使用這些 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">
轮廓按钮
.btn
在引用中,如果需要一个按钮,但不需要带来的巨大的背景颜色(背景边框缩小)?用默认修饰符类替换.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>
启用状态
.btn
样式定义的按钮,默认就是启用状态(背景较深、边框较暗、带内阴影),如果你一定要使按钮固定为启用状态、不需要点击反馈,可以增加.active
样式,并包括aria-pressed="true"
属性,则状态显示为启用状态。
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
禁用状态
直接将disabled
布尔属性添加到任何<button>
元素(直接嵌套在html标签中,使按钮看起来处于非活动的禁用状态(点击不会有响应和弹性)。
<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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
链接功能警告
The .disabled
class uses pointer-events: none
to try to disable the link functionality of <a>
s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none
, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1"
attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
按钮插件
按钮可以用在网页上的多种场合(做更多的组件),如工具栏、按钮组等。
切换状态
添加 data-toggle="button"
属性,可以切换按钮的 active
状态,如果你预先需要切换按钮,必须将.active
样式 、 aria-pressed="true"
属性到 <button>
标签中。
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
复选框和单选框
Bootstrap的.button
样式也可以使用于其它元素,比如<label>
HTML组件上,从而实现单选、复选效果。添加 data-toggle="buttons"
到.btn-group
下的元素里,来启用它们的样式切换。
这些按钮的检查状态,只能通过 click
事件 进行更新,如果你使用其它方法更新输入,用<input type="reset">
或手动应用输入 checked
属性,人为的在<label>
上增加 .active
状态。
注意:预先选中的按钮需要你手动将 .active
定义上,在 <label>
中。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
上面的两个实例对应传统使用环境。
Bootstrap 4.0
正式版提供了全新的复选与单选 解决方案,其方案如下:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
方法
方法 | 属性 |
---|---|
$().button(‘toggle’) | 切换状态,给予按钮已经启用的外观。 |
$().button(‘dispose’) | 销毁元素按钮的状态。 |