Bootstrap 组件优先快速开发

背景

Bootstrap 是 Web 开发史上使用最广的 CSS 框架，诞生于 Twitter 内部项目。它的核心思想是"组件优先"——提供几十种预设计好的 UI 组件，复制粘贴即可使用。

核心概念

1. 栅格系统

Bootstrap 的核心是 12 列栅格：

<div class="container">
  <div class="row">
    <div class="col-md-6">左边 6 列</div>
    <div class="col-md-6">右边 6 列</div>
  </div>
  <div class="row">
    <div class="col-md-4">4列</div>
    <div class="col-md-4">4列</div>
    <div class="col-md-4">4列</div>
  </div>
</div>

断点	class 前缀	宽度
无	col-	< 576px
Small	col-sm-	>= 576px
Medium	col-md-	>= 768px
Large	col-lg-	>= 992px
XL	col-xl-	>= 1200px
XXL	col-xxl-	>= 1400px

2. 常用组件速查

<!-- 按钮 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-outline-danger">危险轮廓</button>

<!-- 卡片 -->
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">标题</h5>
    <p class="card-text">内容</p>
    <a href="#" class="btn btn-primary">去详情</a>
  </div>
</div>

<!-- 模态框 -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">内容...</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- Toast 提示 / Navbar / Carousel / Accordion / Dropdown... -->

3. Helper 工具类

<!-- 间距 -->
<div class="mt-3 mb-4 mx-auto px-2 py-4">

<!-- Flex -->
<div class="d-flex justify-content-between align-items-center">

<!-- 文字 -->
<p class="text-center text-muted fw-bold fs-5">

<!-- 显示/隐藏 -->
<div class="d-none d-md-block">只在 md 以上显示</div>

4. Bootstrap Icons

<i class="bi bi-person"></i>
<i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-gear"></i>
<!-- 1500+ 图标，https://icons.getbootstrap.com -->

分步操作：搭建毕设前台

Step 1: CDN 引入

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Step 2: 首页布局

Navbar（导航） → Hero（主视觉） → Features（特性卡片） → Footer（页脚）

每个模块用 Bootstrap 组件拼装，10 分钟搭建完整首页。

思考题

1. Bootstrap 5 相比 Bootstrap 4 的最大变化是什么？
2. 如何用 Sass 自定义 Bootstrap 的主题颜色？
3. Bootstrap 适合什么场景？不适合什么场景？

毕设场景

• 非 CS 专业同学的毕设展示页面（零门槛）
• 后台管理面板（搭配 AdminLTE 等 Bootstrap 模板）
• 多页面传统 Web 应用