程序如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--    bootstrap css核心文件-->
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用-->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="spinner-border text-muted"></div>
        <div class="spinner-border text-primary"></div>
        <div class="spinner-border text-success"></div>
        <div class="spinner-border text-info"></div>
        <div class="spinner-border text-warning"></div>
        <div class="spinner-border text-danger"></div>
        <div class="spinner-border text-secondary"></div>
        <div class="spinner-border text-dark"></div>
        <div class="spinner-border text-light"></div>

        <br/>

        <div class="spinner-grow text-muted"></div>
        <div class="spinner-grow text-primary"></div>
        <div class="spinner-grow text-success"></div>
        <div class="spinner-grow text-info"></div>
        <div class="spinner-grow text-warning"></div>
        <div class="spinner-grow text-danger"></div>
        <div class="spinner-grow text-secondary"></div>
        <div class="spinner-grow text-dark"></div>
        <div class="spinner-grow text-light"></div>

        <br/>

        <button class="btn btn-primary">
            <span class="spinner-border spinner-border-sm"></span>
        </button>

        <button class="btn btn-primary">
            <span class="spinner-border spinner-border-sm"></span>
            Loading...
        </button>

        <button class="btn btn-primary" disabled>
            <span class="spinner-border spinner-border-sm"></span>
            Loading...
        </button>

        <button class="btn btn-primary" disabled>
            <span class="spinner-grow spinner-grow-sm"></span>
            Loading...
        </button>

    </div>
</body>
</html>

解释：

①如果只要图标可以直接到div中的class中放spinner-xx（spinner-grow和spinner-border）；

②如果要放到button中，可以套一个button，再到里面放一个span；

BootStrap笔记-加载效果的实现

相关文章

热门标签

最新文章