Bootstrap课程教案和教学设计

课程教案课题名称Bootstrap简述授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap技能目标：--掌握bootstrap的网格布局素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--了解bootstrap借鉴--如何使用bootstrap教学难点--下载bootstrap学情分析本次课程为bootstrap应用开发的第一次课程，本次课程主要让学生理解bootstrap的发展历史，以及如何使用bootstrap教学过程课前：1、准备提问问题：bootstrap是什么？是做什么用的2、准备现实案例课中：1、讲解bootstrap2、为什么使用bootstrap3、如何使用bootstrap4、下载bootstrap课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Bootstrap简述本次课学时数2教学目的--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap教学分析对于入门级别的框架，对于学生极其容易上手教学重点与难点重点--了解bootstrap借鉴--如何使用bootstrap难点--下载bootstrap教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。让学生感兴趣的网页，以项目驱动的方式引入新的课程10分钟1.根据学生的回答引出课程介绍（用3W1H法）what（课程的内容）：包含的内容where(在哪里使用)：手机、游戏、网站why（为什么要学习这门课程）：基础与变通how（如何去学这门课程）：多看多练少睡觉2.介绍课程的授课计划、考核标准平时成绩占20%，包括出勤、作业、提问等。实践成绩占30%，包括课堂项目（作业）、综合项目等。考试成绩占50%。介绍整个课程的教学方式和目标10分钟Bootstrap简述Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。Bootstrap是由Twitter的MarkOtto和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移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：IE、Firefox、Google等所有的主流浏览器都支持Bootstrap。容易上手：只需要具备HTML和CSS的基础知识即可。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于Web的定制。它是开源的。对于目前的主流框架而言，bootstrap相比学习简单，容易上手10分钟如何使用Bootstrap用户生产环境的Bootstrap：下载包为编译并且压缩后的CSS、JavaScript和字体文件，不包含文档和源代码。Bootstrap源码：包含Less、JavaScript和字体文件的源码，并且带有文档。需要Less编译器和一些设置工作。Sass：这是Bootstrap从Less到Sass的源码移植项目、用于快速地在Rails、Compass或只针对Sass的项目中引入。推荐三个参考的网址：BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/让学生通过网站更深层次的去了解bootstrap20节课下载BootstrapBootstrap的安装是比较容易的，从

/

上下载Bootstrap的最新版本，也去它的中文网。让学生掌握何如下载bootstrap10分钟讲解bootstrap的基本模板学生了解基本的文档结构，以及每行代码的具体执行原理10分钟思考题或预习题或作业题1．浏览/，并下载Bootstrap。查看Bootstrap中文网中的实例精选。2.编写一个使用了Bootstrap框架的页面。让学生在课堂完成作业10分钟参考资料BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/课后小结要采用启发式教学与形象化教学相结合，通过多媒体教学方式增加学生的感性认识。采用PPT讲授，适当现场演示加深学生理解，提问互动。本章内容学生通过紧接着的上机课会将软件的安装执行一遍、并学会配置所有。并让自己有电脑的学生将自己的机器上面再安装和配置一遍。课程教案课题名称Bootstrap简述授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap技能目标：--掌握bootstrap的网格布局素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--了解bootstrap借鉴--如何使用bootstrap教学难点--下载bootstrap学情分析本次课程为bootstrap应用开发的第一次课程，本次课程主要让学生理解bootstrap的发展历史，以及如何使用bootstrap教学过程课前：1、准备提问问题：bootstrap是什么？是做什么用的2、准备现实案例课中：任务一：完成基础框架模板任务二：完成第一个bootstrap实例课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Bootstrap简述本次课学时数2教学目的--了解bootstrap借鉴--如何使用bootstrap--下载bootstrap教学分析对于入门级别的框架，对于学生极其容易上手教学重点与难点重点--了解bootstrap借鉴--如何使用bootstrap难点--下载bootstrap教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。让学生感兴趣的网页，以项目驱动的方式引入新的课程10分钟任务一任务布置：完成bootstrap的简单模板让学生掌握bootstrap的基本结构35分钟任务二任务布置：第一个bootstrap实例让学生掌握bootstrap的简单网格布局35分钟思考题或预习题或作业题1．浏览/，并下载Bootstrap。查看Bootstrap中文网中的实例精选。2.编写一个使用了Bootstrap框架的页面。让学生在课堂完成作业10分钟参考资料BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/课后小结要采用启发式教学与形象化教学相结合，通过多媒体教学方式增加学生的感性认识。采用PPT讲授，适当现场演示加深学生理解，提问互动。本章内容学生通过紧接着的上机课会将软件的安装执行一遍、并学会配置所有。并让自己有电脑的学生将自己的机器上面再安装和配置一遍。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--bootstrap实现原理--bootstrap工作原理--bootstrap使用方法技能目标：--掌握bootstrap的网格布局素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--bootstrap实现原理--bootstrap工作原理教学难点--bootstrap使用方法学情分析本次课程为bootstrap应用开发的第一次课程，本次课程主要让学生理解bootstrap的发展历史，以及如何使用bootstrap教学过程课前：1、准备提问问题：bootstrap是什么？是做什么用的2、准备现实案例课中：1、讲解bootstrap的实现原理2、讲解bootstrap工作原理3、讲解bootstrap使用方法课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节栅格系统本次课学时数2教学目的介绍Bootstrap中响应式、移动设备优先的栅格系统。介绍栅格系统的原理、布局、偏移等内容教学分析了解什么是栅格系统教学重点与难点重点--bootstrap实现原理--bootstrap工作原理难点--bootstrap使用方法教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。有案例引出今天的课程内容10分钟Bootstrap实现的原理Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，制作出清大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12份。把网页的总宽度平分为12份，我们可以自由按份组合。栅格系统使用的总宽度可以不固定，Bootstrap是按百分比进行平分（保留15位小数点精度）。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。让学生了解bootstrap实现的过程，做好理论基础的准备10分钟工作原理栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。一行数据（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的对齐方式和内边距。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似.row（行）和.col-xs-4（占4列宽度）这样的样式，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过为column设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。一共有四行，.row位于.container内。针对不同的设备，container的宽度不同。屏幕<768px.container使用最大宽度，效和.container-full一样。屏幕>=768px，并且<992px.container的宽度为750px屏幕>=992px，并且<1200px.container的宽度为970px屏幕>=1200px时.container的宽度为1170px.col-md-*为列，表示占了*号列的宽度。col-md-为中等屏幕列的前缀。col-xs-为超小屏幕（手机）列的前缀col-sm-为小屏幕（平板）列的前缀col-lg-为大屏幕大桌面列的前缀。栅格系统中各个样式类：.container左右各有15px的内边距。.row是column的容器，最多只能放12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。column左右有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。让学生掌握bootstrap的工作原理，为今后的理论学习做好坚实的准备10分钟bootstrap的具体是使用方法-基本用法容器Container包含行row，行row包含列col-*-*。每行包含12栅格，如果定义的列超过12格，则自动换行实例：实例2-1就是其基本用法，为了让界面美观。添加样式（注意：需要写在“<linkrel="stylesheet"href="css/bootstrap.min.css"/>”之后）让学生掌握bootstrap的基本使用方法10分钟bootstrap的具体是使用方法-列偏移不想让两个相邻的列挨在一起，可以使用栅格系统中列偏移功能来实现。其类为：.col-xs-offset-*、.col-sm-offset-*、.col-md-offset-*、.col-lg-offset-*，其中*为数字，表示向右偏移的列数，其值不能大于12。同时，这里也需要注意偏移列和显示列综合不能超过12，如果超过12，则换到下一行。让学生掌握什么是列偏移10分钟bootstrap的具体是使用方法-列排序列排序其实就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统中，可以通过.col-X-push-*和.col-X-pull-*来实现这一目的。其中，col-X-push-*是向右浮动，col-X-pull-*是向左浮动让学生掌握列排序10分钟bootstrap的具体是使用方法-列嵌套栅格系统支持列的嵌套，即在一个列里再声明一个或多个行（row）。注意，内部所嵌套的row的宽度为100%，就是当前外部列的宽度。让学生掌握列嵌套10分钟Bootstrap清除浮动效果未清除已清除掌握如何清除浮动效果10分钟课程内容总结本章主要讲解了栅格系统的实现原理、工作原理及其应用，栅格系统中的列嵌套、列排序、响应式栅格等内容。最后用一个综合例子演示了栅格系统的实际应用。总结知识点10分钟思考题或预习题或作业题1．按以下要求创建一个栅格系统布局：创建一个8-4列栅格，在第一个8列中插入8-4列，在第二个4列中插入9-3列（备注：以中屏md（970px）为例）。。2.用栅格系统布局一个网页：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。让学生灵活运用Bootstrap参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那些是重点，那些基本了解，需要使用的时候可以查阅资料解决问题即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--bootstrap实现原理--bootstrap工作原理--bootstrap使用方法技能目标：--掌握bootstrap的网格布局素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--bootstrap实现原理--bootstrap工作原理教学难点--bootstrap使用方法学情分析本次课程为bootstrap应用开发的第二次课程，本次课程主要让学生理解bootstrap的使用方法，以及如何使用bootstrap教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成招商银行案例课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节栅格系统本次课学时数2教学目的-bootstrap实现原理--bootstrap工作原理--bootstrap使用方法教学分析对于入门级别的框架，对于学生极其容易上手教学重点与难点重点--bootstrap实现原理--bootstrap工作原理难点--bootstrap使用方法教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。让学生感兴趣的网页，以项目驱动的方式引入新的课程10分钟任务一任务布置：完成招商银行的案例让学生掌握bootstrap的基本结构70分钟思考题或预习题或作业题1．浏览/，并下载Bootstrap。查看Bootstrap中文网中的实例精选。2.编写一个使用了Bootstrap框架的页面。让学生在课堂完成作业10分钟参考资料BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/课后小结要采用启发式教学与形象化教学相结合，通过多媒体教学方式增加学生的感性认识。采用PPT讲授，适当现场演示加深学生理解，提问互动。本章内容学生通过紧接着的上机课会将软件的安装执行一遍、并学会配置所有。并让自己有电脑的学生将自己的机器上面再安装和配置一遍。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--排版--列表--代码技能目标：--通过学习排版、列表、代码等bootstrap的布局知识，完成对应案例素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--排版--列表--代码教学难点--代码学情分析本次课程为bootstrap应用开发的第三次次课程，本次课程主要让学生学会CSS布局的基本知识点教学过程课前：1、准备提问问题：bootstrap的基本布局都有哪些2、准备现实案例课中：1、讲解排版2、讲解列表3、讲解代码课后：布置学生预习bootstrap的表格、按钮、图像，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Css布局本次课学时数2教学目的本次课程为bootstrap应用开发的第三次次课程，本次课程主要让学生学会CSS布局的基本知识点教学分析了解bootstrap的css布局教学重点与难点重点--排版--列表难点--代码教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。有案例引出今天的课程内容10分钟排版-标题、段落、mark标签Bootstrap可以使用HTML中的<h1>到<h6>这六个标题标签，并且分别赋予了它们半粗体属性及由大到小的字体大小font-size的属性。<h1>一级标题（半粗体36px）</h1><h2>二级标题（半粗体30px</h2><h3>三级标题（半粗体24px）</h3><h4>四级标题（半粗体18px）</h4><h5>五级标题（半粗体14px）</h5><h6>六级标题（半粗体12px）</h6>基本段落Bootstrap将页面的全局字体大小font-size设置为14px，行高line-height设置为1.428。<body>元素及段落<p>元素都被赋予了这些属性。另外，<p>元素还被设置了等于1/2行高（10px）的底部外边距（margin-bottom）。中心内容在多个段落中，为了突出显示某一个段落作为强调的中心内容或引导主体内容，可以给该段落应用样式类.lead。这样可以得到更大更粗、行高更高的段落文本，但是有些浏览器不支持这一类。<mark>标签用于需要突出显示的高亮文本。让学生掌握排版的基础知识点10分钟排版-小号文本、del和s标签、ins和u标签、b和i标签对于不需要强调的文本，可以使用<small>标签将其内的文本设置为其父元素字体大小的85%。标题元素中嵌套的<small>元素被设置为不同的字体大小。另外，可以为行内元素应用样式类.small以达到同样的效果。<small>这行是小号文本</small><p>普通段落文本<spanclass="small">小号文</span></p>在页面中对被删除的文本可以使用<del>标签，对没用的（不在准确或不相关的）文本可以使用<s>标签，使用了这两个标签的文本都被赋予了删除线的属性。<p><del>这里是已经被删除的文本。</del></p><p><s>这里是不再有用的文本。</s></p>在页面中对额外插入的文本可以使用<ins>标签，对专有名词（人名、地名、朝代名等）可以使用<u>标签，使用了这两个标签的文本都被赋予了下划线的属性。<p><ins>这里是已经被删除的文本。</ins></p><p><u>宋代</u></p>让学生掌握排版的基础知识点10分钟在HTML中<b>标签用于高亮单词或短语，不带有任何着重的意味；而<i>标签主要用于发言、技术词汇等。<p>下面的词语将高亮显示：<b>bootrstrap</b></p><p>下面的词语是一个技术词汇：<i>数据挖掘技术</i></p>让学生掌握排版的基础知识点10分钟排版-文本对齐方式、字母大小写、缩略语、地址Bootstrap提供了.text-left、.text-right、.text-center、.text-justify、.text-nowrap这几个文本对齐类，可以简单方便地将文字重新对齐。<pclass="text-left">左对齐文本</p><pclass="text-center">居中文本</p><pclass="text-right">右对齐文本</p><pclass="text-justify">两段对齐文本</p><pclass="text-nowrap">不换行文本</p>.text-lowercase：将大写字母转换为小写字母。.text-uppercase：将小写字母转换为大写字母。.text-capitalize：将文本首字母转换为大写。<pclass="text-lowercase">将大写转换为小写：ABC</p><pclass="text-uppercase">将小写转换为大写：abc</p><pclass="text-capitalize">将首字母转换为大写：alice</p>HTML提供了<abbr>标签用于缩略语，Bootstrap定义了<abbr>元素的样式为带有较浅的虚线下边框，当鼠标悬停在上面时会变成带有“问号”的指针，同时会显示出完整的文本（必须为<abbr>的title属性添加了文本）。使用<address>标签可以在网页上显示联系信息，在该元素内每行信息的结尾使用标签<br/>来保留样式。让学生掌握排版的基础知识点10分钟列表-无序列表和有序列表无序列表是指没有特定顺序的一列元素，是以传统风格的着重号开头的列表。有序列表是顺序至关重要的一组元素，是以数字或其他有序字符开头的列表。<h4>无序列表</h4><h5>web标准</h5><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><h4>有序列表</h4><h5>安装流程</h5><ol><li>第一步骤</li><li>第二步骤</li><li>第三步骤</li></ol>让学生掌握排版的基础知识点10分钟列表-无样式列表通过给列表<ul>或<ol>元素应用样式类.list-unstyled，可以移除默认的list-style样式（列表项目符号和左侧外边距）。这是针对直接子元素的，如果列表包含有嵌套列表则必须逐个给列表添加这个样式才能具有同样的效果。<h4>水果</h4><ulclass="list-unstyled"><li>香蕉</li><li>苹果<ul><li>红富士</li><li>黄元帅</li><li>嘎啦</li></ul></li><li>梨子</li></ul>让学生掌握排版的基础知识点10分钟列表-内敛列表通过给列表<ul>或<ol>元素应用样式类.list-inline，可以将列表的所有元素放置于同一行，这种形式的列表也叫做内联列表。这个效果是通过设置display:inline-block并添加少量的内边距（padding）来实现的<h4>内联列表</h4><h5>香蕉</h5><ulclass="list-inline"><li仙人蕉</li><li>美蕉</li><li>天宝蕉</li></ul>让学生掌握排版的基础知识点10分钟课程内容总结本次课主要讲解关于排版和列表的相关知识点，主要是让学生了解css样式表中实现的效果总结知识点10分钟思考题或预习题或作业题创建一个综合页面，要求包含有标题、段落等文本，及代码、列表、表格、图像、按钮等元素。让学生灵活运用Bootstrap参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那些是重点，那些基本了解，需要使用的时候可以查阅资料解决问题即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--排版--列表--代码技能目标：--通过学习排版、列表、代码等bootstrap的布局知识，完成对应案例素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--排版--列表--代码教学难点--代码学情分析本次课程为bootstrap应用开发的第三次次课程，本次课程主要让学生学会CSS布局的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成排版案例任务二：完成列表案例课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Css布局本次课学时数2教学目的--排版--列表--代码教学分析对于入门级别的框架，对于学生极其容易上手教学重点与难点重点--排版--列表--代码难点--代码教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。让学生感兴趣的网页，以项目驱动的方式引入新的课程10分钟任务一任务布置：完成排版案例让学生掌握css基本布局35分钟任务二任务布置：完成列表案例让学生掌握css基本布局35思考题或预习题或作业题1．浏览/，并下载Bootstrap。查看Bootstrap中文网中的实例精选。2.编写一个使用了Bootstrap框架的页面。让学生在课堂完成作业10分钟参考资料BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/课后小结要采用启发式教学与形象化教学相结合，通过多媒体教学方式增加学生的感性认识。采用PPT讲授，适当现场演示加深学生理解，提问互动。本章内容学生通过紧接着的上机课会将软件的安装执行一遍、并学会配置所有。并让自己有电脑的学生将自己的机器上面再安装和配置一遍。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--表格--按钮技能目标：--通过学习表格、按钮等bootstrap的布局知识，完成对应案例素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--表格--按钮教学难点--表格学情分析本次课程为bootstrap应用开发的第四次次课程，本次课程主要让学生学会CSS布局的基本知识点教学过程课前：1、准备提问问题：bootstrap的基本布局都有哪些2、准备现实案例课中：1、讲解表格2、讲解按钮课后：布置学生预习bootstrap的图像、辅助类，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Css布局本次课学时数2教学目的本次课程为bootstrap应用开发的第四次次课程，本次课程主要让学生学会CSS布局的基本知识点教学分析了解bootstrap的css布局教学重点与难点重点--表格--按钮难点--表格教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。有案例引出今天的课程内容10分钟表格-基本表格通过给<table>元素应用样式类.table可以为其赋予基本表格样式，表现为少量的内边距（padding）和水平方向的分隔线。让学生掌握排版的基础知识点5分钟表格-斑马线表格通过给<table>元素应用样式类.table-striped可以让表格中<tbody>元素内的每一行增加斑马条纹样式。让学生掌握排版的基础知识点5分钟表格-带边框的表格通过给<table>元素应用样式类.table-bordered可以为表格和其中的每个单元格增加边框。让学生掌握排版的基础知识点5分钟表格-鼠标悬停高亮行通过给<table>元素应用样式类.table-hover可以让表格中<tbody>元素内的每一行对鼠标悬停状态作出响应。让学生掌握排版的基础知识点5分钟表格-紧凑型表格通过给<table>元素应用样式类.table-condensed可以让表格更加紧凑，单元格中的内边距（padding）均会减半让学生掌握排版的基础知识点10分钟表格-响应式表格通过给<table>元素应用样式类.table-responsive可以创建响应式表格。响应式表格会在小屏幕设备上（小于768px）水平滚动，当屏幕大于768px宽度时水平滚动条消失。让学生掌握排版的基础知识点5分钟按钮-预定义按钮Bootstrap为按钮提供了一个基本样式类.btn，所有按钮元素都使用它。此外，还提供了一些预定义样式类可以用来定义不同风格的按钮。.btn-default：默认的/标准的按钮。.btn-primary：提供额外的视觉效果，标识一组按钮中的原始动作。.btn-success：表示一个成功的或积极的动作。.btn-info：信息警告消息的上下文按钮。.btn-warning：表示应谨慎采取的动作。.btn-danger：表示一个危险的或潜在的负面动作。.btn-link：并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为。让学生掌握排版的基础知识点10分钟按钮-尺寸通过给按钮<button>元素应用样式类.btn-lg、.btn-sm或.btn-xs可以获得不同尺寸的按钮。让学生掌握排版的基础知识点5分钟按钮-块级通过给按钮<button>元素应用样式类.btn-block可以将按钮拉伸至其父元素100%的宽度，同时该按钮变为了块级元素。让学生掌握排版的基础知识点5分钟按钮-激活状态当按钮处于激活状态时，它表现为被按压下去的样式（底色更深、边框颜色更深、向内投射阴影）。通过给<button>元素应用样式类.active可以实现这一效果。让学生掌握排版的基础知识点5分钟按钮-禁用状态当一个按钮被禁用时，它的颜色会变淡50%，并失去渐变，呈现出无法点击的效果。对于<button>元素，可以为其添加disabled属性实现这一效果，对于<a>元素则可以通过应用样式类.disabled来实现。<buttontype="button"class="btnbtn-primarybtn-lg">原始按钮</button><buttontype="button"class="btnbtn-primarybtn-lg"disabled="disabled">禁用的原始按钮</button><ahref="#"class="btnbtn-dangerbtn-lg"role="button">原始按钮</a><ahref="#"class="btnbtn-dangerbtn-lgdisabled"role="button">禁用的原始按按钮</a>让学生掌握排版的基础知识点10分钟课程内容总结本次课主要讲解关于排版和列表的相关知识点，主要是让学生了解css样式表中实现的效果总结知识点10分钟思考题或预习题或作业题创建一个综合页面，要求包含有标题、段落等文本，及代码、列表、表格、图像、按钮等元素。让学生灵活运用Bootstrap参考资料Bootstrap应用开发课后小结该课程内容较多，需要告知学生那些是重点，那些基本了解，需要使用的时候可以查阅资料解决问题即可。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式上机参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--表格--按钮技能目标：--通过学习表格、按钮等bootstrap的布局知识，完成对应案例素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--表格--按钮教学难点--表格学情分析本次课程为bootstrap应用开发的第四次次课程，本次课程主要让学生学会CSS布局的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：任务一：完成表格案例课后：布置学生预习bootstrap的网格布局，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程Bootstrap应用开发教学设计课程名称Bootstrap应用开发授课对象授课章节Css布局本次课学时数2教学目的本次课程为bootstrap应用开发的第四次次课程，本次课程主要让学生学会CSS布局的基本知识点教学分析了解bootstrap的css布局教学重点与难点重点--表格--按钮难点--表格教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。让学生感兴趣的网页，以项目驱动的方式引入新的课程10分钟任务一任务布置：完成表格案例让学生掌握css基本布局70分钟思考题或预习题或作业题1．浏览/，并下载Bootstrap。查看Bootstrap中文网中的实例精选。2.编写一个使用了Bootstrap框架的页面。让学生在课堂完成作业10分钟参考资料BootStrap中文网：/BootStrap官网：http://www.bootS/BootStrap官网菜鸟教材：/课后小结要采用启发式教学与形象化教学相结合，通过多媒体教学方式增加学生的感性认识。采用PPT讲授，适当现场演示加深学生理解，提问互动。本章内容学生通过紧接着的上机课会将软件的安装执行一遍、并学会配置所有。并让自己有电脑的学生将自己的机器上面再安装和配置一遍。课程教案课题名称Bootstrap基础教程授课班级授课学时2授课地点授课形式讲授参考教材Bootstrap技术教程教学资源/--CSDN社区教学目标知识目标：--图像--辅助类技能目标：--通过学习图像、辅助类等bootstrap的布局知识，完成对应案例素质目标：--培养学生对理论知识的思维能力--培养学生对基础知识的理解能力教学重点与难点教学重点--图像--辅助类教学难点--图像学情分析本次课程为bootstrap应用开发的基础课程，本次课程主要让学生学会CSS布局的基本知识点教学过程课前：1、准备今天的课程案例2、准备现实案例课中：1、响应式图像2、图像形状3、辅助类课后：布置学生预习bootstrap的表单元素，并提供预习资料。教学反思本次课程难度不大，但知识点较多，容易让学生注意力不集中，在授课过程中需要注意学生表情，遇到走神学生及时点名回答问题，在讲解知识点的时候需要充分和学生进行交互活动和设计。课程名称Bootstrap应用开发授课对象授课章节Css布局本次课学时数2教学目的Bootstrap提供给HTML各元素的CSS布局样式，其中包括标题、段落等基础文本排版样式及列表、代码、表格、按钮、图像、辅助类等的样式。教学分析了解bootstrap的布局教学重点与难点重点--图像--辅助类难点--图像教学方法与手段●课堂讲授○讲解例题●电子课件○案例分析○小组讨论○文字材料●提问○音像材料其他：现场演示教学过程设计教学内容教学过程设计意图时间分配课程导入准备本门课程学习完成后可以制作的项目效果截图，方便在课中给学生进行展示，激发学生的学习积极性和热情。有案例引出今天的课程内容10分钟图像通过给图片<img>元素应用样式类.img-responsive可以让图片支持响应式布局。其实质是为图片设置了max-width:100%;和height:auto;的属性，从而让图片在其父元素中能够更好的缩放。通过给图像<img>元素应用下面几个样式类，可以让图像呈现出不同的形状。让学生掌握图像10分钟情景文本颜色Bootstrap给文本提供了一组样式类，可以让文本展现不同的情景色，从而表达不同的意图。这些样式类也可以应用于链接，并会像我们的默认链接样式一样在悬停时变暗。让学生掌握情景文本颜色关闭按钮通过给按钮<button>元素应用样式类.close可以得到关闭按钮符号的样式，这种样式通常用于模态框和警告框上让学生掌握关闭按钮10分钟三角符号通过给空的<span>元素应用样式类.caret可以得到三角符号。三角符号一般用来指示某个元素具有下拉菜单的功能，注意在向上弹出式菜单中的三角符号是反方向的掌握三角符号10分钟快速浮动通过给任意元素应用样式类.pull-left或.pull-right可以将元素快速向左或向右浮动。让学生掌握快速浮动10分钟块级居中显示通过给给短语元素应用样式类.center-block可以让元素以块级的方式居中显示。让学生掌握块级居中显示5分钟显示或隐藏通过给任意元素应用样式类.show和.hidden、.invisible可以使元素对所有设备显示或隐藏（包括屏幕阅读器）。需要注意的是，它们都对元素块级显示或隐藏。另外，.hidden和.invisible的区别是前者不占用文档流，而后者占用。让学生掌握显示或隐藏10分钟屏幕阅读器和键盘焦点Bootstrap提供了样式类.sr-only可以将元素对所有设备隐藏，除了屏幕阅读器。此外，还提供了样式类.sr-only-focusable可以使元素在获得键盘焦点时显示。让学生掌握焦点5分钟图像替换使用样式类.text-hide可以将文本元素隐藏，同时可以在样式中定义背景图像来替换文本。让学生掌握图像替换10分钟课程内容总结本章通过具体实例详细介绍了Bootstrap中标题、段落等基础文本元素及列表、代码、图像、按钮、表格等元素的CSS样式应用，此外还补充了显示与隐藏等几个辅助类工具。总结知识点5分钟思考题或预习题或作业题创建一个综