jquery插件 ajax bootstrap html5 css3两周学习总结.ppt

三四周学习总结,马巧巧,学习内容：,jQuery插件AJAXBootstrapHTML5CSS3总结,jQuery插件的开发包括两种：,一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。（jQuery的全局函数就是属于jQuery命名空间的函数。）例：jQuery.extend(jQuery.foo=function()alert(Thisisatest.Thisisonlyatest.);jQuery.bar=function(param)alert(Thisfunctiontakesaparameter,whichis+param+.););调用时:jQuery.foo();jQuery.bar();或者$.foo();$.bar(bar);,jQuery插件的开发包括两种：,2.另一种是对象级别的插件开发，即给jQuery对象添加方法例：形式1：(function($)$.fn.extend(pluginName:function(opt,callback)/代码；)(jQuery);形式2：(function($)$.fn.pluginName=function()/代码；;)(jQuery);析：上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.,其他与插件相关内容：（不详细介绍）,匿名函数将函数转换为表达式的方法：分组操作符()，void操作符，操作符，！操作符.例：(function($)/do something;)(jQuery);给插件默认参数，实现插件的功能注：当使用return jQuery对象时，才能使用链式调用暴露公共方法，给别人扩展你的插件（如果有需求的话）插件私有方法,返回首页,AJAX（异步交互的方式）：,概述：通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现用$.get,$.post 等。$.ajax()返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。注：所有的选项都可以通过$.ajaxSetup()函数来全局设置。语法：jQuery.ajax(url,settings)返回值:XMLHttpRequest析：url:一个用来包含发送请求的URL字符串。settings:AJAX 请求设置。所有选项都是可选的。,AJAX（异步交互的方式）：,setting选项：（只介绍个别常用的）async(默认:true)默认设置下，所有请求均为异步请求。cache(默认:true,dataType为script和jsonp时默认为false)jQuery 1.2 新功能，设置为 false 将不缓存此页面。type(默认:GET)请求方式(POST 或 GET)url(默认:当前页地址)发送请求的地址。data 发送到服务器的数据dataType 预期服务器返回的数据类型error(默认:自动判断(xml 或 html)请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout,error,notmodified 和 parsererror。processData(默认:true)默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。success(data,textStatus,jqXHR)请求成功后的回调函数。,不详细介绍以下：acceptsbeforeSend(XHR)complete(XHR,TS)contentscontentTypecontextconverterscrossDomaindataFilterglobalheadersifModifiedisLocaljsonpjsonpCallbackmimeTypepasswordscriptCharsetstatusCodetraditionaltimeoutusernamexhrxhrFields,AJAX（异步交互的方式）：,回调函数：如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）dataFilter 在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。,AJAX（异步交互的方式）：,两个常用示例：,返回首页,Bootstrap：,Bootstrap 简介和优势Bootstrap cssBootstrap 布局组件Bootstrap 插件注：详情请参考http:/www.w3cschool.cc/bootstrap/bootstrap-tutorial.html,Bootstrap 简介和优势：,简介：Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。优势：移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。Internet Explorer、Firefox、Opera、Google Chrome、Safari容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。,Bootstrap css,包括以下内容：Bootstrap 网格系统Bootstrap 排版Bootstrap 代码Bootstrap 表格Bootstrap 表单Bootstrap 按钮Bootstrap 图像Bootstrap 帮助器类,Bootstrap 网格系统,定义：Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。基本网格结构：.多设备工作图：,Bootstrap 排版,定义：Bootstrap 使用 Helvetica Neue、Helvetica、Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。标题（h1 到 h6）及内联子标题强调 默认强调标签（设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。缩写 Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）地址 使用 标签，您可以在网页上显示联系信息。由于 默认为 display:block;，您需要使用标签来为封闭的地址文本添加换行。引用 您可以在任意的 HTML 文本旁使用默认的。其他选项包括，添加一个 标签来标识引用的来源，使用 class.pull-right 向右对齐引用。列表 Bootstrap 支持有序列表、无序列表和定义列表。,Bootstrap 代码,Bootstrap 允许您以两种方式显示代码：第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。第二种是 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 标签。示例如图所示：注：请确保当您使用 和 标签时，开始和结束标签使用了 unicode 变体：。,Bootstrap 表格,定义：Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：如图所示：可选的表格类：条纹表格：通过添加.table-striped class，您将在 内的行上看到条纹边框表格：通过添加.table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的悬停表格：通过添加.table-hover class，当指针悬停在行上时会出现浅灰色背景精简表格：通过添加.table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑响应式表格：通过把任意的.table 包在.table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。注：具体样式请参照http:/www.w3cschool.cc/bootstrap/bootstrap-tables.html,Bootstrap 表单,定义：Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。类型：垂直表单（默认）内联表单水平表单支持的表单控件：Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时，请在 上使用 class.form-control-static。表单控件大小：您可以分别使用 class.input-lg 和.col-lg-*来设置表单的高度和宽度。Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 后使用.help-block。,Bootstrap 表单,表单控件状态定义：除了focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。输入框焦点：当输入框 input 接收到:focus 时，输入框的轮廓会被移除，同时应用 box-shadow。禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。禁用的字段集 fieldset：对 添加 disabled 属性来禁用 内的所有控件。验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、.has-error 或.has-success）即可使用验证状态。注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-forms.html,Bootstrap 按钮,定义：任何带有 class.btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：按钮大小:列出了获得各种大小按钮的 class按钮状态:Bootstrap 提供了激活、禁用等按钮状态的 class按钮标签:您可以在、或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class，避免跨浏览器的不一致性问题。注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-buttons.html,Bootstrap 图像,定义：Bootstrap 提供了三个可对图像应用简单样式的 class：1、.img-rounded：添加 border-radius:6px 来获得图像圆角。2、.img-circle：添加 border-radius:500px 来让整个图像变成圆形。3、.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。如下图所示：,Bootstrap 帮助器类,关闭图标使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。插入符使用插入符表示下拉功能和方向。使用带有 class caret 的 元素得到该功能。快速浮动您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的实例演示了这点。居中内容块使用 class center-block 来居中元素。清除浮动如需清除元素的浮动，请使用.clearfix class。显示和隐藏内容您可以通过使用 class.show 和.hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器您可以通过使用 class.sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-helper-classes.html,Bootstrap 布局组件,包括以下内容：Bootstrap 字形图标Bootstrap 下拉菜单Bootstrap 按钮组Bootstrap 按钮下拉菜单Bootstrap 输入框组Bootstrap 导航元素Bootstrap 导航栏Bootstrap 面包屑导航Bootstrap 分页十、Bootstrap 标签和徽章十一、Bootstrap 缩略图十二、Bootstrap 进度条,Bootstrap 字形图标,定义：字形图标（Glyphicons）是在 Web 项目中使用的图标字体。用法：如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。例：带有导航栏的字形图标（Glyphicons）定制字形图标（Glyphicons）：定制字体尺寸、颜色、文本阴影效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-glyphicons.html,Bootstrap 下拉菜单,定义：下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown）JavaScript 插件 的互动来实现。如需使用下列菜单，只需要在 class.dropdown 内加上下拉菜单即可。选项：对齐：通过向.dropdown-menu 添加 class.pull-right 来向右对齐下拉菜单。标题：您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-dropdowns.html,Bootstrap 按钮组,定义：按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button）插件 添加可选的 JavaScript 单选框和复选框样式行为。如下表所示：效果如图所示：注：详情请参考http:/www.w3cschool.cc/bootstrap/bootstrap-button-groups.html,Bootstrap 按钮下拉菜单,定义：如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。分割的按钮下拉菜单分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。按钮下拉菜单的大小您可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或.btn-xs。按钮上拉菜单菜单也可以往上拉伸的，只需要简单地向父.btn-group 容器添加.dropup 即可。效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-button-dropdowns.html,Bootstrap 输入框组,定义：输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加，或者应用程序接口所需要的其他公共的元素。步骤如下：把前缀后后缀元素放在一个带有 class.input-group 的 中。接着，在相同的 内，在 class 为.input-group-addon 的 内放置额外的内容。把该 放置在 元素的前面或者后面。输入框组的大小您可以通过向.input-group 添加相对表单大小的 class（比如.input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。复选框和单选插件您可以把复选框和单选插件作为输入框组的前缀或者后缀元素按钮插件您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加.input-group-addon class，您需要使用 class.input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。带有下拉菜单的按钮在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个.input-group-btn class 中包裹按钮和下拉菜单即可分割的下拉菜单按钮在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-input-groups.html,Bootstrap 导航元素,定义：它们使用相同的标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。表格导航或标签：创建一个标签式的导航菜单：以一个带有 class.nav 的无序列表开始。添加 class.nav-tabs。胶囊式的导航菜单：基本的胶囊式导航菜单：如果需要把标签改成胶囊的样式，只需要使用 class.nav-pills 代替.nav-tabs 即可，其他的步骤与上面相同。垂直的胶囊式导航菜单：您可以在使用 class.nav、.nav-pills 的同时使用 class.nav-stacked，让胶囊垂直堆叠。两端对齐的导航：您可以在屏幕宽度大于 768px 时，通过在分别使用.nav、.nav-tabs 或.nav、.nav-pills 的同时使用 class.nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。禁用链接对每个.nav class，如果添加了.disabled class，则会创建一个灰色的链接，同时禁用了该链接的:hover 状态，下拉菜单：导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有.dropdown-menu class 的无序列表。带有下拉菜单的标签：向标签添加下拉菜单的步骤如下：以一个带有 class.nav 的无序列表开始。添加 class.nav-tabs。添加带有.dropdown-menu class 的无序列表。效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-navigation-elements.html,Bootstrap 导航栏,定义：导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。默认的导航栏：创建一个默认的导航栏的步骤如下：1、向 标签添加 class.navbar、.navbar-default。2、向上面的元素添加 role=navigation，有助于增加可访问性。3、向 元素添加一个标题 class.navbar-header，内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号。为了向导航栏添加链接，只需要简单地添加带有 class.nav、.navbar-nav 的无序列表即可。响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes.collapse、.navbar-collapse 的 中。折叠起来的导航栏实际上是一个带有 class.navbar-toggle 及两个 data-元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class.icon-bar 的 创建所谓的汉堡按钮。这些会切换为.nav-collapse 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。导航栏中的表单导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用.navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。您可以使用 class.navbar-btn 向不在 中导航栏中的文本如果需要在导航中包含文本字符串，请使用 class.navbar-text。这通常与 标签一起使用，确保适当的前导和颜色。的 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 和 元素上。,Bootstrap 导航栏,非导航链接：如果您不想在常规的导航栏导航组件内使用标准的链接，那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色组件对齐方式：您可以使用实用工具 class.navbar-left 或.navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。固定到顶部：Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。如果您想要让导航栏固定在页面的顶部，请向.navbar class 添加 class.navbar-fixed-top。固定到底部：如果您想要让导航栏固定在页面的底部，请向.navbar class 添加 class.navbar-fixed-bottom。静态的顶部：如需创建能随着页面一起滚动的导航栏，请添加.navbar-static-top class。该 class 不要求向 添加内边距（padding）。倒置的导航栏为了创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单地向.navbar class 添加.navbar-inverse class 即可效果如图所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-navbar.html,Bootstrap 面包屑导航,定义：面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有.breadcrumb class 的无序列表。如图所示：,Bootstrap 分页,定义：分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。如下表所示：注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-pagination.html,Bootstrap 标签和徽章,定义：1、标签可用于计数、提示或页面上其他的标记显示。使用 class.label 来显示标签，可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观2、徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 添加到链接、Bootstrap 导航等这些元素上即可。激活导航状态：您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 来激活链接效果如图所示：注：详情请参考http:/www.w3cschool.cc/bootstrap/bootstrap-labels.htmlhttp:/www.w3cschool.cc/bootstrap/bootstrap-badges.html,Bootstrap 缩略图,定义：大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：在图像周围添加带有 class.thumbnail 的 标签。这会添加四个像素的内边距（padding）和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓。添加自定义的内容：现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：把带有 class.thumbnail 的 标签改为。在该 内，您可以添加任何您想要添加的东西。由于这是一个，我们可以使用默认的基于 span 的命名规则来调整大小。如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。注：详细样式请参考http:/www.w3cschool.cc/bootstrap/bootstrap-thumbnails.html,Bootstrap 进度条,默认的进度条：创建一个基本的进度条的步骤如下：1、添加一个带有 class.progress 的。2、接着，在上面的 内，添加一个带有 class.progress-bar 的空的。3、添加一个带有百分比表示的宽度的 style 属性，例如 style=60%;表示进度条在 60%的位置。交替的进度条：1、创建不同样式的进度条的步骤如下：2、添加一个带有 class.progress 的。3、接着，在上面的 内，添加一个带有 class.progress-bar 和 class progress-bar-*的空的。其中，*可以是 success、info、warning、danger。4、添加一个带有百分比表示的宽度的 style 属性，例如 style=60%;表示进度条在 60%的位置。条纹的进度条：1、创建一个条纹的进度条的步骤如下：2、添加一个带有 class.progress 和.progress-striped 的。3、接着，在上面的 内，添加一个带有 class.progress-bar 和 class progress-bar-*的空的。其中，*可以是 success、info、warning、danger。4、添加一个带有百分比表示的宽度的 style 属性，例如 style=60%;表示进度条在 60%的位置。动画的进度条：1、创建一个动画的进度条的步骤如下：2、添加一个带有 class.progress 和.progress-striped 的。同时添加 class.active。3、接着，在上面的 内，添加一个带有 class.progress-bar 的空的。4、添加一个带有百分比表示的宽度的 style 属性，例如 style=60%;表示进度条在 60%的位置。5、这将会使条纹具有从右向左的运动感。堆叠的进度条：您甚至可以堆叠多个进度条。把多个进度条放在相同的.progress 中即可实现堆叠注:详情请参考：http:/www.w3cschool.cc/bootstrap/bootstrap-progress-bars.html,Bootstrap 插件,包括以下内容：Bootstrap 模态框Bootstrap 滚动监听Bootstrap 标签页Bootstrap 工具提示Bootstrap 弹出框Bootstrap 折叠Bootstrap 轮播,Bootstrap 插件,定义：Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。站点引用 Bootstrap 插件的方式有两种：单独引用：使用 Bootstrap 的个别的*.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄请这些插件之间的依赖关系。编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。注：不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。,Bootstrap 模态框,定义：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法：您可以切换模态框（Modal）插件的隐藏内容：1、通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=modal，同时设置 data-target=#identifier 或 href=#identifier 来指定要切换的特定的模态框（带有 id=identifier）。2、通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=identifier 的模态框：$(#identifier).modal(options)效果如图所示：注：具体的选项、方法、事件请参考http:/www.w3cschool.cc/bootstrap/bootstrap-modal-plugin.html,Bootstrap 滚动监听,定义：滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加.active class。如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法：您可以向顶部导航添加滚动监听行为：1、通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy=scroll。然后添加带有 Bootstrap.nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。.2、通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用.scrollspy()函数：$(body).scrollspy(target:.navbar-example)效果如图所示：注：详情请参考http:/www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.html,Bootstrap 标签页,定义：标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法：您可以通过以下两种方式启用标签页：1、通过 data 属性：您需要添加 data-toggle=tab 或 data-toggle=pill 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。Home.2、通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：$(#myTab a).click(function(e)e.preventDefault()$(this).tab(show)如图所示：注：详情请参考http:/www.w3cschool.cc/bootstrap/bootstrap-tab-plugin.html,Bootstrap 工具提示,定义：当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法：工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加工具提示（tooltip）：1、通过 data 属性：如需