在网页开发中，“响应式设计”（适配电脑、手机、平板等不同设备）是必备需求，但手动编写适配代码繁琐且易出错。Bootstrap4 作为全球最流行的前端框架，通过封装好的 CSS 样式与 JavaScript 插件，让开发者无需深入 CSS、JS 知识，就能快速搭建美观、兼容多设备的网页。本文将带你从零开始，掌握 Bootstrap4 的核心用法，迈出响应式开发的第一步。
一、Bootstrap4 是什么？为什么要学它？
1. 核心定义
Bootstrap4 是由 Twitter 开发并开源的前端开发框架，它整合了 HTML、CSS 和 JavaScript，提供了一套标准化的 “组件库”（如按钮、表单、导航栏）和 “布局工具”，核心优势是响应式设计与开发效率提升。
简单来说，Bootstrap4 就像 “网页开发的乐高积木”—— 开发者只需组合框架提供的 “积木”（组件），再根据需求微调样式，就能快速搭建出专业级网页，无需从零编写复杂的适配代码。
2. 学习 Bootstrap4 的 3 大理由
上手门槛低：无需精通 CSS3、JavaScript，掌握基础 HTML 就能快速入门，代码复用性极强；
响应式原生支持：内置的栅格系统自动适配不同屏幕尺寸（手机≤576px、平板≥576px、电脑≥992px 等），无需手动写媒体查询；
生态完善：提供 80 + 基础组件、10+JavaScript 插件（如轮播、模态框），且社区资源丰富，问题易解决。
3. Bootstrap4 的适用场景
快速搭建企业官网、个人博客的原型或正式版本；
开发后台管理系统的基础界面（如数据表格、表单提交）；
制作活动页、宣传页等需要适配多设备的网页。
二、入门第一步：环境搭建（3 种方式任选）
Bootstrap4 的环境搭建非常简单，无需复杂配置，新手推荐前两种 “零安装” 方式：
1. 方式 1：CDN 引入（最推荐，无需下载文件）
CDN（内容分发网络）是远程加载框架资源的方式，只需在 HTML 文件中添加 3 行代码，即可直接使用 Bootstrap4，适合快速开发与学习。
完整基础模板（复制即可直接使用）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name=" vip.maijiLe.com viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap4 基础模板</title>
<!-- 1. 引入Bootstrap4 CSS（核心样式） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- 2. 引入jQuery（Bootstrap4的JS插件依赖jQuery） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- 3. 引入Bootstrap4 JS（包含所有组件的交互逻辑） -->
<script src=" yingchao.maijiLe.com https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, Bootstrap4!</h1>
</body>
</html>
关键说明：
viewport 元标签：必须添加，用于告诉浏览器 “按设备宽度适配网页”，是响应式生效的基础；
依赖关系：Bootstrap4 的 JavaScript 插件（如模态框、下拉菜单）需要 jQuery 支持，所以必须先引入 jQuery。
2. 方式 2：下载本地文件（适合无网络环境）
若需离线开发，可手动下载 Bootstrap4 的压缩文件：
访问 Bootstrap4 官网下载页（https://getbootstrap.com/docs/4.6/getting-started/download/）；
下载 “Compiled CSS and JS” 压缩包，解压后得到css和js文件夹；
将文件夹复制到你的项目目录，按相对路径引入资源：
<!-- 相对路径引入（需确保文件位置正确） -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
3. 方式 3：npm 安装（适合专业前端项目）
若使用 Vue、React 等框架开发，可通过 npm 安装 Bootstrap4，需先安装 Node.js：
# 安装Bootstrap4及依赖
npm install bootstrap@4.6.2 jquery popper.js
三、核心基础：响应式栅格系统
栅格系统是 Bootstrap4 的 “灵魂”，它将网页宽度分为 12 等份，通过 “行（row）” 和 “列（col）” 的组合，实现不同设备上的布局自适应。
1. 栅格系统的核心规则
所有内容必须放在container（固定宽度容器）或container-fluid（全屏宽度容器）中；
“行（row）” 是列的容器，必须直接嵌套在容器中；
“列（col-xx-xx）” 必须直接嵌套在行中，且同一行的列总数≤12；
响应式断点：Bootstrap4 定义了 5 个屏幕尺寸断点，对应不同的列类前缀：
屏幕尺寸设备示例断点宽度（≥）列类前缀
超小屏（Extra Small）手机竖屏0pxcol-
小屏（Small）手机横屏576pxcol-sm-
中屏（Medium）平板768pxcol-md-
大屏（Large）笔记本电脑992pxcol-lg-
超大屏（Extra Large）台式电脑1200pxcol-xl-
2. 栅格系统实战：3 种常见布局
（1）基础等分布局（不同屏幕保持相同比例）
<div class="container mt-3"> <!-- mt-3：margin-top=1rem（16px） -->
<div class="row">
<!-- 3等分：每列占4份（12/3=4） -->
<div class=" epl.maijiLe.com col-4 bg-primary text-white p-3">列1（占4份）</div>
<div class="col-4 bg-secondary text-white p-3">列2（占4份）</div>
<div class="col-4 bg-success text-white p-3">列3（占4份）</div>
</div>
</div>
效果：在手机、平板、电脑上均显示 3 列等分布局，p-3表示内边距为 1rem，背景色类（bg-*）是 Bootstrap4 的内置样式。
（2）响应式自适应布局（不同屏幕显示不同列数）
<div class="container mt-3">
<div class="row">
<!-- 手机：1列（占12份）；平板及以上：2列（各占6份） -->
<div class="col-12 col-sm-6 bg-info text-white p-3">列1</div>
<div class="col-12 col-sm-6 bg-warning text-white p-3">列2</div>
<!-- 手机：1列；平板：2列；电脑：3列 -->
<div class="col-12 col-sm-6 col-lg-4 bg-danger text-white p-3 mt-2">列3</div>
<div class="col-12 col-sm-6 col-lg-4 bg-dark text-white p-3 mt-2">列4</div>
<div class=" yczb.maijiLe.com col-12 col-sm-12 col-lg-4 bg-light text-dark p-3 mt-2">列5</div>
</div>
</div>
效果解析：
手机屏幕（<576px）：所有列占 12 份，显示为 1 列堆叠；
平板屏幕（≥576px 且 < 992px）：前两列各占 6 份（2 列），后三列中前两列各占 6 份、最后一列占 12 份；
电脑屏幕（≥992px）：前两列 2 列等分，后三列 3 列等分。
（3）列偏移与排序
<div class="container mt-3">
<div class="row">
<!-- 偏移3份：左边空出3份宽度 -->
<div class="col-6 offset-3 bg-primary text-white p-3">居中显示（占6份，偏移3份）</div>
</div>
<div class="row mt-3">
<!-- 排序：order-1优先显示，order-3最后显示 -->
<div class="col-4 order-2 bg-secondary text-white p-3">本来是第1个</div>
<div class="col-4 order-1 bg-success text-white p-3">本来是第2个（优先显示）</div>
<div class="col-4 order-3 bg-danger text-white p-3">本来是第3个（最后显示）</div>
</div>
</div>
四、常用组件：快速搭建网页元素
Bootstrap4 提供了大量封装好的组件，直接复制代码即可使用，以下是 8 个最常用的组件实战：
1. 按钮（Buttons）
支持多种样式、尺寸和状态，无需手动写 CSS：
<div class="container mt-3">
<!-- 不同样式按钮 -->
<button yc.maijiLe.com 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>
<button type="button" class="btn btn-link">链接样式按钮</button>
<!-- 不同尺寸按钮 -->
<button type="button" class="btn btn-primary btn-lg mt-2">大按钮</button>
<button type="button" class="btn btn-primary mt-2">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm mt-2">小按钮</button>
<!-- 状态按钮 -->
<button type="button" class="btn btn-primary mt-2" disabled>禁用按钮</button>
<button type="button" class="btn btn-primary mt-2 active">激活状态按钮</button>
</div>
2. 表单（Forms）
快速创建美观的响应式表单，支持输入框、下拉框、复选框等：
<div class="container mt-3">
<form>
<!-- 文本输入框 -->
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<!-- 下拉框 -->
<div class="form-group">
<label for="city">所在城市</label>
<select class="form-control" id="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</div>
<!-- 复选框与单选框 -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="agree">
<label class="form-check-label" for="agree">同意用户协议</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="male" checked>
<label class="form-check-label" for="male">男</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="female">
<label class="form-check-label" for="female">女</label>
</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
</div>
3. 导航栏（Navbar）
响应式导航栏，在手机上会自动折叠为汉堡菜单：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 品牌Logo -->
<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 ml-auto"> <!-- ml-auto：右对齐 -->
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
关键属性：
navbar-expand-lg：大屏展开菜单，小屏折叠；
data-toggle="collapse"：点击按钮触发折叠 / 展开；
data-target="#navbarNav"：指定折叠的菜单 ID。
4. 卡片（Cards）
用于展示内容的容器，常用于产品列表、文章摘要等：
<div class="container mt-3">
<div class="row">
<!-- 卡片1 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card h-100"> <!-- h-100：高度自适应 -->
<img src="https://picsum.photos/400/200" class="card-img-top" alt="产品图片">
<div class="card-body">
<h5 class="card-title">产品名称1</h5>
<p class="card-text">这是产品1的简短描述，介绍产品的核心功能与优势。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 卡片2 -->
<div class="col-12 col-md-6 col-lg-3 mt-3 mt-md-0">
<div class="card h-100">
<img src="https://picsum.photos/401/200" class="card-img-top" alt="产品图片">
<div class="card-body">
<h5 class="card-title">产品名称2</h5>
<p class="card-text">这是产品2的简短描述，介绍产品的核心功能与优势。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
5. 轮播图（Carousel）
自动切换的图片轮播组件，常用于网页顶部 Banner：
<div class="container mt-3">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示器（小圆点） -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active"> <!-- active：默认显示 -->
<img src="https://p</doubaocanvas>
