《Bootstrap响应式网站开发》课件-第八章Bootstrap的JavaScript插件_第1页
《Bootstrap响应式网站开发》课件-第八章Bootstrap的JavaScript插件_第2页
《Bootstrap响应式网站开发》课件-第八章Bootstrap的JavaScript插件_第3页
《Bootstrap响应式网站开发》课件-第八章Bootstrap的JavaScript插件_第4页
《Bootstrap响应式网站开发》课件-第八章Bootstrap的JavaScript插件_第5页
已阅读5页,还剩61页未读, 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

bootstrap响应式网站开发第八章

Bootstrap的JavaScript插件Bootstrap插件概述1《Bootstrap响应式网站开发》Bootstrap自带12种jQuery插件,具体包括:过渡效果、模态框、下拉菜单、滚动监听、标签页、提示工具、弹出框、警告框、按钮、折叠、轮播、附加导航。Bootstrap的JavaScript插件--Bootstrap插件概述1.Bootstrap的JS插件功能2.引用JS插件的方式站点引用Bootstrap插件的方式有两种:单独引用:使用Bootstrap的个别的

*.js

文件。一些插件和CSS组件依赖于其他插件。如果单独引用插件,请先确保弄清这些插件之间的依赖关系。同时引用:使用

bootstrap.js

或压缩版的

bootstrap.min.js。引用的代码如下:<scriptsrc="bootstrap.min.js"></script>注意:不要尝试同时引用这两个文件,因为

bootstrap.js

和

bootstrap.min.js

都包含了所有的插件。《Bootstrap响应式网站开发》由于Bootstrap的JS插件还使用了一些jQuery插件,所以需要引用jQuery插件库,jQuery是一个JavaScript函数库。jQuery是一个轻量级的“写的少,做的多”的JavaScript库。jQuery库是一个JavaScript文件,大家可以使用HTML的<script>标签引用它:<head><scriptsrc="jquery-3.3.1.min.js"></script></head>3.引用jQuery的方式Bootstrap的JavaScript插件--Bootstrap插件概述过渡效果与模态框2《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框过渡效果简介要使用Bootstrap的过渡效果,只需导入bootstrap.js或bootstrap.min.js文件就行了,因为所有组件默认已经具有基本的过渡效果。默认情况下,以下组件使用了的过渡效果:模态对话框(Modal)的滑入滑出和淡入淡出;标签页(Tab)的淡出;警告框(Alert)的淡出;轮番(Carousel)的滑入滑出。需要注意的是,Bootstrap的过渡效果全部使用了CSS3的动画特性,由于受CSS3的限制,它提供的特效非常有限。并且,IE8及以下的版本均不支持CSS3的动画特性,这些浏览器中将看不到过渡效果。例如在模态框中添加加上

.fade

即可实现渐隐渐现。<divclass="modalfade"id="myModal">《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框简介在Bootstrap框架中把模态弹出框统一称为Modal。这种弹出框效果在大多数Web网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片。模态框(Modal)也可理解为覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,如图8-1所示为用户注册的模态框。图8-1模态框页面效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框静态模态框的使用方法Bootstrap框架中的模态弹出框,分别运用了“modal”“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,modal-content是样式的关键。主要设置了弹窗的边框、边距、背景色和阴影等样式,其主要又包括三个部分:弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮。弹出框主体,一般使用“modal-body”表示,弹出框的主要内容。弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮。切换模态框(Modal)插件的隐藏内容:通过data属性:在控制器元素(比如按钮或者链接)上设置属性

data-toggle="modal",同时设置

data-target="#identifier"

或

href="#identifier"

来指定要切换的特定的模态框(带有id="identifier")。通过JavaScript,可以通过简单的一行JavaScript来调用带有id="identifier"的模态框:$('#identifier').modal(options)。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框静态模态框的使用方法Bootstrap中的“模态弹出框”有以下几个特点:模态弹出窗是固定在浏览器中的。单击右侧全屏按钮,在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。当浏览器视窗大于768px时,模态弹出窗的宽度为600px。模态弹出窗的背景常常有一个半透明的蒙层效果。触发弹窗时,弹窗是从上到下、逐渐浮现到页面前的。下面,来认识一下静态模态框的调用。【实例8-1】静态的模态窗口调用,代码如右所示。运行【实例8-1】这段代码的输出结果如图8-2所示。a)静态模态框触发前效果b)模态框触发后弹出效果图8-2静态模态框效果<h3>静态的模态窗口实例</h3><!--按钮触发模态框--><buttonclass="btnbtn-primarybtn-md"data-toggle="modal"data-target="#myModal">开始演示模态框</button><!--模态框(Modal)--><divclass="modalfade"id="myModal"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button><h4class="modal-title"id="myModalLabel">验证E-mail信息</h4></div><divclass="modal-body"> <formclass="form-horizontal"> <divclass="form-group"> <divclass="col-sm-9"> <inputtype="text"class="form-control"id="email"placeholder="请输入邮箱地址"> </div> </div> </form> </div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary">提交验证</button></div></div></div></div>【实例8-1】静态的模态窗口调用,代码如下《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框静态模态框的使用方法

使用模态窗口,需要有某种触发器,可以使用按钮或链接,本例使用的是按钮,在按钮元素上设置属性

data-toggle="modal",而data-target="#myModal"

是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。但不能在同一时间加载多个模块,但可以在页面上创建多个在不同时间进行加载。

在模态框中”

.modal”类用来把<div>的内容识别为模态框。”

.fade”类在当模态框被切换时,它会引起内容淡入淡出。<divclass="modal-header">,modal-header是为模态窗口的头部定义样式的类。class="close",close是CSS类,用于为模态窗口的关闭按钮设置样式。data-dismiss="modal",是自定义的HTML5data属性。在这里它被用于关闭模态窗口。class="modal-body",是Bootstrap的CSSclass类,用于为模态窗口的主体设置样式。class="modal-footer",是BootstrapCSS的CSS类,用于为模态窗口的底部设置样式。data-toggle="modal",HTML5自定义的data属性data-toggle用于打开模态窗口。

如果想要支持<ESC>键关闭弹窗,需要在弹窗上设置tabindex="-1",也就是将如下代码:<divclass="modalfade"id="myModal">

修改为:<divclass="modalfade"id="myModal"tabindex="-1">《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用

除了模态窗口一些常用的选项外,还有一些选项可以用来定制模态窗口的外观和感观,它们是通过data属性或JavaScript来传递的,这些模态弹出窗默认支持的自定义属性如表8-1所示。选项名称类型/默认值Data属性名称描述backdropboolean或string'static'默认值:truedata-backdrop指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。keyboardboolean默认值:truedata-keyboard当按下<ESC>键时关闭模态框,设置为false时则按键无效。showboolean默认值:truedata-show当初始化时显示模态框。remotepath默认值:falsedata-remote使用jQuery的

.load

方法,为模态框的主体注入内容。如果添加了一个带有有效URL的href,则会加载其中的内容。表8-1模态弹出窗默认支持的自定义属性除了使用自定义属性”data-”触发模态弹出框之外,还可以通过JavaScript方法来触发模态弹出窗。比如说给按钮设置一个单击事件,然后触发模态弹出窗。只需一行JavaScript代码,即可通过元素的id调用模态框。例如:$('#myModal').modal()《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用在Bootstrap框架中还为模态弹出窗提供了几个参数设置,或者说为

modal()一起使用的方法,具体说明如表8-2所示。表8-2模态窗常用的方法如果想取消ESC键的功能,代码如下:$("#myModal").modal({keyboard:false});方法使用实例描述Options:

.modal(options)$('#identifier').modal({keyboard:false})把内容作为模态框激活。接受一个可选的选项对象。Toggle:

.modal('toggle')$('#identifier').modal('toggle')手动切换模态框,触发时反转模态框的显示状态。Show:

.modal('show')$('#identifier').modal('show')触发时,打开模态框。Hide:

.modal('hide')$('#identifier').modal('hide')触发时,隐藏模态框。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用<h3>JavaScirpt调用模态框</h3><!--按钮触发模态框--><buttontype="button"class="btnbtn-primary"id="btn">打开模态框</button><!--模态框(Modal)--><divclass="modalfade"id="myModal"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button><h4class="modal-title"id="myModalLabel">验证E-mail信息</h4></div><divclass="modal-body"><formclass="form-horizontal"><divclass="form-group"><divclass="modal-body">【实例8-2】使用JavaScirpt调用模态框,代码如下<formclass="form-horizontal"><divclass="form-group"><divclass="col-sm-9"><inputtype="text"class="form-control"id="email"placeholder="请输入邮箱地址"></div></div></form> </div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary">提交验证</button></div></div></div></div><!--编写的JavaScript代码如下:--><scripttype="text/javascript">$(function(){$(".btn").click(function(){$("#myModal").modal();});});</script>page1page2《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用运行【实例8-2】这段代码的输出结果如图8-3所示。a)Javsscript模态框触发前效果b)Javsscript模态框触发后弹出效果图8-3JavaScript代码调用模态框效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用模态弹窗还支持五种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后及远端数据加载后,具体描述如表8-3所示。事件描述实例show.bs.modal在调用show方法后触发。$('#identifier').on('show.bs.modal',function(){//执行一些动作...})shown.bs.modal当模态框对用户可见时触发(将等待CSS过渡效果完成)。$('#identifier').on('shown.bs.modal',function(){//执行一些动作...})hide.bs.modal当调用hide实例方法时触发。$('#identifier').on('hide.bs.modal',function(){//执行一些动作...})hidden.bs.modal当模态框完全对用户隐藏时触发。$('#identifier').on('hidden.bs.modal',function(){//执行一些动作...})loaded.bs.modal当远端的数据源加载完数据之后触发该事件。$('#identifier').on('loaded.bs.modal',function(){//执行一些动作...})表8-2模态窗的事件《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用<h3>模态框(Modal)插件事件</h3><!--按钮触发模态框--><buttontype="button"class="btnbtn-primary"id="btn">打开模态框(测试事件)</button><!--模态框(Modal)--><divclass="modalfade"id="myModal"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button><h4class="modal-title"id="myModalLabel">验证E-mail信息</h4></div><divclass="modal-body"> <formclass="form-horizontal"> <divclass="form-group"> <divclass="col-sm-9"> <inputtype="text"class="form-control"id="email"placeholder="请输入邮箱地址"> </div> </div> </form> 【实例8-3】模态框(Modal)插件事件应用,代码如下</div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary">提交验证</button></div></div></div></div>page1page2<scripttype="text/javascript">$(function(){$(".btn").click(function(){$("#myModal").modal("toggle");});});$('#myModal').on('hide.bs.modal',function(){ $("#btn").html("打开");});$('#myModal').on('show.bs.modal',function(){$("#btn").html("关闭"); });</script>【实例8-3】中编写的JavaScript代码如下:《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--过渡效果与模态框模态框中事件的使用运行【实例8-3】这段代码的输出结果如图8-4所示。b)Javsscript模态框触发后弹出效果图8-4模态框事件应用效果a)模态框显示前效果b)模态框显示后效果c)模态框关闭后效果标签页2《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--标签页标签页简介

一个网页页面上要显示的信息越来越多,但不可能把全部的内容一次全部显示出来,这时可通过标签(Tab)效果的展示方式为各个内容进行分类,用户可以通过鼠标单击来进行内容的切换,使得网页中只要规划一个小区域的位置,可以放置的信息就会比原先多,如图8-5所示。a)腾讯赛事直播标签页内容

b)腾讯精彩回放标签页内容图8-5标签页页面效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--标签页标签页的基础使用方法标签页使用时,首先要加入相关类,其次是标签页与切换内容的名称对应。第一步:在标签的<ul>标签中设置.nav和.nav-tabs两个类接口运用标签组件第二步:在互动切换的部分有href=”#id名称”与显示的内容部分<divid=”名称”>相对应,也就是HTML中的描点。要让标签有淡入的效果,只需在每个标签内容的.tab-pane类后加入.fade类即可,但第一个标签页面需额外加入.in类,以便正确初始化淡入效果的内容。运行【实例8-4】这段代码的输出结果如图8-5所示。a)网站首页效果b)联系我们效果图8-5标签页的页面效果<!—标签部分内容--><ulid="myTab"class="navnav-tabsnav-pills"><liclass="active"><ahref="#home"data-toggle="tab">网站首页</a></li><li><ahref="#example"data-toggle="tab">企业案例</a></li><li><ahref="#us"data-toggle="tab">联系我们</a></li></ul><!—标签对应部分的内容--><divid="myTabContent"class="tab-content"><divclass="tab-panefadeinactive"id="home">网站首页内容...</div><divclass="tab-panefade"id="example">企业案例内容...</div><divclass="tab-panefade"id="us">联系我们内容...</div></div>【实例8-4】标签页的基本使用,代码如下。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--标签页标签页的JavaScript调用方法标签页可以使用.$().tab方法激活标签页元素和内容容器。标签页需要用一个

data-target

或者一个指向DOM中容器节点的

href。例如在【实例8-4】中加入如下代码,可以实现直接显示最后一个标签内容。<script>$(function(){$('#myTaba:last').tab('show')})</script>最终显示结果如图8-5中b图所示。提示工具4《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--提示工具提示工具简介

在网页中,想要描述或说明一个连接点的作用时,可通过提示工具Tooltip来实现。提示工具可使用CSS来实现动画效果,用data属性来存储标题信息。此效果的原理为:在任意元素中加入一个小覆盖层,以便加入额外的信息,只要当鼠标移入时就能触发此功能,如图8-6所示。图8-6提示工具使用效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--提示工具提示工具的基础使用方法提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。具体有以下两种方式添加提示工具(tooltip)。第一种方法,通过data属性。如需添加一个提示工具(tooltip),只需向一个锚标签添加

data-toggle="tooltip"

即可。锚的title即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。<ahref="#"data-toggle="tooltip"title="Exampletooltip">请悬停在我的上面</a>《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--提示工具第二种方法通过JavaScript方法。首先加入jQuery指令来进行触发操作的声明,并加入data-toggle属性作为呼应,其次,使用data-placement属性与title属性来建立位置与标签内容。(1)加入提示工具初始化的语句:<script>$(function(){$("[data-toggle='tooltip']").tooltip();});</script>(2)在<a>标签中加入data-toggle属性,与初始化语句相呼应。<ahref="#"class="tooltip-test"data-toggle="tooltip" >百度</a>(3)使用data-placement属性来指定提示信息出现的4个方向,选择有top、right、bottom、left对齐方式。<ahref="#"class="tooltip-test"data-toggle="tooltip" data-placement="top">百度</a>(4)使用title属性来显示提示信息的内容。<ahref="#"class="tooltip-test"data-toggle="tooltip" data-placement="top"title="搜索引擎">百度</a>《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--提示工具提示工具的基础使用方法<h4>锚的提示工具使用</h4>默认效果<ahref="#"class="tooltip-test"data-toggle="tooltip"title="默认提示">百度</a>.左侧提示<ahref="#"class="tooltip-test"data-toggle="tooltip"data-placement="left"title="搜索引擎">百度</a>.顶侧提示<ahref="#"class="tooltip-test"data-toggle="tooltip"data-placement="top"title="搜索引擎">百度</a>.<br><h4>按钮的提示工具使用</h4><buttontype="button"class="btnbtn-default"data-toggle="tooltip"title="默认提示">百度</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="bottom"title="搜索引擎">百度底部提示</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="right"title="搜索引擎">百度右侧提示</button><script>$(function(){$("[data-toggle='tooltip']").tooltip();});</script>【实例8-5】提示工具的基本使用,代码如下《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--提示工具提示工具的基础使用方法运行【实例8-5】代码的输出结果如图8-7所示。a)初始状态b)锚点的顶部提示效果c)按钮的默认提示效果

d)按钮的底部提示效果图8-7提示工具的页面效果弹出框工具5《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具弹出框工具简介

弹出提示与提示工具的显示模式是雷同的,只是提供了一个扩展的视图。差别在于提示工具是当鼠标移入时触发操作;而弹出提示是当鼠标单击时触发的。在显示的效果上弹出信息还可将标题与内容进行区分。弹出提示的效果如图8-8所示。图8-8弹出框工具使用效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具弹出框工具的基础使用方法弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。可以有以下两种方式添加弹出框(popover)。第一种方法通过data属性调用。如需添加一个弹出框(popover),只需向一个锚/按钮标签添加

data-toggle="popover"

即可。锚的title即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。<ahref="#"data-toggle="popover"title="提示标题文本">

请在我的上面点击</a>《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具第二种方法通过JavaScript启用弹出框(popover)。$('#identifier').popover(options)弹出框(Popover)必须使用jquery激活它(读取javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):$(function(){$("[data-toggle='popover']").popover();});使用弹出框的具体步骤可以分为以下四步:1)加入提示信息初始化的语句:<script>$(function(){$("[data-toggle='popover']").popover(); });</script>在<a>或<button>标签中加入date-toggle属性,与初始化语句相呼应。3)使用date-placement属性来指定弹出信息出现的4个方向,选择有top、right、bottom、left等对齐方式。4)使用title属性来显示提示信息的标题。5)使用data-content属性来显示提示信息的内容。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具<divclass="container"style="padding:100px50px10px;"><buttontype="button"class="btnbtn-default"title="全球最大的中文搜索引擎"data-container="body"data-toggle="popover"data-placement="left“data-content="">百度网</button><buttontype="button"class="btnbtn-primary"title="亚太地区较大的网络零售"data-container="body"data-toggle="popover"data-placement="top“data-content="">淘宝网</button><buttontype="button"class="btnbtn-success"title="中国最大的互联网综合服务提供商“data-container="body"data-toggle="popover"data-placement="bottom“data-content="">腾讯网</button><buttontype="button"class="btnbtn-warning"title="综合性网上购物商城“data-container="body"data-toggle="popover"data-placement="right“data-content="">当当网</button></div><script>$(function(){$("[data-toggle='popover']").popover(); });</script>【实例8-6】弹出框工具的基本使用,代码如下《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具运行【实例8-6】代码的输出结果,分别点击几个按钮,如图8-9所示图8-9弹出框工具的页面效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具弹出框工具的方法与事件弹出框(Popover)插件中有用的方法如表8-4所示方法使用实例描述Options:

.popover(options)$().popover(options)向元素集合附加弹出框句柄。Toggle:

.popover('toggle')$('#element').popover('toggle')切换显示/隐藏元素的弹出框。Show:

.popover('show')$('#element').popover('show')显示元素的弹出框。Hide:

.popover('hide')$('#element').popover('hide')隐藏元素的弹出框。Destroy:

.popover('destroy')$('#element').popover('destroy')隐藏并销毁元素的弹出框。表8-4弹出框插件的方法《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具弹出框工具的方法与事件弹出框(Popover)插件中常用的事件如表8-5所示表8-4弹出框插件的常用事件事件使用实例描述show.bs.popover$('#mypopover').on('show.bs.popover',function(){//执行一些动作...})当调用show实例方法时立即触发该事件。shown.bs.popover$('#mypopover').on('shown.bs.popover',function(){//执行一些动作...})当弹出框对用户可见时触发该事件(将等待CSS过渡效果完成)。hide.bs.popover$('#mypopover').on('hide.bs.popover',function(){//执行一些动作...})当调用hide实例方法时立即触发该事件。hidden.bs.popover$('#mypopover').on('hidden.bs.popover',function(){//执行一些动作...})当工具提示对用户隐藏时触发该事件(将等待CSS过渡效果完成)。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--弹出框工具弹出框工具的方法与事件<divclas="container"style="padding:100px50px10px;"><buttontype="button"class="btnbtn-primarypopover-show"title="亚太地区较大的网络零售"data-container="body"data-toggle="popover"data-content="网址:">

淘宝网</button></div><script>$(function(){$('.popover-show').popover('show');});$(function(){$('.popover-show').on('shown.bs.popover',function(){alert("淘宝网是中国深受欢迎的网购零售平台,拥有近5亿的注册用户数。");})});</script>【实例8-7】弹出框工具的方法与事件使用,代码如下运行【实例8-7】代码的输出结果,如图8-10所示。图8-10弹出框工具的方法事件使用页面效果折叠框工具6《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--折叠框工具折叠框工具简介折叠效果有点像手风琴的效果,既让页面区域进行折叠。此效果可运用于建立折叠式的内容上,借助折叠的效果让一些内容暂时收和,待用户用鼠标单击时再展开,弹出提示的效果如图8-11所示。图8-11折叠框工具使用效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--折叠框工具折叠框工具的基础使用方法折叠框(collapse)的使用:一是加入相关类,二是也签与切换内容的名称相对应。1)将date-toggle="collapse"属性添加到需要展开或折叠的组件链接上。2)在互动切换的部分有href=”#id名称”与<divid=”名称”>相呼应。3)要加入折叠样式的群组管理,需要加入data-parent="#名称"属性。此属性名称要对应最外层的<divid=”名称”>。如果没有加入此属性,那么折叠效果必须用鼠标单击两次才会执行折叠操作,反之,当单击其他标签时,刚刚展开的内容会自动折叠起来。《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--折叠框工具<divclass="panel-group"id="accordion"> <divclass="panelpanel-default"> <divclass="panel-heading"> <h4class="panel-title"> <adata-toggle="collapse"data-parent="#accordion" href="#collapseOne">

泰山(世界文化与自然双重遗产,国家5A级旅游景区) </a> </h4> </div> <divid="collapseOne"class="panel-collapsecollapsein"> <divclass="panel-body">

泰山,又名岱山、岱宗、岱岳、东岳、泰岳,为中国著名的五岳之一,位于山东省中部,绵亘于泰安、济南、淄博三市之间,总面积2.42万公顷。主峰玉皇顶海拔1545米,气势雄伟磅礴,有“五岳之首”、“五岳之长”、“五岳之尊”、“天下第一山”之称。 </div> </div> </div> <divclass="panelpanel-default"> <divclass="panel-heading"> <h4class="panel-title"> <adata-toggle="collapse"data-parent="#accordion" href="#collapseTwo">

华山(五岳之西岳华山) </a> </h4> </div>

【实例8-6】弹出框工具的基本使用,代码如下page1《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--折叠框工具 <divid="collapseTwo"class="panel-collapsecollapse"> <divclass="panel-body">

华山(MountHua)古称“西岳”,雅称“太华山”,为中国著名的五岳之一,中华文明的发祥地,“中华”和“华夏”之“华”,就源于华山。位于陕西省渭南市华阴市,在省会西安以东120千米处。南接秦岭,北瞰黄渭,自古以来就有“奇险天下第一山”的说法。 </div> </div> </div> <divclass="panelpanel-default"> <divclass="panel-heading"> <h4class="panel-title"> <adata-toggle="collapse"data-parent="#accordion" href="#collapseThree">

黄山(世界文化与自然双重遗产,国家5A级旅游景区) </a> </h4> </div> <divid="collapseThree"class="panel-collapsecollapse"> <divclass="panel-body">

黄山:世界文化与自然双重遗产,世界地质公园,国家AAAAA级旅游景区,国家级风景名胜区,全国文明风景旅游区示范点,中华十大名山,天下第一奇山。 </div> </div> </div> </div>【实例8-6】弹出框工具的基本使用,代码如下page2《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--折叠框工具运行【实例8-8】代码的输出结果,如图8-12所示。如果将data-parent="#accordion"修改为data-parent="#accordion1",则与外层元素的id名称不一致,则当前折叠效果打开时,其他的不会折叠,可自行修改测试。注意:折叠(Collapse)插件用于处理繁重的伸缩的类中".collapse"类表示隐藏内容,".collapse.in"类表示显示内容,此外还有".collapsing"类是在当过渡效果开始时被添加,当过渡效果完成时被移除。a)初始效果b)点击黄山后的折叠效果图8-12折叠框的页面效果轮播工具7《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具轮播工具简介针对电视节目,所谓轮播就是同一套节目以一定时间间隔(如10分钟)采用多个频道进行循环播放,用户通过频道选择来达到前进后退的视频点播效果。Bootstrap轮播(Carousel)插件是通过元素的循环组成幻灯片的组件。轮播的内容部分可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。例如,当当商城中banner去也广告就是轮播效果如图8-13所示。图8-13轮播广告使用效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具轮播工具的基础使用方法

在轮播插件中不需要加入jQuery的相关语句,也不必使用data属性,只要使用相关class类即可。

轮播效果是由两种内容所组成的:一是轮播指针,二是轮播内容。为了控制方便,可再加入轮播导航按钮,就是指的左、右按钮,也可加入标题来图片进行说明。

轮播图中的相关元素构成如图8-14所示。图8-14轮播广告中的组成结构《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具轮播工具的基础使用方法轮播指针使用列表实现,在外层ul或ol中设置class="carousel-indicators"。轮播指针的使用class="active"类表示第一个播放的内容。在轮播项目中也需要加入".active"类,使两者相对应,否则一开始在状态显示上就会产生错误。data-slide-to属性可传递轮播内容索引值给轮播插件,指定数值后即可直接播放指定的索引值轮播内容。<ulclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ul>1.轮播指针的控制《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具轮播内容可以使用图片、视频等元素,轮播内容放置在内外两层div容器中实现,其中外层div需要设置class="carousel-inner"类,内层div使用class="active"类表示第一个播放的内容,以便与轮播指针中的".active"类相对应。<divclass="carousel-inner"><divclass="itemactive"><imgsrc="image/1.png"></div><divclass="itemactive"><imgsrc="image/2.png"></div><divclass="itemactive"><imgsrc="image/3.png"></div></div>在轮播图中,还可以添加标题,可以在轮播项目中添加标题与文字说明。通过"

.item

"内的"

.carousel-caption

"元素向幻灯片添加标题。只需要在该处放置任何可选的HTML即可,它会自动对齐并格式化。<divclass="itemactive"><imgsrc="image/1.png"><divclass="carousel-caption">迪拜艺术季汇聚了全阿联酋的创意人士</div></div>2.轮播内容的控制《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具轮播导航按钮通过a与span元素实现,需要给a元素设置carousel-control,同时轮播导航按钮主要通过left和right类来控制轮播内容的切换,而左右按钮使用“字体图标”来实现。<aclass="leftcarousel-control"href="#myCarousel"data-slide="prev"><spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="rightcarousel-control"href="#myCarousel"data-slide="next"><spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a>3.轮播导航按钮的控制《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具<divclass="container"><divid="myCarousel"class="carouselslide"><!--轮播(Carousel)指标--><ulclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li><lidata-target="#myCarousel"data-slide-to="3"></li><lidata-target="#myCarousel"data-slide-to="4"></li></ul><!--轮播(Carousel)内容--><divclass="carousel-inner"><divclass="itemactive"><imgsrc="image/1.png"><divclass="carousel-caption">迪拜艺术季汇聚了全阿联酋的创意人士</div></div><divclass="item"><imgsrc="image/2.png"><divclass="carousel-caption">春季赏花季-踏青赏花季最佳去处</div></div>【实例8-9】轮播图的使用方法,代码如下page1《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具<divclass="item"><imgsrc="image/3.png"><divclass="carousel-caption">从家门口出发</div></div><divclass="item"><imgsrc="image/4.png"><divclass="carousel-caption">端午遇上儿童节</div></div><divclass="item"><imgsrc="image/5.png"><divclass="carousel-caption">港澳特惠优惠旅游线路_港澳特惠优惠旅游景点_全新港澳特惠优惠旅游攻略</div></div> </div><!--轮播(Carousel)导航按钮--><aclass="leftcarousel-control"href="#myCarousel"data-slide="prev"><spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="rightcarousel-control"href="#myCarousel"data-slide="next"><spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div> </div>page2《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--轮播工具运行【实例8-9】代码的输出结果,如图8-15所示。a)初始效果b)轮播效果图8-15轮播图的页面效果案例:使用JS插件布局企业网站8《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--案例:使用JS插件布局企业网站案例展示本例主要使用JavaScript插件来再次制作江苏学文教育科技有限公司主页页面,效果如图8-16所示。a)PC页面的显示效果b)手机小屏的显示效果图8-16企业网站主页效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--案例:使用JS插件布局企业网站案例分析

根据如图8-16所示效果,页面的基本构成分析如图8-17所示。依据图8-17的结构,在Bootstrap中选择适当的布局组件与JavaScript组件来搭配,例如:导航使用导航栏navbar来实现,同时,在移动端的时候导航条折叠起来,使用".collapse"类来实现折叠效果;banner广告区域使用轮播图实现,网页主体部分使用栅格布局,放置在".container"类和".row"类的div中,主体部分分为左右结构,客户列表折叠的JS组件;右侧的两个金课案例使用标签来实现。实现思路如图8-18所示。图8-17页面的结构功能分析图8-18Bootstrap页面的结构实现思路《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--案例:使用JS插件布局企业网站案例实现搭建基本的Bootstrap框架后,来实现整个页面的效果。1.网站头部的导航实现过程 <navclass="navbarnavbar-default"> <divclass="container"> <divclass="navbar-header"> <!--在移动端的时候导航条折叠起来,三横(汉堡)的样式出现,点击该样式可以显示或隐藏导航条上的内容--> <buttontype="button"class="navbar-toggle"data-toggle="collapse" data-target="#menu"> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <imgsrc="images/logo.png"> </div> <divid="menu"class="collapsenavbar-collapse"> <ulclass="navnavbar-nav"> <liclass=""><ahref="#">教学咨询</a></li> <liclass=""><ahref="#">在线课程开发</a></li>

导航使用导航栏navbar来实现,实现代码如下:<liclass=""><ahref="#">1对1课程</a></li> <li><ahref="#">线下金课</a></li> <li><ahref="#">混合式金课</a></li> <li><ahref="#">虚拟仿真金课</a></li> <li><ahref="#">信息化教学</a></li> </ul> </div> </div> </nav>运行代码的页面结果,如图8-19所示。图8-19导航页面效果《Bootstrap响应式网站开发》Bootstrap的JavaScript插件--案例:使用JS插件布局企业网站2.

banner的栅格布局<divclass="container"><divclass="row"style="margin-bottom:20px"><divid="myCarousel"class="carouselslide"><!--轮播(Carousel)指标--><ulclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li> </ul><!--轮播(Carousel)内容--><divclass="carousel-inner"><divclass="itemactive"><imgsrc="images/1.jpg"></div><divclass="item"><imgsrc="images/2.jpg"></div></div><!--轮播(Carousel)导航按钮-->

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论