Bootstrap响应式Web开发教学设计-初识Bootstrap教学设计.pdfVIP

黑马程序员 《Bootstrap 响应式 Web 开发》 初中九年级数学教案教学 设计 课程名称: Bootstrap 响应式 Web 开发 授课年级: 20XX 年级 授课学期: 第 2 学期 教师姓名: 某某老师 1 20XX 年 5 月 计划 课题名称 第 1 章 初识 Bootstrap 3 学时 学时 Bootstrap 是一款非常优秀地 Web 前端框架,其灵活性与可扩展性加速了响 应式页面开发地进程。Bootstrap 遵循移动优先地原则,在开源之后迅速受到开发 教学引入 人员地追捧,推动了响应式技术地发展。为了让读者对 Bootstrap 有一个初步地 认识,本章将会对 Boostrap 地基本概念,浏览器,编辑器,移动 Web 开发等内容进 行详细讲解。  使学生掌握 Bootstrap 地概念,特点及组成  使学生了解 PC 端浏览器与移动端浏览器地区别 教学目的  使学生熟悉 Visual Studio Code 编辑器地使用  使学生熟悉移动 Web 开发地主流方案  什么是 Bootstrap 教学重点  Bootstrap 地特点及组成  浏览器与 Visual Studio Code 编辑器 教学难点  移动 Web 开发地主流方案 教学方式 课堂教学以 PPT 讲授为主,并结合多媒体进行教学 第一课时（什么是 Bootstrap,Bootstrap 地特点,Bootstrap 地组成） 一,创设情景,导入新课 （1）教师通过讲解 Bootstrap 地有关信息,从而引出 Bootstrap 地功能。 Bootstrap 是由 Twitter 公司地设计师 Mark Otto （马克奥托）与 Jacob Thornton （雅各布·桑顿）合作开发地开源框架,于 2011 年 8 月在 GitHub 上发布,一经推 出就颇受欢迎常用于开发响应式布局与移动设备优先地 Web 项目,能够帮助开 发者快速搭建响应式 Web 页面。 二,新课讲解 学 知识点 1-什么是 Bootstrap 过 教师首先通过 PPT 地方式什么是 Bootstrap 。 程 Bootstrap 框架基于 HTML,CSS 与 JavaScript 语言编写,它具有简单,灵活地 特性。 知识点 2-Bootstrap 地特点 教师主要讲解 Bootstrap 地特点,具体如下。  响应式设计:Bootstrap 框架为用户提供了一套响应式地移动设备优先 地流式栅格系统,拥有完备地框架结构,项目开发方便,快捷,提高了开发 效率。  移动设备优先:随着移动设备地使用者越来越多, 自Bootstrap 3 开始,框 架设计理念发生了改变,转为以移动设备优先为目的,Bootstr