模块1 Bootstrap 5响应式网页
设计基础
Bootstrap概述
Bootstrap起源
Bootstrap起源于2011年，由工程师马克·奥托（Mark Otto）和雅各布·索顿（Jacob Thornton）合作
开发。他们发现当时的网页设计工具集不够完善，缺乏一些基本的样式和组件，而这会使得开发人员的
工作更加困难。为了解决这个问题，他们决定创建一个基于HTML、CSS和JavaScript的开源框架，提
供一些基本的样式和组件，使得开发人员可以更快地构建响应式网站。最初，Bootstrap主要被用于
Twitter的网页设计。在经过一段时间的迭代和改进后，Bootstrap逐渐受到开发人员的欢迎，并成为目
前受欢迎的前端开发框架之一。
Bootstrap概述
Bootstrap的特点
易于使用
使用方便
响应式
移动优先
浏览器兼容性
开源社区
Bootstrap概述
Bootstrap 5的主要优势
（1）移除jQuery依赖
Bootstrap 5最大的改进之一是移除了对jQuery的依赖，转而完全采用原生JavaScript编写插件。这一变化不仅使得项目的加载
速度更快，还降低了项目的依赖性，使得Bootstrap 5的性能得到了显著提升。此外，Bootstrap 5还通过优化CSS和JavaScript代
码，减少了项目的加载时间，提高了页面的响应速度。
（2）强大的自定义能力
Bootstrap 5提供了更丰富的CSS和Sass变量，允许开发人员轻松定制主题，满足个性化需求。无论是颜色、字体还是间距，
都可以根据项目的具体需求进行调整，从而创造出独一无二的网站风格。
（3）更好的无障碍支持
Bootstrap 5增强了对无障碍特性的支持，使得网站更易于所有用户访问。这对于提升网站的可访问性和用户体验至关重要，
尤其是在面向多样化用户群体的项目中。
（4）新的组件和改进
Bootstrap 5引入了许多新的组件和改进，包括更丰富的间距类、新的排版工具、改进的图库布局，以及全新的徽章、徽标和
按钮样式。这些新特性使得开发人员能够更加灵活地构建各种复杂的网页布局和交互效果。
Bootstrap概述
Bootstrap 5的主要优势
（5）响应式网格系统
Bootstrap 5提供了一套基于移动优先的响应式网格系统，基于Flexbox构建，适用于不同屏幕尺寸的设备。该系统允许开发人
员创建等宽或不等宽的列，并支持嵌套和偏移。通过简单的类名组合，开发人员可以轻松地实现响应式布局，确保网站在不同尺
寸和分辨率的设备上都能呈现出良好的视觉效果。这种响应式设计特性使得网站能够适应现代多设备浏览的环境。
（6）简单易学和灵活性
Bootstrap 5简洁的类名、直观的布局结构和丰富的文档使得开发人员能够轻松地掌握其使用方法和技巧，即使是初学者也能
快速上手。同时，它提供了大量预设的组件和布局选项，使开发人员可以根据项目需求进行组合和调整。这种灵活性使得
Bootstrap 5成为构建各种类型网站的理想选择。
（7）广泛的社区支持
Bootstrap拥有庞大的开发者社区，这意味着有海量的资源和插件可以选择。当开发人员遇到问题时，可以很容易地在社区中
找到解决方案或寻求帮助。此外，Bootstrap的更新也非常频繁，保证了开发者能够始终使用到最新的技术和工具。
（8）较好的兼容性
Bootstrap 5支持众多现代浏览器，这确保了使用其开发的网站能够广泛地被各种用户访问和浏览。
Bootstrap 5主要内容
（1）组件和工具：基于HTML、CSS和JavaScript的组件和工具。
（2）网格系统：用于根据不同设备的屏幕大小调整网站布局的响应式设计系统。
（3）排版：包括标题、段落、列表、表格等基本的文本排版元素。
（4）图像：用于处理图像的各种样式和工具，如缩放、裁剪、圆角等。
（5）按钮：各种类型的按钮，包括基础按钮、下拉按钮、工具栏按钮等。
（6）导航：包括导航栏、标签页、面包屑、下拉菜单等与导航相关的组件。
（7）表单：包括各种表单元素、表单控件、表单验证等。
（8）模态：用于创建模态窗口和对话框的组件。
（9）轮播图：用于展示图片或内容的轮播组件。
（10）工具提示：用于展示提示信息的工具提示组件。
（11）其他组件：包括对话框、卡片、图标、徽章（Badge）等其他类型的组件。
固定宽度容器
.container类用于创建固定宽度的响应式页面，不同屏幕宽度及对应的max-width值如表1-1所示。
超大型屏幕（≥1400px）是Bootstrap 5新增加的，Bootstrap 4最大可支持特大型屏幕（≥1200px）。
不同屏幕
宽度
超级小型
屏幕（宽度
＜576px）
小型屏幕
（宽度≥
576px）
中型屏幕
（宽度≥
768px）
大型屏幕
（宽度≥
992px）
特大型屏幕
（宽度≥
1200px）
超大型屏幕
（宽度≥
1400px）
max-width 100% 540px 720px 960px 1140px 1320px
表1-1 不同屏幕宽度及对应的max-width值
固定宽度容器
【示例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>响应式网页示例</title>
<link href="../-dist/css/" rel="stylesheet" type="text/css">
<script src="../-dist/js/"></script>
</head>
<body>
<div class="container">
<h1> Bootstrap 页面</h1>
<p> .container 类提供了固定宽度的容器。</p>
</div>
</body>
</html>
【验证示例1-1】基于固定宽度容器.container创建响应式网页
创建响应式网页，尝试调整浏览器窗口的大小来查看容器宽度在不同屏幕中的变化。
100%宽度的容器
.container-fluid类用于创建100%宽度（全屏幕尺寸），即占据全部视口的容器，这类容器总是跨越整个屏幕
宽度（width总是100%）。
当屏幕宽度小于768px时，.container容器和.container-fluid容器的宽度与屏幕宽度相同，二者的效果相同。
当屏幕宽度大于等于768px且小于992px时，.container容器的宽度被设定为750px。
当屏幕宽度大于等于992px且小于1200px时，.container容器的宽度被设定为970px。
当屏幕宽度大于等于1200px时，.container容器的宽度被设定为1170px。
.container类有一个特点，就是在不同屏幕大小下，其容器的左右margin会自动调整为auto，以使容器始终保
持居中。
总的来说，选择使用哪个类取决于具体需求。如果页面需要适应不同大小的屏幕，并且页面内容较多，那么
.container类可能更合适。如果页面需要全屏显示，并且页面内容较少，那么.container-fluid类可能更合适。
100%宽度的容器
【验证示例1-2】创建容器宽度为100%的响应式网页
创建响应式网页，该网页中容器宽度始终为100%。
【示例代码】
<div class="container-fluid">
<h1>Bootstrap页面</h1>
<p>使用了.container-fluid类，创建了宽度占据全部视口的容器。</p>
</div>
【代码解读】
在本示例代码中，使用了.container-fluid类创建一个宽度始终为100%的容器。与固定宽度的容器不同，宽度
始终为100%的容器会根据浏览器窗口的大小自动调整大小。可能更合适。
容器边距
1．内边距类
（1）.p-*：设置元素所有方向的内边距（padding），其中*表示大小级别（0到5）。
（2）.pt-*、.pb-*、.pl-*、.pr-*：分别设置元素顶部、底部、左侧和右侧的内边距。
2．外边距类
（1）.m-*：设置元素所有方向的外边距（margin），其中*表示大小级别（0到5）。
（2）.mt-*、.mb-*、.ml-*、.mr-*：分别设置元素顶部、底部、左侧和右侧的外边距。
3．额外的边距类
Bootstrap 5还提供了一些额外的边距类，用于更精细地控制间距。
（1）.px-*和.py-*：分别设置元素水平方向和垂直方向的内边距或外边距。
（2）.mx-*和.my-*：分别设置元素水平方向和垂直方向的外边距大小级别。
以上每个类别的后面都跟着一个数字，这个数字表示边距的大小。例如，pt-3表示元素的顶部内边距为3px。
4．自定义边距大小
除了预设的边距大小级别外，Bootstrap 5还允许使用Sass变量（如$spacer）来自定义边距大小。例如，可以将内边距或外
边距的大小设定为$spacer的某个倍数，如.mt-3表示将顶部外边距大小设定为$spacer的3倍。
容器边距
【验证示例1-3】设置容器边距
创建响应式网页，并设置容器边距。
【示例代码】
<div class="container">
<div class="row">
<div class="col-6 pt-3">
<p>这是一个带有顶部内边距的列。</p>
</div>
</div>
<div class="row">
<div class="col-4 pb-5">
<p>这是一个带有底部内边距的列。</p>
</div>
<div class="col-4 pl-5">
<p>这是一个带有左侧内边距的列。</p>
</div>
<div class="col-4 pr-5">
<p>这是一个带有右侧内边距的列。</p>
</div>
</div>
</div>
容器的边框和颜色
Bootstrap 5也提供了一些边框（.border）和颜色（.bg-dark、.bg-primary等）类来设置容器的样式。
1．边框样式类
（1）.border：给元素添加浅灰色的边框。
（2）.border-*：设置元素的边框颜色，如.border-success、.border-danger等。
（3）.border-0：删除元素的边框。
（4）.rounded-0：删除元素的圆角。
（5）.rounded-*：设置元素的圆角大小，如.rounded-circle、.rounded-pill等。
2．颜色样式类
（1）设置元素背景色的类。
设置元素背景色的类有：.bg-primary、.bg-secondary、.bg-dark、.bg-light、.bg-white、.bg-body。
（2）设置元素文本颜色的类。
设置元素文本颜色的类有：.text-primary、.text-secondary、.text-success、.text- danger、.text-warning、
.text-info、.text-light、.text-dark、.text-body、.text-white、.text-muted。
容器的边框和颜色
【验证示例1-4】边框样式类和颜色样式类的使用
创建响应式网页，并设置容器的边框和颜色样式。
【示例代码】
<div class="container p-5 my-5 border">
<p>这个容器有一个边框和一些边距。</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<p>这个容器具有深色背景色和白色文本，以及一些额外的边距。</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<p>这个容器具有蓝色背景色和白色文本，以及一些额外的边距。</p>
</div>
响应式容器
可以使用 .container-sm、 .container-md、 .container-lg、 .container-xl类来创建响应式容器，该容器的max-
width属性值会根据屏幕的大小改变。响应式容器及对应的max-width属性值如表1-2所示。
类名
超级小型屏幕
（宽度＜
576px）
小型屏幕
（宽度
≥576px）
中型屏幕
（宽度
≥768px）
大型屏幕
（宽度
≥992px）
特大型屏幕
（宽度
≥1200px）
超大型屏幕
（宽度≥1400px）
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
表1-2 响应式容器及对应的max-width 属性值
响应式容器
【验证示例1-5】响应式容器的使用
创建响应式网页。
【示例代码】
<div class="container pt-3">
<h1>响应式容器</h1>
<p>重置浏览器大小以查看效果。</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
网格类
Bootstrap 5的网格系统是基于断点的，这意味着在不同的屏幕尺寸和设备上，元素会根据指定的断点调整
大小。
Bootstrap 5网格系统有6个类，具体信息如表1-3所示。
类名 针对的设备类型 屏幕宽度
.col-* 针对所有设备 —
.col-sm-* 平板计算机 等于或大于576px
.col-md-* 桌面显示器 等于或大于768px
.col-lg-* 大型桌面显示器 等于或大于992px
.col-xl-* 特大型桌面显示器 等于或大于1200px
.col-xxl-* 超大型桌面显示器 等于或大于1400px
表1-3 Bootstrap 5网格系统的6个类的具体信息
网格系统规则
设备类型及
尺寸
超小型桌面
显示器（宽度
＜576px）
小型桌面
显示器（宽度
≥576px）
中型桌面
显示器（宽度
≥768px）
大型桌面
显示器（宽度
≥992px）
特大桌面
显示器（宽度
≥1200px）
超大型桌面
显示器（宽度
≥1400px）
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
网格行为 始终水平 折叠开始，在断点之上水平
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
适用于
手机
竖屏
手机
横屏
平板
计算机
笔记本
计算机
笔记本计算机和
台式计算机
笔记本计算机和
台式计算机
列数量和 12
间隙宽度 （一个列的每侧分别为）
可嵌套 Yes
偏移 Yes
列排序 Yes
表1-4 Bootstrap网格系统的网格选项（尺寸单位：px）
Bootstrap 5网格的基本结构
【验证示例1-6】网格的基本结构实例
创建网页 ，该网页中的HTML代码表示了
Bootstrap 5网格的基本结构，HTML代码如下所示，读者可调
整浏览器窗口大小以查看其效果。
【示例代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>响应式网页示例</title>
<link href="../-dist/css/"
rel="stylesheet" type="text/css">
<script src="../-
dist/js/"></script>
<style>
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<!-- 让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col-sm bg-primary text-white text-center">25%</div>
<div class="col-sm bg-dark text-white text-center">25%</div>
<div class="col-sm bg-primary text-white text-center">25%</div>
<div class="col-sm bg-dark text-white text-center">25%</div>
</div>
<br>
<!-- 控制列宽，以及它们在不同设备上的显示效果 -->
<div class="row">
<div class="col-sm-4 bg-primary text-white text-center">%</div>
<div class="col-sm-4 bg-dark text-white text-center">%</div>
<div class="col-sm-4 bg-primary text-white text-center">%</div>
</div>
<br>
<!-- 控制列宽，以及它们在不同设备上的显示效果 -->
<div class="row">
<div class="col-sm-6 bg-primary text-white text-center">50%</div>
<div class="col-sm-6 bg-dark text-white text-center">50%</div>
</div>
<br>
<!-- 让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col-md bg-primary text-white text-center">100%</div>
</div>
</div>
</body>
</html>
Bootstrap 5网格的基本结构
【验证示例1-6】网格的基本结构实例
【代码解读】
使用.col-sm类来定义列，当屏幕宽度小于576px时，Bootstrap会自动处理布局，将列堆叠在一起。
使用.col-sm-4类来定义列，每列占据4个单位（即1/3的行宽），无论屏幕大小如何，都保持这样的布局。
使用.col-sm-6类来定义列，每列占据6个单位（即1/2的行宽），当屏幕宽度小于576px时，Bootstrap会自动处理
布局，将列堆叠在一起。
使用.col-md类来定义列，当屏幕宽度大于或等于768px时，该列会占据整行的宽度。
【显示效果】
图1-3 【验证示例1-6】的显示效果
创建宽度相等的列
【验证示例1-7】创建让Bootstrap自动布局、宽度相
等的列
创建网页，在该网页中创建3个宽度相
等的列，尝试在class="row"中添加新的class="col"，以
显示3个等宽的列。
【模板代码】
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
图1-4 【验证示例1-7】的显示效果
创建宽度相等的列
【验证示例1-8】在平板计算机及更大的屏幕上创建4个
等宽的响应式列
创建网页，在该网页中创建4个等宽的响应式列，
在屏幕宽度小于576px的移动设备上，4个列将会上下堆叠显示。
【模板代码】
<div class="col-sm-3">.col</div>
<div class="col-sm-3">.col</div>
<div class="col-sm-3">.col</div>
<div class="col-sm-3">.col</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
图1-5 【验证示例1-8】的显示效果
创建不等宽的响应式列
【验证示例1-9】在平板计算机及更大的屏幕上创建不
等宽的响应式列
创建网页，在该网页中创建不等宽的响应式列并
扩展到超大型桌面。在移动设备上，即屏幕宽度小于576px时，两
个列将会上下堆叠显示。
【模板代码】
<div class="row">
<div class="col-sm-4">.col</div>
<div class="col-sm-8">.col</div>
</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
图1-6 【验证示例1-9】的显示效果
设置某一列的宽度
【验证示例1-10】设置某一列的宽度
创建网页，在该网页中设置某一列的宽度，如果
只设置一列的宽度，其他列会自动均分剩下的宽度。本实例将列宽
度设置为25%、50%、25%。
【模板代码】
<div class="row">
<div class="col">.col</div>
<div class="col-6">.col-6</div>
<div class="col">.col</div>
</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col bg-success">.col</div>
<div class="col-6 bg-warning">.col-6</div>
<div class="col bg-success">.col</div>
</div>
</div>
图1-7 【验证示例1-10】的显示效果
创建平板计算机和桌面端的网格布局
【验证示例1-11】创建平板计算机和桌面端的网格布局1
创建网页，在该网页中创建平板计算机和桌面端的
网格布局。在桌面端两个列的宽度各占50%；在平板计算机上左边的
宽度为25%，右边的宽度为75%。
【模板代码】
<div class="row">
<div class="col-sm-3 col-md-6">.ool</div>
<div class="col-sm-9 col-md-6">.col</div>
</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary
text-white">.col</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark
text-white">.col</div>
</div>
</div>
图1-8 【验证示例1-11】的显示效果
创建平板计算机、桌面显示器、大型桌面显示器、超大型桌面
显示器的网格布局
【验证示例1-12】创建平板计算机和桌面端的网格布局2
创建网页，在该网页中创建平板计算机、桌面、大
型桌面显示器、超大型桌面显示器的网格布局，在平板计算机、桌面
显示器、大型桌面显示器、超大型桌面显示器的宽度比例分别为：
25%/75%、50%/50%、%/%、%/%。
【模板代码】
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">.col</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">.col</div>
</div>
【示例代码】
<div class="container-fluid mt-3">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary
text-white">.col</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark
text-white">.col</div>
</div>
</div>
图1-9 【验证示例1-12】的显示效果
嵌套列
【验证示例1-13】创建两列布局
创建网页，在该网页中创建两列布局，其中一列内
嵌套着另外两列。
【模板代码】
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
【示例代码】
<div class="container-fluid">
<div class="row">
<div class="col-8 bg-warning p-4">
.col-8
<div class="row">
<div class="col-6 bg-light p-2">.col-6</div>
<div class="col-6 bg-secondary p-2">.col-6</div>
</div>
</div>
<div class="col-4 bg-success p-4">.col-4</div>
</div>
</div>
图1-10 【验证示例1-13】的显示效果
偏移列
【验证示例1-14】使用 .offset-md-4把 .col-md-4右移4
列
创建网页，在该网页中创建偏移列，使用.offset-
md-4把.col-md-4往右移4列。
【模板代码】
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
【模板代码】
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
图1-11 【验证示例1-14】的显示效果
使用本地的Bootstrap导入CSS和JavaScript文件
1．下载Bootstrap
首先，访问Bootstrap的官方网站并下载最新版本的Bootstrap。在下载页面，可以选择下载Bootstrap的源代
码、编译后的CSS和JavaScript文件，或者通过npm/yarn等包管理工具进行安装。为了简单起见，这里我们假
设已经下载了编译后的CSS和JavaScript文件。
2．放置Bootstrap文件
将下载好的Bootstrap压缩包解压，并将css和js文件夹（以及可能需要的fonts文件夹、图标）放置到项目的
适当位置。例如，可以将它们放在项目的assets文件夹内，项目结构如下。
3．在HTML文件中引入Bootstrap文件
现在，需要在HTML文件中引入Bootstrap的CSS和JavaScript文件。通常通过在<head>标签内添加<link>标
签来引入CSS文件，在</body>标签之前添加<script>标签来引入JavaScript文件。
基于Bootstrap 5创建响应式网页
【验证示例1-15】基于Bootstrap 5创建响应式网页
【操作步骤】
基于Bootstrap 5创建响应式网页的操作步骤如下。
1．添加HTML5文档类型
2．移动优先
3．引入Bootstrap的CSS和JavaScript文件
4．创建响应式布局
5．添加响应式导航
6．测试与优化
图1-12 【验证示例1-15】的显示效果
模拟训练
◈ 【模拟实例1-1】基于Bootstrap 5创建响应式网页
◈ 【模拟实例1-2】基于Bootstrap 5创建响应式网页
◈ 【模拟实例1-3】基于Bootstrap 5创建响应式网页
学 习 进 步！
人民邮出版社
