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

热爱足球

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

效果展示


电脑端





手机端





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

Bootstrap5下载链接：Bootstrap5下载

<footerclass="bg-darktext-whitemt-5"
<divclass="containerpy-4"
<!--首行：站点Logo、链接、比较新动态、联系我们--
<divclass="rowd-noned-md-flex"<!--在手机尺寸下隐藏--
<!--站点Logo--
<divclass="col-md-3"
<ahref="#"class="d-blockmb-3"
<imgsrc="你的图片链接"alt="站点Logo"height="80"
<a
<pclass="text-muted"我们是一家致力于提供质服务的。<p
<div

<!--链接--
<divclass="col-md-3"
<h5速链接<h5
<ulclass="list-unstyled"
<li<ahref="#"class="text-whitetext-decoration-none"首页<a<li
<li<ahref="#"class="text-whitetext-decoration-none"关于<a<li
<li<ahref="#"class="text-whitetext-decoration-none"服务<a<li
<li<ahref="#"class="text-whitetext-decoration-none"联系<a<li
<ul
<div

<!--比较新动态--
<divclass="col-md-3"
<h5比较新动态<h5
<ulclass="list-unstyled"
<li<ahref="#"class="text-whitetext-decoration-none"新闻1<a<li
<li<ahref="#"class="text-whitetext-decoration-none"新闻2<a<li
<li<ahref="#"class="text-whitetext-decoration-none"新闻3<a<li
<li<ahref="#"class="text-whitetext-decoration-none"新闻4<a<li
<ul
<div

<!--联系我们--
<divclass="col-md-3"
<h5联系我们<h5
<ulclass="list-unstyled"
<li:123-456-7890<li
<li邮箱:info@examplecom<li
<li地址:北京市某某区某某街道<li
<ul
<div
<div

<!--第二行：友情链接--
<divclass="rowmt-4"
<divclass="col-md-12"
<h5友情链接<h5
<ulclass="list-inline"
<liclass="list-inline-item"<ahref="#"class="text-whitetext-decoration-none"友情链接1<a<li
<liclass="list-inline-item"<ahref="#"class="text-whitetext-decoration-none"友情链接2<a<li
<liclass="list-inline-item"<ahref="#"class="text-whitetext-decoration-none"友情链接3<a<li
<liclass="list-inline-item"<ahref="#"class="text-whitetext-decoration-none"友情链接4<a<li
<ul
<div
<div

<!--第行：版权信息--
<divclass="text-centermt-4"
<pcopy;2025保留所有权利<p
<div
<div
<footer
源码解释
由上方展示图可以看到，在电脑端下，底部所有信息都得以展示，在手机端下，只展示友链与信息。

这样的效果是因为在?<divclass="rowd-noned-md-flex"?中，使用了两个类样式?d-none?和?d-md-flex：



单独使用?d-none?时，元素会被隐藏，论屏幕尺寸如何。



单独使用?d-md-flex?时，元素在中等屏幕尺寸及以上时会显示为弹性盒子容器，而在较小屏幕尺寸下会隐藏。



但是组合使用时：



小屏幕尺寸（<768px）：d-none?生效，隐藏元素。



中等屏幕尺寸及以上（≥768px）：d-md-flex?生效，覆盖?d-none，将元素的?display?属性设置为?flex，从而显示元素。





因此，电脑端（中等屏幕尺寸及以上）会显示该元素，而手机端（小屏幕尺寸）会隐藏该元素。

结语
以上是幽络源的HTML5+Bootstrap5的Footer底部代码分享与解析，如有不懂之处可留言或加群询问，学习交流。



我们有充分的理由相信源码网会成为行业的主流，会逐步影响越来越多的人。提供经过严格测试的免费源码、各种线上兼职和网络兼职的网创教程、编程及网络相关的技术教程分享，助您轻松获取资源和技术支持。https://www.youluoyuan.com/