Bootstrap 按钮（Button）插件
Bootstrap 按钮（Button）插件
简介
Bootstrap 是一个强大的前端框架，其中包含了很多很有用的组件。其按钮（Button）插件是其中之一，用于快速创建各种样式的按钮。
如何使用
基础用法
使用按钮插件非常简单，只需要在 HTML 代码中加入一个按钮元素，并给其添加 btn 类名即可：
<button class="btn">Click me</button>
这样就创建了一个默认样式的按钮。
按钮样式
Bootstrap 按钮插件提供了多种样式，包括：
- 默认（Default）
- 主要（Primary）
- 成功（Success）
- 信息（Info）
- 警告（Warning）
- 危险（Danger）
- 次要（Secondary）
- 暗黑（Dark）
- 浅色（Light）
- 链接（Link）
为了创建不同样式的按钮，只需要在 btn 的基础上加上对应的类名即可：
<button class="btn btn-primary">Primary button</button>
<button class="btn btn-success">Success button</button>
<button class="btn btn-warning">Warning button</button>
<button class="btn btn-danger">Danger button</button>
<button class="btn btn-link">Link button</button>
尺寸
Bootstrap 按钮插件提供了多种大小，包括：
- 大（Large）
- 中（Default）
- 小（Small）
- 超小（Extra Small）
创建按钮时，只需要在类名后加上对应的大小类名即可：
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Default button</button>
<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary btn-xs">Extra Small button</button>
按钮状态
Bootstrap 按钮插件也提供了多种状态，包括：
- 禁止（Disabled）
- 激活（Active）
禁止状态的按钮无法被点击，而激活状态的按钮会在点击后保持按下状态。创建这些状态的按钮只需要在类名后加上对应的类名即可：
<button class="btn btn-primary" disabled>This button is disabled</button>
<button class="btn btn-primary active">This button is active</button>
按钮组合
按钮插件允许多个按钮组合在一起以创建按钮组，可以水平或垂直排列。要创建一个按钮组，可以使用 btn-group 类名，并为每个按钮添加 btn 类名：
<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>
按钮工具栏
如果需要在页面中创建多个按钮组，可以将它们放在一个按钮工具栏中。要创建一个按钮工具栏，可以使用 btn-toolbar 类名，并在其中加入多个按钮组：
<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>
注意事项
- 按钮插件仅适用于 Bootstrap 框架
- 在创建按钮时，请遵循 Bootstrap 文档中的建议，使用框架提供的类名以确保样式正确。