jQuery插件+AJAX+Bootstrap+HTML5+CSS3两周学习总结

三四周学习总结马巧巧学习内容：jQuery插件AJAXBootstrapHTML5CSS3总结jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。（jQuery的全局函数就是属于jQuery命名空间的函数。）例：jQuery.extend({

jQuery.foo

=

function()

{

alert('This

is

a

test.

This

is

only

a

test.');

};

jQuery.bar

=

function(param)

{

alert('This

function

takes

a

parameter,

which

is

"'

+

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($){ //dosomething; })(jQuery);给插件默认参数，实现插件的功能注：当使用returnjQuery对象时，才能使用链式调用暴露公共方法，给别人扩展你的插件（如果有需求的话）插件私有方法返回首页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)jQuery1.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)contentscontentTypecontextconverterscrossDomaindataFilterglobalheadersifModifiedisLocaljsonpjsonpCallbackmimeTypepasswordscriptCharsetstatusCodetraditionaltimeoutusernamexhrxhrFieldsAJAX（异步交互的方式）：回调函数：如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。error在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）dataFilter在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。AJAX（异步交互的方式）：两个常用示例：返回首页Bootstrap：Bootstrap简介和优势BootstrapcssBootstrap布局组件Bootstrap插件 注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.htmlBootstrap简介和优势：简介：

Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。优势：移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持Bootstrap。InternetExplorer、Firefox、Opera、GoogleChrome、Safari容易上手：只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见Bootstrap响应式设计。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于Web的定制。它是开源的。Bootstrapcss包括以下内容：Bootstrap网格系统Bootstrap排版Bootstrap代码Bootstrap表格Bootstrap表单Bootstrap按钮Bootstrap图像Bootstrap帮助器类Bootstrap网格系统定义：Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。基本网格结构：

<divclass="container"> <divclass="row"> <divclass="col-*-*"></div> <divclass="col-*-*"></div> </div> <divclass="row">...</div> </div> <divclass="container">....多设备工作图：Bootstrap排版定义：Bootstrap使用HelveticaNeue、Helvetica、Arial和sans-serif作为其默认的字体栈。使用Bootstrap的排版特性，您可以创建标题、段落、列表及其他内联元素。标题—（h1到h6）及内联子标题<small>强调—默认强调标签<small>（设置文本为父文本大小的85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。缩写—Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为<abbr>title属性添加了文本）地址—使用<address>标签，您可以在网页上显示联系信息。由于<address>默认为display:block;，您需要使用标签来为封闭的地址文本添加换行。引用—您可以在任意的HTML文本旁使用默认的<blockquote>。其他选项包括，添加一个<small>标签来标识引用的来源，使用class.pull-right向右对齐引用。列表—Bootstrap支持有序列表、无序列表和定义列表。Bootstrap代码Bootstrap允许您以两种方式显示代码：第一种是<code>标签。如果您想要内联显示代码，那么您应该使用<code>标签。第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用<pre>标签。 示例如图所示：注：请确保当您使用<pre>和<code>标签时，开始和结束标签使用了unicode变体：<和>。Bootstrap表格定义：Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些表格元素： 如图所示：可选的表格类：条纹表格：通过添加.table-stripedclass，您将在<tbody>内的行上看到条纹边框表格：通过添加.table-borderedclass，您将看到每个元素周围都有边框，且占整个表格是圆角的悬停表格：通过添加.table-hoverclass，当指针悬停在行上时会出现浅灰色背景精简表格：通过添加.table-condensedclass，行内边距（padding）被切为两半，以便让表看起来更紧凑响应式表格：通过把任意的.table包在.table-responsiveclass内，您可以让表格水平滚动以适应小型设备（小于768px）。当在大于768px宽的大型设备上查看时，您将看不到任何的差别。注：具体样式请参照http://www.w3cschool.cc/bootstrap/bootstrap-tables.htmlBootstrap表单定义： Bootstrap通过一些简单的HTML标记和扩展的类即可创建出不同样式的表单。类型：垂直表单（默认）内联表单水平表单支持的表单控件： Bootstrap支持最常见的表单控件，主要是input、textarea、checkbox、radio和select。静态控件： 当您需要在一个水平表单内的表单标签后放置纯文本时，请在<p>上使用class.form-control-static。表单控件大小： 您可以分别使用class.input-lg和.col-lg-*来设置表单的高度和宽度。 Bootstrap表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在<input>后使用.help-block。Bootstrap表单表单控件状态定义：

除了focus状态（即，用户点击input或使用tab键聚焦到input上），Bootstrap还为禁用的输入框定义了样式，并提供了表单验证的class。输入框焦点： 当输入框input接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。禁用的输入框input： 如果您想要禁用一个输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。禁用的字段集fieldset： 对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件。验证状态： Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class（.has-warning、.has-error或.has-success）即可使用验证状态。注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-forms.htmlBootstrap按钮定义： 任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式，具体如下表所示：按钮大小: 列出了获得各种大小按钮的class按钮状态:

Bootstrap提供了激活、禁用等按钮状态的class按钮标签:

您可以在<a>、<button>或<input>元素上使用按钮class。但是建议您在<button>元素上使用按钮class，避免跨浏览器的不一致性问题。注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-buttons.htmlBootstrap图像定义： Bootstrap提供了三个可对图像应用简单样式的class： 1、.img-rounded：添加border-radius:6px来获得图像圆角。 2、.img-circle：添加border-radius:500px来让整个图像变成圆形。 3、.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。 如下图所示：Bootstrap帮助器类关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用classclose得到关闭图标。插入符

使用插入符表示下拉功能和方向。使用带有classcaret的<span>元素得到该功能。快速浮动

您可以分别使用classpull-left或pull-right来把元素向左或向右浮动。下面的实例演示了这点。居中内容块

使用classcenter-block来居中元素。清除浮动

如需清除元素的浮动，请使用.clearfixclass。显示和隐藏内容

您可以通过使用class.show和.hidden来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器

您可以通过使用class.sr-only来把元素对所有设备隐藏，除了屏幕阅读器。注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-helper-classes.htmlBootstrap布局组件包括以下内容：Bootstrap字形图标Bootstrap下拉菜单Bootstrap按钮组Bootstrap按钮下拉菜单Bootstrap输入框组Bootstrap导航元素Bootstrap导航栏Bootstrap面包屑导航Bootstrap分页十、Bootstrap标签和徽章十一、Bootstrap缩略图十二、Bootstrap进度条Bootstrap字形图标定义：

字形图标（Glyphicons）是在Web项目中使用的图标字体。用法：

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 例：<spanclass="glyphiconglyphicon-search"></span> 带有导航栏的字形图标（Glyphicons） 定制字形图标（Glyphicons）：定制字体尺寸、颜色、文本阴影效果如图所示： 注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.htmlBootstrap下拉菜单定义：

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown）JavaScript插件的互动来实现。如需使用下列菜单，只需要在class.dropdown内加上下拉菜单即可。选项：

对齐：通过向.dropdown-menu添加class.pull-right来向右对齐下拉菜单。 标题：您可以使用classdropdown-header向下拉菜单的标签区域添加标题。效果如图所示：注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-dropdowns.htmlBootstrap按钮组定义：

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap按钮（Button）插件添加可选的JavaScript单选框和复选框样式行为。 如下表所示：效果如图所示： 注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-button-groups.htmlBootstrap按钮下拉菜单定义：

如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。您也可以使用<spanclass="caret"></span>来指示按钮作为下拉菜单。分割的按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。按钮下拉菜单的大小

您可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm或.btn-xs。按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父.btn-group容器添加.dropup即可。效果如图所示： 注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-button-dropdowns.htmlBootstrap输入框组定义：

输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在Twitter用户名前添加@，或者应用程序接口所需要的其他公共的元素。 步骤如下：

把前缀后后缀元素放在一个带有class.input-group的<div>中。

接着，在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容。

把该<span>放置在<input>元素的前面或者后面。输入框组的大小

您可以通过向.input-group添加相对表单大小的class（比如.input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。复选框和单选插件

您可以把复选框和单选插件作为输入框组的前缀或者后缀元素按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加.input-group-addonclass，您需要使用class.input-group-btn来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个.input-group-btnclass中包裹按钮和下拉菜单即可分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能效果如图所示： 注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-input-groups.htmlBootstrap导航元素定义：

它们使用相同的标记和基类.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，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。禁用链接

对每个.navclass，如果添加了.disabledclass，则会创建一个灰色的链接，同时禁用了该链接的:hover状态，下拉菜单：

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有.dropdown-menuclass的无序列表。带有下拉菜单的标签：

向标签添加下拉菜单的步骤如下：以一个带有class.nav的无序列表开始。添加class.nav-tabs。添加带有.dropdown-menuclass的无序列表。效果如图所示： 注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-navigation-elements.htmlBootstrap导航栏定义：

导航栏是一个很好的功能，是Bootstrap网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在Bootstrap导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。默认的导航栏：

创建一个默认的导航栏的步骤如下： 1、向<nav>标签添加class.navbar、.navbar-default。 2、向上面的元素添加role="navigation"，有助于增加可访问性。 3、向<div>元素添加一个标题class.navbar-header，内部包含了带有classnavbar-brand的<a>元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有class.nav、.navbar-nav的无序列表即可。响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有classes.collapse、.navbar-collapse的<div>中。折叠起来的导航栏实际上是一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。三个带有class.icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse<div>中的元素。为了实现以上这些功能，您必须包含Bootstrap折叠（Collapse）插件。导航栏中的表单

导航栏中的表单不是使用Bootstrap表单章节中所讲到的默认的class，它是使用.navbar-formclass。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。您可以使用class.navbar-btn向不在<form>中导航栏中的文本

如果需要在导航中包含文本字符串，请使用class.navbar-text。这通常与<p>标签一起使用，确保适当的前导和颜色。的<button>元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。Bootstrap导航栏非导航链接：

如果您不想在常规的导航栏导航组件内使用标准的链接，那么请使用classnavbar-link来为默认的和倒转的导航栏选项添加适当的颜色组件对齐方式：

您可以使用实用工具class.navbar-left或.navbar-right向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。这两个class都会在指定的方向上添加CSS浮动。固定到顶部：

Bootstrap导航栏可以动态定位。默认情况下，它是块级元素，它是基于在HTML中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。

如果您想要让导航栏固定在页面的顶部，请向.navbarclass添加class.navbar-fixed-top。固定到底部：

如果您想要让导航栏固定在页面的底部，请向.navbarclass添加class.navbar-fixed-bottom。静态的顶部：

如需创建能随着页面一起滚动的导航栏，请添加.navbar-static-topclass。该class不要求向<body>添加内边距（padding）。倒置的导航栏

为了创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单地向.navbarclass添加.navbar-inverseclass即可效果如图所示：注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-navbar.htmlBootstrap面包屑导航定义：面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap中的面包屑导航（Breadcrumbs）是一个简单的带有.breadcrumbclass的无序列表。 如图所示：Bootstrap分页定义：分页（Pagination），是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。 如下表所示：注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-pagination.htmlBootstrap标签和徽章定义：1、标签可用于计数、提示或页面上其他的标记显示。使用class.label来显示标签，可以使用修饰的classlabel-default、label-primary、label-success、label-info、label-warning、label-danger来改变标签的外观2、徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把<spanclass="badge">添加到链接、Bootstrap导航等这些元素上即可。 激活导航状态： 您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用<spanclass="badge">来激活链接效果如图所示：注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-labels.htmlhttp://www.w3cschool.cc/bootstrap/bootstrap-badges.htmlBootstrap缩略图定义：

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap通过缩略图为此提供了一种简便的方式。使用Bootstrap创建缩略图的步骤如下：在图像周围添加带有class.thumbnail的<a>标签。这会添加四个像素的内边距（padding）和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓。添加自定义的内容：

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种HTML内容，比如标题、段落或按钮。具体步骤如下：把带有class.thumbnail的<a>标签改为<div>。在该<div>内，您可以添加任何您想要添加的东西。由于这是一个<div>，我们可以使用默认的基于span的命名规则来调整大小。如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。注：详细样式请参考http://www.w3cschool.cc/bootstrap/bootstrap-thumbnails.htmlBootstrap进度条默认的进度条：

创建一个基本的进度条的步骤如下： 1、添加一个带有gress的<div>。 2、接着，在上面的<div>内，添加一个带有gress-bar的空的<div>。 3、添加一个带有百分比表示的宽度的style属性，例如style="60%";表示进度条在60%的位置。交替的进度条： 1、创建不同样式的进度条的步骤如下： 2、添加一个带有gress的<div>。 3、接着，在上面的<div>内，添加一个带有gress-bar和classprogress-bar-*的空的<div>。其中，*可以是success、info、warning、danger。 4、添加一个带有百分比表示的宽度的style属性，例如style="60%";表示进度条在60%的位置。条纹的进度条： 1、创建一个条纹的进度条的步骤如下： 2、添加一个带有gress和.progress-striped的<div>。 3、接着，在上面的<div>内，添加一个带有gress-bar和classprogress-bar-*的空的<div>。其中，*可以是success、info、warning、danger。 4、添加一个带有百分比表示的宽度的style属性，例如style="60%";表示进度条在60%的位置。动画的进度条： 1、创建一个动画的进度条的步骤如下： 2、添加一个带有gress和.progress-striped的<div>。同时添加class.active。 3、接着，在上面的<div>内，添加一个带有gress-bar的空的<div>。 4、添加一个带有百分比表示的宽度的style属性，例如style="60%";表示进度条在60%的位置。 5、这将会使条纹具有从右向左的运动感。堆叠的进度条：

您甚至可以堆叠多个进度条。把多个进度条放在相同的.progress中即可实现堆叠 注:详情请参考：http://www.w3cschool.cc/bootstrap/bootstrap-progress-bars.htmlBootstrap插件包括以下内容：Bootstrap模态框Bootstrap滚动监听Bootstrap标签页Bootstrap工具提示Bootstrap弹出框Bootstrap折叠Bootstrap轮播Bootstrap插件定义：

Bootstrap自带12种jQuery插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的JavaScript开发人员，您也可以着手学习Bootstrap的JavaScript插件。利用Bootstrap数据API（BootstrapDataAPI），大部分的插件可以在不编写任何代码的情况被触发。站点引用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.htmlBootstrap滚动监听定义：

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加.activeclass。

如果您想要单独引用该插件的功能，那么您需要引用scrollspy.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法：

您可以向顶部导航添加滚动监听行为： 1、通过data属性：向您想要监听的元素（通常是body）添加data-spy="scroll"。然后添加带有Bootstrap.nav组件的父元素的ID或class的属性data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的ID的元素存在。

<bodydata-spy="scroll"data-target=".navbar-example">

...

<divclass="navbar-example">

<ulclass="navnav-tabs">

...

</ul>

</div>

...

</body> 2、通过JavaScript：您可以通过JavaScript调用滚动监听，选取要监听的元素，然后调用.scrollspy()函数：

$('body').scrollspy({target:'.navbar-example'})效果如图所示： 注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.htmlBootstrap标签页定义：

标签页（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胶囊式样式。

<ulclass="navnav-tabs">

<li><ahref="#identifier"data-toggle="tab">Home</a></li>

...

</ul> 2、通过JavaScript：您可以使用Javscript来启用标签页，如下所示：

$('#myTaba').click(function(e){

e.preventDefault()

$(this).tab('show')

})如图所示：

注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-tab-plugin.htmlBootstrap工具提示定义：

当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受JasonFrame写的jQuery.tipsy的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用CSS实现动画效果，用data属性存储标题信息。

如果您想要单独引用该插件的功能，那么您需要引用tooltip.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法：

工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加工具提示（tooltip）： 1、通过data属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加data-toggle="tooltip"即可。锚的title即为工具提示（tooltip）的文本。默认情况下，插件把工具提示（tooltip）设置在顶部。

<ahref="#"data-toggle="tooltip"title="Exampletooltip">请悬停在我的上面</a> 2、通过JavaScript：通过JavaScript触发工具提示（tooltip）：

$('#identifier').tooltip(options)如图所示：注：

工具提示（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，您必须使用jquery激活它（读取javascript）。使用下面的脚本来启用页面中的所有的工具提示（tooltip）：

$(function(){$("[data-toggle='tooltip']").tooltip();}); 详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-tooltip-plugin.htmlBootstrap弹出框定义：

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用Bootstrap数据API（BootstrapDataAPI）来填充。该方法依赖于工具提示（tooltip）。

如果您想要单独引用该插件的功能，那么您需要引用popover.js，它依赖于工具提示（Tooltip）插件。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法：

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）： 1、通过data属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加data-toggle="popover"即可。锚的title即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<ahref="#"data-toggle="popover"title="Examplepopover">请悬停在我的上面</a> 2、通过JavaScript：通过JavaScript启用弹出框（popover）：

$('#identifier').popover(options)如图所示：注：

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，您必须使用jquery激活它（读取javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function(){$("[data-toggle='popover']").popover();});

详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-popover-plugin.htmlBootstrap折叠定义：

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用collapse.js。同时，也需要在您的Bootstrap版本中引用Transition（过渡）插件。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。您可以使用折叠（Collapse）插件：1、创建可折叠的分组或折叠面板（accordion）

data-toggle="collapse"添加到您想要展开或折叠的组件的链接上。

href或data-target属性添加到父组件，它的值是子组件的id。

data-parent属性把折叠面板（accordion）的id添加到要展开或折叠的组件的链接上。2、创建不带accordion标记的简单的可折叠组件（collapsible）效果如图所示：Bootstrap折叠用法：

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的class：

Class描述：

.collapse

隐藏内容。

.collapse.in

显示内容。

.collapsing

当过渡效果开始时被添加，当过渡效果完成时被移除。

您可以通过以下两种方式使用折叠（Collapse）插件： 1、通过data属性：向元素添加data-toggle="collapse"和data-target，自动分配可折叠元素的控制。data-target属性接受一个CSS选择器，并会对其应用折叠效果。请确保向可折叠元素添加class.collapse。如果您希望它默认情况下是打开的，请添加额外的class.in。

为了向可折叠控件添加类似折叠面板的分组管理，请添加data属性data-parent="#selector"。 2、通过JavaScript：可通过JavaScript激活collapse方法，如下所示：

$('.collapse').collapse() 注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-collapse-plugin.htmlBootstrap轮播定义：

Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能，那么您需要引用carousel.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法：1、通过data属性：使用data属性可以很容易控制轮播（Carousel）的位置。

属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置。

使用data-slide-to来向轮播床底一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从0开始计数。

data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放。2、通过JavaScript：轮播（Carousel）可通过JavaScript手动调用，如下所示：

$('.carousel').carousel()效果图显示：注：详情请参考http://www.w3cschool.cc/bootstrap/bootstrap-carousel-plugin.html返回首页HTML5HTML5简介HTML5视频HTML5音频HTML5拖放HTML5画布HTML5SVGHTML5地理定位HTML5Web存储HTML5应用缓存HTML5表单类型HTML5表单元素HTML5表单属性HTML5简介新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search浏览器支持：

最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9将支持某些HTML5特性。HTML5视频视频格式以及浏览器兼容性：如图所示...语法例：1、<videosrc="movie.ogg"width="320"height="240"controls="controls">

Yourbrowserdoesnotsupportthevideotag.

</video>2、<videowidth="320"height="240"controls="controls">

<sourcesrc="movie.ogg"type="video/ogg">

<sourcesrc="movie.mp4"type="video/mp4">

Yourbrowserdoesnotsupportthevideotag.

</video> 析：control属性供添加播放、暂停和音量控件。 注：更多属性详情请参考/html5/html_5_video.aspHTML5音频音频格式以及浏览器兼容性：如图所示...语法（类似视频）例：1、<audiosrc="song.ogg"controls="controls">

Yourbrowserdoesnotsupporttheaudiotag.

</audio>2、<audiocontrols="controls">

<sourcesrc="song.ogg"type="audio/ogg">

<sourcesrc="song.mp3"type="audio/mpeg">

Yourbrowserdoesnotsupporttheaudiotag.

</audio> 析：control属性供添加播放、暂停和音量控件。 注：更多属性详情请参考/html5/html_5_audio.aspHTML5拖放定义：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。浏览器支持：InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。操作步骤：设置元素为可拖放：把draggable属性设置为true拖动什么-ondragstart和setData()放到何处-ondragover进行放置-ondrop示例如图所示：注：详情请参考/html5/html_5_draganddrop.aspHTML5画布定义：canvas元素用于在网页上绘制图形。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。注：canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：例： <scripttype="text/javascript"> varc=document.getElementById("myCanvas");/*JavaScript使 用id来寻找canvas元素*/ varcxt=c.getContext("2d");//创建context对象 cxt.fillStyle="#FF0000";//绘制一个红色的矩形 cxt.fillRect(0,0,150,75); </script>析：getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。 可用于绘制如上效果图：线条、圆、渐变 注：详情请参考/html5/html_5_canvas.aspHTML5SVG定义：SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG用于定义用于网络的基于矢量的图形SVG使用XML格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有损失SVG是万维网联盟的标准优势：SVG图像可通过文本编辑器来创建和修改SVG图像可被搜索、索引、脚本化或压缩SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印SVG可在图像质量不下降的情况下被放大浏览器支持：

InternetExplorer9、Firefox、Opera、Chrome以及Safari支持内联SVG。语法及效果如图所示：注：详情请参考/html5/html_5_svg.aspHTML5地理定位定义：

HTML5GeolocationAPI用于获得用户的地理位置。浏览器支持：

InternetExplorer9、Firefox、Chrome、Safari以及Opera支持地理定位。

注释：对于拥有GPS的设备，比如iPhone，地理定位更加精确。使用地理定位：

使用getCurrentPosition()方法来获得用户的位置。 使用getCurrentPosition()方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。

注：

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 更多操作更多属性、方法请参考/html5/html_5_geolocation.aspHTML5web存储定义：

在客户端存储数据新方法：1、localStorage-没有时间限制的数据存储例：2、sessionStorage-针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。例：注：详情请参考/html5/html_5_webstorage.aspHTML5应用缓存定义：

通过创建cachemanifest文件，可以轻松地创建web应用的离线版本。优势：离线浏览-用户可在应用离线时使用它们速度-已缓存资源加载得更快减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。浏览器支持

所有主流浏览器均支持应用程序缓存，除了InternetExplorer。语法以及mainfest文件结构示例图：注：详情请参考/html5/html_5_app_cache.aspHTML5表单类型定义：

HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。新的输入类型：email—用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。url—用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。number—用于应该包含数值的输入域。您还能够设定对所接受的数字的限定。range—用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定。Datepickers(date,month,week,time,datetime,datetime-local)—HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）6. search—search类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。HTML5表单类型浏览器支持：注：效果、内容详情请参考/html5/html_5_form_input_types.aspHTML5表单元素新的表单元素：datalist—规定输入域的选项列表。列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id。keygen—作用是提供一种验证用户的可靠方法。keygen元素是密钥对生成器（key-pairgenerator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（privatekey）存储于客户端，公钥（publickey）则被发送到服务器。公钥可用于之后验证用户的客户端证书（clientcertificate）。output—output元素用于不同类型的输出，比如计算或脚本输出浏览器支持：注：详情请参考/html5/html_5_form_elements.aspHTML5表单属性新的表单属性：1、新的form属性、新的input属性：autocomplete—规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项autofocus—规定在页面加载时，域自动地获得焦点。form—规定输入域所属的一个或多个表单。必须引用所属表单的idformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)—表单重写属性height和width—height和width属性规定用于image类型的input标签的图像高度和宽度。list—规定输入域的datalist。datalist是输入域的选项列表。min,max和step—用于为包含数字或日期的input类型规定限定（约束）。multiple—规定输入域中可选择多个值。pattern(regexp)—规定用于验证input域的模式（pattern）。模式（pattern）是正则表达式。placeholder—提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失required—规定必须在提交之前填写输入域（不能为空）。HTML5表单属性浏览器支持： 注：更多条件，跟多语法示例请参考/html5/html_5_form_attributes.asp返回首页CSS3CSS3边框CSS3背景CSS3文本效果CSS3字体CSS32D转换CSS33D转换CSS3过渡CSS3动画CSS3多列CSS3用户界面CSS3边框定义：

通过CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框边框属性：

border-radius—圆角边框 box-shadow—边框阴影 border-image—边框图片浏览器支持：注：更多示例及效果图请参考/css3/css3_border.