移动端项目实战（三）

本页对应移动端项目实战，共 6 段视频，约 1 小时 0 分。

学习目标

能独立引入轮播图组件所需的 CSS 与 JS 文件，并基于组件示例完成带指示器、可切换图片的轮播图效果。
能引入并使用图标字体库，通过类名插入图标，并使用字体大小、颜色等 CSS 属性调整图标样式。
能完成综合案例的项目准备：建立 HTML 页面，按正确顺序引入框架 CSS、图标 CSS 和自定义 CSS，并说明自定义样式需后引入的原因。
能改造导航组件，使用 Flex 布局实现左右分布，并通过固定定位使导航栏固定在视口顶部。
能使用背景图替代轮播图片，并结合媒体查询在不同断点下设置轮播容器高度，实现响应式效果。
能使用栅格系统完成响应式内容布局，并通过嵌套元素、内边距和背景色实现不同屏幕宽度下的分栏与间距效果。

知识点

准备工作

为什么需要：综合案例要同时使用 Bootstrap 的 CSS、图标 CSS、自己的 less 编译产物和 Bootstrap 的 JS，先把资源按正确顺序引入，后面组件才能正常显示和交互。
怎么想：笔记强调“层叠性：我们的 css 要层叠框架的”，所以自己的 index.css 必须放在框架 CSS 后面；JS 放到页面底部引入。
怎么做：建立 HTML 页面，引入 favicon、Bootstrap CSS、图标 CSS、自己的 CSS，再引入 Bootstrap JS；less 文件用 // out: ../css/ 输出到 css 目录。
易错点：自己的 CSS 放在框架前面会被覆盖；漏引 JS 会导致轮播图、折叠导航没有效果。课上调试时还先确认素材目录，再逐步替换图片和样式。

项目素材目录结构

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/

头部导航

为什么需要：页面顶部需要固定导航，并且左侧 logo、右侧菜单要一左一右排列。
怎么想：用 Bootstrap 的 navbar 组件复制结构；去掉 container 的满屏影响可用版心控制；用 flex-grow: 0 让右侧菜单不占满剩余空间；用 fixed-top 固定导航。
怎么做：保留 navbar-expand-lg、collapse 等结构；在 less 中把 .bg-body-tertiary 背景改为透明并加 !important，同时设置 .navbar-collapse { flex-grow: 0; }。
易错点：课上先用 orange 确认背景类生效，再改 transparent，否则透明后可能看不清文字；测试固定导航时可临时给 body 高度，滚动检查导航是否固定。

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;
  }
}

轮播图图片

为什么需要：首页需要轮播图展示 banner，并且后续要方便做响应式高度。
怎么想：复制 Bootstrap 轮播图组件，保留指示器、左右按钮和 carousel-inner；笔记中把图片改为背景图，因此 .carousel-item 先给高度和背景图。
怎么做：保留四个 .carousel-item，在 less 中设置高度、background-size: cover、background-position: center 0，并用 nth-child 分别指定四张背景图。
易错点：只写背景图不写高度会看不到图；四个 item 要分别对应不同背景图；课上调试时先确认没有图片导致轮播图空白，再补背景图。

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);
  }
}

轮播图响应式

为什么需要：一套页面要在多种设备下显示不同高度，避免小屏图片过高。
怎么想：笔记要求小于 768 高度 250，大于等于 768 高度 400，大于等于 992 高度 500；用媒体查询覆盖 .carousel-item 高度。
怎么做：写 max-width: 768px、min-width: 768px、min-width: 992px 三组媒体查询，并把公共背景样式保留。
易错点：媒体查询顺序和范围要清楚；background-size: cover 与 background-position: center 0 要保留，否则图片变形或文字位置偏移。

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;
  }
}

开源项目响应式

为什么需要：开源项目区域要在不同屏幕下一行显示 4 个或 2 个盒子。
怎么想：用 Bootstrap 栅格：大于等于 992 用 col-lg-3 一行 4 个；大于等于 768 用 col-md-6 一行 2 个。
怎么做：外层用 container 控制版心，内部用 row 包裹四个列；标题区域居中，并给整体加 margin-top。
易错点：不要忘记 container，否则会满屏；列类名要写在每个子项上。

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;
}

开源项目内容布局

为什么需要：每个项目卡片要有固定高度、圆角、不同背景色和间距。
怎么想：在列里放 a，把 a 设为 display: block 撑满父级；用 nth-child 分别给四个 a 设置颜色；给列加 margin-bottom 留间距。
怎么做：.row div 设置高度和底部间距，a 设置块级、高度、圆角和背景色，再用 &:nth-child(n) a 改色。
易错点：a 默认不是块级，不设 display: block 高度不生效；颜色要选中对应 nth-child 下的 a。

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;
      }
    }
  }
}

代码示例

示例一：页面结构（index.html）

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="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>
</head>
<body>
  <!-- 导航 -->
  <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>

  <!-- 轮播图 -->
  <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>

  <!-- 开源项目 -->
  <div class="project container">
    <div class="title">
      <h2><span>OpenSource</span> / 开源项目</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>
</body>
</html>

关键行与易错点

三个 <link> 的顺序不能乱：bootstrap.min.css → bootstrap-icons.css → index.css。自己写的 CSS 一定放最后，靠层叠性覆盖框架样式，否则写了半天被框架盖掉。
轮播图必须有 JS：bootstrap.min.js 少一个文件轮播图就不动；data-bs-* 这些是 Bootstrap 5 的自定义属性，data-bs-target 的值要和 id="carouselExampleIndicators" 完全一致。
指示器有几个小圆点由 carousel-indicators 里的 <button> 数量决定，data-bs-slide-to 从 0 开始，第 4 张必须写成 3，且只有第一个加 class="active"。
carousel-item 里故意不放 <img>，后面用背景图代替，这样响应式只改高度就行。
导航用了 fixed-top 固定，navbar-expand-lg 控制折叠断点（小于 lg 出现汉堡按钮）。

示例二：less 源码（less/index.less）

less

// out: ../css/

// 导航
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

// 轮播图
.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;
  }
  .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);
  }
}

// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.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;
      }
    }
  }
}

关键行与易错点

第一行 // out: ../css/ 是 Easy LESS 插件的导出指令，保存时自动在同级 css/ 目录生成 index.css，HTML 里引的永远是编译后的 CSS，不是 .less。
.bg-body-tertiary 是 Bootstrap 自带的类，它自带背景色，所以必须写 transparent !important 才压得住；.navbar-collapse { flex-grow: 0 } 是把右边导航块从 flex-grow:1 收回，实现左 logo 右菜单的一左一右布局。
轮播图不用 <img> 而用 background-image，所以必须手动给高度，否则盒子高度是 0，图看不见。高度按断点：<768 是 250、≥768 是 400、≥992 是 500。
background-size: cover 让图铺满不重复；background-position: center 0 保证放大缩小时文字不被推出可视区。
四个 .carousel-item:nth-child(n) 分别配四张图，顺序错一张就串图。
.project .row div 给了固定 height: 200px，里面的 a 必须 display: block 才能撑满父级宽度（行内元素不认宽高），否则色块只有文字那么宽。

示例三：编译后的等价 CSS（css/index.css）

css

/* 由 less/index.less 编译生成，可直接引入使用 */

/* 导航 */
.bg-body-tertiary {
  background-color: transparent !important;
}
.bg-body-tertiary .navbar-collapse {
  flex-grow: 0;
}

/* 轮播图 */
.carousel .carousel-item {
  background-size: cover;
  background-position: center 0;
}
@media (max-width: 768px) {
  .carousel .carousel-item {
    height: 250px;
  }
}
@media (min-width: 768px) {
  .carousel .carousel-item {
    height: 400px;
  }
}
@media (min-width: 992px) {
  .carousel .carousel-item {
    height: 500px;
  }
}
.carousel .carousel-item:nth-child(1) {
  background-image: url(../assets/uploads/banner_1.jpg);
}
.carousel .carousel-item:nth-child(2) {
  background-image: url(../assets/uploads/banner_2.jpg);
}
.carousel .carousel-item:nth-child(3) {
  background-image: url(../assets/uploads/banner_3.jpg);
}
.carousel .carousel-item:nth-child(4) {
  background-image: url(../assets/uploads/banner_4.jpg);
}

/* 开源项目 */
.project {
  margin-top: 60px;
  text-align: center;
}
.project .row div {
  margin-bottom: 10px;
  height: 200px;
}
.project .row div 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;
}

关键行与易错点

less 的嵌套编译后全部展开成后代选择器（.project .row div a），所以写 less 时不要嵌套太深，选择器权重会一路叠加，后期不好覆盖。
媒体查询写的是 max-width: 768px 和 min-width: 768px，768 这个点两者都命中，靠书写顺序决定胜负（后面的 min-width: 768px 赢），严格点应写成 max-width: 767.98px。
.project .row div 上的 height: 200px 和里面 a 的 height: 200px 要一致，否则色块撑不满或者溢出。
四块颜色靠 :nth-child(n) a 分别指定，注意是先定位到 div 再找它里面的 a，写成 a:nth-child(n) 是找不到的。
margin-bottom: 10px 保证换行后上下两排盒子之间留缝，否则贴在一起；col-lg-3（≥992 一行 4 个）、col-md-6（≥768 一行 2 个）实现响应式栅格。

常见错误

1. 自定义样式写了不生效，改半天页面没变化

现象：在 index.less 里写了 .bg-body-tertiary { background-color: transparent; }，刷新后导航还是白底/灰底。
原因：index.css 的 <link> 写在了 bootstrap.min.css 前面，被框架后加载的样式盖掉了；或者漏了 !important——框架这个类本身带 !important，你同权重覆盖不了。
修法：把自己写的 CSS 永远放在最后一行引入；覆盖框架的带 !important 的属性时，自己的声明也要带 !important。

2. 导航整条占满屏幕，没有版心

现象：导航内容从屏幕最左边贴到最右边，和下面 container 的内容对不齐。
原因：复制组件时带上了 container-fluid（满屏容器），或者手滑把 container 这个类删掉了。
修法：container-fluid → container；改完立刻拉宽窗口，看左右留白是否和下面区块对齐。

3. 导航项全挤在左边，右侧空一大片

现象：logo 在左，菜单也贴着 logo，右边空着，怎么调 justify-content 都没用。
原因：.navbar-collapse 自带 flex-grow: 1，它把剩余空间全吃了，里面的 ul 自然靠左。
修法：给 .navbar-collapse 加 flex-grow: 0，让 collapse 收缩成内容宽度，父级 justify-content: space-between 才能把两块顶到左右两端。

4. 轮播图不动、汉堡按钮点了没反应

现象：结构、样式都对，箭头点了没反应，移动端菜单展不开。
原因：只引入了 bootstrap.min.css 和图标 CSS，忘了 bootstrap.min.js——轮播、折叠都是 JS 组件。
修法：<body> 结束前补上 bootstrap.min.js；再检查 data-bs-target 的 id 和 carousel 的 id 是否完全一致（大小写、拼写）。

5. 指示器点了跳错图 / 第四张点不到

现象：点第 4 个小圆点，跳到第 1 张或干脆没反应。
原因：复制了 4 个 carousel-item，但指示器 button 只留了 3 个；或者 data-bs-slide-to 的值不是从 0 开始连续编号。
修法：carousel-item 个数、button 个数、data-bs-slide-to 的 0~n-1 编号三者必须一一对应，加一张图就同步加一个 button。

6. 四张轮播图长得一模一样

现象：background-image 写了，但每一屏都是第一张图。
原因：只给 .carousel-item 统一写了背景图，没有按序号区分。
修法：用 &:nth-child(1)~(4) 分别指定 background-image，写完手动切一遍四张图确认。

7. 媒体查询写了，高度在 768 处不切换（或跳变两次）

现象：窗口从 800 拖到 760，高度还是 400，或者 768 附近高度乱跳。
原因：用了 max-width: 768px 和 min-width: 768px 两个都含 768 的区间，边界重叠；或断点和框架栅格（576/768/992/1200）没对齐。
修法：要么统一用 min-width 从小到大递进（768→400、992→500，默认 250），要么 max-width 写 767.98px，保证区间互不重叠。

8. 加了 fixed-top 后，页面顶部内容被导航压住

现象：轮播图第一屏顶部被导航条遮掉一截。
原因：fixed-top 让导航脱离文档流，不再占据高度。
修法：给 body 或第一个内容区块加 padding-top（值 = 导航实际高度），或者把导航放在一个等高的占位容器里。

9. 卡片之间没有间隙，颜色块贴在一起

现象：四个色块严丝合缝，看不出卡片间距。
原因：背景色加在了外层栅格 div 上，外层没有 padding，内层 a 又撑满了整个盒子。
修法：外层栅格 div 保留 padding（或 margin-bottom），把背景色和圆角加在内层 a 上，并给 a 设 display: block; height: 100%。

练习

练习 1｜断点实测 在浏览器里打开页面，用开发者工具把视口宽度依次拖到 1200 / 992 / 991 / 768 / 767 / 375，逐个记录轮播图的实际高度。把测到的数值填进表格，对照你的媒体查询，找出所有"该变没变"的区间并修正。

练习 2｜导航背景还原 + 遮挡修复 把导航背景从调试用的 orange 改回 transparent，滚动页面观察：当轮播图切到浅色背景那张时，导航文字是否还看得清？如果不清楚，给出你的处理方案（加半透明背景 / 加阴影 / 改文字色，任选其一），并补上 fixed-top 造成的顶部占位。

练习 3｜图标当文字用 用 Bootstrap Icons 做一个"购物车图标 + 右上角数字角标"的组合，要求：图标 32px、颜色跟随导航文字色、hover 时变色，角标用绝对定位压在图标右上角。全程不许用 <img>。

练习 4｜开源项目区扩容 在现有四个卡片后面再加四个卡片，颜色沿用前四组的配色循环。要求：≥992 一行 4 个、≥768 一行 2 个、<768 一行 1 个，且卡片间距在三种宽度下都保持一致。完成后写出你为减少重复代码所做的处理（nth-child 循环 / less 混入 / 变量，任选）。

练习 5｜引入顺序反证实验 把 index.css 的 <link> 临时挪到 bootstrap.min.css 上面，刷新页面，记录哪些自定义样式失效了（至少找 3 处）。改回正确顺序后再对比一次，用一句话写下你的结论。

原视频对照

#	视频	时长
1	轮播图	06:44
2	图标	07:10
3	案例（准备）	07:38
4	案例（导航）	10:52
5	案例（轮播图）	14:14
6	案例（其他布局）	13:53

小结

覆盖框架样式只有一个前提：后引入。 自己的 CSS 永远排在框架 CSS 之后，这条不成立，后面所有调样式都是白费功夫。
带 !important 的框架类，你也得带 !important 才盖得住。 看到改不动，先查是不是这个原因，别急着加选择器权重。
断点要跟框架对齐，区间不能重叠。 自写媒体查询统一用 min-width 递进最省心；用 max-width 就写 .98。
做响应式图片，背景图 + 媒体查询高度比换多套 <img> 省事得多。 本例四张 banner 全用 background-image + background-size: cover 解决。
复制组件 = 复制结构 + 改三样东西：id、data-bs-* 索引、内容。 尤其轮播的指示器编号和 item 数量必须同步，多一张图就多一个 button。
布局类问题多半出在层级上。 背景色、圆角、padding 加外层还是内层，效果完全不同；间隙通常靠外层 padding + 内层块级元素实现。
框架给的是起点，不是终点。 组件拿来后 container 要改、flex-grow 要关、背景要改、固定定位要补占位——默认值几乎都要动。
改样式前先用开发者工具量。 量出导航实际高度、卡片实际高度、断点处尺寸变化，比凭感觉写媒体查询快得多，也准得多。

移动端项目实战（三） ​

学习目标 ​

知识点 ​

准备工作 ​

头部导航 ​

轮播图图片 ​

轮播图响应式 ​

开源项目响应式 ​

开源项目内容布局 ​

代码示例 ​

示例一：页面结构（index.html） ​

示例二：less 源码（less/index.less） ​

示例三：编译后的等价 CSS（css/index.css） ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

移动端项目实战（三）

学习目标

知识点

准备工作

头部导航

轮播图图片

轮播图响应式

开源项目响应式

开源项目内容布局

代码示例

示例一：页面结构（index.html）

示例二：less 源码（less/index.less）

示例三：编译后的等价 CSS（css/index.css）

常见错误

练习

原视频对照

小结