admin 管理员组文章数量: 1086019
2023年12月18日发(作者：linux获取本机ip地址命令)
Botstrap提供了不同风格按钮的预定一按钮类六种
使用 Bootstrap 自定义按钮样式在表单、对话框、和更多支持多种大小、状态和更多。
1、示例
Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮。
向辅助技术传递意义
使用颜色添加意义只提供视觉指示，不会向屏幕阅读器等辅助技术的用户传递该指示。确保由颜色表示的信息从内容本身(例如可见的文
本)中是明显的，或者通过其他方式包含，例如用.sr-only类隐藏的附加文本。
2、禁止按钮上的文字换行
如果你不希望按钮中的文字换行的话，可以为按钮添加 .text-nowrap 类。在 Sass 代码中，你可以设置 $btn-white-space: nowrap 来禁止所有按钮中的文本换行。
3、可用作按钮的 HTML 标签
.btn 系列类（class）被设计为用于
当 .btn 系列类（class）用于 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 role="button" 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。
type="button" value="Input">
type="submit" value="Submit">
type="reset" value="Reset">
4、带轮廓线的按钮
当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜色。
某些按钮的样式使用了相对较浅的前景色，因此仅应在深色背景上使用才能具有足够的对比度。
5、按钮的尺寸
需要更大或更小的按钮吗？使用 .btn-lg 或 .btn-sm 类可以设置按钮的不同尺寸。
通过添加 .btn-block 类来创建块级按钮（即，按钮占满了整个父级元素的宽度）。
6、活动状态
当按钮处于活动状态时，按钮将表现为被按下的效果，即背景和边框变暗，如果启用了阴影效果，将会有 inset 阴影。由于这一效果是基于伪类（pseudo-class）实现的，因此无需为
role="button" aria-pressed="true">Primary link href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link
7、禁用状态
通过为
元素不支持 disabled 属性，因此必须设置 .disabled 类以使其在外观上显示为禁用状态。
包含了一些并未被全面支持的的属性，用于禁止按钮上的所有
鼠标事件（pointer-events） 。在支持这些属性的浏览器中，光标移动到被禁用的按钮上时将不会出现变化（即不会变为手的样子）。
利用 标签实现的禁用按钮应当设置 aria-disabled="true" 属性，以便向辅助技术提供当前元素的状态。
aria-disabled="true">Primary link
aria-disabled="true">Link
7.1、链接功能说明
为了解决必须在已禁用链接上保留href属性的情况，.disabled类使用pointer-events: none试图禁用的链接功能。注意，这个CSS属性还没有对HTML进行标准化，但是所有现代浏览器都支持它。此外，即使在支持pointer-events: none的浏览器中，键盘导航仍然不受影响，这意味着正常的键盘用户和使用辅助技术的用户仍然能
够激活这些链接。所以为了安全起见，除了aria-disabled="true"之外，还在这些链接上包含tabindex="-1"属性。
tabindex="-1" role="button" aria-disabled="true">Primary link tabindex="-1" role="button" aria-disabled="true">Link
8、按钮插件
用按钮可以做更多。控制按钮状态或为更多组件(如工具栏)创建按钮组。
8.1、切换状态
添加 data-toggle="button" 以切换按钮的 active 状态。如果要预先切换的状态，则必须手动为
8.2、Checkbox and radio buttons
Bootstrap .button样式可以应用于其他元素，例如
这些按钮的选中状态仅通过单击按钮上的事件更新。如果你使用另一种方法来更新输入，例如，使用或手动应用input的checked属性，你需要手动在
注意，预先选中的按钮需要您手动将.active类添加到input的
Checked
data-toggle="buttons">
checked> Active
Radio
Radio
版权声明：本文标题：Botstrap提供了不同风格按钮的预定一按钮类六种 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702855416a433386.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论