从零开始：用 Bootstrap4 创建一个网页
在当今快速发展的前端开发领域，一个响应式、美观且兼容多设备的网页，已经成为基本要求。而 Bootstrap 4 正是帮助我们快速实现这一目标的利器。它不仅提供了丰富的预设样式和组件，还内置了强大的响应式网格系统，让开发者无需从头造轮子。
如果你是初学者，可能会觉得“写网页”是一件复杂的事情：HTML 结构要清晰，CSS 样式要灵活，还要考虑手机、平板、桌面等不同屏幕的显示效果。但 Bootstrap 4 的出现，就像为网页开发搭建了一座“预制房屋”——你只需要选择合适的模块，拼接起来就能快速成型。
今天，我们就以一个真实场景为例，手把手带你用 Bootstrap 4 创建一个完整的网页。整个过程不会涉及复杂的 JavaScript 或框架，适合零基础入门者，也适合中级开发者温故知新。
项目背景：一个简单的个人作品集页面
设想你是一位前端新手，刚刚完成几个小项目，想建一个展示作品的个人网页。页面需要包含：头部导航栏、作品展示区、关于我、联系方式等模块。要求在手机、平板和电脑上都能正常显示。
这个需求，正是 Bootstrap 4 的典型应用场景。
引入 Bootstrap 4 到项目中
在开始编码前，我们需要将 Bootstrap 4 的核心文件引入到 HTML 页面中。最简单的方式是使用 CDN（内容分发网络）链接，无需下载文件，直接在线调用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的作品集</title>
<!-- 引入 Bootstrap 4 的 CSS 样式文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选：自定义样式文件（放在 Bootstrap 之后） -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 页面内容将放在这里 -->
</body>
</html>
✅ 注释说明：
<!DOCTYPE html>声明文档类型，告诉浏览器这是 HTML5。<meta charset="UTF-8">设置字符编码为 UTF-8，支持中文。viewport设置视口，确保页面在移动设备上正确缩放。rel="stylesheet"表示这是一个样式表文件。cdn.jsdelivr.net是一个可靠的公共 CDN 服务，加载速度快。
通过这三行代码，你就已经为项目搭建好了 Bootstrap 4 的基础环境。接下来，就可以开始构建页面结构了。
构建响应式导航栏
导航栏是网页的“门面”，它需要在不同设备上表现一致。Bootstrap 4 提供了 .navbar 类来轻松创建响应式导航栏。
<!-- 导航栏开始 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<!-- 网站标题 -->
<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">
<a class="nav-link" href="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">作品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">关于我</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">联系</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 导航栏结束 -->
✅ 注释说明：
navbar-expand-lg表示在大屏幕（≥992px）上展开，小屏幕上折叠。navbar-dark使用深色文字与背景对比，bg-primary设置为蓝色背景。data-toggle="collapse"和data-target="#navbarNav"是 Bootstrap 的 JavaScript 控制属性，用于控制菜单的展开/收起。ml-auto将菜单项推到右侧，实现“右对齐”布局。nav-link是导航链接的标准类，自动处理悬停效果。
当你在手机上打开页面时，会看到一个“三横线”按钮（汉堡菜单），点击后弹出菜单。这就是响应式设计的体现。
使用网格系统布局内容区域
Bootstrap 4 的网格系统是其最核心的功能之一。它基于 12 列的弹性布局，让页面内容能自动适应不同屏幕。
我们来创建一个作品展示区，展示 3 个作品卡片。
<!-- 作品展示区开始 -->
<section id="projects" class="py-5">
<div class="container">
<h2 class="text-center mb-4">我的作品</h2>
<!-- 网格容器 -->
<div class="row">
<!-- 第一个作品卡片 -->
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="项目 1">
<div class="card-body">
<h5 class="card-title">响应式登录页</h5>
<p class="card-text">使用 HTML + CSS + Bootstrap 4 实现的登录界面，支持手机适配。</p>
<a href="#" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
<!-- 第二个作品卡片 -->
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="项目 2">
<div class="card-body">
<h5 class="card-title">个人博客模板</h5>
<p class="card-text">简洁风格的静态博客页面，适合技术分享。</p>
<a href="#" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
<!-- 第三个作品卡片 -->
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="项目 3">
<div class="card-body">
<h5 class="card-title">待办事项应用</h5>
<p class="card-text">前端实现的简单任务管理工具，支持增删改查。</p>
<a href="#" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 作品展示区结束 -->
✅ 注释说明：
col-md-4表示在中等及以上屏幕（≥768px）上每行显示 3 列（12 ÷ 3 = 4）。mb-4添加底部外边距，防止卡片堆叠太紧密。card是 Bootstrap 的卡片组件，模拟真实卡片效果。h-100让卡片高度占满父容器，保持对齐。shadow-sm添加轻微阴影，提升视觉层次感。btn-outline-primary是一个带边框的蓝色按钮，视觉友好。
这个网格布局会自动处理响应：在手机上，每行只显示 1 个卡片；在平板上显示 2 个；在电脑上显示 3 个。完全不用写额外的 CSS。
添加关于我与联系方式模块
继续用类似方式，添加“关于我”和“联系”模块。
<!-- 关于我模块 -->
<section id="about" class="py-5 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<h3 class="text-center mb-4">关于我</h3>
<p class="lead text-center">你好，我是前端开发者小李，热爱用代码创造美观的网页。</p>
<p class="text-justify">
我从 2022 年开始学习前端技术，专注于 HTML、CSS 和 JavaScript 的实践。目前熟练掌握 Bootstrap、Vue 3.0 等主流框架。
希望通过这个作品集，与更多同行交流，共同进步。
</p>
</div>
</div>
</div>
</section>
<!-- 联系方式模块 -->
<section id="contact" class="py-5">
<div class="container">
<h3 class="text-center mb-4">联系我</h3>
<div class="row justify-content-center">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入你的名字">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="example@domain.com">
</div>
<div class="form-group">
<label for="message">留言</label>
<textarea class="form-control" id="message" rows="4" placeholder="写下你的想法..."></textarea>
</div>
<button type="submit" class="btn btn-success btn-block">发送消息</button>
</form>
</div>
</div>
</div>
</section>
✅ 注释说明：
bg-light设置浅灰色背景，与上一模块形成视觉对比。justify-content-center让内容在容器中居中。form-control是 Bootstrap 提供的输入框样式，统一外观。btn-block让按钮占满父容器宽度，适合表单提交。
添加 JavaScript 支持（可选但推荐）
为了让导航栏在移动端正常工作，需要引入 Bootstrap 的 JavaScript 文件。
<!-- 在 </body> 标签前添加 -->
<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>
✅ 注释说明：
jquery.min.js是 Bootstrap 的依赖库，必须先加载。bootstrap.bundle.min.js包含所有 Bootstrap 的 JavaScript 功能（包括折叠、模态框、提示等）。- 使用
bundle版本可以减少 HTTP 请求，提升性能。
总结：Bootstrap4 创建一个网页的完整流程
通过以上步骤，我们成功完成了一个完整的网页开发。整个过程清晰、高效，且无需编写复杂的 CSS。
Bootstrap 4 不仅简化了布局和组件的编写，更重要的是它让“响应式设计”变得触手可及。无论你是初学者还是中级开发者，掌握 Bootstrap 4 都能显著提升你的开发效率。
当你站在浏览器前，看到一个在手机、平板、电脑上都表现良好的页面时，那种成就感是无与伦比的。这正是前端开发的魅力所在。
记住，Bootstrap 4 创建一个网页，不是“抄代码”，而是“用工具造房子”。理解它的结构与逻辑，你才能真正驾驭它，而不是被它束缚。
现在，轮到你了。打开你的代码编辑器，复制本文的代码，动手试试吧！