Bootstrap4 按钮
Bootstrap4按钮技术文档
概述
Bootstrap是一个流行的CSS框架，可以帮助开发人员在Web应用程序开发期间快速构建漂亮的用户界面。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>
上面的代码段显示了基础按钮的样式示例。我们可以在按钮元素中使用类来添加样式，如.btn-primary和.btn-secondary。这些类还支持在按钮上使用不同的标签属性类型，如type="button"和type="submit"。我们也可以使用disabled属性来禁用按钮。
轮廓按钮
轮廓按钮是基础按钮的简化版本，它们是没有填充的，而是只有边框。轮廓按钮通常用于更清晰的外观，例如在输入框旁边显示按钮。
<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-outline-前缀的类来创建轮廓按钮。这些类还支持在按钮上使用不同的标签属性类型，如type="button"和type="submit"。我们也可以使用disabled属性来禁用按钮。
大小
Bootstrap的按钮也支持不同的大小设置。可以将按钮的大小设置为“大（lg）”或“小（sm）”。在默认大小（即未添加btn-lg或btn-sm类）时，按钮使用标准大小。
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
上面的代码演示了按钮的大小设置例子。在按钮元素上，我们可以通过添加btn-lg或btn-sm类来设置按钮的大小。我们可以在不同类型的按钮中添加这些类，以创建具有不同大小的各种按钮。
按钮组
按钮组允许您组合一组按钮，使其外观和行为更统一。按钮组也可以仅用作一个按钮，其中一个按钮是主要的，其他按钮是辅助功能。
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Main action</button>
<button type="button" class="btn btn-secondary">Secondary action</button>
</div>
上面的代码段演示了按钮组的用法示例。我们可以将多个按钮元素包装在一个<div>元素中，并使用btn-group类设置这些按钮作为组。我们可以使用role和aria-label属性来为按钮组设置可读性，并使用.btn-primary和.btn-secondary类来设置主要和次要按钮。
按钮工具栏
按钮工具栏允许您方便地将按钮组水平排列在一起。按钮工具栏只是一个按钮组的容器，具有特殊的样式。
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
上面的代码段演示了按钮工具栏的用法示例。我们可以将多个按钮组包裹在一个<div>元素中，并使用btn-toolbar类将它们组合在一起。role和aria-label属性用于为按钮工具栏设置可读性，并使用.btn-secondary类设置按钮的样式。我们还可以使用mr-2类为每个按钮组设置水平间隔。
总结
在Bootstrap4中，有多种类型的按钮样式，它们可以应用于各种类型的应用程序。我们可以创建基本按钮、轮廓按钮、大小和组合按钮、工具栏和按钮组，以及为每个按钮设置交互功能。这些功能使开发人员可以快速创建漂亮的用户界面，同时提供一致和易于使用的交互方式。