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^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述

Bootstrap系列之按钮（Buttons）

目录

1、示例

2、禁止按钮上的文字换行

3、可用作按钮的 HTML 标签

4、带轮廓线的按钮

5、按钮的尺寸

6、活动状态

7、禁用状态

7.1、链接功能说明

8、按钮插件

8.1、切换状态

8.2、Checkbox and radio buttons

8.3、方法

后记

猜你喜欢