Botstrap提供了不同风格按钮的预定一按钮类六种
使用 Bootstrap 自定义按钮样式在表单、对话框、和更多支持多种大小、状态和更多。
1、示例
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类隐藏的附加文本。
2、禁止按钮上的文字换行
如果你不希望按钮中的文字换行的话，可以为按钮添加 .text-nowrap 类。在 Sass 代码中，你可以设置 $btn-white-space: nowrap 来禁止所有按钮中的文本换行。
3、可用作按钮的 HTML 标签
.btn 系列类（class）被设计为用于 <button> 元素。不过，你也可以将这些类用于 <a> 或 <input> 元素（但是某些浏览器可能会使用略有不同的渲染方式）。
当 .btn 系列类（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">
htmlradio设置默认的按钮4、带轮廓线的按钮
当你需要使用按钮，但不希望按钮带有背景颜时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜。
<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>
某些按钮的样式使用了相对较浅的前景，因此仅应在深背景上使用才能具有足够的对比度。
5、按钮的尺寸
需要更大或更小的按钮吗？使用 .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>
6、活动状态
当按钮处于活动状态时，按钮将表现为被按下的效果，即背景和边框变暗，如果启用了阴影效果，将会有 inset 阴影。由于这一效果是基于伪类（pseudo-class）实现的，因此无需为 <button> 添加任何类（class）。但是，如果需要以编程方式强制复现这一效果的话，可以使用 .active 类（并设置 aria-pressed=“true” 属性）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。