Bootstrap按钮使用教程

使用Bootstrap自定义的按钮样式，可以轻松地为表单、对话框等操作添加美观且功能丰富的按钮。同时，Bootstrap 按钮还支持设置多种大小、状态等，让用户能够更加灵活地定制按钮的外观和行为。

一、示例

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>

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

二、禁止文字换行

如果不希望按钮文本换行，可以将 .text-nowrap类添加到按钮。在Sass中，可以将$btn-white-space: nowrap设置为禁用每个按钮的文本换行。

三、按钮标签

.btn类设计用于button元素。但是，也可以在a或input元素上使用这些类（尽管某些浏览器可能应用稍微不同的呈现）。

在a元素上使用按钮类来触发页内功能（如折叠内容），而不是链接到当前页面中的新页面或节时，应为这些链接赋予role=”button”以适当地将其目的传达给屏幕阅读器等辅助技术

<a class="btn btn-primary" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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">

四、外边框按钮

如果需要一个按钮，却不需要它们带来的厚重背景色，将默认修饰符类替换为.btn-outline-*类，以删除任何按钮上的所有背景图像和颜色。

<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>

有些按钮样式使用相对较浅的前景色，为了有足够的对比度，只能在深色背景上使用。

五、按钮尺寸

添加.btn-lg or .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>

六、活动状态

当按钮处于活动状态时，按钮将表现为被按下的效果，即背景和边框变暗，如果启用了阴影效果，将会有 inset 阴影。由于这一效果是基于伪类（pseudo-class）实现的，因此无需为 <button> 添加任何类（class）。但是，如果需要以编程方式强制复现这一效果的话，可以使用.activearia类（并设置-pressed=“true”属性）。

<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

七、禁用状态

通过为<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>

八、区块按钮

混合使用display和gap通用类别，建立跟Bootstrap 4一样的响应式、满版的的内存块级别按钮堆叠。透过使用通用类别而非指定button class，你可以更好的控制间距、对齐以及响应式等行为。

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>

以下为一个响应式的示例，从垂直堆叠的按钮群组开始，直到遇到md断点才会把.d-grid替换为.d-md-block，进而使gap-2通用类别无效化。缩放浏览器的大小以观察它们的改变。

<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>

可以使用网格系统的栏（column）类别来调整内存块级别按钮的宽度。举例来说，可以用.col-6建立宽度50%的内存块级别按钮，再用.mx-auto将其水平置中。

<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>

方向为水平时，可以添加通用类别来对齐、调整按钮。以下用我们前一个响应式的示例进行修改，在按钮上加入了一些flex，margin通用类别，使其在非堆叠的情况下对齐右边。

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>

九、按钮插件

控制按钮状态或为更多组件（如工具栏）创建按钮组。

1、切换状态

要切换按钮的状态，可以使用Bootstrap的data-toggle=”button”属性。如果要预先设置一个特定的状态，例如激活状态，可以手动为元素添加active类和aria-pressed=”true”属性。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>

2、复选框和单选按钮

Bootstrap 的样式可以应用于其他元素，例如.button<label>data-toggle=”buttons”.btn-group.btn-group-toggle<input>，以提供复选框或单选样式按钮切换。添加到包含这些修改的按钮的 a 中，以通过 JavaScript 启用它们的切换行为，并添加按钮中的样式。请注意，可以创建单个输入供电按钮或一组输入按钮。

这些按钮的选中状态仅通过按钮上的单击事件进行更新。如果使用其他方法来更新输入<input type=”reset”>checked.active<label>（例如，使用或手动应用输入的属性），则需要手动打开。

请注意，预先选中的按钮要求您手动将类添加到输入的 ..active<label>

<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>