移动端项目实战（二）

本页对应移动端项目实战，共 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 等文件放进项目目录。笔记中的下载入口如下：

Bootstrap 生产文件下载入口

易错点：下载的是压缩包，要先解压；项目中引入的是解压后 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 等，以官方文档为准。

栅格系统 12 等份示意

怎么做：先写 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 按钮样式会散，说明基础类不能乱删。

Bootstrap 按钮样式示例

Bootstrap 表格样式示例

怎么做：按钮写 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 是否铺满格子。

课件图示

课件第3页：响应式网页解决方案： 1. 媒体查询 2. Bootstrap @media

课件第14页：Bootstrap – 简介 Bootstrap 是由 Twitter 公司开发

课件第15页：Bootstrap – 下载中文官网: https://www.bootcss

课件第18页：Bootstrap – 栅格系统栅格化是指将整个网页的宽度分成12等份，每个盒

课件第19页：总结总结 1. 栅格系统是将网页等分成多少份？ 12 份 2. Bootstr

课件第20页：Bootstrap – 全局样式 Button类 p btn：默认样式 p bt

课件第21页：Bootstrap – 全局样式表格类： p table：默认样式 p tab

课件第22页：Bootstrap – 组件（Components） 1. 引入样式表 2. 引

代码示例

示例 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/bootstrap@5.3.3/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/bootstrap@5.3.3/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，别自己再重复造轮子。

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/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <!-- 2. 引入字体图标 CSS（本地：./Bootstrap/font/bootstrap-icons.css） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/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/bootstrap@5.3.3/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 负责品牌色、图片、间距等个性化，两者用"后置覆盖"衔接，不要试图改框架源码。

移动端项目实战（二） ​

学习目标 ​

知识点 ​

简介：为什么需要 Bootstrap ​

使用步骤：先引入，再写容器 ​

栅格系统：把一行分成 12 份 ​

按钮与表格：用现成类名减少重复样式 ​

组件：复制结构，按需引入 JS ​

字体图标：复制 fonts，引入 CSS，调用类名 ​

准备工作 ​

头部导航 ​

轮播图图片 ​

轮播图响应式 ​

开源项目响应式 ​

开源项目内容布局 ​

课件图示 ​

代码示例 ​

示例 1：Bootstrap 基本使用 + 栅格系统（响应式开源项目卡片） ​

示例 2：全局样式——按钮类 + 表格类 ​

示例 3：组件（导航条 navbar）+ 字体图标 ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

移动端项目实战（二）

学习目标

知识点

简介：为什么需要 Bootstrap

使用步骤：先引入，再写容器

栅格系统：把一行分成 12 份

按钮与表格：用现成类名减少重复样式

组件：复制结构，按需引入 JS

字体图标：复制 fonts，引入 CSS，调用类名

准备工作

头部导航

轮播图图片

轮播图响应式

开源项目响应式

开源项目内容布局

课件图示

代码示例

示例 1：Bootstrap 基本使用 + 栅格系统（响应式开源项目卡片）

示例 2：全局样式——按钮类 + 表格类

示例 3：组件（导航条 navbar）+ 字体图标

常见错误

练习

原视频对照

小结