Bootstrap 加载动画攻略

Bootstrap 是一个流行的前端框架，提供了许多有用的组件和工具，其中包括加载动画。在本攻略中，我们详细介绍如何使用 Bootstrap 加载动画，包括如何内置的加载动画和如何自定义加载动画。

步骤1：引入 Bootstrap

在使用 Bootstrap 加载动画之前，需要先引 Bootstrap。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在上面的示例中，我们使用CDN引入了Bootstrap的CSS和JavaScript文件。在HTML中，我们将页面的内容放置在<body>元素中。

步骤2：使用内置的加载动画

Bootstrap 提了许多内置的加载动画，可以轻松地在页面中使用。以下是一些常用的置加载动画：

旋转动画

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

脉冲动画

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

在上面的示例中，我们使用了.spinner-border和.spinner-grow类来创建旋转动画和脉冲动画。在HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

步骤3：自定义加载动画

如果内置的加载动画不能满足您的需求，您可以使用 Bootstrap 的自定义加载动画。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 自定义加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
  <style>
    /* 自定义加载动画 */
    .lds-ring {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid #fff;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #fff transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
 animation-delay: -0.15s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
 }
    }
  </style>
</head>
<body>
  <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</body</html>

在上面的示例中，我们使用CSS来创建自定义加载动画。在CSS中，我们定义了.lds-ring类来设置加载动画的宽度、高度和位置。在.lds-ring div规则中，我们设置加载动画的边框、边框半径、动画和边框颜色。在@keyframes规则中，我们定义了动画的关键帧。在HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

示例1：使用内置的加载动画

以下是一个使用内置的加载动画的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 加载动画</title>
  <link="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们使用了.d-flex和.justify-content-center类来将加载动画居中。在中，我们使用<div>元素来创建加载动画，并将其置在页面中。

示例2：自定义加载动画

以下是一个自定义加载动画的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 自定义加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
  <style>
    /* 自定义加载动画 */
    .lds-ring {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid #fff;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #fff transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  </div>
</body>
</html>

在上面的示例中，我们使用CSS来创建自定义加载动画。在CSS中，我们定义了.lds-ring类来设置加载动画的宽度、高度和位置。在.lds-ring div规则中，我们设置加载动画的边框、边框半径、动画和边框颜色。在@keyframes规则中，我们定义动画的关键帧。HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

示例3：使用Bootstrap的loading插件

Bootstrap还提供了一个loading插件，可以轻松地在页面中使用。以下是一个常用的插件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-secondary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-success" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-danger" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-warning" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-info" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-light" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border text-dark" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们使用了.d-flex和.justify-content-center类来将加载动画居中。在中，我们使用<div>元素来创建加载动画，并将其放置在页面中。我们还使用了.spinner-border类来创建加载动画的样式，以及.text-*类来设置加载动画的颜色。

结论

通过以上步骤和示例，我们了解了如何使用 Bootstrap 加载动画，包括如何使用内置的加载动画、如何自定义加载动画以及如何使用 Bootstrap 的 loading 插件。在实际应用中，可以根据实际需求选择适当的加载动画，提高用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：bootstrap加loading - Python技术站

bootstrap加loading