Java进阶-4.validate&bootstred

一、validate

validate是jQuery插件，必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

1）导入jquery.js

<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>

2）导入validate.js

        <!--validate校验库-->

<script type="text/javascript" src="../js/jquery.validate.js" ></script>

        <!--国际化库，中文提示-->

<script type="text/javascript" src="../js/messages_zh.js" ></script>

3）在页面加载成功之后，对表单进行校验:$("选择器").validate()

$("#formId").validate({
                rules:{
                   // 字段的name属性:"校验器"
                    //字段的name属性:{校验器:值,校验器:值}
                   username:"required",
                   password:{
                       required:true,
                       digits:true
                   },
                   repassword:{
                       equalTo:"[name='password']"
                   },
                       zuixiaozhi:{
                       min:5
                   },
                   shuzhiqujian:{
                       range:[5,10]
                   }
                },

                messages:{
                   //字段的name属性:"提示信息"
                   //字段的name属性:{校验器:"提示信息",校验器:提示信息"}
                   username:"用户名不能为空",
                   password:{
                       required:"密码不能为空",
                       digits:"密码只能是数字"

                   },
                   repassword:{
                      equalTo:"两次输入的内容不一致"
                   },
                   zuixiaozhi:{
                       min:"最小值应该大于{0}"
                   },
                   shuzhiqujian:{
                       range:"输入的范围在{0}~{1}之间"
                   }
                }
        });

4）在validate中编写校验规则

        $("选择器").validate({

            rules:{},

            messages:{}

        });

1.rules格式:

    格式1:

        字段的name属性:"校验器"

    格式2:               

        字段的name属性:{校验器:值,校验器:值}

    例如:      

  rules:{
            username:"required",
            password:{
                required:true,
                digits:true
            },
            repassword:{
                equalTo:"[name='password']"
            },
            zuixiaozhi:{
                min:5
            },
            shuzhiqujian:{
                range:[5,10]
            }
        },

    常用： 

        必填:    required

        最值:    min|max

        取值范围：range        值:[min,mix]

        相等:    equalTo        值:jquery表达式

        长度:    minlength|maxlength

        长度范围：rangelength     值:[min长度,max长度]

2.messages的格式:

    格式1:

         字段的name属性:"提示信息"

    格式2:

         字段的name属性:{校验器:"提示信息",校验器:提示信息"}

    例如:

    messages:{
                username:"用户名不能为空",
            password:{
                required:"密码不能为空",
                digits:"密码只能是数字"
            },
            repassword:{
                equalTo:"两次输入的内容不一致"
            },
            zuixiaozhi:{
                min:"最小值应该大于{0}"
            },
            shuzhiqujian:{
                range:"输入的范围在{0}~{1}之间"
            }
        };

二、bootstrap

webcss框架，集合了html/css/jquery为一家，创建响应式的页面，适配不同的上网设备。

1.bootstarp的入门

1.下载bootstarp：http://www.bootcss.com/，下载用于生产环境的 Bootstrap

2.导入bootstarp.css

3.导入jquery.js

4.导入bootstrap.js

<meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 导入 css-->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
         <!--导入jquery.js-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
         <!--导入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>

5.添加一个meta标签，支持移动设备

<meta name="viewport" content="width=device-width, initial-scale=1">

6.将所有的内容放入到布局容器中

Bootstrap需要为页面内容和栅格系统包裹一个container容器。

方式1：            <div class="container"></div>

方式2：            <div class="container-fluid"></div>

2.栅格系统

bootstrap将每一行分成12份。

假如大屏幕，每行显示6个，屏幕分辨率>1200，使用: col-lg-2

假如屏幕小点，每行显示4个，992<屏幕分辨率<1200，使用: col-md-3

再小点,每行显示2个，768<屏幕分辨率<992，使用: col-sm-6

继续小，每行显示1个，屏幕分辨率<768，使用:col-xs-12

三、bootstrap组成部分

1.全局css样式：定义了一套css样式，在css中直接添加名称，就可以使用相应的样式。

2.组件：定义了很多可以直接使用的组件，例如：字体图标，导航条。

3.js插件：例如：轮播图 选项卡。

例如：

隐藏：hidden-xs 在最小屏幕时候隐藏。

将一个超链接伪装成一个按钮：class="btn btn-primary"。

浮动到右边：class="pull-right"。