Bootstrap 5 教程

本教程是 Bootstrap 5 的完整 10 篇入门系列,面向零基础初学者。从 CDN 引入、栅格原理一路讲到表单验证与响应式断点,每一篇都配有可直接复制运行的代码示例。

Bootstrap 是 Twitter(现 X)在 2011 年开源的 CSS 框架,如今已是全球最流行的前端 UI 框架之一。它把按钮、表单、卡片、导航栏这些通用元素预先做好,你只要拼装 class,就能在十分钟内搭出一个自适应手机和桌面的专业页面。Bootstrap 5(2021 年)是当前主版本,移除了 jQuery 依赖、改用原生 JS、引入了 CSS 变量便于定制。

先看一个 Bootstrap 页面

把下面代码保存为 hello.html 双击打开,你会看到一个干净的英雄区按钮页:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Hello</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container py-5 text-center">
    <h1 class="display-4 fw-bold text-primary">Hello, Bootstrap!</h1>
    <p class="lead text-muted">十分钟,搭出还不错的页面。</p>
    <button class="btn btn-primary btn-lg">立即开始</button>
  </div>
</body>
</html>

全部 10 篇子教程

建议按顺序学习,每天 1~2 篇,一周即可入门。

Bootstrap 简介 — 历史、特点与适用场景
Bootstrap 环境引入 — CDN、npm、Sass 定制
栅格系统 — 12 列原理与列划分
布局容器 — container / row / col 详解
按钮组件 — 颜色、尺寸、状态、按钮组
卡片、警告与徽章 — card / alert / badge
导航栏与导航 — navbar 折叠菜单
表单与验证 — 输入框、校验、选择框
工具类 — spacing、flex、文本、显隐
响应式断点 — sm / md / lg 与移动优先

开始学习

准备好了吗?从第一篇开始 → Bootstrap 简介

✈️💬

Bootstrap 5 教程

先看一个 Bootstrap 页面

全部 10 篇子教程

推荐学习路径

开始学习