用CDN引入Bootstrap（4需jQuery，5无需）、确保viewport标签和正确嵌套container/row/col、直接复用导航栏/轮播图/卡片/表单组件，交作业前检查图片路径、删冗余JS、文件名必须为index.html。

直接用 Bootstrap 4 或 5 搭一个能跑、能看、能交的作业页面，核心就三点：不写 CSS、少动 JS、结构套对就行。别纠结“完美”，先过审。

怎么引入 Bootstrap 而不翻车

学生交作业最常卡在这步——本地文件路径错、CDN 顺序乱、漏 jQuery（Bootstrap 4 必须）、或用了 Bootstrap 5 却照抄 4 的 data-toggle 写法。

• 优先用 CDN，别下压缩包再配路径：Bootstrap 4 用 https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css + 对应 JS；Bootstrap 5 则去掉 jQuery 和 Popper 的独立引入，但要把 data-toggle 全换成 data-bs-toggle
• HTML 里必须有 ，否则响应式失效，手机预览一片糊
• 如果用本地文件，确认 bootstrap.min.css 和 bootstrap.min.js 真在你写的相对路径下，比如 css/bootstrap.min.css 就不能写成 ./bootstrap/css/bootstrap.min.css（常见于从模板复制时路径没改）

栅格布局怎么套才不出错

Bootstrap 作业里 80% 的“排版乱”问题，其实只是没理解 .container / .container-fluid 和 .row / .col 的嵌套规则。

• 所有内容必须包在 .container（居中定宽）或 .container-fluid（满屏）里；.row 只能直接放在 container 内；.col 只能直接放在 .row 内——多一层
  就可能断行或错位
• 别硬凑 12 列：比如导航栏想占全宽，就用
  ；想左 8 右 4，就写两个

  和

  ；别写 col-md-7 + col-md-5 还加空格标签，容易被浏览器解析出额外换行
• 移动端适配不是“自动发生”的：用 col-sm-* 控制小屏，col-md-* 控制平板，不写前缀（如 col-6）表示“所有尺寸都生效”，慎用

哪些组件抄了就能用，且老师不扣分

作业评分重点是结构清晰、功能可点、视觉不丑。以下组件直接复制粘贴修改文字即可，几乎零风险：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 导航栏：
  —— 替换里面 的文字和 href，删掉多余下拉菜单代码
• 轮播图（Carousel）：Bootstrap 4 用
  ，只留 3 张图，每张图用

  （第一张加 active，其余不加）
• 卡片（Card）：比手写 div+border 省力太多，

  标题

  内容

  ，复制三遍就是首页三栏
• 表单元素：用 、，别自己写 border 和 padding

交作业前必查的三个细节

很多同学代码逻辑没问题，但因细节被退回重做：

• 检查所有图片路径：本地图片用相对路径（如 img/logo.png），确保文件夹层级和 HTML 在同一级或按路径真实存在；用在线图床链接要稳定，别用临时生成的二维码图
• 删掉无用 JS 插件：比如模板里带的 responsiveSlides 或 Swiper，你没引入对应 JS 文件，控制台报 Uncaught ReferenceError 就算失败
• 确认首页文件名是 index.html：老师双击打开的一定是这个，别交成 page1.html 或 main.html

真正卡住人的从来不是 Bootstrap 多难，而是路径、大小写、引号全角半角、漏闭合标签这些“看不见的线”。把结构跑通，比花三天调一个圆角阴影重要得多。