谈谈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/https://www.youluoyuan.com/wp-content/uploads/2024/10/ylyapp.png
页:
[1]