目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

对表单,对话框等中的操作使用 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类中的其他文本。

按钮标签

这些.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>

活动状态

活动时,按钮将显示为按下(背景较暗,边框较暗并且插入阴影)。不需要为 <button>** 添加类,因为它们使用伪类**。但是,如果需要以编程方式复制状态,则仍然可以强制使用带有.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>元素使按钮看起来不活动。

<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>

链接功能警告

.disabled类使用pointer-events: none尝试禁用的链路功能<a>,但 CSS 属性尚不规范。此外,即使在支持的浏览器中pointer-events: none,键盘导航也不会受到影响,这意味着有远见的键盘用户和辅助技术用户仍然可以激活这些链接。所以为了安全起见,在这些链接上添加一个tabindex="-1"属性(以防止它们接收键盘焦点)并使用自定义 JavaScript 来禁用它们的功能。

按钮插件

用按钮做更多。控制按钮为更多组件(如工具栏)指定或创建按钮组。

切换状态

添加data-toggle="button"切换按钮的active状态。如果您预先切换按钮,则必须手动添加.activearia-pressed="true"其添加到<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle</button>

复选框和单选按钮

引导程序的.button样式可以应用于其他元素,如<label>s,以提供复选框或无线电样式按钮切换。添加data-toggle="buttons".btn-group包含这些修改后的按钮以启用其各自样式的切换。

这些按钮的选中状态为只更新click事件在按钮上。如果使用另一种方法更新输入-e。g.<input type="reset">或者手动应用输入checked属性-您需要切换.active<label>手动。

注意,预先选中的按钮要求您手动添加.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>

方法

Method

Description

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

$().button('dispose')

Destroys an element’s button.

上一篇:下一篇: