学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
千锋教育
HTML5+CSS3+JavaScript 网页设计
基础与实战
教学设计
课程名称： HTML5+CSS3+JavaScript 网页设
计基础与实战_____
授课年级： _______________________
授课学期： _______________________
教师姓名： _______________________
2022 年 09 月 09 日
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
课程名称 第 10 章 移动端布局和响应式开发
计划
学时
10 学时
内容分析
本章介绍了视口、流式布局、Flex 布局、rem 单位、媒体查询、Less、Bootstrap
框架和 Bootstrap 栅格系统
教学目标
与
教学要求
【知识目标】
1. 了解 3 种不同的视口
2. 认识和使用 Less
【技能目标】
1. 掌握流式布局、Flex 布局和 rem 布局的应用
2. 熟练使用媒体查询
3. 掌握 Bootstrap 框架和 Bootstrap 栅格系统的应用
【思政育人目标】
1. 培养学生健康的审美观念
2. 引导学生在学习中健全职业道德的规范。
3. 引导学生创新思维和探索的科学精神。
教学重点
掌握 Flex 布局的容器属性和项目属性，熟练使用媒体查询，掌握 Bootstrap
框架的应用
教学难点 实现本章节的 3 个小节案例
教学方式 课堂讲解配合 ppt 演示 1 学时
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
教
学
过
程
第一学时
（视口、流式布局）
一、提出需求，导入学习任务
（1）思考如何设计移动端布局和响应式页面。
移动端的横屏竖屏切换，需要有针对性的响应式布局。移动端布局
有流式布局、Flex 布局、rem 布局等，不同的网页可以使用不同的
布局方式来呈现。而响应式开发能够使页面内容可以在不同的设备
上有适应性地展现出来，让用户更方便地在不同设备上浏览网页。
（2）明确学习方向。
了解 3 种不同的视口
掌握流式布局
二、知识讲解
（一）视口
1.概述
视口(viewport)是浏览器显示页面内容的屏幕区域。视口可以分为布局视
口（ layout viewport）、视觉视口（visual viewport）和理想视口（ ideal
viewport）。
布局视口是指网页的固定宽度，是早期为了解决 PC 端页面在手机上的
显示问题，根据不同的设备而设置的默认宽度。视觉视口是屏幕的可视部分，
不包括屏幕键盘，缩放外的区域，视觉视口比布局视口相同或者更小。理想
视口是指对设备而言最理想的视口尺寸，能够使网页在移动端浏览器上获得
最理想的浏览和阅读的宽度。
2.使用视口
通过<meta>视口标签可以在不同的设备上设置视口，<meta>视口标签的
语法格式如下所示。
<meta name="viewport" content="视口的属性">
完整视口的写法如下所示。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
<meta name=viewport content="width=device-width,user-scalable=no,initial-
scale=,minimum-scale=,maximum-scale=,minimal-ui">
3.移动端基础交互
移动端的显示页面与 PC 端的显示页面是有所区别的，因此需要为全局
页面设置特殊的样式，移动端特殊样式如下所示。
*{
-webkit-tap-highlight-color: transparent; /* 清除点击屏幕时的高亮显示 */
}
html, body {
-webkit-user-select: none; /* 禁止选中文本 */
}
a, img {
-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
input{
-webkit-appearance: none; /* 取消文本框或按钮的默认外观样式，以便自定义
外观 */
}
（二）流式布局
1.概述
流式布局也叫百分比布局，是一种等比例缩放的布局方式，是移动端开
发中经常使用的布局方式之一。流式布局是对页面以百分比方式划分区域进
行排版，可以在不同分辨率下显示相同的版式，将盒子的宽度设置成百分比，
搭配 min-*和 max-*属性使用。流式布局的实现方法是将 CSS 固定像素宽度
换算为百分比宽度，换算公式为“目标元素宽度/父盒子宽度=百分数宽度”。
2.特点
（1）盒子宽度自适应，使用百分比来定义，但高度使用固定 px 像
素值定义。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
（2）盒子内的图标、字体大小等都是固定的，不是所有内容都是
自适应。
（3）在 CSS 样式中，需要使用 min-*和 max-*属性来设置盒子在设
备中的最小宽度和最大宽度，防止任意拉伸页面带来的异常问题的
发生。
3.演示说明
使用流式布局在移动端页面上分别展示 3 张不同比例大小的图片。
三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
第二学时
（Flex 布局、案例）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
掌握 Flex 布局
二、知识讲解
（一）Flex 布局
1.概述
Flex 是 Flexible Box 的缩写，意为“弹性布局”，可为盒状模型提供最大
的灵活性。任何一个容器都可以使用 display 属性指定为 Flex 布局，示例代
码如下所示。
块级元素 display:flex;
内联元素 display:inline-flex;
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项
目”。容器默认存在两根轴，即水平的主轴（main axis）和垂直的交叉轴（也
称为侧轴，cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，
结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross
end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的
交叉轴空间叫做 cross size。
2.容器属性
Flex 布局的容器属性有 6 个，分别为 flex-direction 属性、flex-wrap 属性、flex-flow
属性、justify-content 属性、align-items 属性和 align-content 属性。
（1）flex-direction 属性
flex-direction 属性决定主轴的方向，即项目的排列方向，其语法格式如
下所示。
flex-direction: row | row-reverse | column | column-reverse;
flex-direction 属性有 4 个属性值。
row
row-reverse
column
column-reverse
（2）flex-wrap 属性
在默认情况下，项目都是排在一条轴线上。flex-wrap 属性定义，如果一
条轴线排不下，该如何换行。flex-wrap 属性的语法格式如下所示。
flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap 属性有 3 个属性值。
nowrap
wrap
wrap-reverse
（3）justify-content 属性
justify-content 属性定义项目在主轴上的对齐方式，具体对齐方式与轴的
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
方向有关，其语法格式如下所示。
justify-content: flex-start | flex-end | center | space-between | space-around;
justify-content 属性有 5 个属性值。
flex-start
flex-end
center
space-between
space-around
（4）align-items 属性
align-items 属性定义项目在交叉轴（侧轴）上如何对齐，在子项为单项
时使用，具体的对齐方式与交叉轴的方向有关，其语法格式如下所示。
align-items: flex-start | flex-end | center | baseline | stretch;
align-items 属性有 5 个属性值
flex-start
flex-end
center
baseline
stretch
（5）align-content 属性
align-content 属性定义多根轴线（侧轴）的对齐方式。如果项目只有一
根轴线，该属性不起作用，即 flex-wrap 属性没有使用 wrap 换行，align-content
属性不起作用。align-content 属性的语法格式如下所示。
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
align-content 属性有 6 个属性值
flex-start
flex-end
center
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
space-between
space-around
stretch
（6）flex-flow 属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认
值为 row nowrap。flex-flow 属性的语法格式如下所示。
flex-flow: <flex-direction> || <flex-wrap>;
3.项目属性
上述的 6 个容器属性都是添加在父元素上的，而子元素也带有一些相关
属性。Flex 布局的项目属性有 6 个，分别为 order 属性、flex-grow 属性、flex-shrink
属性、flex-basis 属性、flex 属性和 align-self 属性。
（1）order 属性
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。order
属性的语法格式如下所示。
order: <integer>;
（2）flex-grow 属性
flex-grow 属性定义项目的放大比例，默认值为 0，即如果存在剩余空间，
也不放大。flex-grow 属性的语法格式如下所示。
flex-grow: <number>; /* default 0 */
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。如果一
个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比
其他项多一倍。
（3）flex-shrink 属性
flex-shrink 属性定义项目的缩小比例，默认值为 1，即如果空间不足，
该项目将缩小。flex-shrink 属性的语法格式如下所示。
flex-shrink: <number>; /* default 1 */
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩
小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
前者不缩小。负值对 flex-shrink 属性无效。
（4）flex-basis 属性
flex-basis 属性定义在分配多余空间之前，项目占据的主轴空间（main
size）。浏览器根据 flex-basis 属性，计算主轴是否有多余空间。它的默认值
为 auto，即项目的本来大小。flex-basis 属性的语法格式如下所示。
flex-basis: <length> | auto; /* default auto */
flex-basis 属性如果设为跟 width 属性或 height 属性一样的值（例如
360px），则项目将占据固定空间。
（5）flex 属性
flex 属性是 flex-grow 属性、flex-shrink 属性和 flex-basis 属性的简写，
默认值为 0 1 auto。flex-shrink 属性和 flex-basis 属性为可选属性。当 flex 属
性只写一个数值时，该数值代表项目中元素占据的份数，如“flex:1;”表示项
目中的各个子元素平均分配该项目的空间。
flex 属性的语法格式如下所示。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex 属性有 2 个快捷值，即 auto (1 1 auto) 和 none (0 0 auto)。建议优先
使用 flex 属性，而不是单独写 3 个分离的属性，因为浏览器会推算相关值。
（6）align-self 属性
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果
没有父元素，则等同于 stretch。align-self 属性的语法如下所示。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self 属性可以取 6 个值，除了 auto，其他都与 align-items 属性完全
一致。
（三）案例讲解
讲解图书活动 Flex 布局案例。
三、知识巩固
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
第三学时
（rem 单位、媒体查询）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
认识 rem 单位
掌握媒体查询的使用
二、知识讲解
（一）rem 单位
rem(root em)是一个相对单位，类似于 em。em 作为 font-size 的单位时，
代表其父元素的字体大小；em 作为其他属性单位时，代表自身字体大小。rem
作用于非根元素时，相对于根元素（html）字体大小；rem 作用于根元素字
体大小时，相对于其初始字体大小。例如，根元素设置 font size= 14px，非
根元素设置 width:2rem，则非根元素的 px 像素值为 28px。
rem 优点是可以通过修改根元素（html）里面的文字大小来修改页面里
面的元素大小，通过 rem 既可以做到只修改根元素就成比例地调整所有字体
大小，又可以避免字体大小逐层复合的连锁反应。
（二）媒体查询
1.定义
响应式开发是利用 CSS 中的媒体查询功能来实现的，即@media 方式。
使用@media 查询，可以针对不同的媒体类型和屏幕尺寸来定义不同的样式
操作。媒体查询的语法格式如下所示。
@media 媒体类型 and|not|only 媒体特性{
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
CSS code
}
媒体类型是将不同的终端设备划分成不同的类型。and（与）、not（非）
和 only（只有）为关键字，可将媒体类型或多个媒体特性连接在一起作为媒
体查询的条件。and 可将多个媒体特性连接在一起；not 可排除某个媒体类型，
可以省略；only 可指定某个特定的媒体类型，可以省略。媒体特性是设备自
身具有的特性，如屏幕尺寸等。
2.媒体类型
媒体类型的取值如下。
all
print
screen
speech
3.媒体特性
媒体特性的取值如下。
max-width
min-width
max-height
min-height
orientation
4.注意事项
媒体查询有 2 点需要注意的事项，如下所述。
（1）媒体查询通常是根据屏幕的尺寸按照从大到小或者从小到大
的顺序来编写代码，建议按照从小到大的顺序，这是由于后面的样
式会覆盖前面的样式，当屏幕尺寸区间有重合的地方时，可以省略
重合区间的代码。
（2）min-width 最小值和 max-width 最大值都是包含等于的，在赋
值时，一定要注意这一点。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
5.演示说明
在网页上，根据不同的屏幕尺寸将文字设置为不同的颜色。当屏幕尺寸
小于 600px 时，文字颜色为黑色；当屏幕尺寸在 600px~800px 时，文字颜色
为红色；当屏幕尺寸大于 800px 时，文字颜色为绿色。
三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
第四学时
（Less、案例）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
了解 Less
二、知识讲解
（一）Less
1.概述
Less 是一种动态样式语言，属于 CSS 预处理语言的一种。它使用类似
CSS 的语法为 CSS 的赋予了动态的特性，如变量、继承、运算、函数等，
更方便 CSS 的编写和维护实现 CSS 模块化。Less 可以在多种语言，环境中
使用，包括浏览器端、桌面客户端、服务端。
通过 CSS 预处理技术可以很好的提升 CSS 的编程性，提高 CSS 代码的
开发效率和可维护性，目前比较热门的相关技术有 Sass、Less CSS、Stylus、
Compass 等。
安装
（1）下载
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
通过npm （node 的包管理器）在服务器端安装Less 需要先下载。
的下载地址为 的时候会自动
安装 npm。
（2）安装 lessc 模块
打开 cmd 控制台，输入“npm install -g less”npm 命令，安装 less 模块，-g
是全局安装，如果不加会安装在当前目录。
（3）在 Webstorm 中设置 less
打开 Webstorm，找到 File->Settings-> Tools->File Watchers，添加一个 less
选项。
变量
（1）语法格式
在 Less 中，可以将一个在样式中多次重复的出现的值定义为一个变量，
以方便在计算数值时使用，减少代码的重复率，容易对代码进行维护。Less
变量的语法格式如下所示。
@变量名:值;
（2）命名规范
Less 变量的命名规范如下所示。
使用@为前缀。
不能包含特殊字符。
不能以数字开头。
区分大小写。
嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。用
Less 书写的代码不仅更加简洁，而且模仿了 HTML 的组织结构。
例如，将一段 CSS 代码使用 Less 进行书写。CSS 代码如下所示。
/* CSS 代码 */
#header {
color: #ccc;
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
}
#header .nav {
font-size: 14px;
}
使用 Less 进行书写，如下所示。
/* Less 书写 */
#header {
color: #ccc;
.nav {
font-size: 14px;
}
}
值得注意的是，如果 CSS 代码中有伪类选择器、伪元素选择器、交集
选择器等，使用 less 进行书写时，需要在内层选择器前面添加“&”符号。若
内层选择器前面没有“&”符号，则会被解析为父选择器的后代。
运算
在 Less 中，算术运算符“+（加）”、“-（减）”、“*（乘）”、“/（除）”
可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、
减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。无效的单位换算，例如，px
到 cm 或 rad 到%的转换。
（二）案例讲解
讲解模拟图书官网移动端首页案例。
三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
第五学时
（Bootstrap 框架）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
掌握 Bootstrap 框架
二、知识讲解
（一）Bootstrap 框架
1.响应式开发原理
响应式开发需要一个父级元素作为布局容器，来配合子级元素实现变化
效果。响应式开发的目的是使用媒体查询针对不同设备进行布局以适配不同
宽度的设备，改变布局容器中子元素的排列方式和大小，使一个网页能够在
不同设备上显示不同的页面布局和样式变化，优化用户在不同设备上的使用
体验。
2.响应式尺寸划分
响应式尺寸的划分如下所示。
在超小屏幕（手机，小于 768px）下，可设置宽度为 100%。
在小屏幕（平板，大于等于 768px），可设置宽度为 750px。
在中等屏幕（桌面显示器，大于等于 992px ）下，可设置宽度为
970px。
在大屏幕（大桌面显示器，大于等于 1200px）下，可设置宽度为
1170px。
介绍
Bootstrap 是美国 Twitter （推特）公司的设计师 Mark Otto 和 Jacob
Thornton 合作基于 HTML、CSS 和 JavaScript 开发的简洁、直观、强悍的前
端开发框架，使得 Web 开发更加快捷。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
Bootstrap 有一套标准化的 html+css 编码规范，有自己的生态圈，能够
不断的更新迭代，并提供了一套简洁、直观强悍的组件，让开发更简单，极
大地提高开发的效率。在本书编著时，Bootstrap 的当前版本是 。
使用
Bootstrap 框架的控制权在框架本身，具有预制的样式库、组件和插件，
使用者要按照框架的规范进行开发。Bootstrap 的使用有以下几个步骤。
（1）下载 Bootstrap
首 先 打 开 谷 歌 浏 览 器 ， 访 问 Bootstrap 的 中 文 网 址
“
JavaScript 和字体的预编译压缩版本，不包含文档和源码文件。下载成功后，
解压缩 ZIP 文件，得到 Bootstrap 的文件和目录结构。
（2）引入 bootstrap 文件
新建一个 bootstrap 文件夹，将解压完成的 css、fonts 和 js 文件粘贴复制
到新建的 bootstrap 文件夹，编写网页时只需引入相应的 css、js 即可使用
Bootstrap 的样式。
（3）创建基础模板
在 HTML 中，为 Bootstrap 创建基础模板。
（4）引入相应文件
在 HTML 文件中引入 Bootstrap 的样式文件，如下所示。
<link rel="stylesheet" href="bootstrap/css/">
上述基本配置的准备工作做好之后，即可书写内容。
5.布局容器
在使用 Bootstrap 时，需要为页面内容和栅格系统包裹一个.container 容
器。Bootstarp 提供了 2 个作此用处的容器类，即.container 类和.container-fluid
类。值得注意的是，由于 padding 等属性的原因，这 2 种容器类不能互相嵌
套。
.container 类用于固定宽度并支持响应式布局的容器。值得注意的是，此
处的固定宽度已在类里内置好，不可以自定义宽度。.container 容器类如下所
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
示。
<div class="container">
...
</div>
.container-fluid 类用于 100%宽度，占据全部视口（viewport）的容器，
适合用于移动端开发。.container-fluid 容器类如下所示。
<div class="container-fluid">
...
</div>
三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
第六学时
（Bootstrap 栅格系统、案例）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
掌握 Bootstrap 框架
二、知识讲解
（一）Bootstrap 栅格系统
1.定义
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕
或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统包含
了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
面布局，在开发过程中，可将内容直接放入这些创建好的布局中。
2.工作原理
Bootstrap 栅格系统的工作原理如下所示。
（1 ）“行（row ）”必须包含在.container （固定宽度）或.container-fluid
（ 100% 宽 度 ） 中 ， 以 便 为 其 赋 予 合 适 的 排 列 （ aligment ） 和 内 补
（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3 ）内容应当放置于“列（column ）”内，并且，只有“列（column ）”
可以作为行（row）”的直接子元素。
（4）类似“.row”和“.col-xs-4”这种预定义的类，可以用来快速创建栅格
布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
（5）通过为“列（column）”设置 padding 属性，从而创建列与列之间的
间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消掉为.container 元
素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉
了 padding。
（6）栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例
如，3 个等宽的列可以使用 3 个“.col-xs-4”来创建。
（7）如果一“行（row）”中包含的“列（column）”大于 12，多余的“列
（column）”所在的元素将被作为一个整体另起一行排列。
（8）Bootstrap 栅格系统为不同屏幕宽度定义了不同的类。
3.栅格参数
Bootstrap 栅格系统在多种屏幕设备上的工作参数如图所示。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
4.列偏移
使用“.col-md-offset-* ”类可以将列向右侧偏移。这些类实际是通过使用
“*”选择器为当前元素增加了左侧的边距（margin）。例如，“.col-md-offset-4”
类将“.col-md-4”元素向右侧偏移了 4 个列（column）的宽度。
5.嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row
元素和一系列.col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行
（row）所包含的列（column）的个数不能超过 12。
（1）演示说明
在 Bootstrap 栅格系统中制作嵌套列，在大屏幕（1200px ）的宽度下，
一行中展示 4 列，每 1 列的份数分别为 3、4、2 和 3，其中，在第 2 列中再
嵌套 2 列，每 1 列的份数分别为 6；在小屏幕（768px）的宽度下，一行中展
示 2 列，第 1 列的份数分别为 4 和 8，第 2 列的份数分别为 6 和 6，其中，
在第 1 行的第 2 列中再嵌套 2 列，每 1 列的份数分别为 6 和 6。
6.列排序
通过使用“.col-md-push-* ”和“.col-md-pull-* ”类可以很容易的改变列
（column）的顺序。例如，将 2 个分别占 5 列和 7 列份数的块元素改变顺序，
示例代码如下所示。
<div class="row">
<div class="col-md-5 col-md-push-7">1.占 5 列</div>
<div class="col-md-7 col-md-pull-5">2.占 7 列</div>
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
</div>
7.响应式工具
利用媒体查询功能，并使用一些工具类针对不同设备展示或隐藏页面内
容，可使移动端页面的开发工作变得更便捷。显示或隐藏页面内容的工具类
如下所示。
（1）在超小屏幕下显示或隐藏页面 内容的工具类为“.visible-xs （超小
屏幕下显示）”和“.hidden-xs（超小屏幕下隐藏）”。
（2 ）在小屏幕下显示或隐藏页面内容的工具类为“.visible-sm （小屏幕
下显示）”和“.hidden-sm（小屏幕下隐藏）”。
（3）在中等屏幕下显示或隐藏页面内容的工具类为“.visible-md（中等
屏幕下显示）”和“.hidden-md（中等屏幕下隐藏）”。
（4）在大屏幕下显示或隐藏页面内容的工具类为“.visible-lg（大屏幕下
显示）”和“.hidden-lg（大屏幕下隐藏）”。
组件
Bootstrop 框架具有预制组件，如表格、表单、按钮、图片等。开发者在
使用组件时，可在 Bootstrop 开发文档中找到相应组件的 class 类名，将其添
加到要应用的元素中，即可在网页中实现该组件的样式。
（二）案例讲解
讲解响应式页面设计案例。
三、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用本章课后作业。
第七~十学时
（上机练习）
学生根据课堂上教师对案例的讲解，进行案例上机练习，以及完成章节
习题中的编程题。上机练习完成后将报告通过平台提交给老师。
学 IT 有疑问，就找千问千知
千里寻他众百度,锋自苦寒磨砺出
教师检查学生对相关知识点的掌握情况。
习题 教材第 10 章习题
教
学
后
记
