Author：Amy

Version：9.0.2

一、validate插件

1.1 validate概述

validate: jquery的一个插件,依赖jquery使用，Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点：内置验证规则： 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则自定义验证规则： 可以很方便地自定义验证规则简单强大的验证信息提示： 默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能实时验证： 可能通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证

1.2 validate使用步骤

导入jquery文件导入validate.js页面加载成功后!对表单进行验证! $("选择器").validate();在validate中编写校验规则

1.3 校验规则

默认校验规则

1.4 validate练习

核心代码：

实现步骤：导入jquery.js和validate.js，messages_zh.js中文提示加载完成 进行验证username必填用户名必须设置messagesname的属性:提示信息name的属性:{校验器:"xx","校验器":"xxx"}username:"xxx",password:{required:"req",digits:"dddd"}此处可以导入messages中文提示库!.密码须为数字 ：password:{required:true, digits:true}重复密码：equalTo:"#field" repassword:{equalTo:"[name='password']"}最小值 ：min 注意 需要添加必填动态修改提示的值：0是索引!! zxz:{min:"最小值应该大于{0}"}

二、Bootstrap

2.1 Bootstrap概述

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。Boostrap特点： 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。Internet Explorer Firefox Opera Google Chrome Safari。容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

2.2 响应式页面案例

需求:创建一套页面!根据上网设备的不同自动调节显示的效果!m.taobao.comtaobao.comBootstrap的使用步骤：下载bootstrap：http://www.bootcss.com/导入bootstrap.css文件导入jquery.js导入bootstrap.js将所有的内容放到布局容器中

2.3 Bootstrap的组成

全局css的样式组件js插件

2.4 栅格系统

2.4.1 什么是栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。注意: Bootstrap将每一行分成12份!Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*

2.4.2 媒体查询功能

判断是什么上网设备小屏幕（平板，大于等于 768px） @media (min-width: @screen-sm-min) { ... }中等屏幕（桌面显示器，大于等于 992px）@media (min-width: @screen-md-min) { ... }大屏幕（大桌面显示器，大于等于 1200px）@media (min-width: @screen-lg-min) { ... } col-lg-2大屏幕 大于1200 col-lg-2中屏幕 大于992<1200 col-md-3小屏幕 大于768<922 col-sm-6最小屏 小于768 col-xs-12超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为 总是水平排列 ，开始是堆叠在一起的，当大于这些阈值时将变为水平排列.container 最大宽度 None （自动） 750px 970px 1170px类前缀 .col-xs- .col-sm- .col-md- .col-lg-可以class中拼接多个列数限制

2.5 排版

标题: HTML 中的所有标题标签，h1 到 h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

对齐：通过文本对齐类，可以简单方便的将文字重新对齐。

改变大小写：text-lowercase 或 text-uppercase 或 text-capitalize

2.6 表格

table 表格table-striped 表格隔行变色table-hover 悬浮变色

行状态：通过这些状态类可以为行或单元格设置颜色。

2.7 表单【重点】

元素都将被默认设置宽度属性为 width: 100%；将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 input、textarea 和 select标签把标签和控件放在一个带有 class .form-group 的 div 中。这是获取最佳间距所必需的。向所有的文本元素 input、textarea 和 select 标签 添加 class ="form-control" 。form-group 会将label和input上下排列 。form-control 会自动将input填充满屏幕 并添加点击高亮效果。

内联表单：为 form元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

案例: 显示带引导的

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

下拉列表

带分割线的下拉框

静态控件

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

2.8 按钮

class = btn 将任何东西变成按钮 需要配合 btn-default a标签也可以

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

按钮组：把一系列的.btn按钮放入.btn-group。btn-group 内部嵌套 btn

按钮工具栏：把一组 div class="btn-group" 组合进一个 div class="btn-toolbar" 中就可以做成更复杂的组件

尺寸 ：只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

2.9 图片形状

响应式图片随着窗体大小改变大小， img src="img/6.png" class="img-responsive" alt="Responsive image"通过为 img 元素添加以下相应的类，可以让图片呈现不同的形状。

2.10 导航栏

data-toggle="tab"

标签式导航栏

胶囊导航

路径导航 面包屑导航

2.11 分页

2.12 缩略图

2.13 模态框

动态模态框

2.14 轮播图