旋转加载、推送消息框 - 《Bootstrap》

旋转加载
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col">
                <div class="spinner-border"></div>
                <div class="spinner-border text-primary"></div>
                <div class="spinner-border text-secondary"></div>
                <div class="spinner-border text-success"></div>
                <div class="spinner-border text-danger"></div>
                <div class="spinner-border text-warning"></div>
                <div class="spinner-border text-info"></div>
                <div class="spinner-border text-light"></div>
                <div class="spinner-border text-dark"></div>
            </div>
            <div class="col">
                <div class="spinner-grow"></div>
                <div class="spinner-grow text-primary"></div>
                <div class="spinner-grow text-secondary"></div>
                <div class="spinner-grow text-success"></div>
                <div class="spinner-grow text-danger"></div>
                <div class="spinner-grow text-warning"></div>
                <div class="spinner-grow text-info"></div>
                <div class="spinner-grow text-light"></div>
                <div class="spinner-grow text-dark"></div>
            </div>
            <div class="col">
                <!-- 小尺寸 -->
                <div class="spinner-border spinner-border-sm"></div>
                <div class="spinner-grow spinner-grow-sm"></div>
                <!-- 大尺寸，通过行间样式设置 -->
                <div class="spinner-border text-info" style="width: 3rem; height: 3rem;"></div>
                <div class="spinner-grow text-info" style="width: 3rem; height: 3rem;"></div>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col">
                <button class="btn btn-primary" disabled>
                    <span class="spinner-border spinner-border-sm"></span>
                </button>
                <button class="btn btn-primary ml-2" disabled>
                    <span class="spinner-border spinner-border-sm"></span>
                    loadding...
                </button>
                <button class="btn btn-primary ml-2" disabled>
                    <span class="spinner-grow spinner-grow-sm"></span>
                </button>
                <button class="btn btn-primary ml-2" disabled>
                    <span class="spinner-grow spinner-grow-sm"></span>
                    loadding...
                </button>
            </div>
        </div>
    </div>
</body>
推送消息框--旅游网站(马蜂窝)里有应用
<body>
    <div class="bg-danger">
        <div class="toast" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button class="close ml-2 mb-1" data-dismiss="toast">
                    <span>&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
        <div class="toast" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button class="close ml-2 mb-1" data-dismiss="toast">
                    <span>&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    <!-- 位置 -->
    <div class="d-flex mt-5 bg-dark p-5 justify-content-center">
        <div class="toast" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button class="close ml-2 mb-1" data-dismiss="toast">
                    <span>&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    <!-- data-选项 -->
    <div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">
        <div class="toast-header">
            <strong class="mr-auto">data-选项</strong>
            <small>11 mins ago</small>
            <button class="close ml-2 mb-1" data-dismiss="toast">
                <span>&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
    <!-- 方法与事件 -->
    <div class="toast mt-5" data-autohide="false" id="myToast">
        <div class="toast-header">
            <strong class="mr-auto">方法与事件</strong>
            <small>11 mins ago</small>
            <button class="close ml-2 mb-1" data-dismiss="toast">
                <span>&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script>
        //初始化推送消息框，必需要写这一步
        /* $(function () {
            $('.toast').toast('show');
        }); */
        //方法
        $(function () {
            $('#myToast').toast('show');
            setTimeout(function(){
                $('#myToast').toast('hide');
            },3000);
        });
        //事件
        $('#myToast').on('show.bs.toast', function () {
            console.log('消息框要显示了');
        });
        $('#myToast').on('shown.bs.toast', function () {
            console.log('消息框已经显示了');
        });
        $('#myToast').on('hide.bs.toast', function () {
            console.log('消息框要隐藏了');
        });
        $('#myToast').on('hidden.bs.toast', function () {
            console.log('消息框已经隐藏了');
        });
    </script>