Bootstrap从入门到实战---巨幕和旋转图标

最新推荐文章于 2023-10-23 15:07:52 发布

i see the future

最新推荐文章于 2023-10-23 15:07:52 发布

阅读量535

点赞数

分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/m0_46629123/article/details/118558537

版权

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 8 订阅

订阅专栏

Bootstrap从入门到实战—巨幕和旋转图标
在这里插入图片描述

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

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>
<body>
    <!-- jumbotron -->
    <div class="jumbotron">
        <h1 class="display-4">Hello,world</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a href="#" class="btn btn-primary btn-lg">Learn more</a>
    </div>

    <br>

    <div class="jumbotron">
        <div class="container">
            <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </div>
    </div>

    <!-- spinner -->
    <div class="spinner-border 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="d-flex align-items-center">
        <strong>Loading...</strong>
        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
    </div>

    <div class="d-flex align-items-center">
        <strong>Loading...</strong>
        <div class="spinner-border spinner-border-sm ml-auto" role="status" aria-hidden="true"></div>
    </div>

    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>



</body>
</html>

在这里插入图片描述

i see the future

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap从入门到实战---巨幕和旋转图标

Bootstrap从入门到实战—巨幕和旋转图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title>  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
复制链接

扫一扫

专栏目录