《Bootstrap课程教案和教学设计.docx》由会员分享，可在线阅读，更多相关《Bootstrap课程教案和教学设计.docx（209页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程教案课题名称Bootstrap 简述授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源https :/www. csdn. net/ -CSDN 社区教学目标知识目标：一了解 bootstrap 借鉴- -如何使用bootstrap- -下载 bootstrap技能目标：- -掌握bootstrap的网格布局素质目标：培养学生对理论知识的思维能力 一培养学生对基础知识的理解能力教学重点与难点教学 重点一了解 bootstrap 借鉴 一如何使用bootstrap教学 难点一下载 bootstrap学情分析本次课程为bootstrap应用开发的第一次课程，本次课
2、程主要让学生理 解bootstrap的发展历史，以及如何使用bootstrap教学过程课前：1、准备提问问题：bootstrap是什么？是做什么用的2、准备现实案例课中：1、讲解 bootstrap2、为什么使用bootstrap3如何使用bootstrap4、下载 bootstrap课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课 过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知 识点的时候需要充分和学生进行交互活动和设计。授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教
3、程教学资源https :/www. csdn. net/ -CSDN 社区教学目标知识目标：一bootstrap实现原理-bootstrap工作原理-bootstrap使用方法技能目标：-掌握bootstrap的网格布局素质目标：一培养学生对理论知识的思维能力 一培养学生对基础知识的理解能力教学重点与难点教学 重点-bootstrap实现原理-bootstrap工作原理教学 难点一bootstrap使用方法学情分析本次课程为bootstrap应用开发的第一次课程，本次课程主要让学生理解 bootstrap的发展历史，以及如何使用bootstrap教学过程课前：1、准备提问问题：bootstra
4、p是什么？是做什么用的2、准备现实案例课中：1、讲解bootstrap的实现原理2、讲解bootstrap工作原理3、讲解bootstrap使用方法课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称课程名称Bootstrap应用开发授课对象滚动时导航栏会一直固定，不改变 位置。这个nav还可以包含一个 应用了类.container或.container-fl
5、uid 的div容 器，从而在body两侧添加内边距 (padding)时导航栏的内容会居 中。和固定在顶部类似,通过给导航栏 nav元素应用类.navbar-f ixed-bottom,可以让 导航栏固定在页面底部。如果需要创建一个能随着页面一 起滚动(静止在顶部)的导航栏， 可以给nav元素应用类.navbar-static-top。注意这个 静止的导航栏不会覆盖页面的任 何内容，因此不需要向body元素 添加内边距(padding)o另外这个 导航栏的左右及上边框被去掉了， 目的是让其更适合显示在页面的 顶部。通过给导航栏nav元素应用.navbar-inverse类可以改变 导航栏的外
6、观，即黑色背景白色文 士 ,从1匚二七日由士自W C D 127.0.0.1:8020/5_CSS组件/反色导航翁三|1|品牌标志111前面的导航栏都是在宽屏(屏幕宽 带768px)的情况下展示的,在移 动设备等较窄的视口上使用还必 须给导航栏添加响应式功能。响应 式导航栏在大屏幕下正常显示，在 小屏幕中所有导航栏元素隐藏在 一个折叠菜单中，通过触发按钮可 以控制菜单项的显示与隐藏。路径导航路径导航也称为面包屑导航，是一 种基于网站层次信息的显示方式。 通过创建一个带有.breadcrumb 的01列表元素即可得到一个路让学生掌握路径 导航20分钟径导航，它可以标明当前页面的位 置。课程内容总
7、结本章通过具体实例详细介绍了 Bootstrap中标题、段落等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用，此外 还补充了显示与隐藏等几个辅助 类工具。总结知识点5分钟思考题或预习题或 作业题创建一个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。让学生针对当天 的知识点进行练 习。5分钟参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那 些是重点，那些基本了解，需要使 用的时候可以查阅资料解决问题 即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教
8、程教学资源https :/www. csdn. net/ 一CSDN 社区教学目标知识目标：一导航一导航栏一路径导航技能目标：一通过导航、导航栏、路径导航等bootstrap的css知识，完成对应案例素质目标：一培养学生对理论知识的思维能力一培养学生对基础知识的理解能力教学重点与难点教学 重点-导航一导航栏教学 难点一导航路径学情分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局 的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成手机端书城APP页面三任务 任务二：完成手机端书城APP页面四任务课后：布置学生预习bootstra
9、p的表单元素，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节CSS组件本次课学 时数2教学目的-字体图标 一下拉菜单 一按钮组教学分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局的基 本知识点教学重点与难点教学 重点一下拉菜单按钮组教学 难点一弹出菜单教学方法 与手段课堂讲授 O讲解例题 电子课件。案例分析 。小组讨论。文字材料 提问 。音像材料 其他：现场演示
10、教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的 项目效果截图，方便在课中给学生进行 展示，激发学生的学习积极性和热情。有案例引出今天 的课程内容10分钟任务一：1 N引入字体图标库2、通过css样式调整按钮的状态3、通过bootstrap改造轮播图4、通过定时器完成页面的转换5、通过判断下标弹出进入按钮完成本章案例35分钟任务二:课程内容总结思考题或预习题或 作业题参考资料课后小结访河南EE从修银河帝国1.使用字体图标完成相对应设置2、完成鼠标滑动设置3、完成探索的设置三体：死神永生。口 g457人已阅读本章通过具体实例详细介绍了 Bootstrap中标题
11、、段落等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用，此外 还补充了显示与隐藏等几个辅助 类工具。创建一个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。Bootstrap 应用开发该课程内容较多，需要告知学生那 些是重点，那些基本了解，需要使掌握使用字体图 标和鼠标滑动总结知识点让学生针对当天 的知识点进行练 习。35分钟5分钟5分钟用的时候可以查阅资料解决问题 即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源https :/www. csdn. net/
12、-CSDN 社区教学目标知识目标：一分页、翻页、标签一徽章、巨幕、页头一缩略图、警告框、进度条技能目标：一通过分页、翻页、标签、徽章、巨幕、页头、缩略图、警告框、进度条等bootstrap 的css知识，完成对应案例素质目标：培养学生对理论知识的思维能力一培养学生对基础知识的理解能力教学重点与难点教学 重点一分页、翻页、标签 一徽章、巨幕、页头教学 难点-缩略图、警告框、进度条学情分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局 的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：1、导航2、导航栏3、路径导航课后：布置学生预习bootst
13、rap的JavaScript插件，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节CSS组件本次课学 时数2教学目的Bootstrap提供了各种CSS组件，其中包括字图标、下拉菜单、按钮组、输 入框组、导航、导航栏、路径导航、分页等等。让学生主要了解各个组件 的使用方法，在后面课程中灵活运用教学分析针对当前章节的项目要求，讲解对应的知识点一分页、翻页、标签教学重点与难点教学重点与难点重点-徽章、巨幕
14、、页头难点 -缩略图、警告框、进度条教学方法课堂讲授 。讲解例题 电子课件 。案例分析。小组讨论与手段 。文字材料 提问 。音像材料 其他：现场演示教学过程设计教学内容教学内容教学过程设计意图时间分配课程导入课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行 有案例引出今天 展示，激发学生的学习积极性和热情。的课程内容创建一个带有.pagination的 ul列表元素，将页码放在这个列 表中，然后使用nav元素包裹这 个列表，即可生成一个分页组件。副0 | 回/ 0基本分页实Q x C , D 127.0.0.1:8C =1234510分钟分页分页对于页码列表中不能点击
15、的链接 可以应用.disabled类，对于当前 页可以应用.active类。让学生掌握分页15分钟给分页组件的ul列表元素添加 类.pagination-lg或.pagination-sm可以更改分页 组件的尺寸。ITZT1I lr，r EUMT一 一I - C D 127.0.0.1:8020/5_CSS 组件/ =123 45I12345I12345.翻页创建一个带有.pager的ul4 元素，将翻页链接放在这个歹 中，然后使用nav元素包裹 列表，即可生成一个分页组件 默州的翻页组件中，链接居中 显示。列表 1表 这个 二。在 对齐让学生掌握翻页15分钟y 0型翻页实例I Q C D 1
16、27.0.0.1:8020/5_CSS 三一上一页）!下一页一翻页中的链接也可以应用类.disabled,从而实现禁用的显 示效果。创建一个带有.label和.label-default 类的span元 素即可生成一个基本标签。.label 是标签的基类，.label-default 是默认样式类。D基本标筌实产x C D 127.0.0.1:8C =创建基本标签New创建基本标签New标签标签让学生掌握标签10分钟通过给标签span元素应用修饰 类.label-primary、 . label-succ ess . labelinfo、 . label-warn ing . label-da
17、nger 可以改变标 签的外观。徽章巨幕徽章与标签相似，它们主要的区别 在于徽章的边角更加圆滑，主要用 于突出显示新的或未读的项。创建 一个带有.badge类的span元素 即可生成一个基本徽章。巨幕（超大屏幕）是一个轻量、灵 活的组件，它能延伸至整个浏览器让学生掌握徽章让学生掌握巨幕10分钟10分钟授课章节栅格系统本次课学 时数2教学目的介绍Bootstrap中响应式、移动设备优先的栅格系统。介绍栅格系统的原理、 布局、偏移等内容教学分析了解什么是栅格系统教学重点与难点重点-bootstrap实现原理 一bootstrap工作原理难点-bootstrap使用方法教学方法 与手段课堂讲授。讲解
18、例题 电子课件O案例分析 。小组讨论。文字材料 提问 。音像材料 其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项 目效果截图，方便在课中给学生进行展 示，激发学生的学习积极性和热情。有案例引出今天 的课程内容10分钟Bootstrap实现的 原理1 . Bootstrap提供了一套响应 式、移动设备优先的流式栅格 系统，随着屏幕或视口(viewport)尺寸的增加，系 统会自动分为最多12歹U。2 .栅格系统的实现原理非常简 单，仅仅是通过定义容器大小， 平分12份，再调整内外边距， 最后再结合媒体查询，制作出 清大的响应式的栅格系统。 B
19、ootstrap默认的栅格系统平 分为分份。3 .把网页的总宽度平分为12份， 我们可以自由按份组合。栅格 系统使用的总宽度可以不固 定，Bootstrap是按百分比进行 平分(保留15位小数点精度)。4 . 12栅格系统是整个Bootstrap 的核心功能，也是响应式设计 核心理念的一个实现形式。让学生了解 bootstrap 实现 的过程，做好理 论基础的准备10分钟工作原理栅格系统用于通过一系列的行 (row)与列(column)的组合来创 建页面布局。让学生掌握 bootstrap 的工 作原理，为今后10分钟视口来展示网站上的关键内容。创 建一个带有.jumbotron类的 div元
20、素即可添加一个巨幕。您好！欢迎来到我的主页！页头页头组件能够为网页标题四周添 加适当的间距，并且与页面的其他 部分形成一定的分隔O将标题放在 带有.page-header 的div元素 中即可创建页头。页面标题小标JB无正文让学生掌握页头10分钟课程内容总结本章通过具体实例详细介绍了 Bootstrap中标题、段洛等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用，此外 还补充了显示与隐藏等几个辅助 类工具。总结知识点5分钟思考题或预习题或 作业题创建一个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。让学生针对当天 的知识点进行练 习。5分
21、钟参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那 些是重点，那些基本了解，需要使 用的时候可以查阅资料解决问题 即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源https :www. csdn. net/ -CSDN 社区教学目标知识目标：一导航一导航栏一路径导航技能目标：一通过导航、导航栏、路径导航等bootstrap的css知识，完成对应案例素质目标：一培养学生对理论知识的思维能力一培养学生对基础知识的理解能力教学重点与难点教学 重点-导航一导航栏教学 难点一导航路径学情分析本次课程为
22、bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局 的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成手机端书城APP页面三任务 任务二：完成手机端书城APP页面四任务课后：布置学生预习bootstrap的表单元素，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节CSS组件本次课学 时数2教学目的-字体图标 一下拉菜单 一按钮组教学分析本次课程为b
23、ootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局的基 本知识点教学重点与难点教学 重点一下拉菜单按钮组教学 难点一弹出菜单教学方法 与手段课堂讲授 O讲解例题 电子课件。案例分析 。小组讨论。文字材料 提问 。音像材料 其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的 项目效果截图，方便在课中给学生进行 展示，激发学生的学习积极性和热情。有案例引出今天 的课程内容10分钟任务一：1 N引入字体图标库2、通过css样式调整按钮的状态3、通过bootstrap改造轮播图4、通过定时器完成页面的转换5、通过判断下标弹出进入按钮完成
24、本章案例35分钟任务二:课程内容总结思考题或预习题或 作业题参考资料课后小结访河南EE从修银河帝国1.使用字体图标完成相对应设置2、完成鼠标滑动设置3、完成探索的设置三体：死神永生。口 g457人已阅读本章通过具体实例详细介绍了 Bootstrap中标题、段落等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用，此外 还补充了显示与隐藏等几个辅助 类工具。创建一个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。Bootstrap 应用开发该课程内容较多，需要告知学生那 些是重点，那些基本了解，需要使掌握使用字体图 标和鼠标滑动总结知识点让学生针
25、对当天 的知识点进行练 习。35分钟5分钟5分钟用的时候可以查阅资料解决问题 即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源https :/www. csdn. net/ -CSDN 社区教学目标知识目标：一媒体对象一列表组-面板技能目标：一通过媒体对象、列表组、面板等bootstrap的css知识，完成对应案例素质目标：一培养学生对理论知识的思维能力一培养学生对基础知识的理解能力教学重点与难点教学 重点一媒体对象 一列表组教学 难点-面板学情分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生
26、学会CSS布局 的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：1、媒体对象2、列表组3、面板课后：布置学生预习bootstrap的JavaScript插件，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节CSS组件本次课学 时数2教学目的Bootstrap提供了各种CSS组件，其中包括字图标、下拉菜单、按钮组、输 入框组、导航、导航栏、路径导航、分页等等。让学生主要了解各个组
27、件 的使用方法，在后面课程中灵活运用教学分析针对当前章节的项目要求，讲解对应的知识点教学重点与难点重点一媒体对象 一列表组难点-面板教学方法 与手段课堂讲授。讲解例题 电子课件。案例分析。小组讨论。文字材料 提问 。音像材料 其他：现场演示教学过程设计教学内容教学内容课程导入教学过程准备本门课程学习完成后可以制作的 项目效果截图，方便在课中给学生进行 展示，激发学生的学习积极性和热情。设计意图时间分配媒体对象所有媒体对象的内容被包裹在一 个带有.media类的div容器元 素中。媒体对象分为两个部分，一个是带 有类.media-right或.media-left的元素（这两个类 可以让图片产生
28、右浮动或左浮 动），另一个是带有.media-body 类的元素。, media-right 或 media-left 是 用来放置媒体的元素,它可以是 a或div。在这里嵌套媒体元素（图片img元素或其它），并给媒 体元素应用.media-object类。 .media-body是用来放置媒体描 述信息的容器div元素，在这里 添加文本等内容。在.media-body中可以添加带 有.meidia-heading 类的标题元 素，用以描述媒体对象的标题有案例引出今天 的课程内容让学生掌握媒体 对象10分钟25分钟辱J八y 对栓魂是体x、C 3 127.0.0.1:8020/5/5$组件由体5
29、 0仁=J武汉软件工程职业学院 武双软件工程职业学院（Wuhan Vocational College of Software andEngineering），简弥武软，是武汉市人艮政府主办的综合性高等班it院校，学 校地处国家自主创新示范区一武汉市东湖高新技术开发区，是国家示范（皆 千）高取院校立项津设单位、.湖北省首批普通本科高校与高职院校联合培养技 术技髭组人才iit点学校。J武汉软件工程职业学院4T武汉软件工程取让学院（Auhan Vocational College of Softw are andEngineering），简称武软，是武汉市人民政府主办的综合性高等职业院校，学 校地
30、处国家自主创新示危区一武双市东海高新技术开发区，是国家示范（骨 干）高盅院校立藏设单位.、湖北省首枇普通本科高校与高职校联合培舞技 术技能型人才诚臣学校。Bootstrap提供了媒体对象垂直对齐的样式类.media-middle 和.meida-bottom,分别用于垂直 居中和底部对齐。D媒体对金对齐方式x ,C 127.0.0.1:8020/5_CSS组件/媒体对 Q =4T武汉软件工程职业学院武汉软件工程职 学院(Wuhan Vocational College of Softwareand Engineering)，简称武软、是武汉市人民政府主办的综合性高 等职业院校，学校地处.国家自
31、主创新示范区一武汉市东湖高新技术开 发区，是国家示范(管干)高职院校立项建设单位、湖北省首批普通 本科高校与高职院校联合培源技术技能型人才试点学校.。武汉软件工程职业学院武汉软件工程职业学院(Wuhan Vocational College of Software and Engineering)，简称武软.，是武汉市人民政府主办的综合性高 等职业院校，学校地处国家自主创新示范区一武汉市东湖高新技术开 发区，是国家示范(管干)高职院校立项建设单位,湖北省首批普通 本科高校与高职院校联合培养技术技能型人才试点学校.。武汉软件工程职业学院武汉软件工程职业学院(Wuhan Vocational Co
32、llege of Software and Engineering)，简称-武软。，是武汉市人民政府主办的综合性高 等职业院校，学校地处国家自主创新示范区一武汉市东湖高新技术开 发区，是国家示范(骨干)高职院校立项建设单位、湖北省首批普通 本科高校与高职院校联合培源技术技能型人才试点学校.。给列表ul元素应用类.media-list可以创建一个媒 体对象列表,媒体对象作为列表的 每一个项目。最简单的列表组仅仅是一个带有 多个列表条目的无序列表。通过给 元素ul和li分别应用类.list-group列表组让学生掌握列表 组和.list-group-item即可生成一 个列表组朝花夕拾向列表组的任
33、意列表项li元素 中添加徽章组件即可在该列表项 中显示徽章并将其自动放到右边。在列表组中用a标签代替li标 签可以组成一个全部是链接的列 表组，需要注意的是这时ul标签 ,1日1 = 1但1口J D向列表组中添加号x 6 ) G | 2 127.0.0.1:802c 1三呐喊彷徨朝花夕拾列表组中的元素也可以是按钮 button元素，这时的父元素也必 须是div元素而不是ul,但按 钮不能使用标准的.btn类。的理论学习做好 坚实的准备1 . 一行数据(row)必须包含 在.container (固定宽度) 或 .container-fluid (100% 宽度)中，以便为其赋予合适 的对齐方式
34、和内边距。2 .通过“行(row)在水平方向 创建一组“列(column)”。3 .你的内容应当放置于“列 (column)”内，并且，只有“歹U (column)”可以作为行(row) 的直接子元素。4 .类似.row (行)和, col-xs-4 (占4列宽度)这样的样式，可以用来快速创建栅格布局。 Bootstrap源码中定义的 mixin也可以用来创建语义化 的布局。5 . 通过为column 设置 padding 属性，从而创建列与列之间的 间隔。通过为.row元素设置 负值margin从而抵消掉 为.container元素设置的 padding,也就间接为“行(row)所包含的“列
35、 (column)”抵消掉了 paddingo6 .栅格系统中的列是通过指定1 到12的值来表示其跨越的范 围。例如,三个等宽的列可以 使用三个.col-xs-4来创建。7 .如果一 “行(row)中包含了 的“列(column)大于 12, 多余的“列(column)”所在的 元素将被作为一个整体另起一 行排列。通过给列表项目.list-group-item 应用.disabled类可以让单个列表 项目显示为灰色，表现出被禁用的 效果。面板为列表项目.list-group-item添力口4来 HTI、日卜主县士七列表项目情导美x 1通过向div容器添加.panel 和.panel-defau
36、lt可以创建一个 基本的面板。默认的.panel组件 只是设置了面板基本的边框(border)和内边距(padding)。 基本的面板中包含一个带有.panel-body的div元素用来 放置面板的主体内容。让学生掌握面板20分钟在面板中添加带有.panel-heading 类的div容 器，可以为面板增加标题。标题中 还可以添加带有.panel-title类 的hlYh6标签，这样可以为面 板增加一个预定义样式的标题。把按钮或次要的文本放入带有.panel-footer类的div容器 中，可以为面板添加一个脚注。需 要注意的是，面板的脚注不会从情 境效果中继承颜色，因为他们并不 是主要内容。
37、和其他组件一样，面板.panel可 以应用有情境效果的状态类,给特 定的内容使用更针对特定情境的 面版。LM值377更xC - 127.0.0.1:802955组件/面板的1汉果.河板标题面板内容面板标题面板内容面板标题面板内容面板标题1面板内容面板标题面板内容如果面板中包含有table元素， 可以给这个table添加.table 类，这样可以创建一个无边框的表 格，从而使整个面板看上去像是一/ D 希赛tsw面板x C面27.0.0.1:8020乃_CSS组件度表格的面板=成绩表这个成绩表是产品价格产品A200产品B400成绩表姓名瞰001100002100课程内容总结本章通过具体实例详细介
38、绍了 Bootstrap中标题、段洛等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用，此外 还补充了显示与隐藏等几个辅助 类工具。总结知识点5分钟思考题或预习题或 作业题创建个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。让学生针对当天 的知识点进行练 习。5分钟参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那 些是重点，那些基本了解，需要使用的时候可以查阅资料解决问题 即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源https :/w
39、ww. csdn. net/ -CSDN 社区教学目标知识目标：一媒体对象一列表组-面板技能目标：一通过媒体对象、列表组、面板等bootstrap的css知识，完成对应案例素质目标：一培养学生对理论知识的思维能力一培养学生对基础知识的理解能力教学重点与难点教学 重点一媒体对象 一列表组教学 难点-面板学情分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局 的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成个人简历页面课后：布置学生预习bootstrap的表单元素，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生
40、注意力不集中，在授课过程中需 要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充 分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节CSS组件本次课学 时数2教学目的一媒体对象 一列表组 一面板教学分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局的基 本知识点教学重点与难点教学重点一媒体对象 一列表组教学 难点一面板教学方法 与手段课堂讲授。讲解例题 电子课件。案例分析 。小组讨论。文字材料 提问 。音像材料 其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的 项
41、目效果截图，方便在课中给学生进行 展示，激发学生的学习积极性和热情。有案例引出今天 的课程内容10分钟任务一：1 N引入字体图标库2、通过css样式调整按钮的状态3、通过bootstrap改造轮播图4、通过定时器完成页面的转换5、通过判断下标弹出进入按钮完成本章案例70分钟屈 J,GZ3 “ 1g . awLZJ _ft I3910多个网站的侧W设计工作.黑缘拿耳WTXL5、BooStr”.等技祗U灯应序ifiil ,雷我开发自己的小2!产品.它好的字2 以照株月* I5W剧解决她九zzKH11工HQ. gM：WNmveteiim1 ES 1! |课程内容总结本章通过具体实例详细介绍了 Bootstrap中标题、段洛等基础文 本元素及列表、代码、图像、按钮、 表格等元素的CSS样式应用,此外 还补充了显示与隐藏等几个辅助 类工具。总结知识点5分钟思考题或预习题或 作业题创建一个综合页面，要求包含有标 题、段落等文本，及代码、列表、 表格、图像、按钮等元素。让学生针对当天 的知识点进行练 习。5分钟参考资料B