Bootstrap4 安装使用：从零开始构建响应式网页
在前端开发的世界里，Bootstrap 一直是一个绕不开的名字。它就像你家装修时的“万能工具箱”，里面既有电钻又有螺丝刀，还有水平仪——你不需要从零开始造工具，而是直接拿来用，快速搭建出一个结实又美观的结构。而 Bootstrap 4，作为这个工具箱的最新版本之一，依然在许多项目中被广泛使用，尤其是在需要快速响应式布局的场景下。
今天，我们就来手把手带你完成 Bootstrap4 安装使用，不走弯路，一步到位。无论你是刚入门的小伙伴，还是已经有点经验但想系统梳理流程的中级开发者，这篇文章都能帮你打通任督二脉。
为什么选择 Bootstrap4？
在开始安装之前，先问自己一个问题：为什么不用原生 CSS 写？答案很简单——效率。想象一下，你要做一个手机、平板、桌面三端都适配的页面，每种设备都要写不同的样式规则，还要考虑断点、浮动、布局重排……光是脑细胞就快烧光了。
而 Bootstrap4 的出现，就是为了解决这个“重复造轮子”的问题。它内置了响应式栅格系统、常用组件（按钮、导航、模态框等）、预设样式和 JavaScript 插件，让你只需关注内容，不用纠结“这个按钮怎么居中”“这个布局在 iPhone 上会不会错位”。
更重要的是，Bootstrap4 支持 Flexbox 布局，告别了旧版中繁琐的 float 和 clearfix，让布局更直观、更灵活。
安装方式一：CDN 引入（最快上手）
对于初学者来说，最推荐的方式就是通过 CDN 引入。就像你去超市买现成的面包，不用自己揉面发酵，直接拿回家就能吃。这种方式无需本地安装，适合快速验证效果。
步骤 1：创建 HTML 文件
新建一个文件，命名为 index.html，内容如下：
<!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">
<!-- 可选：引入字体图标（Font Awesome）增强视觉效果 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容开始 -->
<div class="container mt-5">
<h1 class="text-center">欢迎使用 Bootstrap4</h1>
<p class="text-muted text-center">这是一个响应式标题，无论在手机还是电脑上都会自动调整。</p>
<!-- 按钮组件示例 -->
<div class="text-center mt-4">
<button class="btn btn-primary btn-lg">点击我！</button>
<button class="btn btn-outline-danger mx-2">取消</button>
</div>
</div>
<!-- 引入 Bootstrap4 的 JS 和 jQuery（必须按顺序） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
说明：
meta viewport：确保页面在移动设备上正确缩放。link标签引入了 Bootstrap 4.6.2 的 CSS 文件，通过 CDN 加载，速度快且稳定。script标签中，jQuery 是 Bootstrap JS 插件的依赖，必须先引入。bootstrap.bundle.min.js包含了所有 Bootstrap 的 JavaScript 功能（如模态框、下拉菜单等），无需单独引入 popper.js。
✅ 小贴士：如果你只是做静态页面展示，CDN 方式完全够用。但如果你要做复杂交互或离线项目，建议使用本地安装。
安装方式二：本地下载并集成
当你需要离线开发、自定义样式或构建复杂项目时，本地安装就显得更有优势了。这就像你买了一套工具，自己组装，用起来更灵活、更可控。
步骤 1：下载 Bootstrap4
访问官方 GitHub 页面：https://github.com/twbs/bootstrap
点击 “Releases” 选项卡，找到 v4.6.2 版本，下载 bootstrap-4.6.2-dist.zip。
解压后你会看到以下目录结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ └── bootstrap-grid.css
│ └── bootstrap-grid.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.bundle.js
└── fonts/
└── (字体文件)
步骤 2：将文件放入项目目录
将 css 和 js 文件夹复制到你的项目根目录下，比如 assets/ 文件夹中。
步骤 3：修改 HTML 引入路径
将原来的 CDN 链接替换成本地路径：
<!-- 引入本地 Bootstrap CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入本地 jQuery 和 Bootstrap JS -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
⚠️ 注意：确保
jquery-3.6.0.min.js也放在assets/js/目录下，否则会报错。
响应式栅格系统详解
Bootstrap4 最强大的功能之一，就是它的栅格系统。你可以把它想象成“网页的骨架”——它把页面划分为 12 列，你可以自由组合，实现多端自适应。
代码示例：创建三栏布局
<div class="container mt-5">
<div class="row">
<!-- 第一列：占 4 格 -->
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">栏目一</h5>
<p class="card-text">这是第一栏内容。在手机上会占满一行，平板上变为 1/3 宽。</p>
</div>
</div>
</div>
<!-- 第二列：占 4 格 -->
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">栏目二</h5>
<p class="card-text">第二栏内容。在桌面端并排显示，手机上会堆叠。</p>
</div>
</div>
</div>
<!-- 第三列：占 4 格 -->
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">栏目三</h5>
<p class="card-text">第三栏内容。三栏布局轻松实现，无需写一行媒体查询。</p>
</div>
</div>
</div>
</div>
</div>
属性说明：
col-12：在超小屏幕（<576px）下占 12 格（即整行）。col-md-4：在中等屏幕（≥768px）下占 4 格，三列刚好平分 12 格。h-100：让卡片高度填满父容器，保持视觉统一。
💡 响应式断点：
xs（<576px）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）。你可以组合使用多个断点，实现更精细的控制。
常用组件实战：按钮与导航栏
按钮组件
Bootstrap 提供了丰富的按钮样式，只需添加对应类名即可。
<!-- 基础按钮 -->
<button class="btn btn-primary">主按钮</button>
<!-- 按钮大小 -->
<button class="btn btn-success btn-lg">大按钮</button>
<button class="btn btn-warning btn-sm">小按钮</button>
<!-- 按钮组 -->
<div class="btn-group mt-3" role="group">
<button class="btn btn-secondary">左</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-secondary">右</button>
</div>
导航栏（Navbar）
一个现代化的网页，几乎都离不开导航栏。Bootstrap4 让它变得极简。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">我的网站</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></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表示在大屏上展开，小屏上折叠；data-toggle和data-target是 Bootstrap 的 JavaScript 控制器，配合 JS 实现折叠功能。
项目实战：构建一个简单的博客页面
让我们把前面学到的知识整合起来，做一个完整的示例页面。
<!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="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">我的博客</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><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>
<!-- 主内容区 -->
<div class="container mt-4">
<div class="row">
<div class="col-12 col-lg-8">
<article class="card mb-4">
<div class="card-body">
<h2 class="card-title">如何快速上手 Bootstrap4</h2>
<p class="text-muted small">发布于 2025 年 4 月 5 日</p>
<p class="card-text">
Bootstrap4 安装使用非常简单，无论是通过 CDN 还是本地部署，都能快速搭建响应式界面。
本文介绍了从零开始的完整流程，适合初学者参考。
</p>
<a href="#" class="btn btn-outline-primary">阅读全文</a>
</div>
</article>
</div>
<div class="col-12 col-lg-4">
<div class="card">
<div class="card-header">热门文章</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Vue 3.0 新特性解析</li>
<li class="list-group-item">JavaScript 异步编程入门</li>
<li class="list-group-item">CSS Grid 布局实战</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
这个页面包含了：
- 响应式导航栏
- 两栏布局（主内容 + 侧边栏）
- 卡片组件
- 列表组
- 按钮与链接
只需一个 HTML 文件，即可运行，无需额外配置。
总结与建议
Bootstrap4 安装使用，关键在于理解“组件化”和“响应式”两大核心思想。它不是让你写更多代码，而是让你用更少的代码，实现更专业的效果。
- 初学者：优先使用 CDN，快速上手，验证想法。
- 中级开发者：推荐本地安装，便于定制、调试和部署。
- 项目开发：建议结合 Sass 编译，自定义主题变量，提升维护性。
记住，工具只是手段，核心还是“让用户体验更好”。Bootstrap4 帮你省下时间，把精力留给真正重要的事——内容与交互。
现在，打开你的编辑器，动手试试吧！你会惊讶于，一个漂亮的网页，原来可以这么快完成。