Bootstrap响应式网站开发任务式教程-电子教案

教案202～202学年第2学期课程名称：Bootstrap响应式网页设计课程类别：必修课所属部门：计算机与通信学院主讲教师：职称：授课班级：使用教材：《Bootstrap响应式网页设计》

教务处制二○****年**月使用说明（打印在封面反页）理论、实验、理实一体、实训和实习课程的教案模版一致。新入职我校的教师（副高职称以上、曾讲授过本课程的教师除外）在担任教学工作的前两年、其他教师上新课的第一轮，教案须手写。除此以外，教案可手写，可为电子文档。理论、实验、理实一体课程的节次以2节为单位进行填写；实习、实训课程的节次根据教学内容选取，一般为2～4节，最大节次单元不超过6节。每一轮课程教案，要体现出内容的更新。教案须以纸质形式带入课堂。教案章节或项目名称任务1、认识响应式网页布局与流式网络本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标明确本学期的核心知识模块、考核方式教学重点搭建学习环境，认识响应式布局，理解媒体查找并尝试响应式布局教学难点媒体查找的理解与尝试响应式布局运用教学设计教学环节内容要点教学方法与手段时间分配1自我介绍与激励PPT52课程目标与内容考核方式PPT53展示IT企业岗位需求、待遇网页演示104认识响应式布局205认识视口256网格设计与流式布局207小结讲授5教学效果及改进思路一、教师自我介绍与课程介绍教师姓名：，QQ群介绍了解学生，认识学生，了解学生的分布，将来的就业意向本课程从前端响应式网站开发的角度合理选取教学内容，涉及内容有基于HTML5和CSS3的网页开发技术、响应式网页的概念与设计思路、Bootstrap框架的基本应用、JavaScript插件的使用方法和常用事件、跨平台的移动Web技术等。通过本课程的学习，学生能够掌握HTML5以及Bootstrap框架在响应式网站开发中应用，在做案例过程中，提高实践操作能力。考核方式综合素质评价20%+过程性考核20%+终结性考核40%。二、岗位查找上智联招聘、51JOB等网站搜索相关的岗位，学生自己描述岗位需求例如：前端工程师网络查找就业工作岗位情况平面设计师-网页设计-软件界面设计等：待遇3000-15000左右三、明确目标依据自身的优势确定奋斗目标：愿景——努力奋斗1年，幸福生活一辈子！四、知识讲授认识响应式布局响应式网站设计的核心就是通过用户输入一个网址信息，借助一套HTML内容、一套程序代码，结合CSS3媒体查询技术实现计算机PC终端、手机、平板电脑、微信等自适应的网页布局，具体的实践方式由多方面组成，包括弹性网格和布局、CSS3的媒体查询（MediaQuery）、自适应图片、响应式文字大小、百分比布局、rem布局、vw布局的使用。认识视口视口（Viewport）的作用是告诉浏览器目前设备有多宽或多高，在用户在通过不同设备浏览网站时可以作为缩放的基准比例。视口定义：<metaname="viewport"content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>在视口设置中，content中属性名与含义如表1-1所示。表1-1content中属性名与含义属性名备注width设置layoutviewport的宽度，为一个正整数，使用字符串”width-device”表示设备宽度height设置layoutviewport的高度，这个属性并不重要，很少使用initial-scale设置页面的初始缩放值，为一个数字，可以带小数minimum-scale允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放，值为”no”或”yes”,no代表不允许，yes代表允许网格设计与流式布局流式网格是由两种技术组合而成的，一种是网页元素采用网格设计（GridDesign），另外一种是网页元素采用按照窗口大小缩放的流式布局（LiquidLayout）。网格布局：实现方式主要有float和display：inline-block两种方式。1.float（浮动）如果使用浮动的方式使用float的方式实现4个元素的浮动，当足够宽时，4个元素就会从左至右依次排列，如图1-3种a图所示，当外围宽度不断缩小的过程中，页面也会发生不变化，如图1-3中的其他b图、c图、d图所示。（a）宽度大于四个元素总宽度的状态（b）宽度大于3个元素宽度又小于4个元素宽度的状态（c）宽度大于2个元素宽度又小于3个元素宽度的状态（d）宽度大于1个元素宽度又小于2个元素宽度的状态图浮动排版的形式使用float:left布局的原理就是将元素浮动靠左排列，当超过容器最大宽度后，元素会自动挤到下一行。2.display：inline-block除了float属性外也可以使用display:inline-block；实现从左向右排列。只要把原本的float:left换成display:inline-block就可以获得一样的效果，同时也可以通过指定text-algin来达到文字的排列状态。流式布局，主要就是把原本px单位改成用百分比单位来制作版面，使呈现的区块尺寸根据浏览器的状态进行动态调整，而不是以固定尺寸显示，参考语句如下。div{width:400px;/*固定尺寸*/}五、课堂小结课程主线：制定目标，了解网页环境基本配置的使用，尝试响应式布局。总结课程教学内容，明确学习目标，再次激发学习兴趣。回顾，响应式网页布局与流式网络的实现方式。章节或项目名称任务2、使用媒体查询与响应式文字与图像本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标明确本学期的核心知识模块、考核方式教学重点使用媒体查询与响应式文字与图像教学难点媒体查找的理解与尝试响应式布局运用教学设计教学环节内容要点教学方法与手段时间分配1回顾响应式网页布局与流式网络的实现方式PPT52媒体查找实现响应式布局153使用响应式文字与响应式图像354尝试响应式布局实例任务驱动305小结讲授5教学效果及改进思路一、回顾回顾，响应式网页布局与流式网络网页布局的实现方式。二、媒体查找实现响应式布局CSS3中媒体查询是响应式网页设计的主要核心技术之一，简单的说就是让不同浏览设备去运用符合该设备浏览尺寸的CSS内容，所运用的尺寸称为“断点”，断点的设置主要依据手机、平板电脑、计算机3种浏览设备。断点设置方案主要依据一些固定的宽度进行划分，例如576px（小屏幕）适合手机、768px（中等屏幕）适合平板电脑、992px（大屏幕）适合平板电脑和普通电脑、1200px（特大屏幕）和1400px（超级特大屏幕）适合大桌面显示器，如图所示，这种方案可以让当前主流设备完美显示网页。图媒体查询的常见设备断点实例1-1媒体查询实例。<styletype="text/css"> body{background-color:#00ff00;} @media(min-width:576px){ body{background-color:#ff0000;} } @media(min-width:768px){ body{background-color:#0000ff;} } @media(min-width:992px){ body{background-color:#ffff00;} } @media(min-width:1200px){ body{background-color:#ff00ff;} } @media(min-width:1400px){ body{background-color:#00ffff;} } </style>本实例通过媒体查询判断屏幕的宽度使页面自适应调整了页面的背景颜色，当小于576像素时为绿色（#00ff00）；当宽度在“576px~767px”时为红色（#ff0000）；当宽度在“768px~991px”时为蓝色（#0000ff）；当宽度在“992px~1199px”时为黄色（#ffff00）；当宽度在“1200px~1399px”以上时为洋红色（#ff00ff）；当宽度在大于1400px时为青色（#00ffff）。MediaQuery（媒体查询）的使用方式有如下两种。（1）在CSS文件中，用@media来判断用户的屏幕宽度，选择加载哪一段CSS。例如：@media(min-width:768px){body{background-color:red;}}这段代码说明当浏览器窗口大于等于768px时，body运行“background-color:red;”，也就是页面背景为红色，当超出768px后页面背景为默认的白色。（2）在HTML文件中用media属性判断用户设备的宽度，以选择加载哪一个CSS文件。例如：<linkrel="stylesheet"media="(min-width:768px)"href="style1.css"/>这段代码说明当浏览器窗口小于768px时，运行“style.css”样式文件。MediaQuery（媒体查询）的设置方式如下。@mediamediatypeand(mediafeature){CSS设置}语句分为媒体类别（mediatype）、判断条件（and|not|only）、媒体特性（(mediafeature）3部分。举例说明：媒体查询语句中可加入“and”“not”“only”进行相关的条件判断。三、使用响应式文字与响应式图像1.响应式图像。响应式网页中的图像能根据画面的大小缩放，此方式被称为流式图像（FluidImage），也叫自适应图像。流式图像与流式网格的理念是相同的，主要是把px单位修改为百分比单位，实现按照画面，或者父元素的宽度进行缩放。举例：<styletype="text/css"> .img-fluid{ width:100%; height:auto; min-width:576px; max-width:1400px; } </style>2.字体的使用。px像素是相对长度单位。像素px是相对于不同设备显示器屏幕分辨率而言的。1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。浏览器的默认字体大小都是16px，也就是1em=16px。px相对的屏幕分辨率，而em相对于父级元素，所以在响应式布局中使用em更合适，因为任何浏览器默认字体大小是固定的，而不同设备屏幕分辨率却各不相同。em有两个特点，一是em的值并不是固定的，二是em会继承父级元素的字体大小。当使用rem单位，元素或者文字大小取决于页根元素的字体大小，即html元素的字体大小（font-size）,

元素或者文字大小就是根元素字体大小乘以rem值。四、尝试响应式布局实例在本例将使用响应式布局的思维，使用HTML5的结构元素定义了5个盒子。当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式，页面效果如图所示。（a）分辨率小于576px的效果（b）页面分辨率大于等于576px的页面效果（c）页面分辨率大于等于768px的页面效果（d）页面分辨率大于等于1200px的页面效果图自适应页面呈现的效果五、课堂小结回顾响应式布局的实现方式，媒体查询与响应式文字与图像的使用方法。章节或项目名称任务3、响应式布局综合案例实施本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度359221立业楼25092三1-2节符合□超前□滞后309222立业楼25092三5-6节符合□超前□滞后教学目标明确本学期的核心知识模块、考核方式教学重点搭建学习环境，认识响应式布局，理解媒体查找并尝试响应式布局教学难点媒体查找的理解与尝试响应式布局运用教学设计教学环节内容要点教学方法与手段时间分配1回顾图像、字体的自适应变化讲授52子任务1案例分析与展示教师演示学生实践103子任务2编写页面HTML代码第一步：创建基本框架。第二步：编写HTML代码。204子任务3编写基本的CSS样式教师演示学生实践205子任务4编写响应式的CSS样式教师演示学生实践306小结响应式整体布局的原理讲授5教学效果及改进思路一、回顾回顾如何实现图像、字体的自适应变化，整体的布局显示思路。二、子任务1项目展示分析本任务体现响应式展示社会主义核心价值观文字，整体设计效果如图所示。（a）分辨率小于576px或分辨率大于等于1400px的效果（b）分辨率大于等于768px而小于992px的效果（c）分辨率大于等于992px而小于1199px的效果（d）分辨率大于等于1200px而小于1399px的效果图自适应展示社会主义核心价值观展示效果依据移动设备优先的原则，媒体查询中的断点设置语句如下。 /*默认代码为小于768像素的代码和大于等于1400像素的代码*/ /*窗口宽度大于等于768像素，小于992像素的代码*/ @media(min-width:768px)and(max-width:991px){CSS语句} /*窗口宽度大于等于992像素，小于1200像素的代码*/ @media(min-width:992px)and(max-width:1199px){CSS语句} /*窗口宽度大于等于1200像素，小于1400像素的代码*/ @media(min-width:1200px)and(max-width:1399px){CSS语句}先根据屏幕分辨率小于768像素和大于等于1400像素编写代码，呈现图1-1中a图的样式效果，图片与社会主义核心价值观24个字都显示。当窗口宽度大于等于768像素，小于992像素上时，图片自适应放大，文字只显示“富强民主文明和谐”<h2>的标题内容，隐藏“自由平等公正法治”和“爱国敬业诚信友善”文字的<h2>标题内容。当窗口宽度大于等于992像素，小于1200像素上时，图片自适应放大，文字只显示“自由平等公正法治”<h2>的标题内容，隐藏“富强民主文明和谐”和“爱国敬业诚信友善”文字的<h2>标题内容。当窗口宽度大于等于1200像素，小于1400像素上时，图片自适应放大，文字只显示“爱国敬业诚信友善”<h2>的标题内容，隐藏“富强民主文明和谐”和“自由平等公正法治”文字的<h2>标题内容。三、子任务2编写基础的HTML代码外层设置一个div容器，内部放置两行。 <divclass="maincontent"> <div> <imgclass="img-fluid"src="images/core.jpg"/> </div> <h2class="title1">富强民主文明和谐</h2> <h2class="title2">自由平等公正法治</h2> <h2class="title3">爱国敬业诚信友善</h2> </div>四、子任务3编写基础的CSS代码依据HTML元素的基本页面效果设置，设置页面基本的CSS代码。五、子任务4编写响应式CSS代码依据MediaQuery（媒体查询）的原理编写响应式网页设计的代码。举例： @media(min-width:768px)and(max-width:991px){ .maincontent{ background-color:#ffffff; color:#ad0000; } .title2,.title3{ display:none; } }六、课堂小结依据显示效果，思考如何实现页面的响应式布局。章节或项目名称任务4、Bootstrap5简介与使用基础本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握Bootstrap的基本框架搭建教学重点Bootstrap的框架搭建与使用基础教学难点Bootstrap的框架搭建与使用基础教学设计教学环节内容要点教学方法与手段时间分配1回顾响应式布局的案例PPT52Bootstrap的基本框架的简介认识Bootstrap5使用Bootstrap的优势103Bootstrap浏览器与设备支持Bootstrap5环境搭建教师演示学生实践204初次体验应用Bootstrap5框架155体验与剖析:响应式图像156响应式布局的案例207小结5教学效果及改进思路一、回顾回顾响应式布局案例的综合应用与思路。二、Bootstrap的基本框架的简介Bootstrap的基本框架的简介。Bootstrap是一个用于开发响应式布局、移动设备优先的Web项目，是目前最受欢迎的前端框架之一。在Bootstrap之前，每位网页设计师对于版面的布局都有不同的排版方式，布局的命名也有所不同。除了版面布局之外，还有版面上的各种元素，如表格、列表、窗体、表单等元素的排版，都会使CSS的样式变得非常庞大且复杂，这样很容易导致不一致，增加维护的负担。Bootstrap框架的特性如下。移动设备优先：自Bootstrap3起，框架包含了贯穿整个库的移动设备优先的样式。浏览器支持：Google、Edge、Firefox等主流的浏览器都支持Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备。为开发人员创建接口提供了一个简洁统一的解决方案。包含了功能强大的内置组件，易于定制。提供了基于Web的定制。免费、开源。三、Bootstrap的基本框架的简介下载并安装调试Bootstrap5框架Bootstrap的安装是比较容易的，可以从Bootstrap官方网站上下载Bootstrap的最新版本，目前最新版本是BootStrap5版本。图官网下载Bootstrap5点击“下载”超链接即可跳转到下载页面。Bootstrap提供了三种方式供开发者选择，下载预编译文件，可直接使用；下载源代码文件，可手动改编译；也可不下载，直接使用CDN文件。点击“下载Bootstrap5生产文件”按钮下载Bootstrap5框架文件包。下载的压缩包中。预编译文件可以直接使用到任何Web项目中，提供了编译好的CSS和JavaScript文件，还有经过压缩的CSS和JavaScript文件。其中bootstrap.*是经过编译的文件，bootstrap.min.*是压缩后的文件，bootstrap.min.*.map是源代码的映射文件。MAP文件可以与某些浏览器的开发者工具协同使用。虽然预编译的Bootstrap提供了众多的CSS和JavaScript文件，但最重要的只有如下几个。bootstrap.css和bootstrap.min.css文件包含了全部的样式。bootstrap.bundle.js和bootstrap.bundle.min.js是集成的JS文件，包括了组件以来的Popper库。四、Bootstrap初次应用体验Bootstrap支持最新，稳定版本所有主要浏览器和平台。Bootstrap不确定支持直接或通过平台的Web视图API使用最新版本的Webkit，Blink或Gecko的替代浏览器。但是Bootstrap（大多数情况下）在这些浏览器中也能正常显示和运行。Bootstrap支持最新版本的浏览器和平台如表所示。表Bootstrap支持最新版本的浏览器和平台平台ChromeFirefoxEdgeOperaSafariAndroid适用适用不适用不适用不适用iOS适用适用不适用不适用适用MacOSX适用适用不适用适用适用Windows适用适用适用适用不适用在使用Bootstrap时，需要在页面中引用Bootstrap中的CSS样式“bootstrap.min.css”文件，所有JavaScript插件都集成在“bootstrap.bundle.min.js”文件里，只要调用了这两个文件，就可以使用Bootstrap的全部功能。【实例2-1】初次体验加载Bootstrap的样例代码。<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <title>欢迎使用Bootstrap5！</title> <!--引用Bootstrap5的CSS文件--> <linkrel="stylesheet"href="css/bootstrap.min.css"/> <!--引用Bootstrap5所需的JavasSript文件--> <scriptsrc="js/bootstrap.bundle.min.js"></script> </head> <body> <!--体验使用Bootstrap5中的类--> <h1class="bg-dangertext-whitetext-centerpy-5"> 欢迎使用Bootstrap5！ </h1> </body></html>代码运行后的效果如图a图所示，如果删除引用Bootstrap5的CSS文件代码，运行结果如图b图所示。（a）使用BootstrapCSS调用的效果（b）未使用Bootstrap的CSS调用的效果需要注意的是，Bootstrap要求文档文档类型必须声明为HTML5；设置视口（Viewport）支持响应式布局；所有的box-sizing都设置为了border-box，解决了弹性布局（flex）中padding的设置不影响元素的最终宽度。五、体验与剖析:响应式图像Bootstrap所提供的

.img-fluid

类让图片支持响应式布局。其原理是将

max-width:100%;

和

height:auto;

赋予图片，以便随父元素的宽度变化一起缩放。举例：【实例2-2】响应式图像使用图响应式图像使用效果（a）iphone14Pro（分辨率430*932）上的测试结果（b）iPadAir（分辨率820*1180）上的测试结果拓展：体验Bootstrap中的画像组件在Bootstrap中画像（figure）组件来显示相关联的图片和文本。当需要显示一段内容（例如带有可选标题的图片），可使用<figure>元素，.figure类、.figure-img类和.figure-caption类为HTML5的<figure>和<figcaption>元素提供了一些基本样式。<figure>标签内所包含的图片如果没有明确地设置尺寸的话，需为<img>标签添加.img-fluid类，使其支持响应式布局。实例：【实例2-5】使用画像（figure）组件。图画像组件的使用效果六、综合案例：尝试Bootstrap布局师资培训网导航区教师学院是一家师资培训平台。该网站结构导航设置为：网站首页、部课程、问答、专家团队定制培训、我的课程等栏目。现根据业务需要初步设计网站首页的头部与banner区域，效果如图2-9所示。图教师学院平台响应式页面效果七、课堂小结重温Bootstrap5简介与使用方法。章节或项目名称任务5、体验Bootstrap响应式页面布局的综合案例本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标明确本学期的核心知识模块、考核方式教学重点搭建学习环境，认识响应式布局，理解媒体查找并尝试响应式布局教学难点媒体查找的理解与尝试响应式布局运用教学设计教学环节内容要点教学方法与手段时间分配1回顾Bootstrap5的基本使用讲授52子任务1案例分析与展示教师演示学生实践103子任务2编写页面HTML代码第一步：创建基本框架。第二步：编写HTML代码。204子任务3编写基本的CSS样式教师演示学生实践205子任务4编写响应式的CSS样式教师演示学生实践306小结响应式整体布局的原理讲授5教学效果及改进思路一、回顾回顾如何实现图像、字体的自适应变化，整体的布局显示思路。二、子任务1项目展示分析本任务主要实现二十四节气页面展示，整体设计效果如图所示。（a）分辨率小于768像素的效果（b）分辨率大于等于768而小于1200像素的效果（c）分辨率大于等于1200像素的效果图二十四节气页面展示展示效果三、子任务2搭建基本的节气容器，并设置基本的布局外层设置一个div容器，先完成春季的6个节气设置。 <divclass="festival"> <!--春季--> <figureclass="figure"> <imgsrc="image/1.png"class="figure-imgimg-fluid"alt="立春"> <figcaptionclass="figure-captiontext-center">立春</figcaption> </figure> <figureclass="figure"> <imgsrc="image/2.png"class="figure-imgimg-fluid"alt="雨水"> <figcaptionclass="figure-captiontext-center">雨水</figcaption> </figure> <figureclass="figure"> <imgsrc="image/3.png"class="figure-imgimg-fluid"alt="惊蛰"> <figcaptionclass="figure-captiontext-center">惊蛰</figcaption> </figure> <figureclass="figure"> <imgsrc="image/4.png"class="figure-imgimg-fluid"alt="春分"> <figcaptionclass="figure-captiontext-center">春分</figcaption> </figure> <figureclass="figure"> <imgsrc="image/5.png"class="figure-imgimg-fluid"alt="清明"> <figcaptionclass="figure-captiontext-center">清明</figcaption> </figure> <figureclass="figure"> <imgsrc="image/6.png"class="figure-imgimg-fluid"alt="谷雨"> <figcaptionclass="figure-captiontext-center">谷雨</figcaption> </figure> </div>四、依据页面HTML元素编写基础的CSS代码参考页面效果，为节气div容器设置CSS样式。五、依据春季的6个节气，添加其他的18个节气依据HTML元素的基本页面效果设置，设置页面基本的CSS代码。在.festival类所在的div容器中添加夏季、秋季和冬季的18个节气图像组件。添加h2标题，并设置其样式。六、课堂小结本任务借助媒体查询，结合Bootstrap与CSS实现了浏览器在不同宽度下的二十四节气页面效果。主要使用了媒体查询、响应式图像、图像样式、图像组件等相关技术。章节或项目名称任务6、Bootstrap网格系统的原理与基本使用方法本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握网格系统的原理与网格系统的常用方法教学重点Bootstrap的网格系统的使用方法教学难点Bootstrap网格系统的原理与网格系统的常用方法教学设计教学环节内容要点教学方法与手段时间分配1回顾Bootstrap的使用方法PPT52网格系统的实现与工作原理203container的相关类介绍教师演示学生实践204响应式网格的使用方法教师演示学生实践305移动与调整列的位置教师演示学生实践106回顾响应式布局的案例讲授5教学效果及改进思路一、回顾回顾回顾Bootstrap5的使用方法。二、网格系统的实现与工作原理及其方法及使用方法网格系统的实现与工作原理三、container的使用网格每一行需要放在设置了

.container

(固定宽度)或

.container-fluid

(全屏宽度)类的容器中，这样就可以自动设置一些外边距与内边距。每一行需要一个row行设置。四、响应式网格的使用方法网格基本结构认识。自动布局、等宽布局、不等宽布局、平板和桌面等五、响应式列偏移设置偏移列通过

offset-*-*

类来设置。第一个星号(*)可以是

sm、md、lg、xl，表示屏幕设备类型，第二个星号(*)可以是

1

到

11

的数字。为了在大屏幕显示器上使用偏移，请使用

.offset-md-*

类。这些类会把一个列的左外边距（margin）增加

*

列，其中

*

范围是从

1

到

11。例如：.offset-md-4是把.col-md-4往右移了四列格。六、响应式布局案例本案例以任务2中“二十四节气页面展示”为原型，借助Bootstrap网格布局来实现其页面，整体设计效果如图所示。（a）分辨率小于768像素的效果（b）分辨率大于等于768而小于1200像素的效果（c）分辨率大于等于1200像素的效果根据图效果分析，页面中包含一个<h2>标题元素和一个盒子容器，容器中放置了24个二十四节图像组件。依据移动设备优先的原则，在分辨率小于768像素时，一行放置2个图像组件；当窗口分辨率大于等于768像素，小于1200像素时，一行放置3个图像组件；当窗口分辨率大于等于1200像素时，一行放置6个图像组件。 所以，使用<divclass="col-6col-md-4col-xl-2">来作为每个图形组件的容器即可。七、课堂小结回顾网格系统的实现与工作原理及其方法及使用。章节或项目名称任务7、Flex布局基础与应用本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标Flex布局的方法教学重点弹性盒布局的实现原理、布局方法、属性；弹性盒布局的常见属性实现方法教学难点弹性盒布局的常见属性实现方法教学设计教学环节内容要点教学方法与手段时间分配1回顾响应式布局基础PPT52弹性盒布局的实现原理103弹性盒布局如何使用？弹性盒布局中常用属性有哪些？104弹性盒布局的实现，教师辅导弹性盒布局的常见属性实现，教师辅导305Bootstrap布局企业导航区教师演示学生实践306小结5教学效果及改进思路一、回顾回顾Bootstrap布局显示思路。二、弹性盒flex布局教师首先讲解弹性和改进了快模型，既不是用浮动，也不会在弹性和容器和其内容之间合并外边距，然后讲解弹性盒的结构，如图所示：弹性盒由容器、子元素和轴构成。最后介绍浏览器对弹性盒布局的支持情况。三、如何使用弹性盒布局？弹性盒布局中常用属性有哪些？教师通过案例来演示弹性盒子布局响应式Web设计中的应用，带领学生一步一步完成代码的编写。教师通过修代码来演示弹性盒常用属性的效果，常用属性如下所示：1. display2. flex-flow3. justify-content4. align-items5. order6. Flexalign-self（3）使用弹性盒布局需要注意哪些问题？教师讲解使用弹性盒布局需要注意的问题，分为4个方面：1.弹性容器的每一个子元素变为一个弹性子元素，弹性容器直接包含的文本变为匿名的弹性子元素。2.多列布局中的column-*属性对弹性子元素无效。3.float和clear对弹性子元素无效。使用float会导致display属性计算为block.。4.vertical-align属性对弹性子元素的对齐无效。最后通过一个完整的案例来巩固如何通过弹性盒实现响应式布局，带领学生一步一步完成代码的编写。四、Bootstrap布局企业导航区企业页面效果五、课堂小结Flex和Bootstrap使用方法。章节或项目名称任务8、Flex布局基础与应用实践本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握Flex布局企业站的方法教学重点使用Flex布局企业站教学难点使用Flex布局企业站教学设计教学环节内容要点教学方法与手段时间分配1回顾Flex布局基础PPT52北大招生页面的效果展示103使用Flex布局顶部页面效果104使用Flex布局导航页面效果205使用Flex布局banner区域与招生导航效果教师演示学生实践406小结5教学效果及改进思路一、回顾回顾响应式Flex布局显示思路。二、北大招生页面的效果展示北京大学招生页面效果展示：三、使用Flex布局顶部页面效果教师通过案例来演示弹性盒子布局响应式Web设计中的顶部的应用，带领学生一步一步完成代码的编写。四、使用Flex布局导航页面效果教师通过案例来演示弹性盒子布局响应式Web设计中的顶部的应用，带领学生一步一步完成代码的编写。五、使用Flex布局banner区域与招生导航效果教师演示布局响应式Web设计中的banner区域与招生导航的应用，学生完成代码编写。五、课堂小结总结Flex实战应用方法。章节或项目名称任务9、网格Grid布局本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标了解网格Grid布局的区别教学重点网格Grid布局的使用方法教学难点网格Grid布局栅格系统的常用参数设计方式教学设计教学环节内容要点教学方法与手段时间分配1回顾Flex布局基础PPT52华为推荐信息页面的效果展示与分析153使用Grid布局的方法教师演示学生实践304使用Grid布局推荐信息栏目效果教师演示学生实践355小结5教学效果及改进思路一、回顾回顾响应式Flex布局显示思路。二、华为推荐信息页面的效果展示与分析华为推荐信息页面的效果展示：三、使用Grid布局的方法使用display:grid将容器元素定义为一个grid(网格)布局，使用grid-template-columns和grid-template-rows设置列和行的尺寸大小，然后通过grid-column和grid-row将其子元素放入这个grid(网格)中。四、使用Flex布局页面效果教师通过案例来演示弹性盒子布局响应式Web设计中的顶部的应用，带领学生一步一步完成代码的编写。五、使用Grid布局推荐信息栏目效果教师演示布局响应式推荐信息页面效果，学生完成代码编写。.wrapper{display:grid;grid-template-columns:33.333%33.333%33.333%;grid-template-rows:300px300px260px260px;column-gap:20px;row-gap:20px;/*width:1200px;margin:0auto;*/}.item{font-size:1.5rem;border:1pxsolid#e5e4e9;}五、课堂小结总结Grid实战应用方法。章节或项目名称任务10、综合应用使用flex与Grid布局本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握flex与Grid的区别与使用方法教学重点flex与Grid的布局方法教学难点flex与Grid的细节参数设置教学设计教学环节内容要点教学方法与手段时间分配1回顾Grid布局的基本方法PPT52展示华为“推荐信息”103使用Flex响应式布局华为“推荐信息”304使用Grid响应式布局华为“推荐信息”305拓展：使用flex和grid实现屏幕居中106小结：深度剖解对比两种方法的、区别5教学效果及改进思路一、回顾回顾Grid布局的基本方法。二、展示华为“推荐信息”华为推荐信息页面的效果展示：三、使用Flex响应式布局华为“推荐信息”外层：display:flex;flex-wrap:wrap;内层：#mydiv1{flex-basis:100%;}#mydiv2{flex-basis:50%;}#mydiv3{flex-basis:50%;}#mydiv4{flex-basis:100%;}四、使用Grid响应式布局华为“推荐信息”外层：display:grid;grid-template-columns:33.333%33.333%33.333%;grid-template-rows:300pxautoauto260px150px;column-gap:20px;row-gap:20px;grid-template-areas:"item-1item-1item-1""item-2item-2item-11""item-3item-4item-4"五、使用flex和grid实现屏幕居中分别使用flex和grid实现屏幕居中六、课堂小结总结flex和grid的布局方法。章节或项目名称任务11、Bootstrap网格系统的案例制作本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标应用网格布局方法布局页面教学重点能运用网格布局响应式网页教学难点网格布局的技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾网格布局的原理PPT52子任务1案例分析与展示教师演示学生实践153子任务2案例实现1第一步：基于Bootstrap框架基础编写基本样式表。第二步：编写第一部分的HTML结构与CSS代码。第三步：编写第二部分的部分的HTML结构与CSS代码。教师演示学生实践254综合任务3：第四步：编写第二部分的部分的HTML结构与CSS代码。案例拓展教师演示学生实践405小结讲授5教学效果及改进思路一、回顾回顾网格布局的原理与使用方法。二、子任务1案例分析与展示本任务主要实现西湖十景页面展示，整体设计效果如图所示。（a）分辨率小于576像素的效果（b）分辨率大于等于576而小于768像素的效果（c）分辨率大于等于768像素的效果图西湖十景页面展示效果根据效果分析，页面中设置一个container容器包含3行。第1行放置一个h3标题，存放“西湖十景”的标题；第2行放置一段关于“西湖十景”的内容描述；第3行放置10个“西湖十景”的图形元素，依据row-cols-*-*来控制元素布局。三、子任务：编程实现第一步：搭建基本的网格布局。借助外层container容器设置3个row元素，设置相关的列元素第二步：在第3行中添加西湖十景元素。为节气div容器设置CSS样式.。第三步：依据效果，添加CSS样式。<divclass="rowrow-cols-1row-cols-sm-2row-cols-md-3g-3">四、课堂小结如何运用网格布局的响应式页面。章节或项目名称任务13、案例：企业内容展示页面制作本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标明确网格布局的原理教学重点能运用网格布局响应式网页教学难点网格布局的技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾网格布局的原理PPT52子任务1案例分析与展示教师演示学生实践153子任务2案例实现1第一步：基于Bootstrap框架基础编写基本样式表。第二步：编写“最新发布”部分的HTML结构与CSS代码。第三步：编写“合作伙伴”部分的HTML结构与CSS代码。教师演示学生实践254综合任务3：第四步：编写“最新课程”部分的HTML结构与CSS代码。案例拓展教师演示学生实践405小结讲授56回顾网格布局的原理PPT5教学效果及改进思路一、回顾回顾网格布局的原理与使用方法。二、子任务1案例分析与展示某公司需要在主页上展示最新发布、合作伙伴和最新课程三个栏目。现根据需求实现的页面效果如图所示。（a）PC宽屏状态下的页面效果（b）Pad上的页面效果技术要点：图片的响应式处理mx-autoimg-fluid是否隐藏？三、子任务：编程实现第一步：创建基本样式表。第二步：编写“最新发布”部分的HTML结构与CSS代码。第三步：编写“合作伙伴”部分的HTML结构与CSS代码。第四步：编写“最新课程”部分的HTML结构与CSS代码。四、课堂小结如何运用网格布局的响应式页面。章节或项目名称任务14、基础排版与颜色的常用方法本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握基础排版与列表的方法教学重点Bootstrap的排版与颜色的定义教学难点Bootstrap的排版与颜色的技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾Bootstrap的网格的使用方法PPT52文字排版:标题、display、small、mark、abbr、blockquote、code、kbd、pre的使用教师演示学生实践303定义列表dl、list-unstyled、list-inline的使用教师演示学生实践104文字的加粗、lead、文本的对齐、文本的大小写等的使用教师演示学生实践205文字的颜色使用教师演示学生实践206小结5教学效果及改进思路一、回顾回顾Bootstrap的网格布局方法。二、文字排版:标题、display、small、mark、abbr、blockquote、code、kbd、pre的使用h1~h6标签的重定义，Bootstrap中定义了所有的HTML标题（h1到h6）的样式。基本段落p的定义：margin-top:0、margin-bottom:1rem(16px)。在Bootstrap5中HTML

<small>

元素用于创建字号更小的颜色更浅的文本。Bootstrap5定义

<mark>

为黄色背景及有一定的内边距。Bootstrap5定义HTML

<abbr>

元素的样式为显示在文本底部的一条虚线边框。对于引用的内容可以在

<blockquote>

上添加

.blockquote

类

。Bootstrap5定义HTML

<code>

元素的样式。Bootstrap5定义HTML

<kbd>

元素的样式。Bootstrap5定义HTML

<pre>

元素定义预格式化的文本。三、列表的使用方法定义列表dl的使用方法。list-unstyled样式，移除默认的列表样式，列表项中左对齐(<ul>和<ol>中)。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)。list-inline样式为内联列表，将所有列表项放置同一行。四、文字的加粗、lead、文本的对齐、文本的大小写等的使用类名描述类名描述.font-weight-bold加粗文本.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行.font-weight-normal普通文本.text-nowrap段落中超出屏幕部分不换行.font-weight-light更细的文本.text-lowercase设定文本小写.font-italic斜体文本.text-uppercase设定文本大写.lead让段落更突出.text-capitalize设定单词首字母大写.text-start左对齐.text-center居中.text-end右对齐五、文字的颜色使用Bootstrap5提供了一些有代表意义的颜色类：.text-muted,

.text-primary,

.text-success,

.text-info,

.text-warning,

.text-danger,

.text-secondary,

.text-white,

.text-dark

and

.text-light六、课堂小结回顾文字排版、颜色、列表类的使用方法。章节或项目名称任务15、Bootstrap5小工具本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握背景颜色、渐变背景颜色、边框、圆角边框、浮动与清除浮动、居中对齐、宽度与高度、内外间距的设置教学重点Bootstrap的各类小工具的使用教学难点Bootstrap的各类小工具的熟练与应用场景教学设计教学环节内容要点教学环节内容要点1回顾Bootstrap的文字与颜色PPT52背景颜色、渐变背景颜色的使用教师演示学生实践103边框、圆角边框、浮动与清除浮动的使用教师演示学生实践304居中对齐、宽度与高度的使用教师演示学生实践205内外间距的设置教师演示学生实践206小结5教学效果及改进思路一、回顾回顾Bootstrap的颜色与文字设置。二、背景颜色、渐变背景颜色的使用设置不同元素的背景颜色时，需要通过

.text-*

类来设置匹配的文本颜色。<divclass="p-3mb-2bg-primarytext-white">.bg-primary</div>背景颜色渐变。<divclass="p-3mb-2bg-infobg-gradienttext-white">.bg-secondary</div>三、边框、圆角边框、浮动与清除浮动的使用使用

border

相关类根据需要显示边框：<spanclass="border"></span><spanclass="borderborder-0"></span><spanclass="border-top"></span><spanclass="border-end"></span><spanclass="borderborder-3"></span><spanclass="borderborder-4"></span>设置了边框的不同颜色：<spanclass="borderborder-danger"></span>rounded

相关类用于设置圆角<imgsrc="..."class="rounded-circle"alt="..."><imgsrc="..."class="rounded-pill"alt="...">元素向右浮动使用.float-end类，向左浮动使用.float-start类，.clearfix类用于清除浮动:<divclass="clearfix"><spanclass="float-start">Floatleft</span><spanclass="float-end">Floatright</span></div>四、居中对齐、宽度与高度的使用使用

.mx-auto

类来设置元素居中对齐(添加margin-left和margin-right为auto):宽度使用

w-*(.w-25,.w-50,.w-75,.w-100,.mw-auto,.mw-100)

类来设置。高度使用

h-*(.h-25,.h-50,.h-75,.h-100,.mh-auto,.mh-100)

类来设置。五、内外间距的设置教师演示m

-用来设置

marginp

-用来设置

paddingt

-用来设置

margin-top

或

padding-topb

-用来设置

margin-bottom

或

padding-bottoms

-用来设置

margin-left

或

padding-lefte

-用来设置

margin-right

或

padding-rightx

-用来设置

*-left

和

*-righty

-用来设置

*-top

和

*-bottomblank-用来设置元素在四个方向的

margin

或

paddingsize

指的是边距的大小：012345auto注意背景颜色不会设置文本的颜色，在一些实例中你需要与

.text-*

类一起使用。六、课堂小结回顾背景颜色、渐变背景颜色、边框、圆角边框、浮动与清除浮动、居中对齐、宽度与高度、内外间距的设置。章节或项目名称任务16、案例：中华传统文化百部经典页面布局本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标应用标题、段落、文本样、列表与综合工具类教学重点能运用标题、段落、文本样、列表与综合工具类的使用方法布局响应式网页教学难点标题、段落、文本样、列表与综合工具类的使用方法的技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾标题、段落、文本样、列表与辅助类的使用方法PPT52子任务1案例分析与展示教师演示学生实践153子任务2案例实现1项目概况第一步：创建基本样式表与基本框架。第二步：编写顶部HTML结构与CSS代码。304综合任务3：在线阅读第三步：编写主体的HTML结构与CSS代码。案例拓展教师演示学生实践355小结标题、段落、文本样、列表与辅助类的使用方法讲授5教学效果及改进思路一、回顾回顾标题、段落、文本样、列表与辅助类的使用方法。二、子任务1案例分析与展示本案例主要完成中华传统文化百步经典的展示。现根据需求实现的页面效果如图4-23所示。（a）分辨率小于768像素的效果（b）大于等于768像素的效果三、子任务：分析本案例基于基本的Bootstrap基本框架，分析图4-23可以看出顶部“logo标题”部分为一个响应式图片。“项目概况”部分使用了圆角矩形和2个段落的具体文本，“项目概况”标题两侧添加了两天白色线条。“在线阅读”部分的书目在分辨率小于768像素时，每行呈现2列，在大于等于768像素时，每行呈现4列。具体分为三步：第一步：编写“logo标题”部分的HTML结构与CSS代码。第二步：编写“项目概况”部分的HTML结构与CSS代码。第三步：编写“在线阅读”部分的HTML结构与CSS代码。四、子任务：实现第一步：编写“logo标题”部分的HTML结构与CSS代码。第二步：编写“项目概况”部分的HTML结构与CSS代码。第三步：编写“在线阅读”部分的HTML结构与CSS代码。拓展部分：如果能能力较强的同学，尝试完成。五、课堂小结标题、段落、文本样、列表与辅助类的使用方法。章节或项目名称任务17、案例：中原音乐文化页面展示本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标应用标题、段落、文本样、列表与综合工具类教学重点能运用标题、段落、文本样、列表与综合工具类的使用方法布局响应式网页教学难点标题、段落、文本样、列表与综合工具类的使用方法的技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾标题、段落、文本样、列表与辅助类的使用方法PPT52子任务1案例分析与展示教师演示学生实践153子任务2案例实现1项目概况第一步：创建基本样式表与基本框架。第二步：编写顶部HTML结构与CSS代码。304综合任务3：在线阅读第三步：编写主体的HTML结构与CSS代码。案例拓展教师演示学生实践355小结标题、段落、文本样、列表与辅助类的使用方法讲授5教学效果及改进思路一、回顾回顾标题、段落、文本样、列表与辅助类的使用方法。二、子任务1案例分析与展示本任务实现中原音乐文化历史与部分音乐文物页面展示，整体设计效果如图所示。（a）分辨率小于768像素的效果（b）分辨率大于等于768而小于992像素的效果（c）分辨率大于等于992像素的效果图中原音乐文化展示效果三、子任务：分析根据图所示效果分析，中原音乐文化页面展示中，顶部的页面结构没有变化。核心的响应式变化在历史概况与音乐文物两个模块，在小屏上每行一个展示，中等屏幕上文物列表每行2个展示，大屏后每行3个展示。历史概况与音乐文物两个模块在大屏上时左右展示，绘制的HTML结构图如所示。（a）分辨率小于768像素的效果（b）分辨率大于等于768而小于992像素的效果（c）分辨率大于等于992像素的效果图中原音乐文化展示结构示意四、子任务：实现第一步：编写“中原音乐文化标题”模块的HTML和CSS样式。第二步：编写“历史概况”模块的HTML和CSS样式。第三步：编写“音乐文物”模块的HTML和CSS样式。拓展部分：如果能能力较强的同学，尝试完成。五、课堂小结标题、段落、文本样、列表与辅助类的使用方法。章节或项目名称任务18、Bootstrap中的表格的设置本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握Bootstrap中的表格的设置教学重点Bootstrap中的表格的设置教学难点Bootstrap中的表格的设置教学设计教学环节内容要点教学环节内容要点1回顾Bootstrap的基本样式与列表PPT52表格的基本结构使用方法教师演示学生实践103表格的高级设计与使用方法教师演示学生实践304其他辅助类教师演示学生实践205表格的综合案例教师演示学生实践206小结5教学效果及改进思路一、回顾回顾Bootstrap的基本样式与列表与工具。二、认识表格表格是HTML中最常见的元素之一，在使用Div+CSS进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被HTML+CSS取代，现在网页中的表格仅以列表的形式实现数据的展示。三、表格的基本结构表格基本元素table、tr、thead、td、tbody等。年度日程表：/tennis/2018wtacalendar.shtml四、表格的使用方法样式可用于表格中(table\.table-striped\.table-bordered\.table-hover\.table-condensed)<tr>,<th>和<td>类.active.success.info.warningdanger五、表格的综合使用案例表格使用案例：“圆梦助学”助学金评选结果展示。本例主要展示“圆梦助学”助学金评选结果，效果如图所示。图“圆梦助学”助学金评选结果展示效果六、小结回顾表格类的使用方法。章节或项目名称任务19、案例：冬奥会奖牌榜展示本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标综合应用表格、标题、段落、文本样、列表与辅助类教学重点综合运用表格的样式设计教学难点综合运用表格的样式设计教学设计教学环节内容要点教学方法与手段时间分配1回顾按钮与表格的使用方法PPT52子任务案例展示教师演示学生实践153子任务：分析第一步：编写数据表的基本型表格的代码。第二步：链接bootstrap样式表，为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式。第三步：为标题行元素调用状态类表格中的样式，并将其默认的背景颜色修改为蓝色。254子任务：实现1.为页面链接bootstrap样式表2.编写奥运会奖牌榜列表的基本型表格的代码3.为基本型表格调用表格样式4.为标题行元素调用状态类表格样式。405小结表格的使用方法讲授5教学效果及改进思路一、回顾回顾辅助类表格的使用方法。二、子任务：展示本案例主要完成冬奥会奖牌榜的表格数据展示的展示。实现的页面效果如图所示。商品列表的表格数据展示效果三、子任务：分析第一步：编写奖牌榜列表的基本型表格的代码。第二步：链接bootstrap样式表，设置三列布局，为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式。第三步：为标题行元素调用状态类表格中的样式，并将其默认的背景颜色修改为#0099FF（蓝色）。四、子任务：实现1.为页面链接bootstrap样式表2.编写列表的基本型表格的代码3.为基本型表格调用表格样式4.为标题行元素调用状态类表格样式。拓展效果：五、课堂小结如何运用表格布局响应式页面。章节或项目名称任务20、表单布局的类型与表单中控件的分类与状态本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握表单类的各种实用方法教学重点Bootstrap的表单类的各种使用方法教学难点Bootstrap的表单类的各种使用技巧教学设计教学环节内容要点教学环节内容要点1回顾Bootstrap的表格类的使用PPT52堆叠表单的使用方式教师演示学生实践153内联表单的使用方式教师演示学生实践104表单行或网格的使用方式教师演示学生实践255表单验证教师演示学生实践206总结表单类的各种实用方法讲授5教学效果及改进思路一、回顾Bootstrap的表格类的使用。二、堆叠表单的使用基本型表单<formrole="form"> <divclass="form-group"> <labelfor="name">您的账号</label> <inputtype="text"class="form-control"id="name"placeholder="请设置您的账号"> </div> <buttontype="submit"class="btnbtn-danger">提交</button></form>三、内联表单注意：在屏幕宽度小于576px时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。<formclass="form-inline"><labelfor="email">Emailaddress:</label><inputtype="email"class="form-control"id="email"><labelfor="pwd">Password:</label><inputtype="password"class="form-control"id="pwd"><divclass="form-check"><labelclass="form-check-label"><inputclass="form-check-input"type="checkbox">Rememberme</label></div><buttontype="submit"class="btnbtn-primary">Submit</button></form>四、表单行/网格使用.col类来控制表单元素的宽度和对齐方式，不需要使用间距类。.col类来控制的表单需要放在.row容器中。五、表单验证.was-validated

或

.needs-validation

添加到<form>元素中，input输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。.valid-feedback

或

.invalid-feedback

类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。六、课堂小结回顾表单的类型与控件的使用方法。章节或项目名称任务21、案例：青年志愿者注册页面制作本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标综合应用布局与表单设计教学重点综合运用表单的样式设计教学难点综合运用布局与表单的样式设计教学设计教学环节内容要点教学方法与手段时间分配1回顾表单的堆叠、内联、行与验证的使用方法PPT52子任务1案例分析与展示教师演示学生实践103子任务2添加表单与表单元素第一步：创建基本样式表与基本框架。第二步：编写HTML结构与CSS代码。154子任务3案例拓展第一步：创建基本样式表与基本框架。第二步：编写HTML结构与CSS代码案例拓展教师演示学生实践505小结表单行与整体布局讲授5教学效果及改进思路一、回顾回顾表单的使用方法。二、子任务1案例分析与展示本任务主要实现青年志愿者注册页面制作，整体设计效果如图所示。（a）屏幕宽度小于768像素的效果（b）屏幕宽度大于等于768像素的效果图青年志愿者注册页面效果三、子任务：分析根据效果分析，网页主要是青年志愿者注册页面制作，在外层容器中包含两行。第一行里放“中国奖牌榜”标题文字，第二行中放置3个表格，分别放置金牌、银牌和铜牌，绘制的HTML结构图如所示。（a）屏幕宽度小于768像素的结构示意图（b）屏幕宽度大于等于768像素的结构示意图图页面的基本HTML结构分析图根据表单效果，完成该表单项目需要完成以下几个表单控件。账号的设置，该表单属于输入框（input控件）。密码的设置，该表单属于输入框（input控件），且同时还具备表单帮助文本效果。姓名的设置，该表单属于输入框（input控件）。身份的选择，该表单属于选择框（Select控件）。邮箱的设置，该表单属于输入框（input控件）。注册完成按钮，该表单元素为提交按钮。值得注意的是该表单项目中的各项均为水平排列表单四、任务：实现任务实现。1.搭建基本的HTML结构，添加logo图标标题2.在<form>表单内添加表单元素3.给body添加CSS样式代码五、课堂小结如何表单的相应式页面。章节或项目名称任务22、字体图标的综合使用本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度符合□超前□滞后符合□超前□滞后教学目标掌握字体图标库、下拉菜单与按钮组的使用方法教学重点Bootstrap的字体图标、下拉菜单与按钮组的使用方法教学难点Bootstrap的字体图标、下拉菜单与按钮组的使用技巧教学设计教学环节内容要点教学方法与手段时间分配1回顾Bootstrap的表单类的使用PPT52字体的使用方法教师演示学生实践253图标库字体的安装教师演示学生实践154图标库的5种使用方法教师演示学生实践405小结讲授5教学效果及改进思路一、回顾Bootstrap的表单的使用。二、字体的使用方法字体的定义与使用方法@font-fa