目录
使用 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">
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”
属性)。
<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>
7、禁用状态
通过为 <button>
元素设置 disabled
属性(此属性是布尔类型的)可以使按钮看起来处于不可用状态。
<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) 。在支持这些属性的浏览器中,光标移动到被禁用的按钮上时将不会出现变化(即不会变为手的样子)。
- 利用
<a>
标签实现的禁用按钮应当设置aria-disabled="true"
属性,以便向辅助技术提供当前元素的状态。 - 利用
<a>
标签实现的禁用按钮 不应 设置 href 属性。
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
7.1、链接功能说明
为了解决必须在已禁用链接上保留href
属性的情况,.disabled
类使用pointer-events: none
试图禁用<a>
的链接功能。注意,这个CSS属性还没有对HTML进行标准化,但是所有现代浏览器都支持它。此外,即使在支持pointer-events: none
的浏览器中,键盘导航仍然不受影响,这意味着正常的键盘用户和使用辅助技术的用户仍然能够激活这些链接。所以为了安全起见,除了aria-disabled="true"
之外,还在这些链接上包含tabindex="-1"
属性。
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
8、按钮插件
用按钮可以做更多。控制按钮状态或为更多组件(如工具栏)创建按钮组。
8.1、切换状态
添加 data-toggle="button"
以切换按钮的 active 状态。如果要预先切换的状态,则必须手动为 <button>
元素添加 .active
类 和 aria-pressed="true"
属性。
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
8.2、Checkbox and radio buttons
Bootstrap .button
样式可以应用于其他元素,例如<label>
,以提供复选框或单选样式的按钮切换。将data-toggle="buttons"
添加到一个.btn-group
中,其中包含那些修改过的按钮,通过JavaScript启用它们的切换行为,并添加.btn-group-toggle
对按钮中的<input>
设置样式。请注意,您可以创建单个输入驱动的按钮或它们的组。
这些按钮的选中状态仅通过单击按钮上的事件更新。如果你使用另一种方法来更新输入,例如,使用<input type="reset">
或手动应用input
的checked
属性,你需要手动在<label>
上切换.active
。
注意,预先选中的按钮需要您手动将.active
类添加到input的 <label>
Checked。
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
8.3、方法
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!