用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
里必须有<meta name="viewport" content="width=device-width, initial-scale=1">，否则响应式失效，手机预览一片糊 - 如果用本地文件，确认
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内——多一层<div> 就可能断行或错位 <li>别硬凑 12 列：比如导航栏想占全宽，就用 <code><div class="col-12">；想左 8 右 4，就写两个 <code><div class="col-md-8"> 和 <code><div class="col-md-4">；别写 <code>col-md-7+col-md-5还加空格标签，容易被浏览器解析出额外换行 - 移动端适配不是“自动发生”的：用
col-sm-*控制小屏，col-md-*控制平板，不写前缀（如col-6）表示“所有尺寸都生效”，慎用 - 导航栏：
<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>—— 替换里面<a class="nav-link"></a>的文字和href，删掉多余下拉菜单代码 - 轮播图（Carousel）：Bootstrap 4 用
<div id="carouselExampleSlidesOnly" class="carousel slide">，只留 3 张图，每张图用 <code><div class="carousel-item active">（第一张加 <code>active，其余不加） - 卡片（Card）：比手写 div+border 省力太多，
<div class="card"><div class="card-body"> <h5 class="card-title">标题</h5> <p class="card-text">内容</p> </div></div>，复制三遍就是首页三栏 - 表单元素：用
<input type="text" class="form-control">、<select class="form-control"></select>，别自己写 border 和 padding - 检查所有图片路径：本地图片用相对路径（如
img/logo.png），确保文件夹层级和 HTML 在同一级或按路径真实存在；用在线图床链接要稳定，别用临时生成的二维码图 - 删掉无用 JS 插件：比如模板里带的
responsiveSlides或Swiper，你没引入对应 JS 文件，控制台报Uncaught ReferenceError就算失败 - 确认首页文件名是
index.html：老师双击打开的一定是这个，别交成page1.html或main.html
哪些组件抄了就能用，且老师不扣分
作业评分重点是结构清晰、功能可点、视觉不丑。以下组件直接复制粘贴修改文字即可，几乎零风险：
交作业前必查的三个细节
很多同学代码逻辑没问题，但因细节被退回重做：
真正卡住人的从来不是 Bootstrap 多难，而是路径、大小写、引号全角半角、漏闭合标签这些“看不见的线”。把结构跑通，比花三天调一个圆角阴影重要得多。
