Web前端技术项目式教程电子教案 第9章 使用Bootstrap实现网页响应式布局

PAGE1PAGE第9章使用Bootstrap实现网页响应式布局课程名称网页设计项目名称使用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.装有vscode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计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、容器Bootstrap4需要一个容器元素来包裹网页的内容，可以使用以下两个容器类。.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。2、栅格系统栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，每行中所有容器所占的列数之和必须等于12。3、样式Bootstrap提供了丰富的样式类，方便快速实现网页布局及设置样式。4、组件Bootstrap作为完整的前端工具集，内置了大量强大、优雅的可重用组件，包含导航、导航栏、按钮、卡片、折叠、轮播、下拉菜单、表单、输入框组、列表组、模态框、分页、弹出框、进度条、滚动条、提示框等。任务实现：使用Bootstrap重构中华传统文化网站首页 同步训练：任务实现：使用Bootstrap重构中华传统文化网站首页2、任务拓展：使用Bootstrap重构二级页面“传统建筑”通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用实现响应式布局的基本方法。本节课主要运用案例教学法，通过使用Bootstrap框架实现云景旅游公司首页响应式效果。深入理解响应式网页的实现方法，通过实例的方法加强对实现响应式网页的理解，达到能够独立熟练运用Bootstrap框架解决