Bootstrap4 教程（建议收藏）

Bootstrap4 教程：从零开始打造响应式网页

在前端开发的世界里，Bootstrap 4 是一个绕不开的名字。它不仅简化了网页布局的复杂度，还让开发者能快速构建出美观、适配多设备的界面。尤其对于初学者来说，掌握 Bootstrap4 教程，就像是拿到了一把“万能钥匙”，能打开响应式网页设计的大门。

你有没有遇到过这样的场景：在电脑上看起来完美的页面，一换到手机就变形、错位、按钮挤成一团？这背后就是“响应式”问题。而 Bootstrap4 的核心价值，正是让你不用手动写一堆媒体查询（media queries），就能轻松实现跨设备自适应。

这篇文章将带你从零开始，一步步掌握 Bootstrap4 的核心能力。无论是布局、组件、表单，还是自定义主题，你都能在实战中学会。不需要你有深厚的 CSS 基础，只要愿意动手，就能做出像模像样的网页。

什么是 Bootstrap4？为什么它值得学习

Bootstrap4 是由 Twitter 开发并开源的一套前端框架，基于 HTML、CSS 和 JavaScript 构建。它最大的特点就是“模块化”和“响应式”。你可以把它想象成一套“乐高积木”——每个组件（比如按钮、卡片、导航栏）都是独立的模块，你只需要按需拼装，就能快速搭建出完整的网页。

相比早期版本，Bootstrap4 做了多项升级：

放弃了对 IE 8 的支持，提升性能；
使用 Flexbox 作为默认布局方式，比传统的浮动（float）更灵活；
引入了 Sass 预处理器，让样式更易维护；
更加轻量，体积更小，加载更快。

这些变化让 Bootstrap4 更适合现代 Web 开发，也更适合初学者入门。当你学会使用它，你会惊讶于原来“做网页”可以这么高效。

如何引入 Bootstrap4 到你的项目

要开始使用 Bootstrap4，你有几种方式引入。最推荐的是通过 CDN（内容分发网络），它简单、快速、无需本地安装。

打开你的 HTML 文件，在 <head> 标签中加入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap4 教程示例</title>

  <!-- 引入 Bootstrap4 的 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- 可选：引入 jQuery 和 Bootstrap JS（用于交互组件） -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- 页面内容将在这里 -->
</body>
</html>

代码说明：

viewport 设置确保网页在移动设备上正确缩放；
bootstrap.min.css 是核心样式文件，提供所有类名和布局支持；
jquery.min.js 是 Bootstrap 交互功能（如下拉菜单、模态框）所依赖的库；
bootstrap.bundle.min.js 是包含所有 Bootstrap JS 功能的打包文件，避免重复引入。

💡 小贴士：如果你希望离线使用，也可以下载 Bootstrap4 的压缩包，解压后将 css/ 和 js/ 文件夹放到项目中，然后通过本地路径引入。

布局系统：栅格系统（Grid System）

栅格系统是 Bootstrap4 的核心，它让你能轻松实现响应式布局。想象一下，一个网页就像一张画布，被划分为 12 列（column），你可以自由组合这些列来摆放内容。

栅格系统的基本结构

<div class="container">
  <div class="row">
    <div class="col-md-6">左侧内容</div>
    <div class="col-md-6">右侧内容</div>
  </div>
</div>

代码解释：

container 是一个容器，提供左右内边距，让内容居中；
row 是一行，必须包裹在 container 内；
col-md-6 表示在中等及以上屏幕（≥768px）下，该列占 6 列（即一半宽度）；
12 列的总和必须为 12，否则布局会错乱。

响应式断点

Bootstrap4 提供了 4 个断点（breakpoints），分别对应不同设备：

断点	屏幕宽度	适用设备
xs	< 576px	超小屏幕（手机）
sm	≥ 576px	小屏幕（平板）
md	≥ 768px	中等屏幕（桌面）
lg	≥ 992px	大屏幕（大桌面）
xl	≥ 1200px	超大屏幕

你可以在类名中使用这些断点前缀，实现不同设备下的布局变化。例如：

<div class="row">
  <div class="col-xs-12 col-md-4">手机上占满屏，桌面占 1/3</div>
  <div class="col-xs-12 col-md-8">手机上占满屏，桌面占 2/3</div>
</div>

✅ 提示：col 类名是“列”的意思，md-4 表示在中等屏幕下占 4 列。12 ÷ 4 = 3，所以这个列占 1/3。

常用组件：按钮、卡片、导航栏

Bootstrap4 提供了大量现成的 UI 组件，让你不用从零写样式。

按钮（Button）

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

说明：

btn 是所有按钮的基础类；
btn-primary、btn-success 等是颜色变体，分别对应蓝色、绿色等；
你还可以添加 btn-lg（大按钮）、btn-sm（小按钮）控制大小。

卡片（Card）

卡片是展示内容的常用组件，适合放文章、产品信息等。

<div class="card" style="width: 18rem;">
  <img src="placeholder.jpg" 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>

关键点：

card 是卡片容器；
card-img-top 用于图片在顶部；
card-body 包含内容区域；
card-title 和 card-text 是标题和正文的样式类。

导航栏是网站的重要组成部分。Bootstrap4 让它变得极简。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系</a>
      </li>
    </ul>
  </div>
</nav>

解析：

navbar-expand-lg 表示在大屏幕上展开，小屏幕上折叠；
navbar-toggler 是移动端的汉堡菜单按钮；
data-toggle="collapse" 和 data-target="#navbarNav" 配合使用，实现点击展开/收起；
nav-item 和 nav-link 是导航项的标准类。

表单设计：快速构建美观的输入框

表单是网站交互的核心。Bootstrap4 让表单样式统一、响应式。

<form>
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <input type="email" class="form-control" id="email" placeholder="请输入邮箱" />
  </div>

  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码" />
  </div>

  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="remember" />
    <label class="form-check-label" for="remember">记住我</label>
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

说明：

form-group 是表单控件的外层容器，提供间距；
form-control 是输入框的标准类，自动适配宽度；
form-check 用于复选框或单选按钮；
placeholder 是输入框的占位符提示。

✅ 小技巧：在 form-control 上添加 is-invalid 或 is-valid 类，可以实现表单验证反馈。

自定义主题：从默认样式到个性化风格

Bootstrap4 支持通过修改 Sass 变量来自定义主题颜色、字体、间距等。

例如，你想把主色调从蓝色改成绿色，可以这样做：

安装 Sass 编译器（如 node-sass）；
创建一个 custom.scss 文件，内容如下：

// 自定义主题变量
$primary: #28a745;    // 绿色
$font-family-sans-serif: 'PingFang SC', 'Microsoft YaHei', sans-serif;

// 引入 Bootstrap 核心
@import "~bootstrap/scss/bootstrap";

编译 custom.scss 生成 custom.css，然后在 HTML 中引入。

这样，你就能拥有一个完全属于自己的 Bootstrap 主题。

总结：Bootstrap4 教程的价值

通过这篇 Bootstrap4 教程，我们从引入框架，到布局、组件、表单，再到主题自定义，完整走了一遍核心流程。你已经掌握了构建响应式网页的关键技能。

Bootstrap4 不是“万能药”，但它能让你在短时间内交付高质量的界面。尤其对于初学者，它是从“写代码”到“做产品”的重要桥梁。而中级开发者，也能借助它提升开发效率，专注于业务逻辑。

现在，是时候动手试试了。打开你的代码编辑器，创建一个 index.html 文件，把今天的代码复制进去，运行看看效果。你会发现，网页设计，原来也可以这么简单。