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 文档中的建议,使用框架提供的类名以确保样式正确。