VIBE PROJECTING
登录

Bootstrap

技术栈
前端框架
bootstrapcsscomponent-libraryresponsive前端

概览

Bootstrap 技术栈概览

Bootstrap 是由 Twitter 开源的最经典 CSS 组件库，提供丰富的预设计 UI 组件和栅格系统，让开发者几行代码即可搭建专业级响应式页面，是老牌但依旧强大的前端利器。

解决什么问题

  • 快速出活：导航栏/卡片/模态框/表单/轮播等几十种组件开箱即用
  • 栅格系统：12 列响应式布局，col-md-6 一行搞定适配
  • 无需设计功底：默认样式就足够美观，配色/间距/字体统一
  • jQuery-free（v5+）：Bootstrap 5 移除 jQuery 依赖，纯 JS + Popper

关键特性

  • 12 列栅格：container > row > col-*，断点 sm/md/lg/xl/xxl
  • 丰富组件：Navbar、Card、Modal、Toast、Carousel、Accordion、Offcanvas...
  • Helper 类：间距 m-*/p-*、Flex、Display、Text、Background 等
  • Sass 变量：可定制主题色、圆角、阴影等设计令牌
  • 图标库：Bootstrap Icons，1500+ SVG 图标

毕设场景

  • 传统多页面 Web 毕设（jQuery + Bootstrap 超低门槛）
  • 管理后台快速搭建（AdminLTE 等 Bootstrap 模板）
  • 论文配图 Web 演示页（简单专业）
  • 适合不想学复杂框架的非计算机专业同学

安装

Bootstrap 安装指南

1. 环境准备

  • 无硬性依赖：Bootstrap 只需 HTML + CSS + JS 即可使用
  • Node.js（可选）：如需定制 Sass 或使用构建工具
  • IDE：任意代码编辑器（VSCode / WebStorm 等）

2. 安装命令

方式一：CDN（最简单）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons（可选） -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <title>Bootstrap Demo</title>
</head>
<body>
  <h1 class="text-primary">Hello Bootstrap!</h1>
  <!-- Bootstrap JS Bundle (含 Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

方式二：npm（现代前端项目）

npm install bootstrap bootstrap-icons

# 如需定制 Sass
npm install -D sass

// main.js 或 main.ts
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
// 可选图标
import 'bootstrap-icons/font/bootstrap-icons.css'

方式三：下载文件

访问 https://getbootstrap.com 下载编译好的 CSS/JS 文件，直接放入项目

3. 常见安装问题

Q: 模态框/下拉菜单不工作？
A: Bootstrap JS 依赖 Popper；使用 bootstrap.bundle.min.js（已内置 Popper），不要用 bootstrap.min.js

Q: 图标不显示？
A: 检查是否引入 bootstrap-icons.css；图标使用 <i class="bi bi-xxx"></i> 格式

Q: CDN 加载慢？
A: 国内可换 Staticfile CDN：https://cdn.staticfile.org/bootstrap/5.3.3/css/bootstrap.min.css

示例

Bootstrap 后台 Dashboard 布局

目标

用 Bootstrap 5 组件搭建一个经典后台管理界面：侧边栏 + 顶部导航 + 数据卡片 + 表格。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Dashboard</title>
  <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">
</head>
<body>

  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">📊 毕设后台</a>
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
              <i class="bi bi-person-circle"></i> 管理员
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">个人信息</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">退出登录</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <!-- 侧边栏 -->
      <aside class="col-md-3 col-lg-2 d-md-block bg-light sidebar p-3 min-vh-100">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#"><i class="bi bi-speedometer2"></i> 仪表盘</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="bi bi-people"></i> 用户管理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="bi bi-box"></i> 商品管理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="bi bi-graph-up"></i> 数据报表</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="bi bi-gear"></i> 系统设置</a>
          </li>
        </ul>
      </aside>

      <!-- 主内容区 -->
      <main class="col-md-9 col-lg-10 p-4">
        <h2 class="mb-4">仪表盘</h2>

        <!-- 数据卡片 -->
        <div class="row g-3 mb-4">
          <div class="col-sm-6 col-xl-3">
            <div class="card text-bg-primary">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div>
                    <h6 class="card-title">用户总数</h6>
                    <h2 class="mb-0">12,483</h2>
                  </div>
                  <i class="bi bi-people display-6 opacity-50"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card text-bg-success">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div>
                    <h6 class="card-title">今日收入</h6>
                    <h2 class="mb-0">¥8,420</h2>
                  </div>
                  <i class="bi bi-cash-stack display-6 opacity-50"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card text-bg-warning">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div>
                    <h6 class="card-title">待处理订单</h6>
                    <h2 class="mb-0">56</h2>
                  </div>
                  <i class="bi bi-clock display-6 opacity-50"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card text-bg-danger">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <div>
                    <h6 class="card-title">异常报警</h6>
                    <h2 class="mb-0">3</h2>
                  </div>
                  <i class="bi bi-exclamation-triangle display-6 opacity-50"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">最近订单</h5>
            <button class="btn btn-primary btn-sm">查看全部</button>
          </div>
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>订单号</th><th>客户</th><th>金额</th><th>状态</th><th>时间</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>#2024001</td><td>张三</td><td>¥1,299</td>
                  <td><span class="badge bg-success">已完成</span></td><td>2024-01-15</td>
                </tr>
                <tr>
                  <td>#2024002</td><td>李四</td><td>¥599</td>
                  <td><span class="badge bg-warning text-dark">处理中</span></td><td>2024-01-14</td>
                </tr>
                <tr>
                  <td>#2024003</td><td>王五</td><td>¥2,199</td>
                  <td><span class="badge bg-danger">已取消</span></td><td>2024-01-13</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

运行

浏览器直接打开 HTML 文件。

预期输出

  • 顶部暗色导航栏，带下拉菜单
  • 左侧导航菜单
  • 4 个统计卡片（蓝/绿/黄/红）
  • 订单数据表格，带状态 Badge
  • 响应式：手机端侧边栏折叠

教程

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 应用