footer多栏布局用bootstrap 5的grid系统最稳妥，应按语义区分列宽：版权区块用col-12 col-md-6 col-lg-4，链接列表用col-6 col-md-3 col-lg-2，社交按钮用col-12 col-sm-6 col-md-4 col-lg-3，并统一使用btn类+内联svg图标+aria-label确保可访问性与点击体验。
Footer多栏布局用Bootstrap 5的grid系统最稳妥
Bootstrap 5移除了.row-cols-响应式断点类的默认支持，直接用row + col-*组合更可控。别用col-md-4 col-lg-3这类“均分”思维——版权信息和社交按钮语义不同，列宽要分开设计。
- 版权区块用
col-12 col-md-6 col-lg-4：移动端独占一行，中屏开始左对齐，大屏占1/3宽度 - 链接列表用
col-6 col-md-3 col-lg-2：小屏两列，中屏四列，大屏六列（需配合flex-column防换行错乱） - 社交按钮用
col-12 col-sm-6 col-md-4 col-lg-3：图标按钮需要足够点击热区，小屏必须独占一行
社交图标按钮必须用btn + btn-outline-而非纯a
纯<a></a>标签在移动端点击区域小、无反馈、无障碍支持差。Bootstrap的btn类自带touch-action: manipulation和焦点管理，且btn-outline-系列能保持背景透明不遮挡图标。
- 图标用
<svg></svg>内联写法（避免字体图标加载失败导致空白），尺寸设width="20" height="20" - 每个按钮加
aria-label，如aria-label="关注我们的微博" - 禁用
btn-sm：小屏下1rem图标+文字太挤，统一用默认尺寸
版权年份动态更新不能靠document.write
document.write会阻塞渲染、破坏SPA路由，且无法处理时区差异。用new Date().getFullYear()插入到DOM里更安全。
- 给版权
<span></span>加id="copyright-year"，JS执行document.getElementById('copyright-year').textContent = new Date().getFullYear() - 如果项目用Webpack/Vite，可提前在构建时注入：
process.env.YEAR || new Date().getFullYear() - 避免写成
© 2020–2024硬编码——法律上“2020–2024”不如“2020–”严谨
响应式断点下文字溢出要用text-truncate而非overflow: hidden
Footer里“友情链接”或“合作伙伴”名称过长时，单纯overflow: hidden会截断字符导致语义丢失。text-truncate是Bootstrap封装的text-overflow: ellipsis，但只对display: inline-block或block生效。
- 对链接列表中的
<a></a>加text-truncate d-inline-block w-100 - 禁用
white-space: nowrap：否则小屏下整行文字被截成一个省略号 - 测试真机：iOS Safari对
text-overflow支持有延迟，需确保父容器有明确width（grid列已满足）
./icons/weibo.svg，上线后CDN域名变了就得批量替换。建议把所有社交图标转成内联<svg></svg>，或者用svg-sprite方案统一管理。
