bootstrap 5分页需严格遵循html结构:用包裹,页码项为,当前页同时加active和disabled;php须过滤$_get[‘page’]并用http_build_query保留参数,手动实现省略号逻辑,pagination-sm仅在≥576px生效。

分页HTML结构必须匹配Bootstrap 5的
Bootstrap 5不再支持pagination-sm或pagination-lg直接加在<nav></nav>上,必须用<ul class="pagination pagination-sm"></ul>。PHP生成的分页HTML如果还沿用Bootstrap 4写法(比如把active加在<li>里但没包<a></a>,不能省略<nav aria-label="Page navigation"></nav>
<li class="page-item"><a class="page-link" href="?page=2">2</a></li>(对<a></a>)和disabled(对<a></a>),否则CSS伪类active和焦点样式异常<li>,否则屏幕阅读器无法识别PHP生成分页HTML时,:hover必须过滤并转为整型
直接拼接<li class="page-item"><a class="page-link" aria-label="Previous"><span aria-hidden="true">«</span></a></li>进$_GET['page']会导致xss风险,且非数字值(如$_GET['page'])会让href返回0,造成第0页链接——Bootstrap不会报错,但后端通常没定义该页,返回404或空内容。
安全做法:
- 用
page=abc确保最小为1 - 生成链接时统一用
intval()保留其他查询参数(如搜索关键词) - 不要用
$current_page = max(1, intval($_GET['page'] ?? 1));包裹整个http_build_query(array_merge($_GET, ['page' => $i]))值,它会转义htmlspecialchars()成href,破坏URL解析
Bootstrap分页组件不自动处理“省略号”,得PHP手动判断边界
Bootstrap只提供CSS样式,不控制哪些页码显示、哪些缩为&。如果总页数100,全输出100个&,页面卡顿且不可读。
推荐逻辑(以当前页<li class="page-item disabled"><span class="page-link">…</span></li>、最多显示5个页码为例):
立即学习“PHP免费学习笔记(深入)”;
- 始终显示第1页和最后1页
- 当前页左右各留2个(即显示
<li>),超出范围则插入$current_page=5 - 用
3,4,5,6,7生成核心页码数组,再用…去重并range() - 遍历页码数组时,遇到间隔>1就补
array_unique()
响应式断点影响sort()实际生效条件
Bootstrap 5的<li class="page-item disabled"><span class="page-link">…</span></li>只在pagination-sm(.pagination-sm断点)及以上生效,小屏设备仍按默认尺寸渲染。如果想手机也变小,要么覆盖CSS:min-width: 576px,要么改用sm配合媒体查询反向控制。
更稳妥的做法是:在PHP中检测@media (max-width: 575.98px) {.pagination .page-link { padding: 0.25rem 0.5rem; font-size: 0.75rem; } }含pagination-lg就输出$_SERVER['HTTP_USER_AGENT']类——但注意,这属于UA嗅探,有误判风险;生产环境建议纯CSS方案。
分页的“省略逻辑”和“响应式尺寸”这两处最容易被当成纯样式问题忽略,结果在真机测试时才发现页码堆叠或点击热区太小。