爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条

Bootstrap5 信息提示框

在 Bootstrap 5 中可以快速实现各种信息提示框，核心用到的类为 alert，可使用下述内容进行测试。

.alert-success .alert-info .alert-warning .alert-danger .alert-primary
.alert-secondary .alert-light .alert-dark

使用时，直接将其添加到目标 DIV 即可。

<div class="container">
  <div class="alert alert-success">
    <strong>成功！</strong>梦想橡皮擦的 爬虫训练场。
  </div>
</div>

如果在超链接上添加 .alert-link 类，可以创建相应的彩色链接。

<div class="container">
  <div class="alert alert-success">
    <strong>成功！</strong>梦想橡皮擦的 爬虫训练场。<a
      href="http://pachong.vip"
      class="alert-link"
      >点击跳转</a
    >
  </div>
</div>

如果在 alert-sucess 类后面添加 .alert-dismissible，并且添加 class="btn-close" 和 data-bs-dismiss="alert"，即可实现一个关闭警告按钮。

<div class="container">
  <div class="alert alert-success alert-dismissible">
    <button class="btn-close" data-bs-dismiss="alert"></button>
    <strong>成功！</strong>梦想橡皮擦的 爬虫训练场。<a
      href="http://pachong.vip"
      class="alert-link"
      >点击跳转</a
    >
  </div>
</div>

使用 .fade 和 .show 类可以设置提示框在关闭时的淡出和淡入效果。

Bootstrap 5 按钮和按钮组

Bootstrap 5 提供了不同样式的按钮：

<button type="button" class="btn">基础</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">深色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮类可以作用于超链接 a 标签，button 标签，input 标签

除了填充样式外，Bootstrap 5 还提供了 八个边框按钮样式。

<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">次要</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">深色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>

通过 .btn-lg 类和 .btn-sm 类，可以设置按钮尺寸。

<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary">默认</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>

按钮状态可以使用 .active 和 .disabled 类实现。

<button type="button" class="btn btn-primary active">可用按钮</button>
<button type="button" class="btn btn-primary" disabled>不可用按钮</button>
<button type="button" class="btn btn-primary disabled">不可用按钮</button>

按钮组
使用 .btn-group 类可以创建按钮组，例如下述代码：

<div class="btn-group">
  <button type="button" class="btn btn-primary">梦想橡皮擦</button>
  <button type="button" class="btn btn-primary">擦哥</button>
  <button type="button" class="btn btn-primary">擦姐</button>
</div>

分为一组的按钮，会自动连接到一起，也可以使用 .btn-group-*，其中 * 可以设置为 lg，sm，xs，进而设置按钮组的大小。

使用 .btn-group-vertical 类来创建垂直按钮组。

Bootstrap 5 徽章

Bootstrap 中的徽章（badge）是一种小的、圆角的标签，可以用来向用户显示某个数值或状态。它常常被用在列表、消息或其他内容上，以向用户提示有新的信息或者需要注意的内容。

在 Bootstrap 中，徽章是使用 .badge 类来创建的。例如，如果你想在一个列表项中显示一个徽章，可以这样写：

<ul>
  <li class="list-group-item">
    梦想橡皮擦
    <span class="badge bg-success">New</span>
  </li>
</ul>

其中 bg-success 类用来设置背景颜色，其取值是 Bootstrap 中的常用形式，如下所示。

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light">浅色</span>
<span class="badge bg-dark">深色</span>

除此之外，还可以使用 .rounded-pill 类，将徽章变为胶囊形。

<ul>
  <li class="list-group-item">
    梦想橡皮擦
    <span class="badge bg-success rounded-pill">New</span>
  </li>
</ul>

进度条

Bootstrap 5 提供了进度条（progress bar）组件，可以用来向用户显示进度、加载状态或其他数据。

在 Bootstrap 中，进度条是使用 .progress 类来创建的。你可以在进度条中使用 .progress-bar 类来设置进度条的宽度和颜色。例如，下面是一个简单的进度条代码示例：

<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>

这将会创建一个默认颜色的进度条，并设置它的宽度为 25%。

你可以使用 Bootstrap 提供的不同的颜色类来改变进度条的颜色。例如，如果你想让进度条为蓝色，可以使用 .bg-primary 类：

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 25%"></div>
</div>

Bootstrap 还提供了其他的进度条样式，包括条纹进度条、动画进度条和多进度条组。

进度条的高度
进度条高度默认是 1rem，即 16px，可以使用 CSS 的 height 属性进行修改。

<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<hr />
<div class="progress" style="height:20px;">
  <div class="progress-bar" style="width:40%;"></div>
</div>

如果希望进度条上展示百分比，直接添加文本即可。

<div class="progress" style="height:20px;">
  <div class="progress-bar" style="width:40%;">40%</div>
</div>

可以使用 .progress-bar-striped 类来设置条纹进度条，使用 .progress-bar-animated 类给进度条添加动画。

<div class="progress" style="height:20px;">
  <div
    class="progress-bar progress-bar-striped progress-bar-animated"
    style="width:40%;"
  >
    40%
  </div>
</div>

多个进度条可以进行堆叠

<div class="progress">
  <div class="progress-bar bg-success" style="width:50%">空闲</div>
  <div class="progress-bar bg-warning" style="width:20%">告警</div>
  <div class="progress-bar bg-danger" style="width:30%">危险</div>
</div>

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 797 篇原创博客