Bootstrap实战---footer处理

最新推荐文章于 2022-04-24 21:29:18 发布

i see the future

最新推荐文章于 2022-04-24 21:29:18 发布

阅读量1.7k

点赞数 2

分类专栏： HTML/CSS/JS/Bootstrap

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

版权

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

98 篇文章 8 订阅

订阅专栏

Bootstrap实战—footer处理
在这里插入图片描述

<!DOCTYPE html>
<html>
<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>

    </style>

</head>

<body>

    <!--页脚开始-->
<footer class="mt-4 bg-dark text-light small">
    <div class="container">
        <div class="row pt-3 pb-5">
            <div class="col-sm-12 col-md-10 p-3">
                <div>EduWork 是智校云旗下专注程序员培养的实习平台。</div>
                <div>
                    <ul class="nav">
                        <li class="nav-item">
                          <a class="nav-link text-white" href="#">关于我们</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-white" href="#">关于我们</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-white" href="#">关于我们</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-white href="#">关于我们</a>
                        </li>
                      </ul>
                </div>
                <div class="text-muted">
                    <i>©2018-2020</i> 北京智校云网络科技有限公司 <span class="p-3">版权所有</span> <a class="text-muted" href="#">京ICP备19057319号-1</a>
                </div>
            </div>
            <div class="col-sm-12 col-md-2  p-3">
                <figure class="figure">
                    <img src="images/qrcode.png" style="max-height: 100px;height: auto;" class="figure-img rounded" alt="qrcode">
                    <figcaption class="figure-caption">关注我们请扫码</figcaption>
                  </figure>
            </div>
        </div>
    </div>
</footer>

    <!--页脚结束-->


    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
</body>
</html>

i see the future

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap实战---footer处理

Bootstrap实战—footer处理<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>融职教育</title>  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&
复制链接

扫一扫