bootstrap分页中.active类必须加在上而非上，否则样式失效；.pagination-sm需作用于且仅在≥576px生效；php中须校验$_get['page']防xss和越界。
Bootstrap 分页中 .active 类必须加在 <li> 上，不是 <a></a>
很多人写完分页发现当前页没高亮，或者圆角/背景色不生效，问题往往出在结构错位。Bootstrap 5 要求 .active 必须作用于 <li class="page-item"> 元素，而不是里面的 <a class="page-link"></a>。如果只给 <a></a> 加 .active，CSS 选择器 .pagination .page-item.active .page-link 就匹配不到，样式自然失效。
常见错误写法：
正确写法：
- Bootstrap 4 和 5 都遵循这个规则，但 Bootstrap 3 是加在
<a></a>上的，混用旧模板容易踩坑 - 如果用了
.disabled（比如上一页不可点），也要加在<li>上，否则:hover仍会触发链接样式 - 当前页项建议同时加
.active和.disabled—— 既视觉高亮，又防止重复点击跳转
为什么 .pagination-sm 在小屏下不缩放？
.pagination-sm 的尺寸控制依赖 Bootstrap 5 的响应式断点，默认只在 ≥576px（sm 断点）生效。如果你在手机上看到它没变小，不是 CSS 没加载，而是媒体查询没命中。
检查你是否误用了旧写法：
❌ <nav class="pagination pagination-sm"></nav>（无效，.pagination-sm 必须放在 <ul></ul> 上）
✅ <ul class="pagination pagination-sm"></ul>
- 想让小屏也强制小号，可覆盖 CSS：
.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; } - 注意
.pagination-lg同理，它不会在超小屏（xs）放大，反而可能因行高溢出容器 - 如果项目禁用了 Bootstrap 的 Sass 变量，直接改
min-width或padding更可靠
PHP 渲染分页时 $_GET['page'] 不校验的后果
直接把 $_GET['page'] 拼进 href，看似省事，实际埋了两个雷：XSS 漏洞和第 0 页链接。
例如：
<a href="?page=<?=%20%24_GET['page']%20+%201%20?>">下一页</a>
当 URL 是
?page=abc，intval('abc') 返回 0，生成 ?page=1（看起来没事），但 ?page=1e2 可能被解析为 100，而 ?page=%3Cscript%3Ealert(1)%3C/script%3E 会直接执行脚本。
- 务必先过滤：
$page = (int) filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT); - 再做边界处理：
$page = max(1, min($page, $total_pages)); - 拼接 URL 时用
http_build_query()保留其他参数，避免丢失搜索条件或分类筛选
自定义当前页背景色时，别漏掉 :focus 和 :hover
只改 .pagination .page-item.active .page-link { background-color: #0056b3; }，用户键盘 Tab 到当前页时，焦点态还是默认蓝边；鼠标悬停时背景也可能闪一下再变色——因为 Bootstrap 原生写了 .page-link:hover 和 .page-link:focus。
要真正统一，得一并覆盖：
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
background-color: #0056b3;
border-color: #004085;
}
- 如果不加
:hover，鼠标移入当前页时会短暂恢复成未激活状态的背景色 - 屏幕阅读器用户依赖
:focus导航，漏掉它会影响无障碍访问 - 修改后记得清浏览器缓存，CSS 优先级冲突时用
!important是下策，优先调整选择器 specificity
