Bootstrap不能直接用于电子书阅读器，因其缺乏翻页、字体缩放、夜间模式及EPUB渲染能力；需弃用其排版类，手动定义阅读专用样式，用锚点滚动实现翻页，结合CSS自定义属性与媒体查询支持主题切换。
Bootstrap 本身不是为电子书阅读器设计的，它没有内置翻页、字体缩放、夜间模式或 EPUB 渲染能力；直接用 bootstrap.css 做“电子书阅读页”容易陷入布局错乱、文字可读性差、移动端翻页卡顿等问题。
为什么不能直接套用 Bootstrap 的栅格和排版类
Bootstrap 的 .container、.text-center、font-size 工具类面向通用网页，不是为长文本连续阅读优化：
- 行高（
line-height）默认值偏小，长时间阅读易疲劳 - 段落间距（
margin-bottom）固定，无法随字号缩放自适应 - 没有针对「段首缩进」
text-indent的响应式控制 - 在 iOS Safari 中，
overflow-x: hidden可能干扰双指缩放手势
如何用 Bootstrap 基础能力搭建可读性强的阅读容器
保留 Bootstrap 的 CSS 重置、响应式断点和辅助类，但放弃其排版工具，手动定义阅读专用样式：
<div class="reader-container"> <p class="reader-paragraph">第一章 开篇……</p> <p class="reader-paragraph">第二段文字……</p> </div>
对应 CSS（覆盖 Bootstrap 默认）：
- 设置
.reader-container最大宽度为65ch（比max-width: 720px更符合阅读舒适区） -
.reader-paragraph使用text-indent: 2em+margin: 1.8rem 0，且margin单位用rem保证缩放一致性 - 禁用
user-select: none—— 否则用户无法划词查词 - 对
img添加max-width: 100%和height: auto，防止溢出容器
翻页功能必须自己实现，别依赖 Bootstrap JS
Bootstrap 的 carousel 组件不适合电子书：它基于 DOM 切换、不支持锚点定位、无法记录阅读进度、滑动动画与文字渲染不同步。
- 推荐用「单页滚动 + 锚点跳转」：每章一个
id，用scrollIntoView({ behavior: 'smooth' })实现翻页 - 若需左右滑动翻页，用
touchstart/touchend计算位移，触发scrollLeft，而非bootstrap.Carousel - 保存当前页码用
localStorage.setItem('reader-page', chapterId)，而不是依赖data-bs-*属性 - 务必监听
resize和orientationchange，重新计算可视区域高度，避免翻页后内容截断
字体与夜间模式要绕开 Bootstrap 的 color 工具类
Bootstrap 的 text-white、bg-dark 是静态类，无法响应系统偏好或用户切换。真正可用的方式是：
- 用
@media (prefers-color-scheme: dark)写基础夜间样式 - 用
document.documentElement.setAttribute('data-theme', 'dark')配合 CSS 自定义属性：color: var(--reader-text, #333) - 字体加载用
@font-face引入思源宋体、霞鹜文楷等可读性高的开源字体，而非依赖font-family: system-ui - 禁止给
p标签写死font-size: 1rem—— 应使用clamp(1.1rem, 2.5vw, 1.4rem)保证小屏可读、大屏不撑满
真正的难点不在“怎么加 Bootstrap”，而在“怎么安全地绕过它”。阅读体验的细节——比如段落呼吸感、翻页时的滚动阻尼、夜间模式下灰度值是否真正降低蓝光——这些都得脱离框架控制，亲手调。
