Bootstrap课程教案和教学设计.docx

课程教案

课题名称

Bootstrap简述

授课班级

授课学时

2

授课地点

授课形式

讲授

参考教材

Bootstrap技术教程

教学资源

/--CSDN社区

教学目标

知识目标：

--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap

技能目标：

--掌握bootstrap的网格布局

素质目标：

--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力

教学重点与难点

教学重点

--了解bootstrap借鉴--如何使用bootstrap

教学难点

--下载bootstrap

学情分析

本次课程为bootstrap应用开发的第一次课程，本次课程主要让学生理解bootstrap的发展历史，以及如何使用bootstrap

教学过程

课前：

1、准备提问问题：bootstrap是什么?是做什么用的

2、准备现实案例

课中：

1、讲解bootstrap

2、为什么使用bootstrap

3、如何使用bootstrap

4、下载bootstrap

课后：

布置学生预习bootstrap的网格布局，并提供预习资料。

教学反思

本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。

档om

档

om

无水印

课程名称

Bootstrap应用开发

授课对象

授课章节

Bootstrap简述

本次课学时数

2

教学目的

--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap

教学分析

对于入门级别的框架，对于学生极其容易上手

教学重点与难点

重点

--了解bootstrap借鉴--如何使用bootstrap

难点

--下载bootstrap

教学方法与手段

●课堂讲授O讲解例题●电子课件O案例分析O小组讨论

O文字材料●提问O音像材料其他：现场演示

教学过程设计

教学内容

教学过程

设计意图

时间分配

课程导入

准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。

让学生感兴趣的

网页，以项目驱动的方式引入新的

课程

10分钟

力文

课程介绍

1.根据学生的回答引出课程介绍(用3W1H法)

●what(课程的内容):包含的内容

where(在哪里使用):手机、游戏、网站

why(为什么要学习这门课程):基础与变通

●how(如何去学这门课程):多看多练少睡觉

2.介绍课程的授课计划、考核标准

●平时成绩占20%,包括出勤、作业、提问等。

●实践成绩占30%,包括课堂

max.bo预览与源文档

介绍整个课程的教学方式和目标

ok十18.q

-致下载高清

10分钟

项目(作业)、综合项目等。考试成绩占50%。

Bootstrap简述

●Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。

●Bootstrap是由Twitter的Mark

Otto和JacobThornton开发的。Bootstrap是2011年八月在

GitHub上发布的开源产品。目前使用较广的是版本2和3,其中

Bootstrap2的最新版本的是

2.3.2,Bootstrap3的最新版本是3.3.7。在2015年8月下旬，

Bootstrap四周岁之际，

Bootstrap团队发布了

Bootstrap4alpha版，2017年8月10日发布了4.0beta版。

通过讲解

bootstrap的作用以及他的历史，让学生了解他的一

个发展史，并且带入故事情节，让学生对这个框架产

生浓厚的兴趣

10分钟

为什么使用Bootstrap

1.移动设备优先：自Bootstrap3

起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持IE、Firefox、Google

等所有的主流浏览器都支持Bootstrap。

3.容易上手：只需要具备HTML和CSS的基础知识即可。

4.响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

5.它为开发人员创建接口提供了一个简洁统一的解决方案。

6.它包含了功能强大的内置组件，易于定制。

7.它还提供了基于Web的定制。8.它是开源的。

对于目前的主流

框架而言，

bootstrap相比学习简单，容易上手

10分钟