HTML5 + Bootstrap5 网站底部代码分享与解析

htmledit_views">

文章概述

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

原文链接：HTML5 + Bootstrap5 网站底部代码分享与解析

效果展示

电脑端

手机端

源码如下

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

Bootstrap5 下载链接：Bootstrap5 下载

html"><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，从而显示元素。