当前位置：首页 > article >正文

HTML5 + Bootstrap5 网站底部代码实现与解析

article 2025/3/13 0:47:00

文章概述

本文主要是分享一个 HTML5 结合 Bootstrap5 实现的一个网站底部模块，适配电脑端与手机端，样式虽然不炫酷，但是中规中矩，适合初学 Bootstrap5 以及普通网站底部模块需要的人。

效果展示

电脑端

手机端

源码如下

注意：此代码需引入 Bootstrap5 的静态资源，我这里由于是应用于 Thymeleaf 中，该模块是抽取到公共代码中的。

Bootstrap5 下载链接：Bootstrap5 下载

<footer class="bg-dark text-white mt-5">
    <div class="container py-4">
        <!-- 第一行：站点 Logo、链接、最新动态、联系我们 -->
        <div class="row d-none d-md-flex"> <!-- 在手机尺寸下隐藏 -->
            <!-- 站点 Logo -->
            <div class="col-md-3">
                <a href="#" class="d-block mb-3">
                    <img src="你的图片链接" alt="站点Logo" height="80">
                </a>
                <p class="text-muted">我们是一家致力于提供优质服务的公司。</p>
            </div>

            <!-- 链接 -->
            <div class="col-md-3">
                <h5>快速链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white text-decoration-none">首页</a></li>
                    <li><a href="#" class="text-white text-decoration-none">关于</a></li>
                    <li><a href="#" class="text-white text-decoration-none">服务</a></li>
                    <li><a href="#" class="text-white text-decoration-none">联系</a></li>
                </ul>
            </div>

            <!-- 最新动态 -->
            <div class="col-md-3">
                <h5>最新动态</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white text-decoration-none">新闻1</a></li>
                    <li><a href="#" class="text-white text-decoration-none">新闻2</a></li>
                    <li><a href="#" class="text-white text-decoration-none">新闻3</a></li>
                    <li><a href="#" class="text-white text-decoration-none">新闻4</a></li>
                </ul>
            </div>

            <!-- 联系我们 -->
            <div class="col-md-3">
                <h5>联系我们</h5>
                <ul class="list-unstyled">
                    <li>电话: 123-456-7890</li>
                    <li>邮箱: info@example.com</li>
                    <li>地址: 北京市某某区某某街道</li>
                </ul>
            </div>
        </div>

        <!-- 第二行：友情链接 -->
        <div class="row mt-4">
            <div class="col-md-12">
                <h5>友情链接</h5>
                <ul class="list-inline">
                    <li class="list-inline-item"><a href="#" class="text-white text-decoration-none">友情链接1</a></li>
                    <li class="list-inline-item"><a href="#" class="text-white text-decoration-none">友情链接2</a></li>
                    <li class="list-inline-item"><a href="#" class="text-white text-decoration-none">友情链接3</a></li>
                    <li class="list-inline-item"><a href="#" class="text-white text-decoration-none">友情链接4</a></li>
                </ul>
            </div>
        </div>

        <!-- 第三行：版权信息 -->
        <div class="text-center mt-4">
            <p>&copy; 2025 公司名. 保留所有权利.</p>
        </div>
    </div>
</footer>

源码解释

由上方展示图可以看到，在电脑端下，底部所有信息都得以展示，在手机端下，只展示友链与公司信息。

这样的效果是因为在 <div class="row d-none d-md-flex"> 中，使用了两个类样式 d-none 和 d-md-flex：

单独使用 d-none 时，元素会被隐藏，无论屏幕尺寸如何。
单独使用 d-md-flex 时，元素在中等屏幕尺寸及以上时会显示为弹性盒子容器，而在较小屏幕尺寸下会隐藏。
但是组合使用时：
- 小屏幕尺寸（<768px）：d-none 生效，隐藏元素。
- 中等屏幕尺寸及以上（≥768px）：d-md-flex 生效，覆盖 d-none，将元素的 display 属性设置为 flex，从而显示元素。