目录

Bootstrap Scrollspy
Bootstrap Wells

Bootstrap Spinners



Bootstrap Spinners

Bootstrap Spinners

Spinner也称为加载指示器。它用于显示/指示我们项目的加载状态。 Bootstrap使用 .spinner 类创建Spinner。
我们使用以下语法在Bootstrap - 
<div class = "spinner-border"> </div>

Spinners的类型

我们使用Bootstrap创建以下类型的Spinners-

1、Spinners边框

边框Spinners用于轻量指示器。
我们使用以下语法在Bootstrap中创建边框Spinners-
语法: 
<div class = "spinner-border" role = "status">
  <span class = "sr-only">Loading...</span>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Bootstrap Border Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
      .container {
          text-align: center;
          
      }
  </style>
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
          <h1>Border Spinner Example</h1> 
          <div class = "spinner-border" role = "status"> 
              <!--status notify to Screen reader that this element is in the process-->
              <span class = "sr-only">Loading...</span>
              <!--sr-only class hidden in normal devices, but it can be detected by screen readers-->
          </div> 
        </div>
    </div>
</body>
</html>

2、Spinners颜色

我们使用以下语法在Bootstrap中创建彩色Spinners- 
<div class = "spinner-border text-light" role = "status">
  <span class = "sr-only">Loading...</span>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Bootstrap Border Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Colored Spinner Example</h1>
            <!--Colored Spinners-->
            <div class="spinner-border text-muted" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-success" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-info" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-light" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-primary" role = "status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-secondary" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-danger" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-warning" role = "status">
                <span class = "sr-only">Loading....</span>
                <div class = "spinner-border text-dark" role = "status">
                    <span class = "sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

3、Spinners加载

我们使用 .spinner-grow 类在Bootstrap中创建加载中的Spinners。
语法: 
<div class = "spinner-grow" role = "status"> 
     <span class = "sr-only">Loading</span>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Growing Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Growing Spinner Example</h1>
            <!--Growing Spinner-->
            <div class = "spinner-grow" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
        </div>
    </div>
</body>
</html>

4、Spinners加载颜色

我们使用以下语法在Bootstrap中创建彩色生长Spinners。
语法: 
<div class = "spinner-grow text-success" role = "status"> 
    <span class = "sr-only">Loading...</span>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Colored Growing Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Colored Growing Spinner Example</h1>
            <!--Colored Growing Spinner-->
            <div class = "spinner-grow text-success" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-light" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-dark" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-warning" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-secondary" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-danger" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-primary" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            
        </div>
    </div>
</body>
</html>

更改Spinners对齐方式

Bootstrap允许我们使用边距和放置实用程序来更改Spinners对齐方式。

1、使用边距

边距用于根据我们项目的要求提供适当的间距。
语法:
语法: 
<div class = "spinner-border m-5" role = "status">
  <span class = "sr-only">Loading...</span>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Spinner Margin Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        
            <h1> Spinner Margin Example</h1>
            <!--Spinner Margin-->
            <div class="spinner-border m-5" role="status">
                <span class="sr-only">Loading...</span>
              </div>
            
        </div>
    </div>
</body>
</html>

2、更改文本对齐方式

.text-center 类用于更改文本对齐方式。 
<div class = "text-center">
  <div class = "spinner-border" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Text alignment Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
    }
</style>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1> Spinner Text alignemt Example</h1>
            <!--Change the text alignment-->
            <div class = "text-center">
                <div class = "spinner-border text-success" role = "status">
                    <span class = "sr-only">Loading...</span>
                  </div>
                <div class = "spinner-border text-warning" role = "status">
                  <span class = "sr-only">Loading...</span>
                </div>
                <div class = "spinner-border text-dark" role = "status">
                    <span class = "sr-only">Loading...</span>
                  </div>
              </div>           
        </div>
    </div>
</body>
</html>

3、使用Flexbox

我们可以使用以下语法通过Flexbox更改Spinners对齐方式-
语法: 
<div class = "d-flex align-items-center text-success">
              <strong>Loading...</strong>
              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
               </div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Flexbox Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
        margin: 20px;
    }
</style>  
</head>
<body>
    <div class = "container text-primary">
        <div class = "jumbotron text-align-center">
            <h1> Spinner Flexbox alignment Example</h1>
            <!--Change alignment using Flexbox-->
            <div class = "d-flex align-items-center text-success">
              <strong>Loading...</strong>
              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
               </div>
            </div>         
        </div>
    </div>
</body>
</html>

4、使用Float

我们使用以下语法使用Float更改Spinners对齐-
语法: 
<div class = "clearfix">
  <div class = "spinner-border float-right" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
</div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap float Spinner Example</title>
    <!--Bootstrap CDN-->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
        margin: 20px;
    }
</style>  
</head>
<body>
    <div class = "container text-success">
        <div class = "jumbotron text-align-center">
            <h1> Spinner float alignment Example</h1>
            <!--Change alignment using float-->
            <div class = "clearfix">
              <strong>Loading Page...</strong>
              <div class = "spinner-border float-right text-primary" role = "status">
               <span class = "sr-only">Loading...</span>
                
              </div>
            </div>
    </div>
</body>
</html>

更改Spinners尺寸

我们还可以根据需要更改Spinners尺寸。以下div类用于更改Spinners的大小-
1、小型Spinners-我们使用 .spinner-border-sm 和 .spinner-grow-sm 制作小型Spinners。
语法: 
<!--for small border spinner-->
  <div class = "spinner-border spinner-border-sm" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
  <!--for small grow border spinner-->
  <div class = "spinner-grow spinner-grow-sm" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Small Spinner Example</title>
  <!--Bootstrap CDN-->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Small Spinner Example</h1>
      <!--for small border spinner-->
      <div class = "spinner-border spinner-border-sm text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!--for small grow border spinner-->
      <div class = "spinner-grow spinner-grow-sm text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
    </div>
</body>
</html>
2、大型Spinners-我们使用 .spinner-border-lg 和 .spinner-grow-lg 类创建大型Spinners。
语法: 
<!--for Large border spinner-->
      <div class = "spinner-border spinner-border-lg text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!--for Large grow border spinner-->
      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Large Spinner Example</title>
  <!--Bootstrap CDN-->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Large Spinner Example</h1>
      <!--for Large border spinner-->
      <div class = "spinner-border spinner-border-lg text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!--for Large grow border spinner-->
      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
    </div>
</body>
</html>

Bootstrap Spinners按钮

内部按钮Spinners指示当前处于处理阶段的操作。
语法 
<!--Bootstrap grow Spinner Button-->
      <button class = "btn btn-primary" type="button" disabled>
        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>
        <span class = "sr-only">Loading...</span>
      </button>
      <!--Bootstrap border Spinner Button-->
      <button class = "btn btn-secondary" type="button" disabled>
        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
        Loading...
      </button>
代码: 
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Spinner Button Example</title>
  <!--Bootstrap CDN-->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Bootstrap Spinner Button Example</h1>
      <!--Bootstrap grow Spinner Button-->
      <button class = "btn btn-primary" type="button" disabled>
        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>
        <span class = "sr-only">Loading...</span>
      </button>
      <!--Bootstrap border Spinner Button-->
      <button class = "btn btn-secondary" type="button" disabled>
        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
        Loading...
      </button>
    </div>
</body>
</html>


Bootstrap Scrollspy
Bootstrap Wells