Bootstrap 不提供企业宣传画册模板，直接套用易致PC感重、触控差、加载慢；应精简使用Bootstrap 5 CSS、禁用冗余组件、优化图片加载与微信兼容性。
Bootstrap 本身不提供“企业宣传画册”这种业务型页面模板，直接套用 bootstrap.min.css 加几个 card 或 carousel 很容易做出 PC 感浓重、触控体验差、加载慢的“伪响应式”页面——这不是 Bootstrap 不行，而是没对准手机端画册的真实需求。
手机画册页面 ≠ 响应式官网首页
用户滑动看产品图、点开看详情、分享到微信、快速加载不卡顿——这些才是核心。Bootstrap 的栅格和组件默认为多端兼顾设计，反而在手机上引入多余样式、JS 依赖和 DOM 节点。
- 避免用
container-fluid+ 大量row/col堆砌内容：手机竖屏下频繁重排、文字缩放异常 - 慎用
carousel：原生轮播依赖jQuery和过渡动画，低端安卓机易掉帧，且自动播放干扰用户自主浏览 - 图片必须懒加载：宣传页常含 10+ 张 2MB+ 的高清图，全量加载会让首屏超过 5 秒
- 分享功能需手动补全：
meta标签里的og:title、og:image不是 Bootstrap 提供的，漏掉就无法在微信里正确预览
用 Bootstrap 5（无 jQuery）精简起步
Bootstrap 5 已移除 jQuery 依赖，更适合轻量画册场景。关键不是“用全”，而是“只取所需”。
- 只引入
bootstrap.min.css（CSS 部分），跳过 JS 文件（除非你真要用offcanvas做菜单） - 禁用非必要 CSS：在自定义 CSS 中覆盖
.navbar、.pagination等完全用不到的样式，减小体积 - 用
col-12替代col-md-6：手机端无需断点判断，所有列强制占满宽度，减少重排计算 - 按钮交互改用原生
:active伪类，而非 Bootstrap 的btn-primary动画，更省资源
图片与内容流必须脱离 Bootstrap 控制
宣传画册的核心是视觉流，而 Bootstrap 的 img-fluid 只做等比缩放，不解决分辨率适配、格式降级、加载状态反馈等问题。
- 图片路径统一走
srcset+sizes：<img src="pic-400.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w, pic-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, 800px"> - 每张图加
loading="lazy"属性（现代浏览器原生支持，无需 JS） - 用
picture元素兜底 WebP：<picture> <source srcset="pic.webp" type="image/webp"> <img src="pic.jpg" alt="产品图"> </picture>
- 文字说明用
text-center+ 手动调font-size: clamp(1rem, 4vw, 1.25rem)，避免小屏字太小、大屏字撑破
微信内打开时的兼容细节
90% 的企业画册实际使用场景是微信内置浏览器，它对 viewport、字体渲染、滚动行为有特殊处理。
- 必须设置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，否则双击放大或缩放会打乱布局 - 禁用
-webkit-overflow-scrolling: touch（已废弃），改用overscroll-behavior: contain防止下拉刷新误触 - 字体优先用系统默认：iOS 用
-apple-system，Android 用system-ui，别硬塞font-family: 'PingFang SC'导致 fallback 失败 - 分享链接的
og:image必须是 HTTPS 且尺寸 ≥ 300×300，否则微信显示空白缩略图
真正难的不是怎么用 Bootstrap，而是敢不用它的默认交互逻辑、敢删它的冗余 CSS、敢绕过它的 JS 组件去直连底层 DOM 和原生 API。手机画册页面越“像原生 App”，用户停留时间越长——而这恰恰需要你把 Bootstrap 当作 CSS 工具库，而不是页面生成器。
