还剩31页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
千锋教育Bootstrap基石出入门教学设计课程名称Bootstrap基础入门________________授课年级___________________________________授课学期___________________________________教师姓名___________________________________2022年11月05日计划学课程名称第章的插件应用学时8Bootstrap JS14时支持通过属性传递配置参数，参数名称追加至之后，Boottsrap4data“data-如data-offset=H,o数值类型为默认值为下拉菜单相对于其1offset number|string|function,0,目标的偏移量数值类型为默认值为允许下拉菜单在引用元素重叠的2flip boolean,true,情况下翻转数值类型为默认值为下拉菜单的3boundary string|element,scrollParent溢出约束边界数值类型为默认值为默认情况下，使用4display string,dynamic,Popper进行动态定位，禁用此功能四下拉菜单事件为下拉菜单插件定义了一些常用事件，具体介绍如下所示Bootstrap4调用显示下拉菜单的实例方法时，将立即触发此事件1当下拉菜单显示完毕后，将立即触发此事件2调用隐藏下拉菜单的实例方法时，将立即触发此事件3当下拉菜单隐藏完毕后，将立即触发此事件4五下拉菜单演示在本书节中已实现下拉菜单的属性调用，此处不再对其进行演示
7.5data结合下拉菜单的基本结构，通过调用下拉菜单，观察下拉菜单的事件JavaScript调用顺序六滚动监听插件介绍滚动监听插件，即自动更新导航插件，可根据滚动条的位置自动Scrollspy更新对应的导航目标其基本的实现是随着滚动条的滚动，基于滚动条的当前位置向导航栏添加类.active六滚动监听应用规则在中可通过实现滚动监听，在应用滚动监听插件1Bootstrap4scrollspy.js前应先导入文件，并使置于jquery.js util.js scrollspy.js scrollspy.js之前也可一次性引入或压缩版的bootstrap.]s jquery.jsbootstrap.]s滚动监听必须与的导航组件或列表组组件结合使用2Bootstrap4使需要监控的元素通过进行相对定位，监控元素通常为3position:relative〈body对除以外的元素进行监听时，应确保监控元素具备与4vbody height属性overflow-y:scroll在滚动监听中，锚点是必须的，描点必须与相关元素的名保持一致5ID七滚动监听调用属性调用，在页面中为被监听的元素添加属性，1data data-spy=scroll”添加目标对象名”属性，使其与同名的导航结构建立链接data-target=ID ID调用，为被监听的元素绑定方法2JavaScript scrollspy$function{$body.scrollspy;}与下拉菜单使用方法类似，滚动监听支持通过属性或传递配data JavaScript置参数参数传递3对于data属性，参数名称应追加至“data-之后，如data-offset=,,no对于JavaScript,滚动监听插件的方法支持构造参数可通过该参数设置滚动偏移scrollspy offset,量该参数的参数值为正，则滚动条向上偏移，反之，向下偏移n n$function{$body.scrollspy{offset:200};}滚动监听事件A为滚动监听插件定义了个事件每当滚动监听激活新项目时，Bootstrap41都会在滚动元素上触发此事件三知识巩、回顾上课前的学习目标，对本节课知识点进行总结1使用第八章课后作业2第五学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的下拉菜单插件、滚动监听插件的使用在本节课中学生应完成案例Bootstrap练习并将代码提交给教师
二、上机任务一分
2.完成下拉菜单插件的案例练习（分）11（）参照教材【例调用下拉菜单-完成对应练习
18.2]JavaScript.完成滚动监听插件的案例练习（分）21（）参照教材【例滚动监听插件的事件应用-完成对应练习
18.3]
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第
六、七学时（工具提示、弹出框、警告框、按钮）（）对上节课布置的作也以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握工具提示插件的应用掌握弹出框插件的应用掌握警告框插件的应用掌握按钮插件的应用
二、知识讲解
（一）工具提示插件工具提示插件需要的支持，工具提示插件依赖于第三方插tooltip.js popper.js件因此在应用工具提示插件前应导入、、和文jquery.js utiLjs popper.js tooltip.js件开发者也可一次性引入或压缩版的j query.js popper.js bootstrap js并使置于或之前二下bootstrap.min.js,popper.js bootstrapjs bootstrap.mi n.js拉菜单的基本结构定义工具提示
1.工具提示效果依赖于其他元素进行展示，如超链接、按钮等为元素添加属性实现工具提示效果，提示的内容则通过属性进行设data-toggle=tooltip”title计，提示的方向则通过属性进行设计data-placement=left|right|top|bottom”.工具提示插件的调用方式2与其他插件不同的是，工具提示插件并不支持通过属性激活插件，仅data支持脚本的方式调用JavaScript需要注意，处于禁用状态的元素是不具备交互功能的，因此不能为其添加工具提示效果开发者可在禁用元素的外层嵌套一个包裹容器，在该容器上触发工具提示.工具提示的参数传递3支持通过属性或传递参数，对于属性，需将Boottsrap4data JavaScriptdata参数名称追加至“data-之后，如data-trigger=nclickn对于JavaScript脚本，需将o参数置于构造函数中tooltip$
1.btn1,tooltipoptions;在上述代码中，是一个参数对象，其中可包含多个配置参数options.工的配置参数4tooltip数据类型为默认值为即是否允许将淡入1animation boolean,true CSS淡出过渡应用于工具提示数据类型为默认值为即将工具提2container string|element|false,falseo示追加到特定元素上，如body o数据类型为默认值为即设置工具提示的显示3delay number|object,0和隐藏的延迟时间毫秒，不适用于手动触发类型数据类型为默认值为即默认情况下，使用进4html boolean,false Popper行动态定位，禁用此功能数据类型为默认值为即设计工具提示5placement string|function,top的弹出方向，可取值包括当参数值为时，auto|left|right|top|bottomo auto将动态地重新定位工具提示数据类型为默认值为即设计一个选择器字6selector string|false,false符串，则工具提示将针对选择器匹配的目标元素进行显示数据类型为无默认值即若属性不存7title string|element|function,title在，则显示默认的空标题值数据类型为默认值为即设计工具提示的触8trigger string,hover focus发方式,包括单击＞悬浮＞获取焦点或手动click hoverfocus可指定多种触发方式，多种方式之间通过空格进行间隔manual数据类型为默认值为即工具提示内容9offset numbe]string|function,0对于其目标的偏移量.工具提示的实用方法5为工具提示插件定义了一些实用方法，具体介绍如下所示Bootstrap41SO.tooltipCshow1显示目标元素的工具提示隐藏目标元素的工具提示2$.tooltiphide显示或隐藏，即切换目标元素的工具提示3$.tooltiptoggle隐藏并销毁目标元素的工具提示4$.tooltipdispose赋予目标元素工具提示的显示功能，默认启用5$.tooltipenable删除目标元素工具提示的显示功能，仅当启用时才6$.tooltipdisable显示提示赋予目标元素切换其显示或隐藏工具提示的7$.tooltiptoggleEnaled功能更新目标元素的工具提示位置8$.tooltipupdate.工具提示常用事件6为工具提示插件定义了个事件，具体介绍如下所示Bootstrap45调用显示工具提示的实例方法时、将立即触发此事件1show当工具提示对用户可见时，将立即触发此事件2上调用隐藏工具提示的实例方法时，将立即触发3hide s.tooltip hide此事件当工具提示对用户不可见时，将立即触发此事件4该事件在事件结束后被触发5show.bs.tooltip三弹出框弹出框插件需要的支持，弹出框插件依赖于第三方插件popover.js popper.js因此在应用弹出框插件前应导入、和文件开jquery.js util.js popper.js popover.js发者也可一次性引入或压缩版的jquery.js popper.js bootstrapjs bootstrap.min.js,并使置于或之前popper.js bootstrapjs bootstrap.min.js.定义弹出框1弹出框效果依赖于其他元素进行展示，如超链接、按钮等为元素添加属性实现弹出框效果，通过属性定义弹窗标题、data-toggel=popover”title data-属性定义弹窗内容弹出框的弹出方向则通过content data-属性进行设计placement=left|right|top|bottom”.弹出框调用方式2与工具提示插件一样，弹出框插件同样仅支持通过脚本的方式进JavaScript行调用调用构造函数即可实现上述〈〉按钮的弹出框效果popover button.弹出框的禁用嵌套3在弹出框插件中开发者同样可在禁用元素的外层嵌套一个包裹容器，并在该容器上触发弹出效果.弹出框的参数传递4在弹出框插件中可通过属性或传递参数，对于属性,需data JavaScriptdata将参数名称追加至“data-”之后,如data-content=n弹出框内容”对于JavaScript脚本，需将参数置于构造函数中popover是一个参数对象，其中可包含多个配置参数弹出框插件的配置参options数与工具提示插件的配置参数用法基本一致，仅增加了一个参数.content参数的类型为其默认值为空，当content string|element|function,data-content属性不存在时，则应用默认值如果给定一个函数，则该函数将被调用，并将其引用设为所附加的元素this popover.弹出框的实用方法5为弹出框插件定义了一些实用方法，具体介绍如下所示Bootstrap4显示目标元素的弹出框1$.popover*show隐藏目标元素的弹出框2$.popoverhide显示或隐藏，即切换目标元素的弹出框3$.popovertoggle隐藏并销毁目标元素的弹出框4$.popoverdispose赋予目标元素弹出框的显示功能，默认启用5$.popoverenable删除目标元素弹出框的显示功能，仅当启用时才6$.popoverdisable显示弹窗赋予目标元素切换其显示或隐藏弹出框的7$.popovertoggleEnaled功能更新目标元素的弹出框位置8$.popoverupdate.弹出框的常用事件6为工具提示插件定义了个事件，具体介绍如下所示Bootstrap45调用显示弹出框的实例方法时，将立即触发此事件1show当弹出框对用户可见时，将立即触发此事件2调用隐藏弹出框的实例方法时，将立即触发此事件3hide当弹出框对用户不可见时，将立即触发此事件4该事件在事件结束后被触发5show.bs.popover四警告框插件.警告框插件介绍1在中可通过实现警告框的交互，在应用警告框插件前应Bootstrap4alert.js导入、文件也可一次性引入以及或jquery.js util.js alert.js jquery.js bootstrapss压缩版的.警告框插件的常用事件2为警告框插件定义了一些常用事件，具体介绍如下所示Bootstrap4当实例方法被调用后，将立即触发此事件1colse当警告框被关闭后，将立即触发此事件2五按钮插件按钮插件介绍
1.在中可通过实现按钮的交互，在应用按钮插件前应导入Bootstrap4button.js、文件也可一次性引入以及或压缩版的jquery.js button.js jquery.js bootstrap.js.按钮插件调用2按钮插件同样支持通过属性、这两种方法进行调用，开发中data JavaScript推荐使用属性进行调用data属性调用，在按钮组件的基本结构之上，为按钮添加1data data-toggle二属性,即可激活按钮button”调用，直接通过方法即可调用按钮插件，具体代码2JavaScript button如下所示M n$function.btn.button.按钮的常用方法3DSO^uttonCtoggle1切换按钮状态，设置按钮被激活时的状态与外观销毁按钮2$.buttonCdispose.模拟按钮组4的样式可作用于其他元素，如＜＞上，从而模拟实现单Bootsrap
4.button label选按钮组与复选框效果在按钮组基础之上，可将属性添加data-toggle=button”
三、知识巩到内的元素上，以便实现样式切换效果.bm-group回顾上课前的学习目标，对本节课知识点进行总结1使用第八章课后作业2第八学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的工具提示插件、弹出框插件、警告框插件、按钮插件的使用在本Bootstrap节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
2.完成工具提示插件的案例练习（分）
10.5（）参照教材【例】工具提示应用-完成对应练习
18.
4.完成弹出框插件的案例练习（分）
20.5（）参照教材【例】弹出框应用-完成对应练习
18.
5.完成警告框插件的案例练习（分）
30.5（）参照教材【例】警告框事件应用■完成对应练习
18.
6.完成按钮插件的案例练习（分）
40.5（）参照教材【例］按钮式复选框应用-完成对应练习
18.7（）参照教材【例】模拟单选式按钮应用-完成对应练习
28.8
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第
九、十学时（折叠插件）顾上节课内容（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握折叠插件的基本结构实现手风琴式折叠插件的应用掌握折叠插件的调用掌握折叠插件的事件与方法
二、知识讲解
（一）折叠插件介绍折叠插件（）可以很容易地使页面区域折叠起来当列表菜单collapse.js的条目过多且页面空间有限时，可使用类似于手风琴的折叠菜单来节约页面空间，便于用户浏览折叠插件需要的支持，因此在应用轮播插件前应导入、collapse.js jquery.js和文件开发者也可一次性引入、或压缩版util.js collapse.js jquery.js bootstrap.js的
（二）折叠插件的基本结构触发器
1.触发器主要使用或（〉标签进行构建，为触发器元素添加va button data-属性用于激活折叠插件，并在触发器元素中应用名或名来toggle=collapse”id class指定所对应的折叠内容包含框具体代码如下所示a class=nbtn btn-infon data-toggle=ncollapse触发器href=#collapseA”/an n n nbutton class=btn btn-info type=button data-触发器（〉ntoggle=col lapseda ta-targe t=#col lapseB”/button.折叠包含框2折叠包含框将需要折叠隐藏的内容包裹起来，折叠包含框的名与名应id class与标签的属性或〈〉的属性的属性值保持一致折叠包va hrefbuttondata-target含框不仅需要应用、或类，还可在折叠包含框内.colEpse.collapsing.collapse.show嵌套一个卡片主体内容二div classcard card-bodyHo（）隐藏折叠框中的内容
1.collapse（）在转换期间应用，切换时具备动态效果
2.collapsing（）显示折叠框中的内容，可使折叠框内容在默认状态
3.collapse.show下打开触发器〉㊀apse”data-targ t=#collapseB”/button
（三）手风琴式折叠在掌握折叠插件的基本结构后，应对折叠插件进行实践来呢西手风琴式折叠即在某个时间内仅可显示一个子项目的手风琴效果设计手风琴效果时，需要借助外层容器或属性，以确data-parent=id class”保在该容器内中的某个时间内仅可显示个子项目1本章主要介绍的插件概念、模态框、下拉菜单、滚动监听、工具提示、Bootstrap内容分析弹出框、警告框、按钮、折叠、轮播等插件【知识目标】了解插件工具的相关概念
1.Bootstrap理解插件应用的相关概念
2.Bootstrap理解插件事件的相关概念
3.Bootstrap【技能目标】掌握模态框插件的应用
1.Bootstrap掌握下拉菜单插件的应用
2.Bootstrap掌握滚动监听插件的应用
3.Bootstrap教学目标与掌握工具提示插件的应用
4.Bootstrap教学要求掌握弹出框插件的应用
5.Bootstmp掌握警告框插件的应用
6.Bootstrap掌握按钮插件的应用
7.Bootstrap掌握折叠插件的应用
8.Bootstrap掌握轮播插件的应用
9.Bootstrap实现一个企业门户网站首页
10.【思政育人目标】培养学生具备创新精神与创造力
1.培养学生具备艰苦奋斗、刻苦钻研、遇到困难坚持不懈的精神
2.教学重点模态框、下拉菜单、滚动监听、工具提示、折叠、轮播教学难点手风琴式折叠、折叠插件的应用、【实战企业门户网站首页】教学方式课堂讲解配合演示学时，上机演练学时ppt86四折叠插件的调用折叠插件有两种调用方式，即属性以及脚本调用这两种方式，data JavaScript开发中推荐使用属性进行调用data属性调用l.data通过属性调用折叠插件，仅需为＜@＞或＜注＞触发器添加data1311011data-toggle=collapse”属性和data-target=n目标折叠包含框的id或class”属性即可当触发器为＜＞标签时,无需添加属性，可直接在属性中绑定目标a data-target href折叠包含框的名或名属性调用方式已在折叠插件的基本结构中进id classdata行了详细的介绍，此处不再进行赘述脚本调用
2.JavaScript折叠插件的脚本调用方式如下所示JavaScript11$collapse•collapse的配置参数
3.collapse1选择器类型，默认值为所有添加该属性的折叠项，其中parent false,某一项显示时，其他子项自动关闭效果与属性一致data-parent2类型，默认值用于设置是否切换折叠插件显示状toggle boolean true,态四折叠插件的事件与方法.折叠插件的方法1折叠插件中有个常用方法，调用这些方法可为折叠插件实现特定的行为4效果，具体介绍如下所示
1.collapseC^oggle1切换可折叠元素，显示或隐藏该元素显示可折叠元素
2.collapseshow:隐藏可折叠元素
3.collapseChide*销毁可折叠元素
4.collapseCdispose*.折叠插件的事件2折叠插件中有个常用事件，调用这些事件可监听用户的动作和折叠插件4的专题，具体介绍如下所示
（1）调用实例方法时,将立即触发此事.coUapseshow件
（2）当折叠包含框为用户所见时，将立即触发此事件shown.bs.collapse:
（3）调用实例方法（）时,将立即触发此事件.collapse hide
（4）当折叠包含框不为用户所见时，将立即触发此事hidderkbs.coHapse件
三、知识巩（）回顾上课前的学习目标，对本节课知识点进行总结1（）使用第八章课后作业2第十一学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的折叠插件的应用在本节课中学生应完成案例练习并将代码提交给Bootstrap教师
二、上机任务一分
2.完成手风琴的案例练习（分）11（）参照教材【例】设计一个手风琴-完成对应练习
18.
9.完成折叠插件实践应用的案例练习（分）21（）参照教材【例】折叠插件事件应用-完成对应练习
18.10
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第十二学时（轮播插件）顾上节课内容（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握轮播插件的基本结构掌握轮播插件的风格设计掌握轮播插件的调用掌握轮播插件的事件与方法
二、知识讲解-轮播插件介绍轮播插件是一种灵活的、响应式的、无缝循环播放的幻灯片切carouseLjs换插件，其内容可以是图像、内嵌框架、视频或者其他任何类型的内容轮播插件需要的支持,因此在应用轮播插件前应导入、carouseLjs jquery.js和文件开发者也可一次性引入、或压缩版util.js carousel.js jquery.js bootstrap.js的二轮播插件的基本结构.轮播包含框1轮播插件的所有内容都应被包含在轮播包含框中，即.carousel.carousel-指示图标包含框、幻灯片包含框、indicators.carousel-inner.carousel-control-轮播控制按钮{prev|next}开发者需要为轮播包含框设计唯一的值，避免多个轮播包含框ID.carousel之间出现交叉影响需要注意，轮播包含框内的指示图标与控制按钮的.carousel或属性的值应与该包含框的值保持一致data-target hrefID.carousel ID开发者需要通过属性或脚本初始化该轮播插件，即为该包data JavaScript含框添加属性，使轮播在页面加载时就开始进行动画播放，data-ride=carousel”或通过的方法初始化该轮播包含框JavaScript carousel.指示图标2开发者可为列表结构应用类创建个指示图标包含ol.carousel-indicators1框指示图标包含框内的指示图标数量与幻灯片图片数量保持一致，指示图标主要用于显不当前图片的播放顺序在列表结构中，每个列表项均应使用目标轮播包含框属性指定其父级轮播包含框，并通过data-target=ID”data-定义幻灯片的播放顺序slide-to=0”.幻灯片3幻灯片包含框由多个幻灯片项目构成，幻灯片.carousel-inner.carousel-item项目由＜加＞图片和图片说明构成＜＞图片应用
8.carousel-caption img.d-block类和类来修正浏览器的预设图像对齐带来的影响.w-
100.控制按钮4在轮播包含框末尾位置应插入两个控制按钮，可通过.carousel.carousel.类设计向上切换图片的左按钮，类设计向下切control-prev.carousel-control-next换图片右按钮左右按钮上的箭头图标则分别通过类.carousel-control-prev-icon类来实现每个控制按钮都应与轮播包含^
0.carousel-control-next-icon.carousel框进行绑定，例如，使其属性的锚点值与轮播包含框的值保持href.carousel ID一致需要注意，实现左右控制按钮的交互行为，需要通过类data-slide=prev”和类进行激活data-slide=next”
（三）轮播插件的风格设计在轮播图插件中，可通过类来设计轮播图片切换的过渡以及动画效果，.slide当图片不需要过渡效果时，可删除类在应用类前提下，为.slide.slide.carousel轮播包含框添加类可实现轮播的交叉淡入淡出切换效果轮播插件.carousel-fade的幻灯片具有自动循环播放功能，开发者可在每个幻灯片项目上设置其自动循环的间隔时间
（四）轮播插件的调用在中轮播插件有两种调用方式，即属性调用和脚Bootstrap4data JavaScript本调用属性调用
1.data开发者可通过属性快捷地控制轮播的位置，可通过属性和data data-ride属性实现调用在轮播插件的基本结构中已对属性调用方式进行data-slide data了详细的介绍，此处不再赘述脚本调用
2.JavaScript除属性的调用方式外，开发者可通过脚本调用伦比插件在data JavaScript轮播中，需要去掉属性和属性，在脚本调用方式中这些属性data-ride data-slide是冗余的开发者在脚本中使用即可激活轮播carousel（）的配置参数
3.carousel；类型，默认值为在自动循环的项目之间设置要延迟•Interval number5000,的时间量类型，默认值为用于设置轮播插件是否会对键盘•Keyboard booleantrue,事件作出反应类型，默认值为用于设置是否允许鼠标指•pause string|boolean hover,针悬浮在轮播图上时，暂停轮播图的自动播放，离开轮播图则回复自动播放类型，默认值为用于设置用户手动循环第一个项目后自•ride:string false,动播放全部项目如果设置为则在加载时自动播放轮播carousel,类型,默认值为用于设置轮播是否连续循环播放•wrap:booleantrue,类型，默认值为用于设置轮播是否支持触摸屏设•touch booleantrue,备的左、右滑动交互行为.轮播插件的参数传递4支持通过属性或传递参数，上述参数也可通过Boottsrap4data JavaScriptdata属性进行传递,可将参数名称追加至之后，如二五轮播插“data-data-interval件的调用.轮播插件的方法1轮播插件中还有一些常用方法，调用这些方法可为轮播插件实现特定的行为效果，具体介绍如下所示
1.collapseC^ycle1设置轮播从左到右循环播放停止循环播放
2.collapsepause循环播放到指定帧，下标从零开始，类似于数组
3.collapseC^umber
4.collapse,prev,滚动到上一帧
5.collapse!next滚动到下一帧
6.collapseCdispose1销毁轮播元素需要注意，通过方法调用轮播时，其左、右控制按钮是不生效的carousel需要为左、右按钮分别添加和这两个类，并结合）.left.right.collapseCprev和）这两个方法来实现左右按钮的跳转功能.collapseCnext.轮播插件的事件2轮播插件中有个常用事件，具体介绍如下所示2（）调用实例方法时,将立即触发此事件1slide（）当轮播完成幻灯片转换时，将立即触发此事件2slid.bs.carousel:
三、知识巩固（）回顾上课前的学习目标，对本节课知识点进行总结1（）使用第八章课后作业2第十三学时（上机练习）
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习的轮播插件的使用在本节课中学生应完成案例练习并将代码提交给Bootstrap教师
二、上机任务一分
2.完成轮播插件的案例练习（分）
10.5（）参照教材【例】基础轮播图-完成对应练习
18.
11.完成轮播插件的风格设计的案例练习（分）
20.5（）参照教材【例】交叉淡入淡出轮播图-完成对应练习
18.
12.完成轮播插件的事件与方法的案例练习（分）31（）参照教材【例】轮播插件的事件应用-完成对应练习
18.13
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成2绩中第十四学时（上机练习•企业门户网站首页）
一、项目介绍本节将以企业门户网站为主题，使用的插件及部分Bootstrap JavaScriptCSS组件实现一个简单的企业门户网站首页本案例将制作一个简单的企业门户网站首页，主要使用的滚动监听插件、轮播插件、模态框插件折叠插件、Bootstrap4弹出框插件，以及响应式导航栏组件、卡片组件等
二、任务目标学生根据教材中的页面结构分析简图、示例代码以及教师的演示进行上机练习，以此实现一个企业门户网站页面元素包括头部导航栏区域、轮播区域，服务折叠区域、间隔区域、关于我们区域、联系我们区域以及尾部的网站信息在本节课中学生应完成实战案例并将代码提交给教师
二、上机任务一分4头部导航栏区域设计（分）
1.
1.5（）头部导航栏由响应式导航栏、轮播插件以及登录模态框组成当用1户滚动页面，页面显示对应模块时，导航栏中对应的导航项被激活当用户单击按钮时，弹出对应登录模态框“Login”折叠区域设计（分）
2.Service
0.5（）折叠区域由四个触发器及相应折叠包含框组成当用户单击1Service触发器时，页面展示被折叠的内容时弹出框区域设计（分）
3.About1
（1）弹出框区域由个卡片及相关弹出框插件组成当用户鼠标About3悬浮在标题上是时，页面弹出详细内容联系区域设计（分）
4.Concat
0.5（）联系区域由表单组件结合网格布局实现1Concat.尾部网站信息设计（分）
50.5（）通过容器类与网格布局实现响应式的尾部网站信息1
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成绩4中习题教材第章习题8教学后记第一学时插件概述
一、提出需求，导入学习任务思考脚手架的学习应该从何入手1Bootstrap•插件也称是遵循一定规范的、应用程序接口编写出来的程Plug-in,add-in序从广义上来说，插件就是“插入”其他系统里的程序，主要用于增强原有系统的功能本书前章中大部分讲解的是静态的工具类及组件,本章将结合7插件讲解如何实现页面的动态效果JavaScript明确学习方向2了解插件工具的相关概念掌握的插件应用Bootstrap掌握的插件事件Bootstrap教
二、知识讲解学-插件概述.插件工具1过内置了一系列插件，这些插件均可在的源代码中找到在Bootstrap4Bootstrap4程使用插件时应注意不同插件之间的依赖关系，如下拉菜单、弹出框和工具提示Bootstrap4组件均依赖于tooltip popper.js.插件应用2安装插件1引入的插件时，可以单独引入提供的单个*文件，也Bootstrap Bootstrap.js可以引入或从而实现插件的全部引入在引入插件时，bootstrap.js bootstrap.min.js,需要注意，多数插件之间存在依赖关系调用插件2叩有两种插件调用方式，如属性调用、调用Bootstr data JavaScript属性调用1data开发者可以在页面中的目标元素上通过属性启用插件，无需编写data脚本，在开发过程中首要推荐这种调用方式JavaScript例如激活模态框时，需要定义激活模态框插件data-toggle=modal”data-toggle属性是激活插件的专用属性，其属性值应与对应插件的字符串相匹配Bootstrap大部分的插件还需要指定属性配合使用，上述模态框插Bootstrap data-target件也不例外属性常用来指定控制对象，模态框通过模态data-target data-target=框名”绑定对应的模态框，告知插件显示指定的页面元素，具体ID IDBootstrap代码如下所示〈n n nnn nbutton type=button class=btn data-toggle=modaldata-target=ndiv id=,,myModaln class=,,modalnx/div一般情况下，开发者会通过属性启动插件，但开发者也可根据实际情况data禁用插件的属性可使用来取消文档上所有事件或特定插Bootstrap datadata-api件的绑定，具体代码书下所示1$document.off.data-api$document.off*.alert.data-api调用2JavaScript中的插件也可以使用脚本来调用，示例代码如下所Bootstrap4JavaScriptZJNoscript・调用下拉菜单$function{$”btn“.dropdown;}///script.插件事件3中的大部分插件都具备自定义事件，这些自定义事件由两种动词Bootstrap4形式组成，即不定式与过去式下面将对这些形式进行详细介绍不定式例如表示其在隐藏动作开始时触发1hide,过去式例如表示其在隐藏动作完成时触发2hidden,所有的不定式事件均具备功能，该方法可在操作开始前停止preventDefault相关事件的执行能力，该方法也可通过从事件处理程序返回实现调用，代码false如下所示111$function#myModal.on functione{r//停止显示模态框if!data returne.pre ventDe fault}
三、知识巩回顾上课前的学习目标，对本节课知识点进行总结1使用第八章课后作业2第二学时模态框插件顾上节课内容对上节课布置的作业以及学生提出的问题进行答疑解惑1回顾上节课内容，引出本节课主题2明确学习方向3掌握模态框基本结构Bootstrap掌握模态框的辅助类Bootstrap掌握模态框的事件与方法应用Bootstrap
二、知识讲解-模态框介绍模态框是覆盖在父窗体上的子窗体，用于显示一个单独的内容,可Modal在不离开父窗体的前提下实现页面互动开发者可通过子窗体收集信息、实现交互，还可自定义其内容二模态框基本结构.依赖资源1在使用模态框插件前需要先引入、和文件，或一次jquery.js util.js modal.js性引入、或压缩版的文件jquery.js bootstrao.js bootstrap.min.js.固定结构2模态框有其固定的结构，最外层使用类定义弹出模态框的外框，并.modal在该外框中嵌套两层〉结构，即类名为的模态框对话层和类vdiv“modal-dialog”名为的模态框显示内容“modal-content”模态框内容主要由三部分构成，包括头.modal-content.modal-header部、正文、页脚.modal-body.modal-footer（）头部通过为模态框添加标题，通过
1.modaLtitle data-dismiss=modal属性为模态框添加关闭按钮（）正文可在正文中嵌入诸如视频、图像的其他任何内容2（）页脚该区域默认右对齐，可放置“保存”、“关闭”、“接受”等3操作性按钮“关闭”按钮也通过属性实现data-dismiss=modal”.结构代码3模态框基本结构如下所示div class=Hmocialn id=HModalTestndiv class=nmodal-dialognn ndiv class=modal-content=,1ndivclassmodal-header标题h5class=modal-title”/h5）n nbuttontype=buttc n”class=close data-dismiss=modal spantimes;/span/button/divn ndivclass=modal-body x/divdiv class=nmodal-footern/div/div/div/div.模态框激活4开发者需要为特定对象（如按钮）绑定触发行为，并通过特定对象触发模态框的显示在特定对象中添加属性来绑定目标模态框，data-target=#ModalTest”并通过属性告知此处调用的是模态框，即激活模data-toggle=modal Bootstrap4态框插件n H nnn nbuttontype=button class=btn btn-info data-toggle=modal〉按钮一用于打开模态框data-target=#ModalTest”/button二模态框辅助类与的其他组件一样，也为模态框设计了一些常用辅Bootstrap4Bootstrap4助类，可用于控制模态框的布局与样式.模态框辅助类介绍1应用于模态框对话层，使模态框
1.modal-dialog-centered.modal-dialog垂直居中显示应用于模态框对话层，用于设置模态框
2.modal-{sm|lg|xl}.modal-dialog大小，使模态框在断点处自动响应，避免滚动条的出现在模态框正文中嵌套类名为
3.container-fluid.modal-body containerfluid的容器，则该容器可被视为常规网格系统三模态框事件与方法.模态框调用1属性调用1data在特定对象一般是按钮或超链接上设置添加data-toggle=modar\data-，模态框名”或模态框名唧可具体代码如下所示target=ID href=ID〈n H=,,Hnnbuttontype=buttonclassbtn btn-info data-toggle=modal按钮一用于打开模态框/buttonn nn,1n nahref=#ModalTest data-toggle=modal class=btn x/a调用2JavaScript直接通过方法即可调用模态框为特定对象如按钮绑定事件,当modal单击该特定对象时为模态框插件调用构造函数,具体代码如下所示modal$functionn.btnn.clickfunction{1$#ModalTest*.modal;}的配置参数
2.modal默认值为参数类型为用于控制是否显示背景1Backdrop true,booleano遮罩层，默认显示同时设置单击模态框其他区域时是否关闭模态框，默认关闭默认值为参数类型为用于控制是否允许按下2keyboard true,boolean键关闭模态框，默认允许ESC默认值为初始化时将焦点放在模态框上3focus true,默认值为初始化时是否显示模态框，默认显示模态框4show true,.模态框事件3为模态框插件定义了一些常用事件，具体介绍如下所示Bootstrap4调用显示模态框的实例方法时，将立即触发此事件1当模态框显示完毕后，将立即触发此事件2调用隐藏模态框的实例方法时，将立即触发此事件3当模态框隐藏完毕后，将立即触发此事件
4.模态框应用演示4结合模态框的基本结构，分别通过属性和调用模态框，展示data JavaScript模态框的显示与隐藏状态第三学时上机练习
一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习模态框插件的应用在本节课中学生应完成案例练习并将代码提交给教师
二、上机任务一分
2.完成属性调用模态框的案例练习分1data1参照教材【例】属性调用模态框-完成对应练习
18.1data.完成方法调用模态框的案例练习分2JavaScript1参照教材【例方法调用模态框-完成练习
18.1]JavaScript
三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时2成绩中第四学时下拉菜单、滚动监听顾上节课内容对上节课布置的作业以及学生提出的问题进行答疑解惑1回顾上节课内容，引出本节课主题2明确学习方向3掌握下拉菜单的调用方法掌握下拉菜单的参数配置掌握下拉菜单的常用事件掌握滚动监听的应用规则掌握滚动监听的调用方法掌握滚动监听的常用事件
二、知识讲解-下拉菜单插件介绍在中可通过实现下拉菜单的交互，在应用下拉菜单Bootstrap4dropdown.js插件前应导入、以及第三方依赖插件也jquery.js util.js dropdown.js popper.js可一次性引入、以及或压缩版的并jquery.jspopper.js bootstrap.]sbootstrap.min.js,使置于之前popper.jsbootstra.js二下拉菜单调用与模态框相同，下拉菜单同样支持属性及这两种方法进行调dataJavaScript用，在实际开发中推荐使用属性进行调用data属性调用，在超链接或按钮上组合应用类与1data.dropdown-toggledata-toggle=ndropdownn,即可激活下拉菜单在本书第七章中已对下拉菜单的data属性调用方式进行了详细的介绍，此处不再赘述调用，使用构造函数即可直接调用下拉菜单代2JavaScript dropdown码如下所示$function{$”•btn.dropdown;}三下拉菜单设置。
个人认证
优秀文档
获得点赞 0
