还剩43页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
•在按钮中使用旋转图标用于指示当前正在处理或正在进行的操作，还可将旋转图标中包含的文字去掉，并将按钮中包含的文字“Loading”作为提示性信息二按钮组件按钮是网页中不可或缺的一个组件，按钮组件广泛应用于表单、对话框、下拉菜单等元素中，如网站首页中的“登录”、“注册”按钮等.按钮1内置的类可用于定义按钮组件，类不仅可以应用于Bootstrap
4.btn.btn〈〉标签中,还可以应用于〉、等标签中实现按钮效果button vainput语法格式1按钮组件创建类的语法格式如下所示按钮〈/〉button class=btn”button应用演示2以科技考古为主题，在页面中将上类分别应用于〈〉按钮、超链tn buttonva接和表单，展现上类在不同元素上实现的按钮效果input tn.按钮风格设计2中内置了大量工具类，用于设置按钮样式，包括按钮背景颜色、边Bootstrap4框颜色、大小和状态等，下面将介绍为按钮组件定义的常用样式类Bootstrap4按钮颜色1为按钮组件设计了类，即背景颜色类，按钮的每种背景颜Bootstrap
4.btn-*色都有自己的语义目的，为按钮组件设计了类，即边框Bootstrap
4.btn-outline-*颜色类当开发者需要使用按钮组件，但不希望按钮带有背景颜色时，可将按钮的背景颜色类替换为边框颜色类类与类的可取颜色值与其.btn-*.btn-outline-*他颜色工具类基本一致，包括、primary secondarysuccess dangerwarning info、等light dark应用类的按钮，其背景色默认为白色，当鼠标悬浮于按钮之上.btn-outline-*时，按钮的背景与边框保持同色需要注意，所有添加类的按钮，.btn-outline-*其文本颜色与边框颜色保持一致鼠标悬浮状态下，添加上tn-outline-light与类的按钮，其文本颜色与边框色形成反色.btn-outline-dark（）语法格式2按钮组件颜色设计的语法格式如下所示〈按钮文字〈/〉n,1nbutton type=button class=btn btn-primary”button〉按钮文字H n nbutton type=button class=btn btn-outline-primary”/button创建按钮组件时，需要为〈标签添加属性，且为按钮组button,type=button”件应用颜色类的前提是通过类已创建了一个按钮组件.btn（）应用演示3在页面中分别应用按钮背景颜色类和按钮边框颜色类，以便展现多种按钮风格.按钮尺寸与状态3为提升用户体验，开发者会根据网页布局选择更大或更小的按钮中内置了一些按钮尺寸类，包括、和类Bootstrap
4.btn-lg.btn-sm.btn-block（）按钮尺寸类1用于定义大号按钮•.btn-lg用于定义大小号按钮•.btn-sm用于定义块级按钮，使按钮跨域父容器的整个宽度•.btn-block（）语法格式2按钮组件尺寸、状态设计的语法格式如下所示〈大号按钮n nbutton type=button class=btn btn-info btn-lg”/button〉激活按钮button type=nbuttonn class=Hbtn btn-info active”/button〉禁用按钮n nH nbutton type=button class=btn btn-info disabled/button（）应用演示3在页面中分别应用按钮尺寸类和按钮状态类，对比不同尺寸、不同状态的按钮组件的显示效果
（三）基本按钮组按钮组指的是通过群组的方式将一系列按钮结合起来，放置于同一行中，以产生类似于单选按钮组或复选按钮组的组合效果内置的类Bootstrap
4.btn.group可用于定义按钮组，应用类的父容器所包含的一系列〈、,btn-group button,a标签即可生成按钮组.语法格式1按钮组创建类的语法格式如下所示n ndiv class=btn-group按钮n n n nbutton type=button class=btn btn-secondary l/button按钮button type=Hbuttonn class=nbtn btn-secondaryn2/button/div.演示说明2在页面中为个块元素应用类，实现按钮组容器的创建在1div.bm-group容器中放置个按钮，实现一个标准的按钮组组件的创建.3button
（三）按钮组的布局与样式按钮组主要包括基本按钮组、工具栏按钮组、嵌套按钮组、垂直Bootstrap4布局按钮组以及按钮组尺寸设计等方面内容基本按钮组可通过类实.btn-group现，具体应用见本书节本节主要介绍与按钮组布局、样式相关的内容743工具类按钮组L工具栏按钮组将多个基本按钮组放置到个类创建工btn-group
1.btn-toolbar具栏按钮组容器中，形成类似工具栏的样式，从而获得功能更复杂的组件开发者可根据需要使用边距工具类来分隔按钮组之间的空间工具栏按钮组的语法格式如下所示div class=nbtn-group mr-2”buttontype=nbuttonn class=nbtn btn-secondarynl/buttonbutton type=nbuttonn class=nbtn btn-secondary2/button/div div class=nbtn-group mr-2”n n n nbutton type=button class=btn btn-secondary3/buttonn n n nbuttontype=button class=btn btn-secondary4/button/div/div.嵌套按钮组2将一个下拉菜单组件放在一个按钮组中，可实现按钮组与下拉菜单组件的嵌套效果需要注意，在中实现某些组件的动态效果需要引入文件，Bootstrap4popper.js如下拉菜单、弹窗、工具提示等开发者可在页面下载最新的文件popper.js按钮组辅助类3定义了一系列关于按钮组的辅助类，用于实现控制按钮组的布局Bootstrap4方式、尺寸设置等通过按钮组辅助类可快速实现按钮组的垂直分布以及尺寸调整上使一组按钮垂直堆叠，实现垂直分布的按钮组1tn-group-vertical上设置按钮组内所有按钮为大号按钮2tn-group-lg设置按钮组内所有按钮为小号按钮
33.btn-group-sm.按钮组辅助类的语法格式4按钮组辅助类的语法格式如下所示n ndiv class=btn-group-vertical按钮〉n n nbuttontype=button class=btn/button/div按钮（〉n n nbuttontype=button class=btn/button/div需要注意，应用类时，无需添加上类应用.似小.btn-group-vertical tn-group类时,需先应用上类生成按钮组容器group-{lgkm}tn-group.应用演示5（）工具栏按钮组1应用类创建工具栏按钮组容器，并通过工具栏按钮组实现个页.btn-toolbar1面分页器（）嵌套按钮组2以“人民的江山”为主题设计个嵌套按钮组1应用类创建工具栏按钮组容器，并通过工具栏按钮组实现个页.btn-toolbar1面分页器（）按钮辅助类3以“乡村振兴”为主题设计页面，在页面中分别应用上述种按钮辅助类3（）回顾上课前的学习目标，对本节课知识点进行总结1（）使用第七章课后作业2第五学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的图标组件、按钮组件的使用在本节课中学生应完成案例练习并将Bootstrap代码提交给教师
二、上机任务一分
21.完成字体图标组件的案例练习（
0.5分）（）参照教材【例】字体图标应用-完成对应练习
17.
52.完成旋转图标组件的案例练习0・5分参照教材【例】旋转图标分类-完成对应练习
17.
6.完成按钮组件的案例练习分31参照教材【例］按钮颜色类-完成对应练习
17.8参照教材【例］按钮尺寸与状态类-完成对应练习
27.9参照教材【例】按钮组创建类.完成对应练习
37.10参照教材【例】工具栏按钮组■完成对应练习
47.11参照教材【例】嵌套按钮组.完成对应练习
57.12参照教材【例】按钮辅助类-完成对应练习
67.13
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第
六、七学时下拉菜单、导航组件顾上节课内容对上节课布置的作业以及学生提出的问题进行答疑解惑1回顾上节课内容，引出本节课主题2明确学习方向3掌握下拉菜单的基本结构Bootstrap掌握下拉菜单的辅助类Bootstrap掌握下拉菜单的应用Bootstrap掌握导航的基本结构Bootstrap掌握的导航辅助类Bootstrap掌握的导航选项卡Bootstrap
二、知识讲解一下拉菜单网页交互的时候经常会用到下拉菜单组件，下拉菜单可节省网页排版空间，使网页布局更加简洁有序提供了用于显示链接列表的、可切换的、Bootstrap4有上下文的菜单，可满足在各种交互状态下的菜单展示需要
（二）下拉菜单的基本结构定义的下拉菜单组件具有固定结构，包括类定义的下Bootstrap
4.dropdown拉菜单容器，或〈〉实现的触发按钮以及类实现的下a button dropdown-menu拉菜单内容容器，且下拉菜单内容容器中应包含个或多个由或〈构1a button,建的菜单项dropdown-item.基本结构1下拉菜单的基本结构如下所示div c1ass=ndropdown11触发按钮〈/〉button buttondiv class=ndropdown-menun卜「菜单项/己〉a c1ass=Hdropdown-itemn8£=”#”〈〉菜单项n nbuttontype=button class=dropdown-item”/button/div/div需要注意，当下拉菜单组件未被包含在下拉菜单容器中时，可应用声明为的元素作为下拉菜单容器position:relativendiv style=position:relative;触发按钮（〉button/buttondiv class=ndropdown-menun.../div/div.下拉菜单的交互行为2应用下拉菜单组件时，应在上述基本结构的基础上，为触发按钮或链接应用类，生成一个三角形的指示图标需要添加.dropdown-toggle data-属性激活下拉菜单的交互行为，具体语法如下所示toggle=dropdown”n11div c1ass=dropdown buttontype=nbuttonn class=nbtn btn-secondary dropdown-togglenn ndata-toggle=dropdown M^i$ffi/buttonn ndiv class=dropdown-menu卜［菜单项/H nac1ass=dropdown-item6£=#”8〉菜单项n nbuttontype=button class=dropdown-item”/button/div/div三下拉菜单辅助类定义了一系列关于下拉菜单的辅助工具类，用于快速设置菜单样Bootstrap4式、菜单展开方向、菜单分割线、菜单状态以及菜单对齐方向，如.dropdown-等toggle-split.dropleft.dropright下拉菜单辅助类介绍L应用于触发按钮下拉菜单容器应用
1.dropdown-toggle-split.btn-group类，通过个基本触发按钮和个空白触发按钮实现分裂式按钮下拉11菜单该辅助类应用于空白触发按钮应用于下拉菜单容器，替换类，使菜单激活后向左
2.dropleft.dropdown展开应用于下拉菜单容器，替换类，使菜单激活后向
3.dropright.dropdown右展开山叩叩应用于下拉菜单容器，替换类，使菜单激活后向上展
4.dropdown开应用于下拉菜单内容容器使下拉菜单内容容
5.dropdown-menu-right器靠右对齐应用于与菜单项同级的、下拉菜单内容容器的子元
6.dropdown-divider素通过添加类的容器构造分割线，对菜单内dropdown-divider div容进行分割应用于菜单项使当前菜单项处于激活状态，即菜单项表现
7.active为被按下的效果，使其背景变暗或显色应用于菜单项使当前菜单项处于禁用状态，即菜单项文字
8.disabled颜色变浅，不具有交互性，单击菜单项无响应、不会变色.语法格式2下拉菜单辅助类的语法格式如下所示div class=n dropupbtn-groupn〈〉触发按钮buttontype=Hbuttonn class=nbtn btn-primary/button〈nbutton class=btn dropdown-toggle-split dropdown-togglen n n ntype=button data-toggle=dropdown/buttondiv class=ndropdown-menu dropdown-menu-rightn菜单项a class=ndropdown-item activen href=#”l/adiv c1ass=n dropdown-dividern/div/div/div.应用演示3以“东北振兴”为主题设计下拉菜单，在页面中依次运用定义的Bootstrap4上述下拉菜单辅助类，展现多种菜单样式四下拉菜单偏移量应用圆角边框介绍
1.在下拉菜单中不仅可以通过辅助类来设置菜单的对齐方向和弹出方向，还可以通过属性来设置菜单内容容器的偏移量，通过data-offset=x,y”data-属性使菜单内容容器相对于触发按钮的父级容器进行定位reference=parent”在下拉菜单中，菜单内容容器中不仅可以包含菜单项，还可以包含菜单项标题、文本、表单等.语法格式2下拉菜单属性的语法格式如下所示data-offset=x,y”n11divc1ass=dropdown触发按钮（〉n nbuttondata-of fset=10050/buttonzn ndiv class=dropdown-menu菜单标题h3/h3菜单项n nbuttontype=button class=dropdown-item”/button〉菜单文本〉p p/div/div.应用演示3以“小康生活”为主题设计下拉菜单，在页面中依次运用定义的Bootstrap4上述下拉菜单辅助类，展现多种菜单样式
（五）导航组件导航是一个成熟网站的必备功能，实现一个美观的导航组件，需要耗费开发者的大量精力框架设计的导航组件，风格多样、应用便捷，可极大Bootstrap4地降低开发的时间成本本节重点介绍框架的导航组件，在框架中所有导航组Bootstrap4Bootstrap4件均通过类来实现，针对不同类型的导航再增加相应的辅助类即可.nav
（六）导航基本结构在中所有导航组件都具有相同的结构，它们基于、以及Bootstrap ulvli〉标签实现为应用类构造个导航容器，为〉应用类构a ul.nav1li.nav-item造个导航项，并为导航项中的链接应用类1a.nav-link.基本结构1导航组件的基本结构如下所示ul class=MnavHli class=nnav-itemn链接〉na class=nav-link active**href=#/a/li/ul在中，类不仅可以应用于标签，还可应用于其他元素，Bootstrap
4.nav ul如、等当类应用于标签时，导航项与导航链接的行为nav divmav vnav表现相同，因此在结构中可省略类的参与vnav.nav-itemu nnav class=nav=,,n Ha class nav-link activehref=#Active/a/nav.演示说明2根据导航的基本结构在页面中实现一个简单的导航组件六导航辅助类定义了一系列关于导航的辅助工具类，用于快速设置导航布局、Bootstrap4导航风格以及导航项的填充与对齐等.辅助类说明1应用于导航容器导航默认左对齐，此处设置导
1.justify-content-center航水平居中组件是采用布局构建的，导航布局可借助nav Flexbox布局的工具类实现Flexbox应用于导航容器设置导航右对齐
2.justify-content-end应用于导航容器设置导航垂直对齐，可定义响应式
3.flex-column fex-{sm|md|lg|xl}-column应用于导航容器实现标签页导航
4.nav-tabs应用于导航容器实现胶囊式导航
5.nav-pills应用于导航容器使含有类的导航项按比例分配导航
6.nav-fill.nav-item的所有水平空间应用于导航项或导航链接使当前导航项处于激活状态
7.active应用于导航项或导航链接使当前导航项处于禁用状态
8.disabled.语法格式2导航辅助类的语法格式如下所示ul class=nnav justifiy-content-center nav-pills nav-fillnli class=nnav-itemna class=nnav-link activehref=n#nActive/a/li/ul.应用演示3以“大思政课”为主题设计页面导航，在页面中依次运用定义的Bootstrap4上述导航辅助类，展现多种导航样式七导航选项卡导航选项卡类似于桌面系统中的栏，切换项可切换对应内容框中的tab tab内容在框架中，导航选项卡一般在标签页或胶囊式导航组件的基础Bootstrap4上实现.导航选项卡实现1实现导航选项卡，需要为每个导航链接添加或data-toggle=tabs”data-toggle二”属性，以便激活导航组件的交互行为在导航组件基本结构的基础上，pills”应用类构造内容包含框，应用类在内容包含框中插入与导航.tab-content.tab-pane链接所对应的子内容框，且每个子内容框都具有唯一的名在导航项中，每id个导航链接的锚链接值与子内容框名一一对应id.导航选项卡演示2
三、知识巩以“社会主义文化强国建设”为主题设计标签页选项卡回顾上课前的学习目标，对本节课知识点进行总结1使用第七章课后作业2第八学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的下拉菜单组件、导航组件的使用在本节课中学生应完成案例练习Bootstrap并将代码提交给教师
二、上机任务一分3完成下拉菜单组件的案例练习分L L5参照教材【例】基本下拉菜单-完成对应练习
17.14参照教材【例】下拉菜单辅助类■完成对应练习
27.15参照教材【例】下拉菜单偏移量应用-完成对应练习
37.
16.完成导航组件的案例练习分
21.5参照教材【例】基本导航■完成对应练习
17.17参照教材【例】导航辅助类-完成对应练习
27.18参照教材【例］标签页选项卡-完成对应练习
37.19
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成3绩中第
九、十学时面包屑、导航栏、进度条、分页顾上节课内容对上节课布置的作业以及学生提出的问题进行答疑解惑1回顾上节课内容，引出本节课主题2明确学习方向3掌握的面包屑导航Bootstrap了解导航栏的运行特点Bootstrap掌握的导航栏辅助类Bootstrap掌握的进度条组件Bootstrap
二、知识讲解_*面包屑导航.面包屑导航介绍1面包屑导航用于指示当前页面在导航层级中的位置，可通过Breadcrumb样式为各导航条目之间自动添加分隔符CSS.面包屑导航结构2定义的面包屑导航组件具有固定结构，该组件基于、Bootstrap4nav ol以及标签实现创建面包屑导航，需要为应用类，为应li ol.breadcrumb li用类.breadcrumb-item面包屑导航的基本结构如下所示1nav aria-label=breadcrumb^nol class=breadcrumb#”〉首页/li class=,breadcrumb-iterna href=a/li/ol/nav.面包屑导航分隔符设置3面包屑导航的分隔符样式可通过进行自定义，通过样式代码覆盖CSS CSS中的分隔符样式在::伪元素的属性中添加自定义的分Bootstrap4before content隔符，具体代码如下所示〈〉
1.style/*间隔符设计*/
2.
3...breadcrumb-item+.breadcrumb-item::before{
4..display:inline-block;
5..padding-right:
0.4rem;
6.color:#898f94;
7..content:
8.
9./style二导航栏导航栏是一个将商标、导航以及其它元素简单放置到一个简洁导航页头的容器代码组合，是一个网页的“大脑”，利用导航栏可便捷的访问到所需的内容.导航栏的运行特点1导航栏是实现应用程序或网站导航标题的响应式基础组件1Bootstrap4导航栏在移动设备的可视区域中以折叠方式呈现，当可视区域的宽度增加并跨越响应断点时，导航栏以水平布局方式呈现导航栏中的默认内容遵循流式布局，可使用容器来限制其水2container平宽度可使用提供的边距类和布局样式来控制导航栏元素项的3Bootstrap Flex间距和对齐方式.导航栏辅助类2在框架中，所有导航栏组件均使用类来实现，可使Bootstmp.navbar用卜卜卜类实现导航栏的响应式布局，若要设计不.navbar-expand{-sm mdlg xl}同类型的导航栏仅需增加相应的样式即可在中，导航栏组件是由许多子组件构成的，定义了许多Bootstrap Bootstrap辅助类服务于导航栏容器和导航栏子组件，具体如下所示用于定义一个可包含众多子组件的导航栏容器
1.navbar应用于导航栏容器实现导航栏容器的
2.navbar-expand{-sm|-md|-lg|-xl响应式布局当屏幕宽度低于响应断点时，隐藏部分导航内容可通过激活折叠组件显示导航栏的隐藏部分应用于导航栏子项目用于为导航栏设置或项目
3.navbar-brand LOGO名称用于实现轻便的导航菜单，实现对下拉菜单的支持
4.navbar-nav应用于折叠导航按钮，可实现折叠插件和导航切换行
5.navbar-toggler为用于控制操作表单
6.form-inline可实现文本字符串的垂直对齐，并对其水平间距进行优化
7.navbar-text与通过父容器的断点进行分组和隐藏导航列
8.colEpse.navbar-collapse内容在响应式导航栏中，需要折叠的导航栏内容必须包裹在应用类与类的〉中.collapse.navbar-collapse vdiv通过定位类中的特殊定位类，可
9.fixed-{top|bottom Bootstrap4轻松实现导航栏的固定定位，将导航栏固定到顶部或底部用于设计导航栏主题颜色，深色或浅色背景，加此
10.navbar-{light|dark}样式可以突显文字.导航栏组件的基本结构3导航栏组件的的基本结构如下所示navclass=n navbarnavbar-light”或项目名称--子项目a href=M#n c1ass=n navbar-brandn-^M LOGO/a/nav.导航栏组件演示说明4以“新时代人才事业发展”为主题设计页面导航栏，在页面中依次运用、等辅助类.navbar.navbar-expand-{md}navbar-text navbar-light.fixed-top实现一个简单的导航栏组件，展现导航栏组件内容与样式的丰富多彩
（三）响应式导航栏响应式导航栏在大屏幕中导航内容水平铺开，在小屏幕中导航内容垂直堆叠为实现导航栏的响应式特性，需要折叠的导航栏内容必须包裹在带有、类的元素中.collapse.navbar-collapse vdiv.响应式导航栏介绍1折叠起来的导航栏实际上是一个带有类及两个属性的按.navbar-toggle data-钮，为该按钮应用.navbar-toggler类、data-toggle=ncollapsen属性和data-targe仁”属性可实现响应式切换其中属性用于切换#collapse”data-toggle=collapse”指定内容的显示与隐藏状态，属性用于指示需要切换的内data-target=#collapse”容和元素在导航栏中，不仅可在或中添加和.navbar-nav.nav-link.nav-item active类实现导航项的激活与禁用，还可在导航栏中添加下拉菜单disabled.响应式导航栏演示说明2通过一个简单的案例来练习响应式导航栏的具体应用，该导航栏以“新发展理念”为主题进行设计，并在导航栏中嵌套下拉菜单，实现一个内容多样化的导航栏该导航栏在中屏设备上水平显示，在小屏设备上垂直折叠显示
（四）进度条进度条（）组件主要用于展示加载、跳转或动作正在执行中的状态，Progress是网页设计中比较常用的组件设计了简单、美观、色彩丰富的进度Bootstrap4条，使进度条具备条纹和动画效果在中，进度条组件一般由两个嵌Bootstrap4套的元素构成，外层元素应用类创建进度槽，内层元素应HTML.progress用类创建进度条.progress-bar.基本结构1进度条组件的的基本结构如下所示n,,div class=progress ndiv class=progress-bar/div/div.进度条辅助类2设计进度条样式可借助于的内置工具类，如背景类、*尺Bootstrap
4.bg-*.w-寸类等除此之外，还可借助定义的进度条组件辅助类进行设计,包Bootstrap4括・progress-bar-struped、.progress-bar-animated等应用于进度条结构的外层元素，用于实现进度槽
1.progress应用于进度条结构的内层元素，用于实现进度条
2.progress-bar应用于进度槽上，使用渐变为进度条背景颜
3.progress-bar-striped CSS色加上条纹效果应用于进度槽上，使进度条实现从左到右的动
4.progress-bar-animated画效果此效果需要与条纹效果组合实现应用于容器上，效果与属性一致，均可设
5.w-{*}.progress-bar width置进度条进度应用于容器上，可为进度条设计不同的背景色
6.bg-{*}:.progress-bar〉的宽度/n n ndiv class=w-25p-3style=background-color:#eee;”25%好.相对于父元素的尺寸类演示说明3在页面中分别应用上述进度条辅助类，实现多种进度条样式五分页在网页设计的开发过程中，当单页面中需要洎染的数据过多时，一般会使用分页组件对数据进行分页处理在中，分页组件一般由个嵌套的元素构成,该元Bootstrap43HTML HTML素一般指、以及元素，也可使用其他元素来实现分页组件在vul lia分页组件中，外层元素应用类创建分页容器，内层元素应Vul.pagination vli用类创建分页项，当分页项中包含超链接时，需要为超链接应.page-item aa用类.page-link.基本结构1分页组件的的基本结构如下所示n nul class=pagination上一页n n nn nli class=page-item aclass=page-link href=#/a/lin nnnli class=page-item aclass=page-linkhref=n#nl/a/li下一页nnnnnli class=page-item aclass=page-link href=#/ax/li/ul.进度条辅助类2定义了一系列分页组件辅助类，用于设计多种风格、尺寸的分页Bootstrap4组件，包括、等.pagination-lg.pagination-sm应用于分页结构的外层元素，用于实现分页容器
1.pagination应用于分页结构的内层元素，用于实现分页项
2.page-item应用于分页链接上，用于实现分页项中包含的跳转链接
3.page-link应用于分页容器，可设计大号或小号的
4.pagination-{lg|sm}.pagination分页样式应用于分页项上，使当前类所在的分页项高亮
5.active.page-item应用于分页项上，禁用当前类所在的分页项
6.disabled.page-item.相对于父元素的尺寸类演示说明3在页面中分别应用上述分页组件辅助类，实现多种样式的分页组件分别使用“、图标来设计“上一页”、“下一页”laquo;”Equo;”
三、知识巩回顾上课前的学习目标，对本节课知识点进行总结1（）使用第七章课后作业2第十一学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的面包屑组件、导航栏组件、进度条组件、分页组件的应用在本节Bootstrap课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
31.面包屑导航案例练习（
0.5分）（）参照教材中面包屑导航的基本结构与分隔符样式代码进行练习
12.完成导航栏组件的案例练习（1分）（）参照教材【例】导航栏辅助类-完成对应练习
17.20（）参照教材【例】响应式导航栏-完成对应练习
27.
213.完成进度条组件的案例练习（
0.5分）（）参照教材【例】进度条辅助类-完成对应练习
17.
224.完成分页组件的案例练习（1分）（）参照教材【例】分页辅助类-完成对应练习
17.23
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成3绩中第十二学时（卡片、媒体对象、巨幕）顾上节课内容（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握的卡片组件Bootstrap掌握的媒体对象组件Bootstrap掌握的巨幕组件Bootstrap
二、知识讲解
（一）卡片组件卡片组件介绍
1.中的卡片（）组件是一个灵活的、可扩展的内容容器，它包Bootstrap4card括卡片的页眉和页脚、各种各样的卡片内容、上下文背景颜色以及强大的显示选项的卡片组件可替代的面板、缩略图等组件Bootstrap4Bootstraps.卡片内容2卡片组件支持多种多样的内容，包括标题、主体、文本、超链接、页眉、页脚、图片、列表群组等内置了丰富的卡片组件内容类，可用于实现Bootstrap4上述卡片内容，如、、、等.card.card-title.card-body.card-text（）卡片内容内容类1用于构建个卡片组件容器•.card1用于构建卡片标题•.card-title用于构建卡片小标题•.card-subtitle用于构建卡片主体内容•.card-body用于构建卡片文本•.card-text用于构建卡片超链接•.card-link用于构建一张图片在卡片的顶端或底端•.card-img-{top|bottom}用于将图像转换为卡片的背景，可叠加卡片文本在•.card-img-overlay该背景图片上用于创建卡片的页眉•.card-header用于创建卡片的页脚•.card-footer使用、构建列表容器,使用•.list-group■st-group.list-group-flush构建列表项在卡片内使用，可创建卡片的列表群组group-item（）基本结构2分页组件的的基本结构如下所示n ndiv class=card”〉页眉〉div class=card-header/div第一学时（徽章、警告框）
一、提出需求，导入学习任务（）思考脚手架的学习应该从何入手1Bootstrap•组件（）是一个抽象的概念，是对数据和方法的简单封装,是Component基于基本元素而设计的、可重复利用的对象通过组合HTML Bootstrap4HTML.以及代码设计出大量的、可重用的组件本章重点介绍CSS JavascriptBootstrap4中组件的使用方法，每一个组件均会配以实际案例来帮助读者学习和掌握CSS其应用技巧（）明确学习方向2了解组件的相关概念Bootstrap掌握徽章组件的应用Bootstrap掌握的默认警告框组件教Bootstrap掌握警告框的附加内容Bootstrap学掌握警告框的状态Bootstrap过
二、知识讲解程
（一）徽章.徽章组件的概念1徽章（）是一种小型的、用于计数和打标签的组件，主要用于标识新badge发布的信息、热点新闻，突出新的或未读的邮件等徽章组件常用于标E-mail题、按钮和链接中，徽章组件应用于标题时，可适配其直接父元素，即适配标题样式的大小徽章的尺寸大小是基于单位进行设计的，因而其具有良好的em弹性及适配性.徽章组件的结构2徽章组件的结构非常简单，一个〈〉标签中包含两个类，类用于声span.badge明徽章，上类用于设计徽章颜色，徽章声明类必须与徽章颜色类联用adge-*为徽章组件定义了一系列工具类，包括创建类、,颜色类以及形状类Bootstrap4徽章颜色类的可取颜色值包括、、、primary,secondary,success dangerwarningMdiv class=card-body卡片标题h5class=card-title”/h5；p class=ncard-textn^li5^/p卡片超链接a href=H#n clas s=card-link”/a/div”〉页脚〉divclas s=card-footer/div/div（）演示说明3在页面中运用上述卡片内容类实现一个以网站实例”为主题的卡Bootstrap片组件.卡片的应用3（）控制卡片宽度1卡片组件在默认情况下是显示的，可使用网格系统、尺寸类或自定义100%尺寸来控制卡片组件的宽度!—网格系统控制宽度—H ndiv class=row卡片组件-内容省略div class=ncol-6nxdiv class=card”/div/div卡片组件-内容省略n ndiv class=col-6xdiv class=card”/div/div/div!—尺寸类控制宽度--〉〉卡片组件-内容省略〉ndiV class=card w-50”c/diV样式控制宽度—!—CSS;”卡片组件一内容省略divclas s=card”style=n width:10rem/div（）控制卡片的文本对齐方式2卡片组件支持设置卡片内容的对齐方式，包括页眉、标题、卡片主体的对齐方式等，采用如的文本对齐类即可实现，具体代码如下所示.text-centerdiv class=ncardnnp clas s=card-text text-center七”〉卡片主体的对齐方式div class=ncard-body text-righ/div/div（）控制卡片的颜色3卡片组件支持设置卡片的背景颜色、背景图片、边框颜色等，还可根据需要设置卡片页眉和页脚的背景色及边框色•卡片的背景颜色设置可采用的背景类实现，具体代Bootstrap.bg-*码如下所示卡片内容省略div class=ncard bg-secondary”/div•卡片的背景图片设置可通过为〉图片添加类，并设置vimg l.card-img个包含类的容器实现，该容器用于输入文本内容,具
1.card-img-overlay体代码如下所示n ndiv class=card・・・・img src=”class=n card-imgndivc1ass=n card-img-overlayn nn h3class=card-title^IS/h3p class=ncard-textn^t^/p/div/div•卡片的边框颜色设置可采用的边框类实现，具Bootstrap.border-*体代码如下所示〉卡片内容省略div class=ncard border-primary”/div类与类的应用类与类应用在卡片容•.bg-*.border-*.bg-*.border-*.card器上时，是对卡片容器的背景颜色和边框颜色的整体设置当开发者需要单独设置卡片的页眉与页脚边框颜色时，可在页眉.card-header或页脚上应用类设置其边框颜色当开发者需要删.card-footer.border-*除卡片的页眉与页脚背景颜色时，可应用类删除其背景.bg-transparent颜色，具体代码如下所示n ndiv class=card div class=card-header bg-transparent border-success55眉/divdiv class=ncard-body text-successnx/div”〉页ndiv class=card-footer bg-transparent border-success/div在卡片中添加导航4在卡片组件中使用类配合导航组件可实现卡片组件的导航.card-header-tabs功能为添加类，可在卡片组件中实现默认的标签页导航ul.card-header-tabs选项卡将中的、类改为、ul.nav-tabs.nav-header-tabs.nav-pills.card-header-pills即可实现胶囊式导航选项卡，具体代码如下所示nn
1.div class=card nn
2.div class=card-header
3..ulclass=nnav nav-tabs card-header-tabs0nn
4.liclass=nav-item nnnn
5.aclass=nav-link id=home-1ab data-n ntoggle=tab导航项㊀
6..hr f=#navl”l/a
7./li以下省略重复性代码
8.
9./ul
10./div〉
11.div class=ncard-body tab-content”n11nn
12..div class=tab-pane activeid=navl〉导航项对应的子内容框
13..div class=card—body”/div
14./div以下省略重复性代码
15.
16./div
17./div.卡片的布局4在中不仅包含可设置卡片内容样式的卡片内容类，还包括一系Bootstrap4列可设置卡片排版布局的卡片布局类，等.card-group.card-deck.cardcolumns卡片组类，可将多个卡片组合成一个群组，使它们呈现为•.card-group具有相同宽度和高度的列，且群组内的每个卡片紧贴在一起实现一组互不相连的、宽度与高度相等的卡片，即卡片阵•.card-deck列将卡片包裹在类中，将卡片设计成瀑布流布•.card-columns.card-columns局在该类下的卡片是使用属性构建的，而非以便于实CSS flexbox,现浮动对齐卡片排列顺序从上到下、从左到右进行排列（）卡片布局类语法格式1卡片布局类的语法格式如下所示ndiv class=card-group”卡片div class=card”l/div卡片div class=card”2/div/divdiv class=n card-deckn〉卡片div class=card”l/div卡片divclass=card”2/div/divdiv class=n card-columnsn卡片ndiv class=card l/div卡片divclass=card”2/div/div（）卡片布局类应用演示2以.card-deck类为例，示范卡片布局类的应用，实现1个以uBootstrap相关优质项目推荐”为主题的卡片阵列
（二）媒体对象组件中的多媒体对象（）是一个抽象的、特殊版式的区块样Bootstrap4MediaObject式，可以通过更少的代码实现媒体对象与文字的混排效果图片居左，内容居右是媒体对象的常见布局媒体对象基本结构L媒体对象一般是成组出现的，而一组媒体对象常常由两部分组成，包括媒体对象的容器、媒体对象的对象如图片和媒体对象的主体img媒体对象的容器通过类构建，可用于容纳媒体对象的所有内容媒体.media对象的对象常指的是〉图片媒体对象的主体通过类构建,可vimg.media-body用于存放媒体对象中的主体内容，主体内容可以是图片的侧边内容，也可以是其他任何元素媒体对象的基本结构如下所示divclass=nmedian・・・n nimg src=”class=mr-3divclass=nmedia-bodyn^t^X;j^.if4:/div/div在媒体对象中，开发者可选择是否利用的边距类来控制其元素之Bootstrap4间的间距.媒体对象的应用演示2以“图书介绍”为主题设计个媒体对象组件
1.媒体对象应用3实现媒体对象的嵌套1媒体对象可实现无限嵌套，开发者在设计页面时，应减少网页中的嵌套层级，提升页面的美观度实现媒体嵌套只需在媒体组件主体中再嵌.media-body套媒体对象容器即可，具体代码如下所示.mediadiv class=n median・・・n nimg src=class=mr-3divclass=H media-bodyn divclass=n median・・・imgsrc=class=Hmr-3nn n/divclass=media-body^f$7j*^^f$/div/div/div/div（）实现媒体对象列表2媒体对象与、或、结合可实现媒体对象列表实现媒体对ul liol li象列表只需为〉或应用』类去除浏览器默认的列表样式，然vul volist-unstyled后为应用类即可与媒体对象基本结构一致，可根据实际需求使用间vli.media距类对媒体对象内容进行微调具体代码如下所示ulclass=nlist-unstylednli class=media my-3imgsrc=”,..］.$$=丫”〉媒体对象主体/€〉div111©11-100011:1t/li/ul（）设计媒体对象中图片的对齐方式3媒体对象中包含的图片具有多种对齐方式，可使用布局中vimg Flexbox的类使其实现顶部、居中和底部对齐，为图片应用*.align-self-*vimg.align-self-类即可实现，具体代码如下所示H ndivclass=media imgsrc=n...n class=n align-self-{start|center|end}”一€丫”〉媒体对象主体/€〉div01$5=11^€1»310111/div（）设计媒体对象中内容的排列顺序4媒体对象中，默认图片居左，文本居右开发者可通过更换的顺序HTML来实现媒体对象中内容顺序的更改，也可通过布局的排序布局Flexbox.order-*类来实现，具体代码如下所示n ndivclass=media・・）imq src=,class=n align-self-{start|center|end”〉媒体对象主体〉divclass=media-body”/div/div
（三）巨幕组件巨幕（也称超大屏幕）是一个轻量、灵活可扩展的组件，它能延伸到整个视口宽度，主要用于展示网站上的重点内容巨幕组件由个类创建的包含框以及其内部包含的元素组成，巨
1.jumbotron幕组件内包含的元素可以是标题、说明性文本、按钮等当开发者需要使巨幕组件的宽度与浏览器宽度保持一致且取消其圆角效果时，只需要为包含框添加类即可，并将巨幕组件放.jumbotron Jumbotron-fluid在或容器的外面,然后在巨幕组件内部添加个.container.container-fluid
1.container或容考黑.container-fluid巨幕组件的基本结构
1.巨幕组件的的基本结构如下所示n ndivclass=jumbotron标题hl hl/div.巨幕组件的应用演示2以“中国这十年”为主题，在页面中设计个巨幕组件构成的广告牌，展1示页面的主要内容（）回顾上课前的学习目标，对本节课知识点进行总结1（）使用第七章课后作业2第十三学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的卡片组件、媒体对象组件、巨幕组件的使用在本节课中学生应完Bootstrap成案例练习并将代码提交给教师
二、上机任务一分
21.完成卡片组件的案例练习（1分）（）参照教材【例】卡片内容类-完成对应练习
17.24（）参照教材【例】卡片布局类-完成对应练习
27.
252.完成媒体对象组件的案例练习（
0.5分）（）参照教材【例］媒体对象基本结构-完成对应练习
17.
263.完成巨幕组件的案例练习（
0.5分）（）参照教材【例】巨幕组件-完成对应练习
17.27
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第十四学时（上机练习-传统美食介绍页面）
一、项目介绍“民以食为天”是人们在几千年里对美食孜孜追求的鲜明表现本节将以“传统美食”为主题，使用的组件实现一个简单的传统美食介Bootstrap CSS绍页面，用于介绍传统美食的由来与做法
二、任务目标学生根据教材中的页面结构分析简图、示例代码以及教师的演示进行上机练习，以此实现一个商品信息详情页面本案例主要使用的响应式Bootstrap4导航栏组件、下拉菜单组件、全屏巨幕组件、卡片组件、胶囊式选项卡组件以及网格布局来实现页面布局效果页面元素包括头部导航栏区域、巨幕区域，菜谱列表区域、特色推荐区域以及尾部的网站信息在本节课中学生应完成实战案例并将代码提交给教师
二、上机任务一分
71.导航栏设计（2分）（）通过响应式导航栏组件设计导航，使其在中屏设备中显示所有导航1项，在小屏设备中隐臧所有导航项，并通过“汉堡”按钮控制所有导航项显示与隐藏状态的切换
2.巨幕区域设计（1分）（）通过巨幕组件实现页面的全屏巨幕区域，并在剧巨幕区域中添加1说明性文本介绍“八大菜系”
3.菜谱列表区域设计（2分）（）设计一个行列的网格布局，每个列元素在中屏设备中占歹1133U,在小屏设备中占列12（）通过卡片组件实现响应式的菜谱列表项，逐一介绍菜品信息
24.特色推荐区域设计（1分）（）通过标签页选项卡组件实现特色推荐区域，该区域分为菜品、饮料1和主食
5.尾部网站信息设计（1分）（）通过容器类实现尾部的网站信息，并为其设置合理的背景颜色1
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成7绩中习题教材第7章习题、、等徽章形状类可用于设置椭圆形徽章和胶囊徽章，info light dark.badge-pill能够使徽章看起来更加圆润，具备水平内边距.徽章组件的应用语法格式3徽章组件的应用语法格式如下所示标题〈徽章内容hl spanclass=nbadge badge-secondary/span/hl.徽章组件的应用演示4在页面中依次运用上述种徽章类，以便更好地对比不同颜色、形状的徽10章组件的展示效果
（二）默认警告框
1.默认警告框在中，个应用了类的元素可定义个默认的白色警Bootstrap
41.alert div1告框，但默认的白色警告框并无具体意义，开发者应该将警告框颜色类.alert-*与类组合创建出有意义的警告框组件中为警告框组件设置了.alert Bootstrap48种颜色类，其可取颜色值与其他颜色工具类基本一致，包括、primary secondary、、等success dangerwarning infolightdark
2.语法格式警告框组件的应用语法格式如下所示〉一个简单的警告框!divclass=nalert alert-primary”/div
3.应用演示4页面中依次运用上述种警告框颜色类8
（三）警告框附加内容.警告框附加内容1警告框组件还可以包含其他元素，如标题、段落、分割符等通常HTML开发者需要在警告框中加入链接，以便让用户跳转到某个位置或新的页面当警告框中包含超链接时，开发者需要为超链接应用工具类，使超链a.alert-link接与警告框在颜色上保持协调.语法格式2应用警告框组件的附加内容，其语法格式如下所示ndivclass=alert alert-success”〉标题〉h4class=alert-heading”/h4段落文字p/phr〃〃z,,za href=#class=alert-link/a/div.应用演示3以“灯影永留传”为主题设计页面，为警告框嵌入标题、段落文字、分隔线、超链接等，实现警告框组件附加内容的应用示范
（四）警告框状态告框状态
1.1将任意文本和一个可选的关闭按钮组合在一起，就能组成一个可关闭的警告框实现警告框的关闭行为主要有种方式，如通过内置的工具类2Bootstrap4实现关闭功能，通过为警告框添加关闭功能JavaScript内置工具类触发
2.800tstrap4为警告框添加一个的内置类和一个关闭按钮,使Bootstrap
4.alert-dismissible警告框组件的右侧增加个额外空间放置关闭按钮，即可实现警告框组件的关1闭功能关闭按钮应基于〈按钮或超链接进行设计，在关闭按钮中添button,va加类以及属性可实现警告框的关闭操作.close data-dismiss内置工具类触发语法格式
2.801tstrap4基于〈实现关闭警告框的语法格式如下所示button,H ndivclass=alert alert-danger alert-dismissble buttontype=Hbuttonn class=nclosen data-n ndismiss=alert times;/button失败警告/div基于实现关闭警告框的语法格式如下所示andiv class=alert alert-danger alert-dismissblen nnnn nahref=#class=close data-dismiss=alert times;/a失败警告/div内置工具类触发应用演示
4.Bootstrap4以“马耳他中学‘中国角”为主题设计关闭警告框，分别使用〈〉按button钮、超链接实现关闭警告框va值得注意的是，在页面中单击警告框组件的关闭按钮后，该警告框组件即被删除，此处的“删除”不仅指页面上元素消失，还指节点上对应元素被删DOM除如需在关闭警告框时展示淡入、淡出的动画效果，可在警告框容器上同时添加类和类.fade.show.通过方法触发关闭行为5JavaScript在中，警告框组件暴露了一些常用的方法，如Bootstrap4JavaScript$.alert$.alertclose,$.alertdispose等，开发者可利用这些方法对警告框组件进行关闭、销毁等操作用于使警告框能够监听具有属性的子元1$.alert data-dismiss=alert”素上的点击事件如果使用的是属性来自动初始化组件的data API话，则不需要调用此函数关闭警告框并将其从中删除2$.alertCclose DOM销毁某个元素的警告框3$.alertdispose alert.通过方法触发关闭行为-语法格式6JavaScript通过组件方法实现警告框关闭操作的语法格式如下所示1111$.alert.alert close.通过方法触发关闭行为-应用演示7JavaScript以“青山不老，军魂永驻”为主题设计页面内容，使用组件本身所暴露的方法实现警告框的关闭操作JavaScript
三、知识巩回顾上课前的学习目标，对本节课知识点进行总结1使用第七章课后作业2第二学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习徽章组件、警告框组件的应用在本节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
21.完成徽章组件的案例练习（
0.5分）（）参照教材【例】徽章类■完成练习
17.
12.完成警告框组件的案例练习（
1.5分）（）参照教材【例】警告框颜色类-完成练习
17.2（）参照教材【例】警告框附加内容-完成练习
27.3（）参照教材[例内置工具类实现关闭警告框-完成练习
37.4]Bootstrap4（）参照教材通过方法触发关闭行为的代码-完成练习4JavaScript
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第
三、四学时（图标组件、按钮组件）顾上节课内容（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握的按钮组件Bootstrap掌握的按钮组件风格Bootstrap掌握的基本按钮组Bootstrap掌握的基本按钮组Bootstrap掌握按钮组的布局与样式Bootstrap
二、知识讲解一图标拥有一个包含多个免费、高质量图标的开源图标库，开发者Bootstrap1600可通过多种方式使用这些图标，本节内容主要介绍的字体图标和旋转Bootstrap图标字体图标安装
1.安装1图标库已被发布到了中，开发者不仅可以通过的方式Bootstrap NPMNPM进行安装，还可以通过链接进行安装CDN通过进行安装，执行如下命令1NPMnpm ibootstrap-icons利用公共的来安装叩图标库通过＜〉标签将字体图2CDN Bootstrlink标的样式表添加到网页的＜＞标签内或通过的@指令加载图标head CSS111^011字体的样式表具体语法格式如下所示＜link rel=Mstylesheetn href=n＞n@import urlfont/bootstrap-icons.css;.字体图标应用2应用字体图标时，在页面中引入对应图标字体文件，根据需要为标签HTML添加对应的名称或进入图标详情页复制字体图标的元代码并粘贴至class HTML页面指定位置即可可在按钮、标题或表单等元素中使用字体图标以〈〉按钮为例，input button在其中添加图标，进行字体图标的应用说明cart新建一个文件，以外链的方式在该文件中引入框架的1HTML bootstrap相关资源文件，并通过引入字体图标的样式表CDN进入的图标库页面，单击名为的图标2Bootstrap4“cart”跳转至图标的详情页，复制字体图标的代码，代码如下所3“cart”HTML示n niclass=bi bi-cart x/i将字体图标的代码粘贴至页面指定位置4HTML.旋转图标3的旋转图标亦称旋转器用于指示组件或页面的加载状态，Bootstrap Spinners,该组件使用和实现，无任何代码旋转图标组件不属于HTML CSSJavaScript图标库，应用旋转图标组件时无需引入图标库Bootstrap4旋转图标的结构组成1出于增强可及性的目的，每个旋转图标都设置了属性并嵌套role=status”1个〈〉标签，具体语法格式如下所示span旋转图标类型“nndivclass=role=status nnspan class=sr-only Loading.../span/div旋转图标分类2旋转图标组件的外观、颜色可通过提供的工具类进行设置Bootstrap4用于定义环状旋转图标，轻量级的加载指示器可使用•.spinner-border文本颜色工具类更改其外观用于定义增长式旋转图标，该图标不是在旋转，而是反•.spinner-grow复地由小变大可使用文本颜色工具类更改其外观.旋转图标设置4中的旋转图标使用单位来设置其尺寸，使用Bootstrap4rem display:inline-flex设置其布局，因此开发者可以轻松地调整图标的尺寸，使其快速对齐，具体说明如下所示•可使用类似的外边距工具类为旋转图标添加外边距.m-5margin•可使用工具类、工具类和文本对齐工具类将旋转图标放置flexbox float到需要的位置上，实现旋转图标的快速对齐•可为旋转图标添加.和.类实现小尺寸spinner-border-sm spinner-grow-sm的旋转图标，以便在其他组件中应用旋转图标。
个人认证
优秀文档
获得点赞 0
