Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-使用Bootstrap实现网页响应式布局

第9章使用Bootstrap实现网页响应式布局
课程名称Web前端开发项目名称
使用Bootstrap实现
网页响应式布局任务名称使用Bootstrap实现网页响应式布局课时 6
项目性质□演示性□验证性□设计性√综合性
授课班级授课日期授课地点
教学目标能力目标：
1. 具备应用Bootstrap实现响应式布局的能力
2. 具备灵活运用Bootstrap的能力
知识目标：
1. 掌握Bootstrap框架的基本语法
2. 掌握运用Bootstrap实现各种响应式布局的方法素质目标：
1. 培养学生信息搜集能力
2. 培养学生团结合作、互帮互助的能力
教学内容1. 任务描述
2. 任务展示与实现
（1）实现云景旅游公司首页Bootstrap布局（2）学生动手操作
3. 教师讲解本任务涉及的知识点
4. 任务小结
教学重点
1. Bootstrap框架的基本语法
2. Bootstrap框架实现响应式网页
教学难点 1. Bootstrap框架实现响应式网页
教学准备1. 装有Sublime或者Hbuilder的电脑
2. 教学课件PPT
3. 教材：《Web前端技术项目式教程》
作业设计1．使用Bootstrap实现公司二级页面“公司概况”的响应式效果。

教学过程
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

课程说明【课前说明】
分别从Bootstrap语法基础，Bootstrap框架的使用方法，讲解响应式网页的实现方法。

【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。

掌握Bootstrap框架的基础，掌握使用Bootstrap框架实现响应式网页的方法。

课程内容描述一、Bootstrap环境搭建
还需要从jQuery官网上下载jQuery.min.js文件，Bootstrap源文件中的.js文件是依赖于jQuery的。

源文件下载好后，将文件夹中编译好的bootstrap.min.css文件和bootstrap.min.js文件存放到网站根目录styles和js文件夹下，并将其引入到网页中。

二、Bootstrap基本概念
1、容器
Bootstrap 4需要一个容器元素来包裹网页的内容，可以使用以下两个容器类。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器。

2、栅格系统
栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，每行中所有容器所占的列数之和必须等于12。

3、样式
Bootstrap提供了丰富的样式类，方便快速实现网页布局及设置样式。

4、组件
Bootstrap作为完整的前端工具集，内置了大量强大、优雅的可重用组件，包含导航、导航栏、按钮、卡片、折叠、轮播、下拉菜单、表单、输入框组、列表组、模态框、分页、弹出框、进度条、滚动条、提示框等。

三、任务实现：使用Bootstrap布局重构旅游公司首页
课堂实训同步训练：
1、任务实现：使用Bootstrap框架重构旅游公司首页
2、任务拓展：使用Bootstrap框架重构二级页面“华阳湖景区”
总结评价
通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用实现响应式布局的基本方法。

本节课主要运用案例教学法，通过使用Bootstrap框架实现云景旅游公司首页响应式效果。

深入理解响应式网页的实现方法，通过实例的方法加强对实现响应式网页的理解，达到能够独立熟练运用Bootstrap框架解决实际问题的能力。

教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方
式。