手机端小说阅读器核心UI特征包括：无干扰纵向流式排版、首行缩进+行高≥1.7、CSS变量驱动的柔和夜间模式（非bg-dark）、固定定位低z-index翻页按钮、禁用Bootstrap默认段落重置、手势翻页需原生touch事件实现。
手机端小说阅读器需要哪些核心 UI 特征
直接说结论：Bootstrap 本身不推荐用于纯小说阅读器界面，尤其在移动端。它默认的栅格、间距、字体缩放和触摸交互逻辑，和小说阅读场景存在根本冲突——比如 container 强制居中留白、font-size 响应式断点对段落行高干扰大、btn 类自带阴影/边框/过渡，全都不适配沉浸式阅读。
但如果你已用 Bootstrap 搭建了后台或用户系统，只是想快速套一层“像阅读器”的外壳，可以保留其 CSS 加载机制，但必须覆盖掉几乎所有默认样式。
关键特征要手动实现（不能依赖 Bootstrap 组件）：
- 无滚动条干扰的纵向流式排版（
overflow-y: scroll配合-webkit-overflow-scrolling: touch） - 段落首行缩进 + 行高 ≥ 1.7（移动端防误触+易读）
- 夜间/日间模式切换（靠自定义 CSS 变量，不是
bg-dark这类简单类） - 翻页按钮需固定定位 + 低 z-index，避免遮挡文字
如何绕过 Bootstrap 默认字体和间距重置阅读样式
Bootstrap 的 reboot.css 会重置 p、body、line-height，导致段落挤在一起或缩进丢失。必须在引入 Bootstrap CSS 后，立即用更高优先级规则覆盖：
:root {
--reading-font-size: 16px;
--reading-line-height: 1.75;
--reading-indent: 2em;
}
<p>.reading-content p {
margin: 0 0 1.2em 0;
text-indent: var(--reading-indent);
line-height: var(--reading-line-height);
font-size: var(--reading-font-size);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}</p><p>/<em> 禁用 Bootstrap 对 p 的 margin-bottom 重置 </em>/
@media (max-width: 768px) {
.reading-content p {
font-size: 18px; /<em> 移动端适当放大 </em>/
}
}
注意：不要用 text-lg 或 fs-5 这类 Bootstrap 字体工具类，它们响应式断点会破坏阅读连贯性；也不要依赖 mb-3 控制段间距，它无法保证跨设备一致。
夜间模式切换为什么不能只靠 bg-dark text-white
Bootstrap 的 bg-dark 是深灰（#212529），text-white 是纯白（#fff），对比度高达 14:1，长时间阅读极易视疲劳。真实阅读器夜间模式需要柔和对比（建议 10:1 左右）和暖色温。
正确做法是用 CSS 变量 + JS 切换 class：
- 定义两套变量：
--bg-color/--text-color/--hl-color（高亮色） - 用
document.body.classList.toggle('night-mode')切换，而非反复操作 classList.add/remove - 夜间模式下禁用
img的默认边框（Bootstrap 会给img加border-style: solid）
示例关键 CSS：
body {
background-color: var(--bg-color, #fff);
color: var(--text-color, #333);
transition: background-color 0.3s, color 0.3s;
}
<p>body.night-mode {
--bg-color: #2d2b3a;
--text-color: #e6e1f0;
--hl-color: #8a7bff;
}</p><p>body.night-mode img {
border: none;
}
翻页按钮怎么做到不抢焦点又支持触控
Bootstrap 的 btn 类自带 outline、box-shadow、transition 和键盘 focus 样式，在阅读时点击会闪、有延迟、还可能触发虚拟键盘。必须剥离：
- 用
<button type="button" class="page-nav-btn"></button>，去掉所有btn-*类 - 绝对定位靠边，但
z-index: 2（不能太高，否则盖住选中文本） - 添加
touch-action: manipulation提升 iOS 触控响应 - 禁用 outline：
outline: none，改用box-shadow: 0 0 0 2px var(--hl-color)作为聚焦提示（仅键盘用户）
示例结构：
<button type="button" class="page-nav-btn page-nav-btn-prev" aria-label="上一章"></button>
<button type="button" class="page-nav-btn page-nav-btn-next" aria-label="下一章"></button>
<p>.page-nav-btn {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: rgba(0,0,0,0.15);
border-radius: 50%;
color: #fff;
touch-action: manipulation;
outline: none;
}
真正难的是手势翻页（左滑/右滑）——这和 Bootstrap 完全无关，得用 touchstart/touchmove 自行计算位移，且要避开 input、textarea 区域误触发。这部分没法用框架替代。
