Bootstrap只是CSS/JS框架，搭建宠物医院领养站需聚焦结构设计与避坑：三栏草图规划、精简样式、自定义卡片类、手动管理Modal、自主表单校验、语义化命名、路径规范及状态同步机制。
Bootstrap 本身不是网站生成器，它只是 CSS 和 JS 框架——想用它快速搭出宠物医院领养站，关键不在“用不用 Bootstrap”，而在“怎么组织结构、避免踩坑”。
别直接套用 Bootstrap 官方模板
官方示例（如 starter-template 或 album）默认带大量通用样式和占位图，但猫狗领养页有强业务逻辑：动物卡片需区分品种/年龄/健康状态、领养流程要分步骤、表单必须校验真实联系方式。硬套模板会导致后期删代码比写代码还累。
- 先画三栏草图：首页（轮播+待领养动物网格）、详情页（单只动物+领养申请表）、后台入口（仅管理员可见，不暴露在 Bootstrap 默认导航里）
- 删掉所有
bootstrap.min.css里没用的组件样式（比如.carousel-caption若不用轮播就干掉） - 领养卡片统一用
card，但必须加自定义 class 如card-cat/card-dog，方便后续 JS 区分处理
Bootstrap 5 的 data-bs-* 属性别乱绑事件
比如想点击“查看健康报告”弹出 Modal，别写 data-bs-toggle="modal" data-bs-target="#healthModal" 然后靠 JS 动态塞内容——Bootstrap 的 Modal 初始化是静态的，换动物时得手动调用 bootstrap.Modal.getInstance() 更新内容，否则第二次点同一按钮会显示上一只猫的信息。
- 领养表单提交前，用
document.getElementById('adoptForm').addEventListener('submit', ...)自己控制校验，别依赖form-control的默认提示 - 动物图片加载失败时，用
onerror="this.src='/img/placeholder-pet.jpg'"，Bootstrap不管这个 - 响应式断点选
md而非sm：手机上看并排两只猫太挤，col-md-6在中屏以上才双列更合理
领养申请表单的 required 和后端验证必须对齐
Bootstrap 的 form-control 只负责样式，required 属性触发的是浏览器原生校验（提示“请填写此字段”），但用户禁用 JS 或绕过前端时，后端收到空手机号照样存库——这在领养场景里是严重疏漏。
- 表单项必须带语义化
name：如name="adopter_phone"，别用name="phone1"这种无意义命名 - 手机号输入框强制加
type="tel"+pattern="[0-9]{11}"，iOS 键盘会自动切数字模式 - 提交按钮禁用逻辑写在 JS 里：
button.disabled = true，防止重复提交；成功后跳转到/success?pet_id=123而非刷新当前页
部署前检查三处容易被忽略的路径问题
本地开发用 file:// 打开 HTML 一切正常，一丢到 Nginx 就崩——多半是资源路径写死了。
- CSS/JS 引入别用
./css/bootstrap.min.css，改用根相对路径/css/bootstrap.min.css - 动物图片路径统一走
/assets/pets/目录，避免混在img/下和占位图搞混 - 如果用了
Bootstrap Icons，CDN 地址必须是https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css，少个版本号会 404
领养网站最麻烦的从来不是页面多好看，而是每只猫狗的状态变更（比如“已预约”变“已领养”）要实时同步到前端卡片、邮件通知、后台数据库三处——Bootstrap 帮不上忙，得自己设计状态字段和更新钩子。
