引导程序 5 | Button
Bootstrap 5 是 Bootstrap 的最新主要版本，他们改进了 UI 并进行了各种更改。按钮是为创建各种按钮而提供的组件。 Bootstrap 5 包括几种预定义的按钮样式，每种样式都有其自己的用途。
语法：
类型： 以下是 Bootstrap 5 中可用的九种按钮类型：
- btn-primary
- btn-辅助
- 按钮成功
- btn-危险
- btn警告
- btn信息
- btn-light
- 黑暗
- btn 链接
示例 1：此示例使用 Bootstrap 5 中前五个按钮的工作方式。
引导程序 5 |纽扣
极客们的极客们
<按钮类型=“按钮”
class="btn btn-primary">小学
<按钮类型=“按钮”
class="btn btn-secondary">中学
<按钮类型=“按钮”
class="btn btn-success">成功
<按钮类型=“按钮”
class="btn btn-danger">危险
<按钮类型=“按钮”
class="btn btn-warning">警告
输出：
示例2：此示例显示了Bootstrap 5中最后四个按钮的工作方式。
引导程序 5 |纽扣
极客们的极客们
<按钮类型=“按钮”
class="btn btn-info">信息
<按钮类型=“按钮”
class="btn btn-light">轻
<按钮类型=“按钮”
class="btn btn-dark">深色
<按钮类型=“按钮”
class="btn btn-link">链接
输出：
示例 3：此示例使用 Bootstrap 5 中的按钮来展示不同元素的工作方式。
引导程序 5 |纽扣
极客们的极客们
按钮元件
role="button">链接按钮
输出：
按钮轮廓：Bootstrap 5提供了一系列的类，当我们需要在项目中使用轮廓样式按钮，即没有背景色的按钮时，可以使用这些类。轮廓按钮类将删除应用于按钮的任何背景颜色或背景图像样式。所有按钮类型均支持，如下例所示：
示例：此示例用于展示不同轮廓按钮在 Bootstrap 5 中的工作原理。
引导程序 5 |纽扣
极客们的极客们
按钮轮廓
<按钮类型=“按钮”
类=“btn btn-outline-primary”>
基本的
<按钮类型=“按钮”
类=“btn btn-outline-secondary”>
中学
<按钮类型=“按钮”
类=“btn btn-outline-成功”>
成功
<按钮类型=“按钮”
类=“btn btn-outline-danger”>
危险
<按钮类型=“按钮”
类=“btn btn-outline-警告”>
警告
<按钮类型=“按钮”
类=“btn btn-outline-info”>
信息
<按钮类型=“按钮”
类=“btn btn-outline-light”>
光
<按钮类型=“按钮”类=“btn btn-outline-dark”>
黑暗的
输出：
按钮大小： Bootstrap 5 提供了允许更改按钮大小的不同类。 .btn-lg 和 .btn-sm 类用于大按钮和小按钮。
示例：此示例用于演示不同按钮尺寸在 Bootstrap 5 中的工作原理。
引导程序 5 |纽扣
极客们的极客们
按钮尺寸
<按钮类型=“按钮”
类=“btn btn-成功btn-sm”>
小按钮
<按钮类型=“按钮”
类=“btn”
默认按钮
<按钮类型=“按钮”
类=“btn btn-成功btn-lg”>
大按钮
输出：
活动状态按钮： .active 类用于制作按钮并链接到活动状态。
示例：此示例使用 show 来演示 Bootstrap 5 中按钮的活动状态。
引导程序 5 |纽扣
极客们的极客们
按钮激活状态
<按钮类型=“按钮”
类=“btn btn-成功”>
默认按钮
<按钮类型=“按钮”
类=“btn btn-成功活动”>
活动按钮
输出：
取消状态按钮：Disabled属性与按钮元素一起使用以设置按钮的取消状态。
示例：此示例使用演示Bootstrap 5中按钮的禁用状态。
引导程序 5 |纽扣
极客们的极客们
按钮禁用状态
<按钮类型=“按钮”
类=“btn btn-primary”禁用>
禁用按钮
<按钮类型=“按钮”
类=“btn btn-成功”禁用>
禁用按钮
输出：
块级按钮： .btn-block 类用于创建占据父元素整个宽度的块级按钮。
示例：此示例展示了块级按钮在 Bootstrap 5 中的工作原理。
引导程序 5 |纽扣
极客们的极客们
块级按钮
<按钮类型=“按钮”
类=“btn btn-block btn-primary”>
块级按钮
<按钮类型=“按钮”类=“btn btn-块btn-成功”>
块级按钮
输出：
微调器按钮： spinner- * 类用于向按钮添加微调器。
示例：此示例展示了微调器按钮在 Bootstrap 5 中的工作原理。
引导程序 5 |纽扣
极客们的极客们
旋转按钮
输出：
相关文章