direktori cari
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
watak

对表单,对话框等中的操作使用 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.

Artikel sebelumnya: Artikel seterusnya: