1、bootstrap响应式网站开发实例教程课件第8章第1-4节Bootstrap响应式网站开发Bootstrap 自带 12 种 jQuery 插件，具体包括：过渡效果、模态框、下拉菜单、滚动监听、标签页、提示工具、弹出框、警告框、按钮、折叠、轮播、附加导航。Bootstrap的JavaScript插件-Bootstrap插件概述1.Bootstrap的JS插件功能2.引用JS插件的方式站点引用 Bootstrap 插件的方式有两种：单独引用：使用 Bootstrap 的个别的*.js 文件。一些插件和 CSS 组件依赖于其他插件。如果单独引用插件，请先确保弄清这些插件之间的依赖关系。同时引用：
2、使用 bootstrap.js 或压缩版的 bootstrap.min.js。引用的代码如下：注意：不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。Bootstrap响应式网站开发由于Bootstrap 的JS插件还使用了一些jQuery 插件，所以需要引用jQuery插件库，jQuery是一个JavaScript函数库。jQuery是一个轻量级的“写的少，做的多”的JavaScript库。jQuery 库是一个 JavaScript 文件，大家可以使用 HTML 的 标签引用它：3.引用jQuery的方式Bootstrap
3、的JavaScript插件-Bootstrap插件概述Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框过渡效果简介要使用Bootstrap的过渡效果，只需导入 bootstrap.js 或 bootstrap.min.js 文件就行了，因为所有组件默认已经具有基本的过渡效果。默认情况下，以下组件使用了的过渡效果：模态对话框（Modal）的滑入滑出和淡入淡出；标签页（Tab）的淡出；警告框（Alert）的淡出；轮番（Carousel）的滑入滑出。需要注意的是，Bootstrap的过渡效果全部使用了CSS3的动画特性，由于受CSS3的限制，它提供的特效
4、非常有限。并且，IE8及以下的版本均不支持CSS3的动画特性，这些浏览器中将看不到过渡效果。例如在模态框中添加加上.fade 即可实现渐隐渐现。Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框简介在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。模态框（Modal）也可理解为覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子
5、窗体可提供信息、交互等，如图8-1所示为用户注册的模态框。图8-1 模态框页面效果Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框静态模态框的使用方法 Bootstrap框架中的模态弹出框，分别运用了“modal”“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，modal-content是样式的关键。主要设置了弹窗的边框、边距、背景色和阴影等样式，其主要又包括三个部分：弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮。弹出框主体，一般使用“mo
6、dal-body”表示，弹出框的主要内容。弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮。切换模态框（Modal）插件的隐藏内容：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=modal，同时设置 data-target=#identifier 或 href=#identifier 来指定要切换的特定的模态框（带有 id=identifier）。通过 JavaScript，可以通过简单的一行 JavaScript 来调用带有 id=identifier 的模态框：$(#identifier).modal(options)。Bo
7、otstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框静态模态框的使用方法Bootstrap中的“模态弹出框”有以下几个特点：模态弹出窗是固定在浏览器中的。单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。当浏览器视窗大于768px时，模态弹出窗的宽度为600px。模态弹出窗的背景常常有一个半透明的蒙层效果。触发弹窗时，弹窗是从上到下、逐渐浮现到页面前的。下面，来认识一下静态模态框的调用。【实例8-1】静态的模态窗口调用，代码如右所示。运行【实例8-1】这段代码的输出结果如图8-2所示。a）静态模态框触发前效果b
8、）模态框触发后弹出效果图8-2静态模态框效果静态的模态窗口实例开始演示模态框×验证E-mail信息 关闭 提交验证 【实例8-1】静态的模态窗口调用，代码如下Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框静态模态框的使用方法 使用模态窗口，需要有某种触发器，可以使用按钮或链接，本例使用的是按钮，在按钮元素上设置属性 data-toggle=modal，而data-target=#myModal 是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。但不能在同一时间加载多个模块，但可以在页面上创
9、建多个在不同时间进行加载。在模态框中”.modal”类用来把 的内容识别为模态框。”.fade”类在当模态框被切换时，它会引起内容淡入淡出。，modal-header 是为模态窗口的头部定义样式的类。class=close，close 是 CSS类，用于为模态窗口的关闭按钮设置样式。data-dismiss=modal，是自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。class=modal-body，是 Bootstrap的 CSS class类，用于为模态窗口的主体设置样式。class=modal-footer，是 Bootstrap CSS 的 CSS类，用于为模态窗口
10、的底部设置样式。data-toggle=modal，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。如果想要支持键关闭弹窗，需要在弹窗上设置tabindex=-1，也就是将如下代码：修改为：Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框中事件的使用 除了模态窗口一些常用的选项外，还有一些选项可以用来定制模态窗口的外观和感观，它们是通过 data 属性或 JavaScript 来传递的，这些模态弹出窗默认支持的自定义属性如表8-1所示。选项名称类型/默认值Data 属性名称描述backdropb o o l e
11、 a n 或 s t r i n g static默认值：truedata-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。keyboardboolean默认值：truedata-keyboard当按下 键时关闭模态框，设置为 false 时则按键无效。showboolean默认值：truedata-show当初始化时显示模态框。remotepath默认值：falsedata-remote使用 jQuery的.load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。表8-1 模态弹出窗默认支持的自定义属性除了使用自定义
12、属性”data-”触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。比如说给按钮设置一个单击事件，然后触发模态弹出窗。只需一行 JavaScript 代码，即可通过元素的 id调用模态框。例如：$(#myModal).modal()Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框中事件的使用在Bootstrap框架中还为模态弹出窗提供了几个参数设置，或者说为 modal()一起使用的方法，具体说明如表8-2所示。表8-2 模态窗常用的方法如果想取消ESC键的功能，代码如下：$(#myModal).modal(keyboa
13、rd: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响应式网站开发Bootstr
14、ap的JavaScript插件-过渡效果与模态框模态框中事件的使用JavaScirpt调用模态框打开模态框×验证E-mail信息 【实例8-2】使用JavaScirpt调用模态框，代码如下 关闭 提交验证$(function()$(.btn).click(function()$(#myModal).modal();););page1Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框中事件的使用运行【实例8-2】这段代码的输出结果如图8-3所示。a）Javsscript模态框触发前效果b）Javsscript模态框触发后弹出效果图8-
15、3 JavaScript代码调用模态框效果Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框中事件的使用模态弹窗还支持五种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后及远端数据加载后，具体描述如表8-3所示。事件描述实例show.bs.modal在调用 show 方法后触发。$(#identifier).on(show.bs.modal,function()/执行一些动作.)shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。$(#identifier).on(shown.bs.modal,fu
16、nction()/执行一些动作.)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响应式网站开发Boot
17、strap的JavaScript插件-过渡效果与模态框模态框中事件的使用模态框（Modal）插件事件打开模态框（测试事件）×验证E-mail信息 【实例8-3】模态框（Modal）插件事件应用，代码如下 关闭 提交验证 page1$(function()$(.btn).click(function()$(#myModal).modal(toggle);););$(#myModal).on(hide.bs.modal,function()$(#btn).html(打开););$(#myModal).on(show.bs.modal,function()$(#btn).html(关闭)
18、;);【实例8-3】中编写的JavaScript代码如下：Bootstrap响应式网站开发Bootstrap的JavaScript插件-过渡效果与模态框模态框中事件的使用运行【实例8-3】这段代码的输出结果如图8-4所示。b）Javsscript模态框触发后弹出效果图8-4模态框事件应用效果a）模态框显示前效果b）模态框显示后效果c）模态框关闭后效果Bootstrap响应式网站开发Bootstrap的JavaScript插件-标签页标签页简介 一个网页页面上要显示的信息越来越多，但不可能把全部的内容一次全部显示出来，这时可通过标签（Tab）效果的展示方式为各个内容进行分类，用户可以通过鼠标单击
19、来进行内容的切换，使得网页中只要规划一个小区域的位置，可以放置的信息就会比原先多，如图8-5所示。a）腾讯赛事直播标签页内容 b）腾讯精彩回放标签页内容图8-5标签页页面效果Bootstrap响应式网站开发Bootstrap的JavaScript插件-标签页标签页的基础使用方法标签页使用时，首先要加入相关类，其次是标签页与切换内容的名称对应。第一步：在标签的标签中设置.nav和.nav-tabs两个类接口运用标签组件第二步：在互动切换的部分有href=”#id名称”与显示的内容部分相对应，也就是HTML中的描点。要让标签有淡入的效果，只需在每个标签内容的.tab-pane类后加入.fade类即
20、可，但第一个标签页面需额外加入.in类，以便正确初始化淡入效果的内容。运行【实例8-4】这段代码的输出结果如图8-5所示。a）网站首页效果b）联系我们效果图8-5标签页的页面效果 网站首页 企业案例 联系我们 网站首页内容.企业案例内容.联系我们内容.【实例8-4】标签页的基本使用，代码如下。Bootstrap响应式网站开发Bootstrap的JavaScript插件-标签页标签页的JavaScript调用方法标签页可以使用.$().tab方法激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。例如在【实例8-4】中加入如下代码，可
21、以实现直接显示最后一个标签内容。$(function()$(#myTab a:last).tab(show)最终显示结果如图8-5中b图所示。Bootstrap响应式网站开发Bootstrap的JavaScript插件-提示工具提示工具简介 在网页中，想要描述或说明一个连接点的作用时，可通过提示工具Tooltip来实现。提示工具可使用CSS来实现动画效果，用data属性来存储标题信息。此效果的原理为：在任意元素中加入一个小覆盖层，以便加入额外的信息，只要当鼠标移入时就能触发此功能，如图8-6所示。图8-6提示工具使用效果Bootstrap响应式网站开发Bootstrap的JavaScript插
22、件-提示工具提示工具的基础使用方法提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。具体有以下两种方式添加提示工具（tooltip）。第一种方法，通过 data 属性。如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=tooltip 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。请悬停在我的上面Bootstrap响应式网站开发Bootstrap的JavaScript插件-提示工具第二种方法通过 JavaScript方法。
23、首先加入jQuery 指令来进行触发操作的声明，并加入data-toggle 属性作为呼应，其次，使用data-placement 属性与title 属性来建立位置与标签内容。（1）加入提示工具初始化的语句：$(function()$(data-toggle=tooltip).tooltip(););（2）在标签中加入data-toggle 属性，与初始化语句相呼应。百度（3）使用data-placement 属性来指定提示信息出现的4个方向，选择有 top、right、bottom、left 对齐方式。百度（4）使用title 属性来显示提示信息的内容。百度Bootstrap响应式网站开发B
24、ootstrap的JavaScript插件-提示工具提示工具的基础使用方法锚的提示工具使用默认效果 百度.左侧提示百度.顶侧提示百度.按钮的提示工具使用百度百度底部提示百度右侧提示$(function()$(data-toggle=tooltip).tooltip(););【实例8-5】提示工具的基本使用，代码如下Bootstrap响应式网站开发Bootstrap的JavaScript插件-提示工具提示工具的基础使用方法运行【实例8-5】代码的输出结果如图8-7所示。a）初始状态b）锚点的顶部提示效果c）按钮的默认提示效果 d）按钮的底部提示效果图8-7提示工具的页面效果bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第八章 Bootstrap的JavaScript插件
