Bootstrap 练习题(10 题)

这一页给 10 道 Bootstrap 5 练习题,覆盖CDN 引入与栅格容器、响应式列宽、按钮、卡片、表单、导航栏、模态框、警告框、表格、实战落地页这些最核心的知识点。每题都有题目描述、提示、可折叠的参考答案。

使用建议:先自己动手写,卡住了再看提示,实在写不出再对照答案。Bootstrap 是最流行的 CSS 框架,练熟了就能快速搭出专业级的响应式页面。

基础(5 题):栅格 / 响应式 / 按钮 / 卡片 / 表单

第 1 题:引入 CDN 与栅格容器

题目:新建一个 HTML 页面,通过 CDN 引入 Bootstrap 5 的 CSS 和 JS,放一个 container,里面一行三列均分。

提示:container 居中并限宽,row 必须放 container 里,col 必须放 row 里;不指定宽度时多个 col 自动等分。生产环境建议用 npm 而非 CDN,避免 CDN 不稳定。

参考答案

<!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 5 CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- container 把内容居中并限制最大宽度 -->
  <div class="container">
    <!-- row 是水平行,col 是列 -->
    <div class="row">
      <div class="col">第一列</div>
      <div class="col">第二列</div>
      <div class="col">第三列</div>
    </div>
  </div>

  <!-- Bootstrap 的 JS bundle(用 modal/dropdown 等组件时需要) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- 知识点:
  - container 自动居中+限宽;container-fluid 撑满整宽
  - row 必须放在 container 内,col 必须放在 row 内
  - 没给 col 指定宽度时,多个 col 自动等分一行 -->

第 2 题:响应式断点列宽

题目:写一行 3 张卡片,要求:手机堆叠成 1 列,平板(≥768px)变 2 列,桌面(≥992px)变 3 列。

提示:用 col-12 col-md-6 col-lg-4 三段组合。Bootstrap 默认 12 列;断点类是"向上生效"——col-md-6 在 md 及以上都占 6 份。常见坑:只写 col-md-6 不写 col-12,小屏会按内容宽度乱挤。

参考答案

<div class="container">
  <!-- 移动端 1 列,平板 2 列,桌面 3 列 -->
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">卡片 A</div>
    <div class="col-12 col-md-6 col-lg-4">卡片 B</div>
    <div class="col-12 col-md-6 col-lg-4">卡片 C</div>
  </div>
</div>
<!-- 知识点:
  - Bootstrap 5 默认断点:sm 576px / md 768px / lg 992px / xl 1200px / xxl 1400px
  - col-{n} 表示在所有尺寸下占 12 等分中的 n 份
  - col-md-6 = ≥768px 时占 6 份(一半);小于则堆叠
  - 断点是"向上生效",写 col-md-6 在 md/lg/xl 都生效 -->

第 3 题:按钮

题目:写出以下按钮:(a) 4 种语境色(主要/次要/成功/危险);(b) 2 种描边按钮;(c) 大、小、全宽、禁用各一个。

提示:`btn` 是基类,必须再叠一个 `btn-*` 颜色类才有样式;`btn-outline-*` 是描边版,悬停才填色;`btn-lg/btn-sm` 调尺寸;`w-100` 让按钮占满父宽;`disabled` 属性禁用按钮。

参考答案

<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危险</button>

<!-- 描边按钮(轮廓样式) -->
<button type="button" class="btn btn-outline-primary">描边主要</button>
<button type="button" class="btn btn-outline-danger">描边危险</button>

<!-- 尺寸 -->
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>

<!-- 块级按钮(占满父宽) -->
<button type="button" class="btn btn-primary w-100">全宽按钮</button>

<!-- 禁用 -->
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>
<!-- 知识点:
  - btn 是基类,必须配合 btn-* 颜色类才显示样式
  - btn-outline-* 是描边版,悬停才填充
  - <a> 当按钮用同样加 btn 类 -->

第 4 题:卡片

题目:做一张内容卡片,包含:顶部封面图、标题、灰色副标题、正文、按钮、两条贴边列表项、灰色页脚。

提示:card 是个灵活容器,`card-body/card-title/card-text/card-img-top/card-footer` 可任意组合;`list-group-flush` 让列表贴边无圆角;`text-muted` 是灰色辅助文字。

参考答案

<div class="card" style="max-width: 22rem;">
  <!-- 卡片顶部图 -->
  <img src="cover.jpg" class="card-img-top" alt="封面">

  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <h6 class="card-subtitle text-muted">副标题</h6>
    <p class="card-text">这是一段卡片正文,可以放简介、说明或价格等。</p>
    <a href="#" class="btn btn-primary">了解详情</a>
  </div>

  <!-- 列表组 -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">特性一</li>
    <li class="list-group-item">特性二</li>
  </ul>

  <div class="card-footer text-muted">2 天前</div>
</div>
<!-- 知识点:
  - card 是个灵活容器:body/title/text/img-top/footer 可任意组合
  - list-group-flush 让列表贴边无圆角,适合放进卡片
  - text-muted 是灰色辅助文字 -->

第 5 题:表单

题目:写一个两列响应式表单:姓名、邮箱(带灰色提示)、城市(下拉)、同意条款(复选框)、提交按钮。

提示:`form-control` 给 input/textarea、`form-select` 给 select、`form-check` 包 checkbox/radio、`form-label` 标签、`form-text` 灰色提示。配合 `row g-3` + `col-md-6` 做响应式布局。

参考答案

<form class="row g-3">
  <div class="col-md-6">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入姓名" required>
  </div>

  <div class="col-md-6">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email" required>
    <div class="form-text">我们不会泄露您的邮箱。</div>
  </div>

  <div class="col-md-6">
    <label for="city" class="form-label">城市</label>
    <select class="form-select" id="city">
      <option selected>请选择</option>
      <option value="bj">北京</option>
      <option value="sh">上海</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">同意条款</label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>
<!-- 知识点:
  - form-control 给 input/textarea 加 Bootstrap 样式
  - form-select 给 select 加样式;form-check 包 checkbox/radio
  - form-text 是灰色提示文字;form-label 是字段标签
  - row g-3 配 col-md-* 做响应式表单布局 -->

进阶(5 题):导航栏 / 模态框 / 警告框 / 表格 / 实战

第 6 题:导航栏

题目:做一个响应式导航栏:左边品牌名,右边菜单(首页/关于/产品下拉),小屏折叠成汉堡菜单。

提示:`navbar-expand-lg` 控制折叠断点;`data-bs-toggle="collapse"` + `data-bs-target="#id"` 触发折叠;`ms-auto` 把菜单推到右边;下拉菜单用 `data-bs-toggle="dropdown"`。

参考答案

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <!-- 品牌 logo -->
    <a class="navbar-brand" href="/">我的网站</a>

    <!-- 折叠按钮:小屏显示,点击展开菜单 -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 可折叠的菜单 -->
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">关于</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button"
             data-bs-toggle="dropdown">产品</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/p1">产品 A</a></li>
            <li><a class="dropdown-item" href="/p2">产品 B</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- 知识点:
  - navbar-expand-lg ≥992px 横向展开,小于则折叠成汉堡菜单
  - data-bs-toggle="collapse" + data-bs-target 触发折叠
  - ms-auto 把菜单推到右边(ms = margin-start)
  - dropdown 同样用 data-bs-toggle="dropdown" 触发 -->

第 7 题:模态框

题目:写一个按钮,点击后弹出一个居中模态框:标题"确认操作"、正文提示、底部"取消"+"确定"按钮,右上角叉号可关闭。

提示:必须引入 `bootstrap.bundle.min.js`(含 Popper)才能弹;`data-bs-toggle="modal"` + `data-bs-target` 触发;`modal-dialog-centered` 居中;`btn-close` 是叉号按钮,配合 `data-bs-dismiss` 关闭。

参考答案

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认操作</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <p>确定要执行此操作吗?此操作不可撤销。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 知识点:
  - 必须引入 bootstrap.bundle.min.js(含 Popper)才能弹
  - data-bs-toggle="modal" + data-bs-target="#id" 触发
  - modal-dialog-centered 居中显示;modal-lg/modal-sm 调大小
  - fade 是淡入动画类 -->

第 8 题:警告框

题目:写出:(a) 4 种语境色警告框;(b) 一个带关闭按钮的警告框,点叉自动消失;(c) 一个带链接的警告框。

提示:`alert-*` 对应语境色(成功/危险/警告/信息);`alert-dismissible` + `btn-close` + `data-bs-dismiss="alert"` 组合出可关闭的提示;`alert-link` 让链接颜色自适应。

参考答案

<!-- 4 种常用语境色 -->
<div class="alert alert-success">操作成功!</div>
<div class="alert alert-danger">出错了,请重试。</div>
<div class="alert alert-warning">磁盘空间不足。</div>
<div class="alert alert-info">提示信息。</div>

<!-- 带关闭按钮:点叉自动消失 -->
<div class="alert alert-warning alert-dismissible fade show">
  <strong>注意!</strong> 这个警告可以关掉。
  <button type="button" class="btn-close"
          data-bs-dismiss="alert" aria-label="关闭"></button>
</div>

<!-- 带链接的警告 -->
<div class="alert alert-primary">
  新版本上线了,<a href="#" class="alert-link">查看详情</a>。
</div>
<!-- 知识点:
  - alert-* 颜色对应语境(成功/危险/警告/信息)
  - alert-dismissible + btn-close 组合出可关闭的提示
  - alert-link 让链接颜色自适应警告框底色 -->

第 9 题:表格

题目:做一个用户列表表格:深色表头(#/姓名/邮箱/角色),斑马纹行,鼠标悬停高亮,角色列用徽章显示,外层在小屏可横向滚动。

提示:`table-striped` 斑马纹、`table-hover` 悬停高亮、`table-bordered` 全边框、`table-dark` 深色表头;`badge bg-primary` 是徽章;`table-responsive` 在小屏自动横向滚动。

参考答案

<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">姓名</th>
        <th scope="col">邮箱</th>
        <th scope="col">角色</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>张三</td>
        <td>zhangsan@example.com</td>
        <td><span class="badge bg-primary">管理员</span></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>李四</td>
        <td>lisi@example.com</td>
        <td><span class="badge bg-secondary">普通用户</span></td>
      </tr>
    </tbody>
  </table>
</div>
<!-- 知识点:
  - table-striped 斑马纹;table-hover 鼠标悬停高亮
  - table-bordered 全边框;table-dark 深色表头
  - table-responsive 在小屏自动横向滚动,避免撑破布局
  - badge 是小徽章,适合做状态标签 -->

第 10 题:实战——响应式落地页

题目:用 Bootstrap 组合出一个完整的产品落地页:顶部导航 + Hero 首屏(大标题/副标题/主按钮)+ 三特性卡片(等高)+ CTA 区(深色背景/白字/按钮)+ 页脚。

提示:这是综合练习。`navbar-dark bg-dark` 做深色导航;`display-5 fw-bold` 大标题、`lead text-muted` 副标题;`h-100 + row g-4` 让卡片等高对齐;`bg-primary text-white` 做 CTA;锚点 `href="#feat"` 配 section `id` 实现页内跳转。

参考答案

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="/">BrandX</a>
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#feat">特性</a></li>
          <li class="nav-item"><a class="nav-link" href="#price">价格</a></li>
          <li class="nav-item"><a class="btn btn-primary ms-2" href="#cta">立即试用</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero 首屏 -->
  <header class="bg-light py-5">
    <div class="container text-center">
      <h1 class="display-5 fw-bold">让工作更高效</h1>
      <p class="lead text-muted">三分钟上手,十倍效率提升。</p>
      <a href="#cta" class="btn btn-primary btn-lg">免费开始</a>
    </div>
  </header>

  <!-- 特性卡片区 -->
  <section id="feat" class="py-5">
    <div class="container">
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 shadow-sm">
            <div class="card-body">
              <h5 class="card-title">快速</h5>
              <p class="card-text">毫秒级响应。</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 shadow-sm">
            <div class="card-body">
              <h5 class="card-title">安全</h5>
              <p class="card-text">端到端加密。</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 shadow-sm">
            <div class="card-body">
              <h5 class="card-title">易用</h5>
              <p class="card-text">零学习成本。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section id="cta" class="bg-primary text-white py-5 text-center">
    <div class="container">
      <h2>准备好开始了吗?</h2>
      <a href="#" class="btn btn-light btn-lg mt-3">注册账号</a>
    </div>
  </section>

  <footer class="py-4 text-center text-muted">
    <small>&copy; 2026 BrandX</small>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- 知识点:
  - 整页组合:navbar + hero + 卡片栅格 + CTA + footer
  - h-100 + row g-4 让多张卡片等高对齐
  - shadow-sm/display-5/lead 都是 Bootstrap 内置工具类
  - 锚点 href="#feat" 配 section id 实现页内跳转 -->

练习建议

Bootstrap 5 的核心是栅格系统(container/row/col + 5 个断点)和组件类(btn/card/form/navbar/modal/...),外加一堆工具类(spacing/text/bg/...)。先把栅格吃透,再练常用组件,最后用工具类做微调。

做完这 10 题,可以尝试改造一个已有的纯 HTML 页面:用 Bootstrap 重写一遍,对比代码量和响应式体验。也可以阅读官方文档的 Examples 区,仿几个真实页面。

← 上一篇 Bootstrap 工具类

返回 Bootstrap 教程目录

✈️💬