validate&bootstrap知识点总结

validate&bootstrap知识点总结

一、validate

1.简介（了解）：validate是别人封装好的第三方工具，是jquery的插件.
   作用：校验表单

2.使用步骤
（1）导入jquery.js
（2）导入validate.js
（3）在页面加载成功之后    
    $(function(){})
（4）对表单进行校验
    $(function(){
        $("选择器").validate();
    })
（5）编写校验的规则
    $(function(){
        $("选择器").validate({
            rules:{},
            messages:{}
        });
    })
（6）编写具体的规则
    $(function(){
        $("选择器").validate({
            rules:{
                //格式1: name值:"校验器"
                //格式2: name值:{校验器:值,校验器:值}
            },
            messages:{
                //格式1: name值:"提示信息"
                //格式2: name值:{校验器:"提示信息",校验器:"提示信息"}
            }
        });
    })
        
3.常用的校验器
  必填:       required
  最值:       min|max
  取值范围:range        值:[min,max]
  相等:       equalTo        值:jquery表达式
  长度:       minlength|maxlength
  长度范围:rangelength     值:[min长度,max长度]

            
二、bootstrap            

1.简介：webcss框架,集合了html/css/jquery为一家，ie 6/7/8兼容性有问题（了解）
  作用：创建响应式的页面
  响应式：适配不同的上网设备            
    
2.使用步骤
（1）导入bootstarp.css
（2）导入jquery.js
（3）导入bootstarp.js
（4）在head标签添加一个meta标签  支持移动设备
    <meta name="viewport" content="width=device-width, initial-scale=1">    
（5）将所有的内容放入到布局容器中.
  Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
  我们提供了两个作此用处的类
  方式1:
    <div class="container"></div>
  方式2:
    <div class="container-fluid"></div>        

3.栅格系统
  屏幕分辨率>1200px         样式:col-lg-x   大屏幕
  992px<屏幕分辨率<1200px   样式:col-md-x   中等屏幕
  768px<屏幕分辨率<992px    样式:col-sm-x   小屏幕
  屏幕分辨率<768px          样式:col-xs-x   最小屏幕
  注：一行分成12份
  
4.组成部分（了解）
（1）全局css样式--定义了一套css样式
（2）组件--定义了很多可以直接使用的组件 例如:下拉菜单 导航条 
（3）js插件--例如:轮播图 选项卡
  
5.其他 
（1）隐藏
     hidden-xs|sm|md|lg     在什么屏幕下隐藏
（2）将一个超链接伪装成一个按钮
     class="btn btn-primary"
（3）浮动到右边
     class="pull-right"  

三、常见案例

1.案例一-表单校验
（1）需求:通过validate插件来校验表单
（2）技术分析:jqery validate（rules,messages,校验器）
（3）步骤分析:    
    a.导入jquery.js
    b.导入validate.js
    c.在页面加载成功之后 对表单进行校验  
    d.在validate中编写校验规则 

2.案例二-创建一个响应式的页面
（1）需求:创建一套页面,可以根据上网设备的不同自动调节显示的效果.
（2）技术分析:bootstrap（栅格系统）
（3）步骤分析:
    a.先有一个模版页面
    b.创建一个导航条
    c.下面创建一个轮播图
    d.下面再创建3个div
      中等屏幕的时候 3个一行
      小屏幕的时候   2个一行
      最小屏幕的时候 1个一行
      
3.案例三-布局首页
（1）需求:当屏幕为小屏幕的时候和超小屏幕的时候隐藏热门商品中的左边那张图片
          当屏幕为超小屏幕隐藏middle图片
（2）技术分析:bootstrap（栅格系统），hidden-xxx
（3）步骤分析:
    a.布局页面
    b.创建5个div
    c.第一个:logo
        3个div 
        小屏幕   二个一行 
        超小屏幕 一个一行
    d.第二个div:导航条
    e.第三个div:轮播图
    f.第四个div:最新商品
        先分成左右两个div
            左边的div 放一张图片 
                屏幕为小屏幕的时候和超小屏幕的时候 隐藏
                中等屏幕 占2份
            右边的div 
                中等屏幕 占10份
                屏幕为小屏幕的时候和超小屏幕的时候 占12份
                    middle 
                        中等屏幕  6份
                        小屏幕      12份
                        超小屏幕  隐藏
                    商品:
                        中等屏幕  2份
                        小屏幕       4份
                        超小屏幕  12份