예배 규칙서 찾다
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(能见度)
문자

对表单,对话框等中的操作使用 Bootstrap 的自定义按钮样式,支持多种大小,状态等。

示例

Bootstrap 包含几种预定义的按钮样式,每种都有其自己的语义目的,还有一些额外的功能用于更多的控制。

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示,而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身(例如可见文本),或者通过其他方式包含,例如隐藏在.sr-only类中的其他文本。

按钮标签

这些.btn类被设计为与

Link

大纲按钮

需要一个按钮,但不是他们带来的巨大背景颜色?用.btn-outline-*替换默认的修饰符类任何按钮上的所有背景图片和颜色。

尺寸

想要更大或更小的按钮?添加.btn-lg.btn-sm更多尺寸。

通过添加.btn-block创建块级别按钮 —— 即跨越父级的全部宽度的按钮。

活动状态

活动时,按钮将显示为按下(背景较暗,边框较暗并且插入阴影)。不需要为

禁用状态

通过将disabled布尔属性添加到任何

  • 包括一些对未来友好的样式以禁用所有pointer-events锚定按钮。在支持该属性的浏览器中,根本看不到禁用的游标。

  • 禁用的按钮应该包含aria-disabled="true"属性以指示元素对辅助技术的状态。

链接功能警告

按钮插件

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

切换状态

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

复选框和单选按钮

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

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

注意,预先选中的按钮要求您手动添加.active类初始化到输入的...

方法

Method

Description

$().button('toggle')

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

$().button('dispose')

Destroys an element’s button.

이전 기사: 다음 기사: