主题
移动端项目实战（二）
本页对应 移动端项目实战，共 6 段视频，约 59 分钟。
学习目标
- 能独立引入 Bootstrap CSS，并使用
container或container-fluid创建居中版心或全屏容器布局。 - 能使用栅格系统的
row、col-*及响应式断点类，在不同屏幕宽度下实现一行指定数量的盒子布局。 - 能使用
btn基础类及btn-primary、btn-warning、btn-lg、btn-sm等类快速创建、区分和调整按钮样式。 - 能使用
table、table-bordered、table-hover、table-striped及行状态类完成带边框、隔行变色、悬停效果和状态标识的表格。 - 能使用 Bootstrap 的导航、面包屑和分页类名快速搭建对应导航结构并验证显示效果。
- 能复制并修改 Bootstrap 组件（如导航条、轮播图），根据组件是否需要交互正确引入对应 JavaScript 文件。
知识点
简介：为什么需要 Bootstrap
为什么需要：自己从零写按钮、表格、导航、响应式布局，重复劳动多，还容易在不同屏幕下排版错乱。Bootstrap 是 Twitter 开发维护的前端 UI 框架，提供大量写好的 CSS 样式，配合一定 HTML 结构和 JavaScript，可以快速做出功能完善的网页及常见交互效果。中文官网是 https://www.bootcss.com/。
怎么想：把它理解成“别人已经写好的样式库 + 组件库”。我们不是背所有类名，而是学会按官方文档找结构、复制类名，再按项目修改。
怎么做：先下载 Bootstrap V5 中文文档中的生产文件，解压后把需要的 CSS、JS 等文件放进项目目录。笔记中的下载入口如下：
易错点：下载的是压缩包，要先解压；项目中引入的是解压后 CSS 目录里的 bootstrap.min.css，不是把整个压缩包直接丢进页面。
使用步骤：先引入，再写容器
为什么需要：Bootstrap 的类名只有先引入 CSS 才会生效；同时它希望页面内容放在容器里，才能获得合适的宽度、居中和内边距。
怎么想：转写里反复强调“先引入 CSS，第二步准备容器盒子，内容写到容器里”。container 是响应式布局版心类，打开页面能看到内容居中，并带有左右 padding；container-fluid 则是全屏宽度。当前阶段没用到 JS，所以只引 CSS。
怎么做：先引入 Bootstrap CSS 文件：
html
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">再调用类名 container：
html
<div class="container">测试</div>易错点：路径要按自己项目实际目录写；不要漏掉 container 就直接写内容；需要交互组件时再引入 JS，不要误以为所有组件都必须引 JS。
栅格系统：把一行分成 12 份
为什么需要：同一个页面在手机、平板、PC 上要显示不同列数，靠固定宽度很难做，栅格系统就是实现响应式布局的核心。
怎么想：转写里用“一行 4 个盒子”推导：整行固定 12 份，12÷4=3，所以每个盒子占 3 份。row 表示行，内部用 flex 布局让内容排在一行；一行最多 12 列，超过会换行。不同屏幕用不同断点类名控制占几份。Bootstrap 5 常见断点为：sm 约 576、md 约 768、lg 约 992、xl 约 1200、xxl 约 1400。转写中把最小屏说成 col-xs，实际 Bootstrap 5 已移除 xs，最小屏可直接写 col-6，带断点写 col-md-6 等，以官方文档为准。
怎么做：先写 container，里面写 row，再在行里写列并设置份数；调试时拖动浏览器窗口，在 768、992、1200 等宽度附近观察一行从 2 个变 4 个的效果。
易错点：row 里列份数总和超过 12 会换行；不要只写 col 就以为能固定列数；不同设备类名要按“从哪个断点开始生效”理解。
按钮与表格：用现成类名减少重复样式
为什么需要：自己写按钮要加宽高、颜色、圆角、hover；表格要加边框、隔行变色。Bootstrap 已把这些样式类准备好。
怎么想：按钮必须保留基础类 btn，再叠加 btn-success、btn-warning 等表示语义；尺寸用 btn-lg、btn-sm。表格同理，table 是基础类，table-striped 隔行变色，table-success 等表示行颜色。转写里专门验证过：删掉 btn 按钮样式会散，说明基础类不能乱删。
怎么做：按钮写 class="btn btn-primary" 一类组合；表格先写 class="table"，需要边框、隔行变色再追加对应类名。调试时逐个添加类名刷新观察变化。
易错点：只写 btn-primary 不写 btn；表格只写颜色类不写 table；不要随意删除组件原有结构类名。
组件：复制结构，按需引入 JS
为什么需要：轮播图、导航条、下拉菜单等不是单个类名能完成的，组件已经把结构、样式和交互准备好了。
怎么想：转写里说组件比普通样式“更高级”，使用套路是：引入样式表 → 需要 JS 的再引入 JS 文件 → 复制官方结构 → 修改内容。导航条不一定需要 JS，轮播图通常需要 JS。
怎么做：到官方文档组件区找目标效果，复制示例代码，改 logo、链接、文字；若复制后没样式，先检查 CSS 是否引入；若交互不动，再检查 JS。
易错点：组件复制后不要乱删关键类名；需要 JS 的组件漏引 JS；导航条左右布局等细节要结合官方结构和工具类调试，不能凭感觉改。
字体图标：复制 fonts，引入 CSS，调用类名
为什么需要：图标能减少图片资源，按钮、导航里也常用。Bootstrap Icons 提供现成图标类名。
怎么想：下载图标库后，关键是 fonts 文件夹和 bootstrap-icons.css 的路径关系；CSS 引入后，用 bi-* 类名显示图标。
怎么做：导航 / Extend → 图标库 → 安装 → 下载安装包；把 fonts 文件夹复制到项目目录；网页引入 bootstrap-icons.css；调用类名：
html
<i class="bi-android2"></i>易错点：只引 CSS 不复制 fonts，图标会加载失败；类名前缀写错；路径要相对 bootstrap-icons.css 能正确找到字体文件。
准备工作
这一节开始做“腾讯全端 / AlloyTeam”综合案例。转写稿里反复强调：使用 Bootstrap 的第一步不是急着写页面，而是先把框架文件放好、按顺序引入。因为 Bootstrap 是框架，它自带大量样式和组件；我们自己的 index.css 必须放在框架 CSS 后面，利用 CSS 的层叠性覆盖框架默认样式。转写稿里说的“层叠性：我们的 css 要层叠框架的”，就是这个意思。
怎么做：HTML 中先引入 Bootstrap 样式、字体图标，再引入自己的 index.css；JS 放在后面。Less 文件用 // out: ../css/ 指定编译输出到 css 目录。
html
<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：我们的css 要 层叠 框架的 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./Bootstrap/js/bootstrap.min.js"></script>less
// out: ../css/易错点：自定义样式不要写在 Bootstrap CSS 前面，否则容易被框架覆盖；路径要按实际文件夹检查，转写稿里也提醒“引错就麻烦”。
头部导航
为什么需要：案例顶部是固定导航，Bootstrap 的 navbar 组件已经写好结构和响应式折叠效果，直接复制改内容即可。转写稿说组件就是“结构、内容、效果都已经有了”，我们复制后修修改改。怎么想：用 navbar navbar-expand-lg 做响应式导航，fixed-top 固定顶部，container 做版心；菜单折叠依赖 data-bs-toggle="collapse" 和对应 data-bs-target。
html
<!-- 导航 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TWeb Conf</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SuperStar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Web前端导航</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
</div>
</div>
</nav>less
// 导航
.bg-body-tertiary {
background-color: transparent !important;
.navbar-collapse {
flex-grow: 0;
}
}易错点：!important 用来覆盖框架背景；.navbar-collapse 默认会占满剩余空间，flex-grow: 0 让菜单不要撑开。调试时先看导航结构是否在 container 内，再看折叠按钮的 data-bs-target 是否和 id="navbarNav" 一致。
轮播图图片
为什么需要：轮播图用 Bootstrap 的 carousel 组件，但图片不一定用 img 写死，而是给每个 carousel-item 设置背景图，便于统一控制高度、cover 裁切和位置。转写稿提到轮播图这类组件需要 JS，所以前面已引入 bootstrap.min.js。怎么想：先保留组件结构，四个 carousel-item 分别加背景图；高度先设 500px，背景 cover、位置 center 0。
html
<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>less
.carousel {
.carousel-item {
height: 500px;
background-size: cover;
background-position: center 0;
}
.carousel-item:nth-child(1) {
background-image: url(../assets/uploads/banner_1.jpg);
}
.carousel-item:nth-child(2) {
background-image: url(../assets/uploads/banner_2.jpg);
}
.carousel-item:nth-child(3) {
background-image: url(../assets/uploads/banner_3.jpg);
}
.carousel-item:nth-child(4) {
background-image: url(../assets/uploads/banner_4.jpg);
}
}易错点：id、data-bs-target、data-bs-slide-to 必须对应；第一个 carousel-item 要有 active；nth-child 是按父级子元素计数，若在 carousel-inner 里插入别的元素会导致背景图错位。
轮播图响应式
为什么需要：不同设备高度不能都 500px，否则手机端太高。怎么想：用媒体查询覆盖 .carousel-item 高度：小于 768 用 250，大于等于 768 用 400，大于等于 992 用 500。转写稿里说的“响应式就是同一段代码在不同设备下布局不一样”，这里就是高度变化。
less
// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {
// 响应式 → 媒体查询
@media (max-width: 768px) {
.carousel-item {
height: 250px;
}
}
@media (min-width: 768px) {
.carousel-item {
height: 400px;
}
}
@media (min-width: 992px) {
.carousel-item {
height: 500px;
}
}
.carousel-item {
// height: 500px;
background-size: cover;
background-position: center 0;
}
}易错点：max-width: 768px 实际包含 768，和注释“小于768”有边界差异；媒体查询顺序会影响覆盖结果，后面的规则会覆盖前面的。
开源项目响应式
为什么需要：开源项目区域在大屏一行 4 个，中屏一行 2 个。转写稿里反复纠正的“三格系统”其实是“栅格系统”：Bootstrap 把一行分成 12 份，col-lg-3 表示大屏每列占 3 份，12÷3=4 个；col-md-6 表示中屏每列占 6 份，12÷6=2 个。怎么想：先写 container 版心，再写标题和 row，列上同时写 col-lg-3 col-md-6。超过 12 份会自动换行。
html
<!-- 开源项目 -->
<div class="project container">
<div class="title">
<h2>OpenSource / 开源项目</h2>
<p>种类众多的开源项目，让你爱不释手</p>
</div>
<div class="content">
<div class="row">
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
</div>
</div>
</div>less
// 开源项目
// 视口宽度大于992；一行排4个盒子 col-lg-3
// 视口宽度大于768；一行排2个盒子 col-md-6
.project {
margin-top: 60px;
text-align: center;
}易错点：row 的直接子元素才适合放列；类名顺序不影响断点生效；调试时拖动窗口看 768、992 断点是否切换。
开源项目内容布局
为什么需要：四个格子需要统一尺寸、颜色和圆角，点击区域最好铺满整个格子。怎么想：给 a 设 display:block，让它变成块级元素，宽高才能撑满父级；再用 nth-child 给四个格子分别设背景色。转写稿提醒过：行内元素直接设高度往往不生效，所以这里必须块级化。
html
<!-- 开源项目 -->
<div class="project container">
<div class="title">
<h2>OpenSource / 开源项目</h2>
<p>种类众多的开源项目，让你爱不释手</p>
</div>
<div class="content">
<div class="row">
<div class="col-lg-3 col-md-6"><a href="#">1</a></div>
<div class="col-lg-3 col-md-6"><a href="#">1</a></div>
<div class="col-lg-3 col-md-6"><a href="#">1</a></div>
<div class="col-lg-3 col-md-6"><a href="#">1</a></div>
</div>
</div>
</div>less
.project {
margin-top: 60px;
text-align: center;
.row {
div {
margin-bottom: 10px;
height: 200px;
// background-color: pink;
a {
// 块级的宽度和父级一样大
display: block;
height: 200px;
background-color: green;
border-radius: 4px;
}
&:nth-child(1) a {
background-color: #70c3ff;
}
&:nth-child(2) a {
background-color: #fd6a7f;
}
&:nth-child(3) a {
background-color: #7f8ea0;
}
&:nth-child(4) a {
background-color: #89d04f;
}
}
}
}易错点：a 忘记 display:block 时高度可能不生效；nth-child 数的是 .row 下 div 的顺序；margin-bottom 保证换行后有间距。调试时先看栅格断点，再看 a 是否铺满格子。
课件图示
代码示例
示例 1：Bootstrap 基本使用 + 栅格系统（响应式开源项目卡片）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 基本使用 + 栅格系统</title>
<!-- 第一步：引入 Bootstrap CSS（本地路径：./Bootstrap/css/bootstrap.min.css） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
/* 自己的样式写在框架样式之后，利用层叠性覆盖框架 */
.project {
margin-top: 60px;
text-align: center;
}
.project .row div {
margin-bottom: 10px;
height: 200px;
}
.project .row div a {
/* a 是行内元素，必须转成块级，宽度才能撑满父级 */
display: block;
height: 200px;
background-color: green;
border-radius: 4px;
}
.project .row div:nth-child(1) a { background-color: #70c3ff; }
.project .row div:nth-child(2) a { background-color: #fd6a7f; }
.project .row div:nth-child(3) a { background-color: #7f8ea0; }
.project .row div:nth-child(4) a { background-color: #89d04f; }
</style>
</head>
<body>
<!-- 第二步：准备容器（版心），内容都写在容器里 -->
<div class="container">
测试
</div>
<!-- 开源项目：视口 >=992 一行 4 个（col-lg-3），>=768 一行 2 个（col-md-6） -->
<div class="project container">
<div class="title">
<h2>OpenSource / 开源项目</h2>
<p>种类众多的开源项目，让你爱不释手</p>
</div>
<div class="content">
<div class="row">
<div class="col-lg-3 col-md-6"><a href="#">1</a></div>
<div class="col-lg-3 col-md-6"><a href="#">2</a></div>
<div class="col-lg-3 col-md-6"><a href="#">3</a></div>
<div class="col-lg-3 col-md-6"><a href="#">4</a></div>
</div>
</div>
</div>
</body>
</html>关键行 / 易错点
link引入的是bootstrap.min.css（生产文件），路径别指到dist或.js上；样式没生效先查这一步。- 用 Bootstrap 必须先有容器：
.container是自带版心 + 左右 padding + 居中的盒子；.container-fluid是 100% 全屏。笔记强调“不管写啥，最好先写到容器里”。 .row表示一行（flex 布局），一行被平分成 12 份，一行最多 12 个列，超出自动换行。col-lg-3 col-md-6是“设备 + 份数”：lg表示 ≥992px 时每个盒子占 3 份（12÷3=4 个一行），md表示 ≥768px 时占 6 份（12÷6=2 个一行），小于 768 时不写就是整块独占一行。- 易错点：
col-*必须是.row的直接子元素，中间不要再套一层div，否则栅格失效。 - 易错点：自己写的
index.css一定要放在bootstrap.min.css之后，靠层叠性覆盖框架。
示例 2：全局样式——按钮类 + 表格类
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮类 & 表格类</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!-- 按钮：btn 是基础类，必须保留 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-success btn-lg">成功·大按钮</button>
<button type="button" class="btn btn-warning btn-sm">警告·小按钮</button>
<button type="button" class="btn btn-danger" disabled>危险·禁用</button>
<!-- a 标签同样可以套 btn 类名 -->
<a href="#" class="btn btn-outline-primary">链接按钮</a>
<!-- 表格：table 默认样式，其余是可选增强类 -->
<table class="table table-striped table-bordered table-hover mt-5">
<thead>
<tr>
<th>品牌</th>
<th>价格</th>
<th>数量</th>
<th>评价</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>华为</td><td>3666.00</td><td>3</td><td>很不错</td>
</tr>
<tr class="table-danger">
<td>苹果</td><td>6666.00</td><td>6</td><td>很贵</td>
</tr>
<tr class="table-warning">
<td>三星</td><td>166.00</td><td>1</td><td>爆炸</td>
</tr>
<tr>
<td>小米</td><td>2006.00</td><td>2</td><td>暖暖宝宝</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>关键行 / 易错点
- 按钮必须同时有
btn（基础类）和btn-xxx（颜色/风格类）。删掉btn就变成浏览器原生按钮，这是最常见的错。 - 颜色后缀就是单词本身：
btn-primary/btn-success/btn-warning/btn-danger，照文档里“写啥是啥”。 - 尺寸类
btn-lg（大）/btn-sm（小）要跟btn一起写；只写btn-sm不写btn是没样式的。 - 表格同理：
table是基础类，table-striped（隔行变色）、table-bordered（边框）、table-hover（悬停高亮）是可选增强类；行级颜色用table-success/table-danger/table-warning。 - 易错点：
table默认没有边框，想要边框必须额外加table-bordered。 - 这些样式全部是框架写好的，只加类名、不写 CSS，别自己再重复造轮子。
示例 3：组件（导航条 navbar）+ 字体图标
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航条组件 + 字体图标</title>
<!-- 1. 引入框架 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- 2. 引入字体图标 CSS（本地：./Bootstrap/font/bootstrap-icons.css） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- 3. 自己的样式放最后 -->
<style>
/* 覆盖框架背景色，需要 !important */
.bg-body-tertiary {
background-color: transparent !important;
}
/* 让导航菜单不撑满，靠右排列 */
.bg-body-tertiary .navbar-collapse {
flex-grow: 0;
}
</style>
</head>
<body>
<!-- 4. 复制组件结构，只改内容 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">博客</a></li>
<li class="nav-item"><a class="nav-link" href="#">Github</a></li>
<li class="nav-item"><a class="nav-link" href="#">TWeb Conf</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 80px;">
<!-- 字体图标：基础类 bi 必须有，后面跟具体图标类名 -->
<p><i class="bi bi-android2"></i> 字体图标</p>
</div>
<!-- 5. 组件用到 JS 效果（折叠菜单 / 轮播 / 下拉）就必须引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>关键行 / 易错点
- 组件的三步走：引入样式表 → 引入 JS 文件 → 复制结构改内容。像纯展示的导航条、面包屑可以只引 CSS；但带折叠按钮、轮播图、下拉菜单的组件必须引
bootstrap.min.js（用bundle版自带 Popper，更省事）。 navbar-expand-lg决定断点：≥992px 展开成横向菜单，小于 992px 收起为汉堡按钮。data-bs-toggle="collapse"和data-bs-target="#navbarNav"必须和下面id="navbarNav"对应上，id 写错就点不开。fixed-top让导航固定顶部，会盖住内容，所以下面容器要补padding-top。- 想改框架自带颜色（如
.bg-body-tertiary），自己的选择器要写在框架 CSS 之后，并用!important提权，否则被框架样式压住不生效。 - 字体图标：
fonts文件夹要随bootstrap-icons.css一起拷进项目；i标签上基础类bi不能省（笔记里简写为bi-android2，实际要写bi bi-android2），否则只出方块不出图标。 - 易错点：JS 文件路径别引成
bootstrap.min.css或bootstrap.js之外的dist内部文件；<script>一般放在</body>之前。
常见错误
1. 样式全丢，页面是"裸 HTML"
- 现象：引入了
<link>，但按钮、栅格、表格全无样式。 - 原因：引错了文件（引成
bootstrap-grid.css、bootstrap.js，或路径少一层./Bootstrap/css/），也可能是引了未压缩版却写错文件名。 - 修法：只认
bootstrap/css/bootstrap.min.css；打开浏览器 Network 面板看该请求是否 200，红叉就是路径问题。
2. 自己写的样式改不动框架
- 现象：给导航加背景色，写了
.navbar { background: red }无效。 - 原因：框架用同类名选择器且后加载，层叠覆盖了你；或框架类本身带
!important（如bg-body-tertiary）。 - 修法：自己的
index.css一定放在框架 CSS 之后；必要时提高权重或用!important（案例中就是.bg-body-tertiary { background-color: transparent !important; }）。
3. 栅格"挤不进去"或出现横向滚动条
- 现象：4 个
col-lg-3中有一个掉到下一行；或页面底部多出一条横向滚动条。 - 原因：
.row自带负 margin，必须放在.container里；.col-*必须直接放在.row里，中间多套一层 div 就断了；每行份数之和超过 12 就换行。 - 修法：严格
container > row > col三层结构；算清份数（12 ÷ 每行个数）。
4. 写了 col-md-6，手机上看还是满宽一行一个
- 现象：小屏不按预期变成两列，怀疑类名写错。
- 原因：
md是min-width:768px的断点，小屏根本不吃这条规则，此时列宽回落到 100%。 - 修法：小屏也要控制就补无前缀类，写成
col-12 col-md-6（Bootstrap 5 中无前缀即超小屏）。
5. 按钮"变形"：字贴着边、没有内边距
- 现象：只写了
btn-primary，出来一个奇怪的色块。 - 原因：
btn是基础类，负责 padding、圆角、行高、过渡；btn-primary只负责配色。 - 修法：
btn btn-primary，尺寸类btn-lg/btn-sm同理必须与btn同时存在。
6. 复制了组件结构，但轮播图不动、导航汉堡点不开
- 现象：结构一模一样，交互为零。
- 原因：这类组件依赖 JS（Bootstrap 5 需
bootstrap.bundle.min.js，含 Popper），没引或引在<head>里。 - 修法：在
</body>前引入 bundle 版；再检查data-bs-target的 id 与目标元素 id 是否一致（复制后忘改 id 是高频坑）。
7. 字体图标显示成方框
- 现象：
<i class="bi-android2"></i>出来一个"豆腐块"或空白。 - 原因：只复制了
bootstrap-icons.css，没把fonts目录一起拷到同级；或类名拼错。 - 修法：
fonts文件夹与 css 保持相对位置不变，整包拷贝。
练习
1. 栅格换算（口算题） 一行放 4 个 / 3 个 / 2 个 / 6 个盒子，col-lg-* 分别填几？如果要"大屏 4 个、中屏 2 个、小屏 1 个"，写出完整类名串。
2. 结构排错 下面结构为什么不生效？改正它。
html
<div class="row">
<div class="container">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
</div>3. 响应式轮播图 用 4 张背景图做轮播：视口 <768px 高 250px，≥768px 高 400px，≥992px 高 500px，图片铺满且水平居中。写出 HTML 骨架要点与 less 代码。
4. 组件落地 从文档复制一个导航条，要求：固定在顶部、背景透明、小屏折叠成汉堡菜单、右侧菜单项靠右（flex-grow:0）。列出你需要额外引的文件和需要改写的类。
5. 顺序题 把下列 5 行打乱后排序，并说明每条的理由：bootstrap.min.css / bootstrap-icons.css / index.css / bootstrap.bundle.min.js / 页面 HTML 主体。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | bootstrap的基本使用 | 06:59 |
| 2 | 栅格系统 | 23:52 |
| 3 | 按钮类 | 06:51 |
| 4 | 表格类 | 07:53 |
| 5 | 导航 | 05:13 |
| 6 | 组件 | 09:09 |
小结
- 用 Bootstrap 只有三步：引对 CSS → 套容器 → 加类名；90% 的"没效果"死在前两步。
- 类名体系是"基础类 + 修饰类"的组合（
btn+btn-success、table+table-striped），基础类不可省，修饰类可叠加。 - 栅格的心智模型只有一句：一行 12 份，每个盒子占几份自己定，超了就换行；
col-md-*是"从 768 起生效"，不是"768 以下"。 - 响应式不需要写媒体查询也能做——同一元素挂多个断点类名即可（
col-12 col-md-6 col-lg-3），媒体查询只留给高度、背景图这类栅格管不到的东西。 - 组件 = 结构 + 样式 + 交互，复制即用、按需改内容；带交互的必须配
bundle.min.js，纯展示的不用引 JS。 - 层叠顺序永远是：框架 CSS → 图标 CSS → 自己的 CSS，自己的写最后才压得住；改不动就是顺序或权重问题，不是框架的锅。
- 遇到不会的先去中文文档按图索骥——会查文档比背类名值钱，Bootstrap 的类名都是"英文单词直译"，能读出来就能猜出来。
- 综合案例的套路：框架负责骨架和响应式，less 负责品牌色、图片、间距等个性化，两者用"后置覆盖"衔接，不要试图改框架源码。