温馨提示×

如何自定义Bootstrap spinner的样式

小樊
81
2024-08-29 08:05:21
栏目: 编程语言

要自定义 Bootstrap 的 spinner 样式,您可以按照以下步骤操作:

  1. 首先,在 HTML 文件中创建一个基本的 Bootstrap spinner。这是一个使用 Bootstrap 5 的示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <title>Custom Bootstrap Spinner</title>
</head>
<body>
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</body>
</html>
  1. 接下来,为您的 spinner 添加自定义样式。在此示例中,我们将更改边框颜色、宽度和速度。在您的 HTML 文件的 <head> 部分添加一个