还剩34页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
千锋教育Bootstrap基石出入门教学设计课程名称Bootstrap基础入门________________授课年级___________________________________授课学期___________________________________教师姓名___________________________________2022年11月02日计划学课程名称第章的工具类学时5Bootstrap10时
三、知识巩固（）回顾上课前的学习目标，对本节课知识点进行总结1
（2）使用第五章课后作业第四学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的文本颜色类、链接颜色类、背景颜色类的使用在本节课中学生应完Bootstrap成案例练习并将代码提交给教师
二、上机任务一分3完成文本颜色类的案例练习（分）
1.
0.5（）参照教材【例】文本颜色类-完成对应练习
15.
6.完成链接颜色类的案例练习（分）
20.5（）参照教材【例】链接颜色.完成对应练习
15.
7.完成背景颜色类的案例练习（分）31
（1）参照教材【例
5.8】背景颜色类-完成对应练习.完成案例练习一一学习菜单（分）41
（1）参照教材【例
5.9】红色故事学习菜单页面-完成对应练习
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成绩3中第五学时（边框类、边距类）（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2
（3）明确学习方向掌握边框设置的应用Boosttrap掌握边框颜色的应用Bootstrap掌握圆角边框的应用Bootstrap掌握边距类的应用Bootstrap
二、知识讲解一边框类.表格介绍1定义了一系列关于边框的样式类，用于实现快速添加、删除边框Bootstrap4或指定添加、删除元素单侧边框边框工具类可实现快速设置元素的边框、边框颜色样式、边框形状等，非常适用于图像、按钮或任何其他元素二边框设置边框设置介绍
2.为元素添加边框可设置元素的类名为，即通过基础类为元素“border”.border添加默认的条边框，该默认边框表现为浅灰色的细边框4当需要指定添加元素的某一侧边框时，可通过以下种类进行实现4为元素添加上边框
1.border-top
2.border-right为元素添加右边框
3.border-left为元素添加左边框
4.border-bottom为元素添加下边框.边框删除介绍3在元素具有边框的前提下，当需要指定删除元素的全部或某一侧边框时,可通过以下种边框样式类实现5删除元素的所有边框，前提是需要删除的边框已经存在
1.bordeM删除元素的上边框，前提是需要删除的边框已经存在
2.border-top-0『删除元素的右边框，前提是需要删除的边框已经存在
3.borde right-删除元素的左边框，前提是需要删除的边框已经存在
4.border-left-0删除兀素的卜边框，前提是需要删除的边框已经存在
5.border-bottom-
0.语法格式4边框样式类的语法格式如下所示span class=nbordernx/span.应用演示5在页面中设置个块元素、、和依次为它们应用边框样式类为4A B C D,A元素添加侧边框，为元素添加左侧、右侧及下方的边框，为元素添加侧4BC4边框并删除上方边框，为元素添加侧边框并删除侧边框D44三边框颜色边框颜色介绍
1.设置元素的边框颜色，前提是要为元素应用边框基础类或单边基础类，.border确保元素已存在边框设置边框颜色可使用以下边框主题颜色类来实现
1.border-primary用于设计蓝色边框，表强调意义
2.border-secondary用于设计灰色边框，表次要意义
3.border-success用于设计绿色边框，表成功意义4上order-dangei用于设计红色边框，表危险意义
5.border-warning用于设计橘黄色边框，表警告意义
6.border-info用于设计浅蓝色边框，表信息意义
7.border-light用于设计白色边框，表高亮意义
8.border-dark用于设计黑色边框
9.border-white用于设计白色边框格式10边框颜色类的语法格式如下所示〈〉/〉span class=nborder border-primary”span.应用演示11在页面中设置个块元素，依次为它们应用边框基础类以及上述
9.border种边框颜色类9四角边框
1.角边框介绍在中为元素设置圆角边框，同样需要为元素应用边框基础Bootstrap4类或单边基础类，确保元素已存在边框.border设置元素的个角均为圆角边框可使用类实现当需要指定元素某
4.rounded一侧边框样式为圆角，设置元素边框形状为正圆形或胶囊形，取消元素的圆角边框，设置元素的圆角大小时，可通过以下几种边框类实现
1.rounded设置元素四角为圆角，前提是需要设置的边框已经存在
2.rounded-top设置元素左上角和右上角为圆角边框，前提同上
3.rounded-right设置元素右上角和右下角为圆角边框，前提同上设置元素左上角和左下角为圆角边框，前提同上
4.rounded-left
5.rounded-bottom设置元素左下角和右下角为圆角边框，前提同上
6.rounded-circle设置元素边框为正圆形，前提同上
7.rounded-pill设置元素边框为胶囊形，前提同上
8.rounded-0取消元素的所有圆角边框，即设置元素四角为直角，前提同上
9.rounded-sm设置元素四角边框为小圆角，前提同上
10.rounded-lg设置元素四角边框为大圆角，前提同上.语法格式2圆角边框类的语法格式如下所示〈span class=nborder roundednx/span.应用演示3在页面中设置个块元素，依次为它们应用边框基础类上以及上述10rder,种圆角边框类10五边距类.边距方向类介绍1元素之间的间距可通过或属性来实现，影响本元素margin paddingmargin与外界相邻元素之间的距离，即外边距；元素边框与元素内容之间的空padding间，即内边距中定义了许多关于边距的类，应用边距类可快速、便Bootstrap4捷地设计网页外观，呈现出协调、美观的页面布局前端开发人员通常使用的属性和属性调节元素边距CSS marginpadding在中提供了简写的基础类名，基础类分别是表示、表Bootstrap4“m”margin“p”示padding
1.{m|p}t用于设置元素的margin-top上方外边距或padding-top上方内边距
2.{m|p}b用于设置元素的margin-bottom下方外边距BK下方内边距paddingbottom
3.{m|p}l用于设置元素的margin-left左侧外边距或padding-left左侧内边距
4.{m|p}r用于设置元素的margin-right右侧外边距或padding-right右侧内边距
5.{m|p}x用于设置元素左右两侧的外边距或左右两侧的内边距x代表水平方向
6.{m|p}y用于设置元素上下两侧的外边距或上下两侧的内边距y代表垂直方向
7.{m|p}用于设置元素上下左右四侧的外边距或内边距.边距距离类介绍2边距基础类不可单独使用，必须与边距的距离值结合应用；边距方向类也不可单独使用，必须与边距基础类以及距离值结合应用定义了个数值，Bootstip46用于控制边距的大小1,*-0用于设置元素的margin或padding距离为Orem,*代表或方向{m|p}{m|p}
2.*-1用于设置元素的margin或padding距离为
0.25rem
3.*-2用于设置元素的margin或padding距离为
0.5rem
4.*-3用于设置元素的margin或padding距离为Irem
5.*-4用于设置元素的margin或padding距离为
1.5rem63-5用于设置元素的margin或padding距离为3rem77*-auto用于为固定宽度的块级元素实现水平居中.负边距类介绍8中的负边距是布局中一个常用技巧，也定义CSS negativemargin Bootstrap了个负边距类用于实现负的样式5margin
1.m｛方向|空白｝-nl用于设置元素的margin为-
0.25rem⑵.m｛方向|空白｝-n2用于设置元素的margin为-
0.5rem⑶.m｛方向|空白｝-n3用于设置元素的margin为・lrem
4.m｛方向|空白｝-n3用于设置元素的margin为-
1.5rem⑸.m｛方向|空白｝-n5用于设置元素的margin为-3rem需要注意，在中属性值是不允许为负值的，因此并未CSS paddingBootstrap对的负边距类进行设置padding.语法格式9边距类的语法格式如下所示〉文本内容div class=m-4”/divdiv class=nmx-auton7cMzlAl£®41/div.应用演示10在页面中设置个块元素，其中前两个块元素是未应用边距类的正常块元素，6主要发挥其对照组的作用，而余下个块元素依次应用上述的基础边距类
4.响应式边距类11边距类与文本类相似，同样可与中的网格系统结合，根据响应断Bootstrap点定义的不同显示不同的边距值响应式边距类的语法格式如下所示”文本内容div class-n{m|p}{t|r|b|l|x|y}-{0|l|2|3|4|5}/div文本内容〉div class=npy-lg-3py-sm-2/div
三、知识巩
（1）回顾上课前的学习目标，对本节课知识点进行总结
（2）使用第五章课后作业第六学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的边框设置、边框颜色、圆角边框、基本边距类、响应式边距类的使Bootstrap用在本节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
3.完成边框类的案例练习（分）
11.5
（1）参照教材【例
5.10】边框样式类-完成对应练习（）参照教材【例］边框颜色类-完成对应练习
25.11（）参照教材【例】圆角边框类-完成对应练习
35.
12.完成边距类的案例练习（分）
20.5（）参照教材【例】基本边距类-完成对应练习
15.13
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第七-八学时（浮动、阴影、尺寸、溢出、定位、内嵌）display（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2
（3）明确学习方向掌握显示或隐藏元素的应用Boosttrap掌握响应式地显示或隐藏元素的应用Bootstrap掌握浮动类的应用Bootstrap掌握阴影类的应用Bootstrap掌握尺寸类的应用Bootstrap掌握溢出类的应用Bootstrap掌握定位类的应用Bootstrap掌握内嵌类的应用Bootstrap
二、知识讲解
（一）属性display类介绍
1.display使用框架提供的工具类可快速改变组件的属性Bootstrap display display工具类支持响应式布局，允许设置一些常见的属性值实现元素类display display型的转换.显示或隐藏元素2显示或隐藏元素的本质是让一个元素在页面中隐藏或显示出来，在中主CSS要通过属性、可见性、溢出等方法来实现本节内容display visibilityoverflow主要介绍中的工具类是如何控制元素的显示与隐臧的Bootstrap4display根据属性的所有可能取值设置一个取值子集，最终实现了Bootstrap4display工具类display
（1）display工具类的具体代码格式在中属性主要通过来表示，工具类的具体代码Bootstrap4displayddisplay格式如下所示.d-{value}（）工具类的取值2display value隐藏元素•none:显示为内联元素，元素前后没有换行•inline:显示为行内块元素•inline-block:显示为块元素，元素前后带有换行符•block:将元素显示为块级表格，元素前后带有换行符•table:元素将作为表格的一个单元格显示（类似于〉和）•table-cell:td vth元素将作为表格的一个行元素显示（类似于）•table-row:vtr将元素作为弹性伸缩盒子显示•flex:将元素作为内联块级弹性收缩盒子显示•inline-flex:（）类语法格式3display类的语法格式如下所示displaydiv class=nd-inlinend-inline/div（）应用演示4display在页面中为元素工具类实现内联元素和块级元素的转换display.响应式地显示或隐藏元素3工具类支持页面的响应式设计，可根据不同设备类型响应式地显示display或隐藏元素，针对设备类型显示与隐藏不同的元素，即为同一个页面设计不同显示版本
（1）响应式代码格式在中工具类的响应式代码格式如下所示Bootstrap4display.d-{sm|md|1g|xl}-{value}（）工具类的响应式介绍2display当工具类名称中间未设置设备类型（即、、、等）时,当display smmd1g xl前元素的设置可影响所有断点（即到）display xsxl当需要隐藏某个页面元素，只需使用类或类即dnone.d-{sm,md,lg,xl}-none可当需要在给定的屏幕尺寸范围内显示某个页面元素的时，可通过组合使用类和类实现例如、以及类的组合.d-*-none.d-*-*.d-none d-md-block.d-xl-none效果是在中型设备（md）和大型设备（g）的屏幕上显示指定的页面元素,其余设备上全部隐藏该页面元素
（3）响应式display类的语法格式应式类的语法格式如下所示display》在小于尺寸的屏幕上隐藏div class=nd-none d-lg-block”1g/div
（4）响应式display类的应用演示在页面中为元素应用响应式工具类，实现元素的响应式显示或隐藏display效果
（二）浮动类使用中提供的工具类可实现元素的快速浮动，工具类Bootstrap4float float支持根据网格断点的不同实现响应式浮动，即根据当前设备型号将元素浮动到左侧、右侧或禁用浮动.浮动类介绍1在中实现元素的左右浮动主要通过应用类以及Bootstrap4foat-left foat-right类来实现，禁用元素浮动则通过类实现foat-none•.float-left在所有设备类型上，元素均向左浮动•.float-right在所有设备类型上，元素均向右浮动•.float-none在所有设备类型上，元素均不浮动｛｝｛｝在｛｝设备类型上,元素｛左•.float-sm|md|lg|xl-left|right sm|md|lg|xl右｝浮动浮动样式支持响应式设计，可根据不同的网格断点来设置不I同的浮动样式.浮动类语法格式2基本浮动类的语法格式如下所示在所有设备类型上，元素均向左浮动响应式浮动div c1ass=float-left”/div类的应用语法格式如下所示本元素在小型设备上向右浮动div c]_ass=float-sm-right”sm/div.浮动类演示说明3在页面中为元素应用基本浮动类，实现一个网页导航菜单的设计三阴影类中主要通过四个阴影类来设置元素的阴影样式，的阴影Bootstrap4Bootstrap4类可用于添加阴影或去除阴影.阴影类介绍1在中实现元素的左右浮动主要通过应用类以及Bootstrap4foat-left.float-right类来实现，禁用元素浮动则通过类实现foat-none•.shadow-none用于去除本元素的阴影•.shadow-sm用于设置小阴影•.shadow用于设置常规阴影•.shadow-lg用于设置大阴影.阴影类语法格式2阴影类的语法格式如下所示div c1ass=n shadow-nonediv.阴影类演示说明3在页面中为元素应用阴影类，依次实现上述种阴影类4四尺寸类应用中的尺寸类，即宽度和高度的相关工具类，可轻松Bootstrap4width height实现对页面元素的高度和宽度的设定在中尺寸类分Bootstrap4本章主要介绍的文本类、颜色类、边框类、边距类、类、浮动Bootstrap Display内容分析类、阴影类、尺寸类、溢出类、定位类、内嵌类【知识目标】了解的工具类的相关概念
1.Bootstrap【技能目标】掌握的文本类的应用
1.Bootstrap掌握的颜色类的应用
2.Bootstrap掌握的边框类的应用
3.Bootstrap掌握的边距类的应用
4.Bootstrap掌握的类的应用
5.Bootstrap Display掌握的浮动类的应用
6.Bootstrap掌握的阴影类的应用教学目标与
7.Bootstrap教学要求
8.掌握Bootstrap的尺寸类的应用掌握的溢出类的应用
9.Bootstrap掌握的定位类的应用
10.Bootstrap掌握叩的内嵌类的应用
11.Bootstr实现一个商品信息详情页面12【思政育人目标】“工具意识”，其实也就是责任意识、担当意识、服务意识和奉献意
1.识青年是祖国和民族的未来，担负着实现中华民族伟大复兴的历史重任，只有立志做大事、做公仆、做奉献鼓励学生树立工具意识培养学生创新的职业精神、勤奋刻苦的职业精神；
2.培养学生钻研的精神，教育学生热爱自己的事业，坚持自己的理想，不
3.为名利而放弃理想的高尚情操教学重点文本类、颜色类、边框类、边距类教学难点【案例练习一一学习菜单】、【实战商品信息详情页面】教学方式课堂讲解配合演示学时，上机演练学时ppt55为两种，一种是相对于父元素的宽度和高度进行设置的尺寸类，主要使用百分比表示；另一种是相对于视口的宽度和高度进行设置的尺寸类，主要使用VW（视口宽度）和（视口高度）来表示Viewport Width,vh ViewportHeight,相对于父元素的尺寸类介绍
1.相对于父元素的宽度和高度工具类，默认情况下支持、、、25%50%75%100%和这五种值开发者可根据需要对源文件中的文件auto Bootstrap_variables.scss中的$变量进行修改，即可生成不同规格的尺寸类51265中相对于父元素的尺寸类的具体说明如下Bootstrap4•・w-25设置本元素的宽度为父元素宽度的25%•.w-50设置本元素的宽度为父元素宽度的50%•.w-75设置本元素的宽度为父元素宽度的75%•.w-100设置本元素的宽度为父元素宽度的100%•.w-auto设置本元素宽度自适应•・h-25设置本元素的高度为父元素高度的25%•.h-50设置本元素的高度为父元素高度的50%•.h-75设置本元素的高度为父元素高度的75%•.h-100设置本元素的高度为父元素高度的100%•.h-auto设置本元素高度自适应除上述种类以外，还可使用和这两个类类主
10.mw-
100.mh-
100.mw-100要用于设置元素的的最大宽度，类主要用于设置元素的的最大高度使.mh-100用上述两种类可避免出现因子元素尺寸过大撑破父元素的情况，从而设计出美观、合理的页面.相对于父元素的尺寸类语法格式2相对于父元素的尺寸类的语法格式如下所示；的宽div class=nw-25p-3n style=nbackground-color:㊀㊀25%度/div.相对于父元素的尺寸类演示说明3在页面中为元素应用相对于父元素的尺寸类,依次实现上述种尺寸类
10.相对于视口的尺寸类介绍
4、是基于视图窗口的单位，是新增的一部分不论视图窗口如VW vhCSS3何改变，视口的宽度始终保持高度始终保持也就是将视口平均lOOvw,lOOvh分为份，为一份，始终等于视口宽度的始终等于视口高度100Ivw Ivw1%,Ivh的1%定义了个相对于视口的尺寸类Bootstrap44•.min-vw-100设置本元素的最小宽度等于视口宽度•.min-vh-100设置本元素的最小高度等于视口高度•.vw-100设置本元素的宽度等于视口宽度•.vw-100设置本元素的高度等于视口高度.相对于视口的尺寸类的注意事项5需要注意，设置元素类名为“min-vw-100”，当元素的宽度大于视口宽度时，此元素将按照其自身的宽度大小来显示，且页面会出现横向的滚动条；当元素的宽度小于视口宽度时\此元素将按照视口的宽度大小来显示，并始终与视口宽度保持一致设置元素类名为“min-vh-100”，当元素的高度大于视口高度时，此元素将按照其自身的高度大小来显示，且页面会出现纵向的滚动条；当元素的高度小于视口高度时，此元素将按照视口的高度大小来显示，并始终与视口高度保持一致.相对于父元素的尺寸类语法格式6相对于视口的尺寸类的语法格式如下所示div class=Hmin-vw-100nMin-width100vw/div.相对于父元素的尺寸类演示说明7在页面中为元素应用相对于视口的尺寸类，设置第个元素的宽度为1div2000px,类名为“min-vw-100；设置第2个div元素的宽度为素Opx,类名为“min-vw-100”；设置第3个div元素的宽度为2000px,类名为“vw-100”
（五）溢出类当一个盒子的内容（子元素）超过盒子本身的大小的时候，就会出现溢出现象在中通常使用属性解决元素的内容溢出，而在中则CSS overflowBootstrap4定义了两个溢出类来处理内容溢出溢出类介绍L在中实现元素的左右浮动主要通过应用类以及Bootstrap4foat-left.float-right类来实现，禁用元素浮动则通过类实现foat-none•.overflow-auto在固定宽高的元素上，如果内容超出元素大小，将出现一个垂直滚动条，移动滚动条可查看被隐藏的全部内容•.overflow-hidden在固定宽高的元素上，如果内容超出元素大小，溢出的部分将会被隐藏.溢出类语法格式2溢出类的语法格式如下所示文本内容〈/〉㊀div class=ov rflow-auto”div.溢出类演示说明3在页面中为元素应用上述种溢出类，对比两种溢出类的运行效果2
（六）定位类在中定位是将盒子固定在某一个位置，使其自由的漂浮在其他盒子的CSS上面在中，可通过定位类来实现元素的无定位、相对定位、绝对定Bootstrap4位、固定定位以及粘性定位.定位类介绍1在中实现元素的左右浮动主要通过应用类以及Bootstrap
4.float-left.float-类来实现，禁用元素浮动则通过类实现right foat-none•.position-static静态定位，元素的默认定位方式，无定位•.position-relative相对定位，元素相对于元素本身在标准流中的位置进行移动•.position-absolute绝对定位，元素相对于其具有定位的父级元素的位置进行移动•.position-fixed固定定位，元素相对于浏览器可视窗口进行移动•.position-sticky粘性定位（兼容性差），被认为是相对定位和固定定位的混合元素在跨越特定阈值前为相对定位，之后为固定定位阈值参照物为浏览器的可视窗口.特殊定位类2除上述种常用定位类之外，还定义了个特殊的定位类5Bootstrap43•.fixed-top固定在顶部，将一个元素固定在视口viewport的顶部且边缘对齐•.fixed-bottom固定在底部，将一个元素固定在视口viewport的底部且边缘对齐•.sticky-top粘性置顶，当页面滚动并经过某个元素之后，该元素被固定在视口的顶部且边缘对齐viewport.语法格式3以粘性定位类和粘性置顶类为例，中常用定位类的语法格式如下Bootstrap4所示div class=nposition-sticky style=ntop:lOpx;nposition-sticky/divnav class=nsticky-topn-^i®l;l^rt^/nav.定位类演示说明4在页面中为元素应用上述种定位类，对比种定位类的运行效果55七内嵌类一个成熟的网站通常由各式各样的元素所组成，网页中的常见元素主要包括文本、图片、动画、视频、音乐、超链接、表格、表单、各类控件等在页面中嵌入视频、图片、幻灯片等元素主要通过、〈、〈〉、〈》iframe embed,video object等标签实现仍支持使用上述标签，此外还定义了一些相Bootstrap4Bootstrap4关样式类，可在任意设备上保持元素的缩放比率.内嵌类介绍1在中实现元素的左右浮动主要通过应用类以及Bootstrap
4.float-left.float-类来实现，禁用元素浮动则通过类实现right foat-none•.embed-responsive应用于内嵌标签的直接父元素，可使元素实现同比例的缩放效果应用于内嵌标签本身，并不强制要求，但推荐•.embed-responsive-item使用此类名设置纵横比，应用于内嵌标签的直接父元•.embed-responsive-16by9素，定义的长宽比例16:9设置纵横比，应用于内嵌标签的直接父元•.embed-responsive-21by9素，定义的长宽比例21:9设置纵横比，应用于内嵌标签的直接父元素，•.embed-responsive-3by4定义的长宽比例3:4设置纵横比，应用于内嵌标签的直接父元•.embed-responsive-1by1素，定义的长宽比例1:
1.语法格式2内嵌类的语法格式如下所示div c1ass=nembed-responsive embed-responsive-16by9niframe class=nembed-responsive-item11src=n yy-n8rel=0nallowfullscreen/iframe/div.内嵌类演示说明5在页面中为元素应用内嵌标签与相关样式类回顾上课前的学习目标，对本节课知识点进行总结1使用第五章课后作业2第七学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的表格工具类的应用、表单工具类的应用在本节课中学生应完成案Bootstrap例练习并将代码提交给教师
二、上机任务一分2表格案例.个性化表格分L1参照教材【例个性化表格-完成对应练习
14.
111.表单案例-表单控件类的应用分21参照教材【例］表单控件类的应用-完成对应练习
14.12
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第八学时图片、画像对上节课布置的作业以及学生提出的问题进行答疑解惑1回顾上节课内容，引出本节课主题2明确学习方向3掌握图片类的应用Boosttrap掌握图片对齐方式的设置Bootstrap掌握的画像类的应用Bootstrap
二、知识讲解一图片类.常用图片类介绍1框架增强了图片功能，为图片提供响应式行为开发者在项目中Bootstrap引用图片将更加便捷且图片元素更加稳定
1.img-fluid响应式图片
2.img-thumbnail缩略图，给图片加上一个圆角且Ipx的边界的边框样式
3.rounded图片样式,图片实现圆角矩形样式
4.rounded-circle图片样式,图片实现圆角50%样式.常用图片类语法格式2以响应式图片为例进行介绍，通过所提供的类使其支Bootstrap
4.img-fluid持响应式布局其原理是将、赋予图片，实现响应max-width:100%height:auto式布局，图片将随父元素同步缩放响应式图片的语法格式如下所示＜＞img src=n...class=nimg-fluidH alt=n...n.常用图片类的应用2使用类使图片与父元素保持同步缩放.img-fluid
（二）图片对齐方式中实现图片对齐的常用方式l.Bootstrap
（1）浮动类使用浮动类或分别实现图片的左浮动与右浮动.float-left foat-right
（2）文本对齐类使用类、类、类分别实现水平居左、水平居.text-left.text-center.text-right中、水平居右对齐（）外边距类3使用外边距类来实现水平居中，需要注意，必须通过类.mx-auto.d-block将＜＞标签转换成块级元素img.图片对齐方式的应用2使用类使图片与父元素保持同步缩放..img-fluid
（三）画像的画像类l.Bootstrap任何时候需要为图片显示一段内容时，如带有可选标题的图片，均可使用〈行＞标签进行设计gure类、类、类为的〈〉和,figure.figure-img.figure-caption HTML5figure〈行＞元素实现了样式增强gcaption当〈〉标签内所包含的图片没有明确设置尺寸时，必须为＞标签添figure vimg加类，使其支持响应式布局.img-fluid的画像类的语法格式l.Bootstrap画像的语法格式如下所示〈＞figure class=nfiguren图片地址img src=class=nfigure-img img-fluid roundedalt=n...n画像对应标题figcaption c1ass=figure-caption”/figcaption/figure.图片对齐方式的应用3使用画像组件实现风景介绍页面
三、知识巩固（）回顾上课前的学习目标，对本节课知识点进行总结1
（2）使用第四章课后作业第九学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的类、浮动类、阴影类、尺寸类、溢出类、定位类、内嵌类的Bootstrap display使用在本节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
2.完成类的案例练习（分）1display1（）参照教材【例］类-完成对应练习
15.14display（）参照教材【例】响应式类-完成对应练习
25.15display.完成浮动类的案例练习（分）21（）参照教材【例】基本浮动类-完成对应练习
15.
16.完成阴影类的案例练习（分）
30.5（）参照教材【例】阴影类-完成对应练习
15.
17.完成尺寸类的案例练习（分）41
（1）参照教材【例
5.18］相对于父元素的尺寸类-完成对应练习（）参照教材【例］相对于视口的尺寸类-完成对应练习
25.
19.完成溢出类的案例练习（分）
50.5（）参照教材【例］溢出类-完成对应练习
15.
20.完成定位类的案例练习（分）
60.5（）参照教材【例】定位类-完成对应练习
15.
21.完成内嵌类的案例练习（分）
70.5（）参照教材【例］嵌入图片-完成对应练习
15.22
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成5绩中第十学时（上机练习.商品信息详情页面）中国国土面积广阔，山川秀美，有着极其令人向往的美丽风景有巍峨险峻的张家界大峡谷，有风景秀美的桂林山水，还有隐匿于人们生活之中的、大大小小的湿地公园本节将以北京的标志性公园一玉渊潭公园为主题，使用的工具类实现一个简单的商品详情页面本案例是制作一个简单的商Bootstrap品信息详情页面，主要使用的文本类、颜色类、边距类、内嵌类、定Bootstrap4位类等工具类以及网格布局来实现页面设计
二、任务目标学生根据教材中的页面结构分析简图、示例代码以及教师的演示进行上机练习，以此实现一个商品信息详情页面页面元素包括页面导航栏、商品图片、商品标题、商品价格、购买按钮、商品详情介绍以及回到顶部按钮等在本节课中学生应完成实战案例并将代码提交给教师
二、上机任务一分
6.导航栏设计（分）12（）在＜＞标签中应用类实现一个固定在页面顶部的导航1nav.sticky-top栏.商品信息设计（分）22
（1）网格第2行由商品图片与商品信息这2个列元素组成，在第1列中通过＞标签引入商品图片viframe
（2）网格第2行由商品图片与商品信息这2个列元素组成，在第2列中突出显示商品的介绍信息.商品图文介绍过渡设计（分）31
（1）网格布局第3行发挥过渡效果引出商品的图文介绍.商品详情介绍设计（分）41
（1）在网格布局第4行中嵌套文本与图片，通过图片、文字进一步介绍商品信息
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成6绩中习题教材第5章习题
一、提出需求，导第一学时文本类入学习任务思考脚手架的学习应该从何入手1Bootstrap•正所谓“人间巧艺夺天工,炼药燃灯清昼同”，网页设计也不仅需要骨架，骨架外层的装饰也是十分重要的是一款快速构建响应式网站的框Bootstrap UI架，使用框架可设计出精美的界面本章主要介绍的工Bootstrap WebBootstrap具类，工具类的应用将配合具体实例进行讲解，从而不断提高读者应用Bootstrap工具类的能力明确学习方向2掌握的文本对齐方式类的应用Bootstrap掌握的文本大小写转换类的应用Bootstrap教掌握Bootstrap的文本折行与溢出类的应用掌握的文本字体类的应用Bootstrap学掌握的其他文本样式类的应用Bootstrap过
二、知识讲解程一文本对齐方式类文本类
1.设置文本的对齐方式可将元素的类名设为、、“text-left“text-right“text-和设计了以上种类用于设置文本对齐方式，具center text-justify Bootstrap44体说明如表所示
5.
1.文本对齐方式类的介绍2设置文本的对齐方式可将元素的类名设为、、“text-left”“text-right“textcenter”和“text-justify”
1.text-left设置文本左对齐
2.text-right设置文本右对齐
3.text-center设置文本居中对齐
4.text-justify设置文本两端对齐
5.text-{sm|md|lg|xl}-{left|right|center表示在sm|md|lg|xl型设备上实现文本{左对齐|右对齐|居中对齐}文本对齐类可与网格系统结合，根据响应断点定义的不同而采用不同的文本对齐方式.语法格式3文本对齐类的语法格式如下所示p class=ntext-leftft§/pp class=ntext-sm-lef§/p.应用演示4在页面中分别应用类和类实现文本对齐演示，表示.text-left.text-md-center保持文本左对齐，在型设备上保持文本居中对齐md二文本大小写转换类.文本大小写转换类的介绍1当页面中的文本由中英文共同构成时，可按照文本显示规则对字母进Web行大小写转换，进一步提高文本的可阅读性在中对字母进行大小写Bootstrap4转换操作，可通过以下种类实现
31.text-lowercase表示将元素内的字母转换为小写
2.text-uppercase表示将元素内的字母转换为大写
3.text-capitalize表示将元素内每个单词的第一个字母转换为大写，不影响其他字母.语法格式2文本转换类的语法格式如下所示〉转为小写的文本p c1ass=text-lower case”/p.应用演示3在页面中依次应用文本转换类显示英文版社会主义核心价值观三文本折行与溢出文本折行与溢出介绍
1.当页面中的文本超出元素本身的宽度时，文本内容默认会自动换行在中如需对文本进行折行处理，阻止文本折行，隐藏溢出文本等操作时，Bootstrap4可使用以下种类来实现
3.语法格式2文本折行与溢出类的语法格式如下所示此文本允许换行.div class=Htext-wrapn style=nwidth:6rem;n/div.应用演示3在页面中定义个宽度为的块元素，第一个块元素的类名设为3lOrem div即允许文本换行；第二个块元素的类名设为即阻止文本“text-wrap“text-nowrap换行；第三个块元素的类名设为“text-truncate”，即实现文本溢出隐藏四文本字体.文本字体的介绍1为满足文本字体的设计需求，定义了丰富的样式类，文本字体类Bootstrap4可快速更改文本的字体粗细以及倾斜样式在中设置文本的字体样式Bootstrap4时，可使用以下种文本字体类来实现
61.font-weight-bold表示设置较粗的字体
2.font-weight-bolder表示相对于父元素，为当前元素设置较粗的字体表示设置正常粗细的字体
3.font-weight-normal
4.font-weight-light表示设置细的字体
5.font-weight-lighter表示相对于父元素，为当前元素设置较细的字体
6.font-italic表示设置斜体的字体.语法格式2文本字体类的语法格式如下所示p class=nfont-weight-bo.应用演示3在页面中依次应用上述种文本字体类，以便更好地对比文本字体类的不6同效果五其他文本样式类其他文本样式类的介绍L还提供了一些其他常用的文本字体类，在使用进行开Bootstrap4Bootstrap4发时可能会用到以下文本样式类
1.text-reset重置颜色，表示重置文本颜色或链接颜色，以便从父元素继承颜色属性
2.text-monospace等宽字体，表示将所选内容设为等宽字体文字装饰，表示为文本添加修饰线
3.text-decoration-underline Bootstraps新增
4.text-decoration-none文字装饰，表示为文本删除修饰线文字装饰，表示为文本添加中划线5text-decoration-line-through新增Bootstraps.语法格式2其他文本字体类的语法格式如下所示等宽字体p class=text-monospace”/p.应用演示3在页面中依次运用定义的种其他文本字体类，展现多种文本样Bootstrap43
三、知识巩式回顾上课前的学习目标，对本节课知识点进行总结1使用第五章课后作业2第二学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习文本对齐方式类、文本大小写转换类、文本折行与溢出类、文本字体类、其他文本样式类的应用在本节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分3完成文本对齐类的案例练习分
1.
0.5参照教材【例】响应式文本对齐类-完成对应练习
15.
1.完成文本转换类的案例练习（分）
20.5（）参照教材【例】文本转换类-完成对应练习
15.
2.完成文本折行与溢出类的案例练习（分）
30.5
（1）参照教材【例
5.3】文本折行与溢出类-完成对应练习.完成文本字体类的案例练习（分）
40.5
（1）参照教材【例
5.4】文本字体类-完成对应练习.完成其他文本字体类的案例练习（分）51（）参照教材【例］其他文本字体类-完成对应练习
15.5
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成3绩中第三学时（颜色类）顾上节课内容（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2
（3）明确学习方向掌握的文本颜色类的应用Boosttrap掌握的链接颜色类的应用Bootstrap掌握的背景颜色类的应用Bootstrap
二、知识讲解（-）文本颜色类颜色类
1.网页制作中一般运用色彩将元素与主题相结合，营造出独特的网页风格开发者还可以利用色彩划分页面布局，方便用户迅速锁定信息区域，利用突出的颜色发挥其视觉引导作用在中支持使用少量颜色类传达其颜色含义，Bootstrap4并支持对具有悬停状态的链接进行颜色设计中的颜色类主要包括文Bootstrap本颜色、链接颜色、背景颜色等.文本颜色类的介绍2提供了一系列具有代表意义的文本颜色类，通过颜色赋予文本特Bootstrap殊意义
1.text-primary字体颜色为蓝色，表示重要意义
2.text-secondary字体颜色为灰色，表示次要意义
3.text-success字体颜色为浅绿色，表示成功意义
4.text-danger字体颜色为浅红色，表示危险意义
5.text-warning字体颜色为浅黄色，表示警告意义
6.text-info字体颜色为浅蓝色，表示信息意义
7.text-light字体颜色为浅灰色，表示高亮意义此颜色文本在白色背景上看不清
8.text-dark字体颜色为深灰色，表示暗色意义
9.text-muted字体颜色为灰色，表示减弱意义
10.text-white字体颜色为白色此颜色文本在白色背景上看不清
11.text-body字体颜色与body保持一致，继承body的文本颜色｛颜色｝-*设置字体颜色的透明度*代表透明程度，范围
12.text-0-
100.语法格式3文本颜色类的语法格式如下所示〉文本内容〈/〉㊀p class=t xt-primary”p.应用演示4在页面中依次运用定义的上述文本颜色类Bootstrap4二链接颜色类.文本大小写转换类的介绍1对于节所介绍的文本颜色类，允许其在超链接上正常应用Bootstrap通过焦点样式和悬浮样式使链接文本在鼠标悬浮时文本颜色变暗，从Bootstrap而保持链接文本与网页整体颜色的和谐统一与设置文本颜色类一样,Bootstrap并不建议为文本使用和类，它们需要与背景色搭配使用.text-white.text-light.语法格式2链接颜色类的语法格式如下所示二文本内容a classtext-primary”v/a.应用演示3依次运用定义的文本颜色类于超链接标签上，展现多种链接颜Bootstrap4色样式三背景颜色类文本折行与溢出介绍
1.为元素添加背景色可使用提供的背景颜色类实现，背景颜色类与Bootstrap文本颜色类类似，文本颜色类用于设计文字颜色，背景颜色类则用于设计元素的背景颜色背景颜色不会影响文字颜色，开发过程中需将背景颜色类与文本颜色类结合应用，使二者搭配出协调、美观的样式
1.bg-primary背景颜色为蓝色，表示重要意义
2.bg-secondary背景颜色为灰色，表示次要意义
3.bg-success背景颜色为浅绿色，表示成功意义
4.bg-danger颜色为浅红色，表示危险意义
5.bg-warning颜色为浅黄色，表示警告意义
6.bg-info颜色为浅蓝色，表示信息意义
7.bg-light颜色为浅灰色，表示高亮意义此背景颜色在文本为白色时会模糊文字
8.bg-dark颜色为深灰色，表示暗色意义
9.bg-white背景颜色为白色此背景颜色在文本为白色时会模糊文字背景颜色为透明色此背景颜色在文本为白色时会模
10.bg-transparent糊文字.语法格式2背景颜色类的语法格式如下所示文本内容p class=bg-primary”/p.应用演示3在页面中依次运用定义的上述背景颜色类，展现多种背景颜色Bootstrap4样式。
个人认证
优秀文档
获得点赞 0
