Bootstrap5基本练习

︎喻喻郑

已于 2023-12-25 22:59:09 修改

阅读量421

点赞数 10

CC 4.0 BY-SA版权

文章标签： html 前端

于 2023-12-24 00:29:23 首次发布

本文链接：https://blog.csdn.net/2303_77051594/article/details/135177072

本文介绍了如何在网页中运用Bootstrap框架创建不同类型的容器、导航菜单、按钮组、卡片、加载指示器、进度条以及分页功能的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

12.23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器</title>
    <link href="css\bootstrap.min.css" rel="stylesheet">
    <script src="js\._bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container my-3 bg-danger text-info">
        <h1>我的第一张bookstrap页面</h1>
        <p>一些文本</p>
    </div>
    <div class="container-fluid bg-warning text-primary">
        <h1>全宽容器</h1>
        <p>跨越整个屏幕宽度</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css\bootstrap.min.css" rel="stylesheet">
    <script src="js\._bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="btn-group-vertical">
           <button type="button" class="btn btn-secondary text-dark">班级学员管理&nbsp;&nbsp;>></button>
           <button type="button" class="btn btn-outline-secondary">班级管理</button>
           <button type="button" class="btn btn-outline-secondary">学员管理</button>

           <button type="button" class="btn btn-secondary text-dark">系统信息管理&nbsp;&nbsp;>></button>
           <button type="button" class="btn btn-outline-secondary">部门管理</button>
           <button type="button" class="btn btn-outline-secondary">员工管理</button>

           <button type="button" class="btn btn-secondary text-dark">数据统计管理&nbsp;&nbsp;>></button>
           <button type="button" class="btn btn-outline-secondary">员工信息统计</button>
           
        </div>
       
    </div>

    




</body>
</html>

12.24-12.25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css\bootstrap.min.css" rel="stylesheet">
    <script src="js\._bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <!--导航-->
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#ft">第一</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " data-toggle="pill" href="#sd">第二</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " data-toggle="pill" href="#th">第三</a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="ft" class="tab-pane container active" >
                <p>yiyiyiyiyiyiyiyiyiyi</p>
            </div><br>
            <div  id="sd" class="tab-pane container fade" >
                <p>二二二二二二二二二二二</p>
            </div><br>
            <div id="th" class="tab-pane container fade" >
                <p>三三三三三三三三三三三三</p>
            </div><br>
        </div>

        <!--卡片-->
        <div class="card" style="width:400px">
            <img class="card-img-top" src="alibaba.jpg" alt="Card image" style="width:100%">
            <div class="card-body">
                <h3 class="card-title text-warning">阿里巴巴</h3>
                <p class="card-text  ">啊啊啊啊啊啊啦啦啦啦啦不不不不不不不不</p>
                <a href="#" class="btn btn-primary">阿里巴巴</a>
            </div>
        </div>

        <!--加载器-->
        <div class="spinner-border spinner-border-sm text-warning"></div>
        <div class="spinner-border spinner-border-sm text-black"></div>
        <div class="spinner-border spinner-border-sm text-success"></div>
        <div class="spinner-border spinner-border-sm text-primary"></div>

        <!--进度条-->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated " style="width:70%">70%</div>
        </div>
        

        

        <!--分页-->
        <ul class="pagination justify-content-end" style="margin:20px 0"">
            <li class="page-item"><a class="page-link" href="#">上一页</a></li>
            <li class="page-item"><a class="page-link" href="01容器.html" target="_blank">1</a></li>
            <li class="page-item"><a class="page-link" href="02网格.html" target="_blank">2</a></li>
            <li class="page-item"><a class="page-link" href="03上机测试.html" target="_blank">3</a></li>
            <li class="page-item"><a class="page-link" href="#">下一页</a></li>
        </ul>


        

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