validate和bootstrap

1：validate的使用

他是基于jQuery的form表单验证
使用步骤：
  1：导入jQuery  validate massage 三个js文件
      <!--导入jQuery  validate massage-->
      <script src="js/jquery-1.11.0.min.js"></script>
      <script src="js/jquery.validate.js"></script>
      <script src="js/messages_zh.js"></script>

2：编写表单

       <!--表单-->
        <form action="" id="formId">
            用户名：<input type="text" name="username"> <br>
            密码： <input type="text" name="password"> <br>
            重复：<input type="text" name="repassword"> <br>
            最小值：<input type="text" name="min"> <br>
            范围： <input type="text" name="scope"> <br>
            <input type="submit" value="提交">
        </form>

3：在js代码区域进行相应的验证

    <script>
        //当页面加载完毕
        $(function () {
            //选中form
            $("#formId").validate({
                rules:{
                    username:{"required":true},
                    //密码必须为数字
                    password:{"required":true,"digits":true},
                    repassword:{"equalTo":"[name='password']"},
                    //最小值
                    min:{"required":true,"min":10},
                    scope:{"required":true,"range":[5,10]}
                },
                messages:{
                    username:{"required":"<font color='#ff3d1f'>必须填哦</font>"},
                    password:{"required":"<font color='#ff3d1f'>必须填哦</font>","digits":"<font color='#ff3d1f'>必须为数字</font>"},
                    repassword:{"equalTo":"两次密码输入不一致哦"},
                    min:{"required":"必须填哦","min":"最小值为10"},
                    scope:{"required":"必须填哦","range":"范围为5--10"}
                }
            })
        })
    </script>
4：验证内容看菜鸟教程 validate
validate 在java中生成验证码
  1：导入ValidateCode jar包                       宽  高   数字个数  干扰线条数
  2：ValidateCode validateCode = new ValidateCode(120, 45, 4, 20);
      String code = validateCode.getCode();

2：bootstrap前端框架

bootstrap是HTML css js框架应用于响应式布局，移动设备的web项目

1：基本木板搭建

    <!--导入  jQuery  bootstrap  bootstrap css文件-->
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--就是css  class的饮用哦
    内容放在 class="container";
    或  class = “container-fluid”
    的div中
    container 和container-fluid的区别 container边缘会有一个空白区域
    效果好看因此常用
    container-fluid 边缘举例较小，效果不太好，因此不经常使用
     -->

2：组件使用：

    按钮
   <div class="container">
      <!--按钮-->
      <button class="btn btn-default">默认</button>
      <button class="btn btn-primary">首选项</button>
      <button class="btn btn-success">成功</button>
      <button class="btn btn-info">一般信息</button>
      <button class="btn btn-warning">警告</button>
      <button class="btn btn-danger">危险</button>
      <button class="btn btn-link">危险</button>
      <button class="hidden-xs">导航条</button>
  </div>
  //图片
  <div class="container">
    <!--图片-->
    <img src="img/001.jpg" alt="" class="img-circle"><br>
    <img src="img/001.jpg" class="img-thumbnail" alt=""><br>
    <img src="img/001.jpg" class="img-rounded" alt=""><br>
    //响应式图片
    <img src="img/001.jpg" class="img-responsive" alt="" width="1000px"><br>
    //表格
   <div class="container">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
    <tr class="active">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>毕业学校</td>
        <td>单位</td>
    </tr>
    <tr class="success">
        <td>hfh</td>
        <td>nan</td>
        <td>22</td>
        <td>zz</td>
        <td>dd</td>
    </tr>
    <tr class="warning">
        <td>hfh</td>
        <td>nan</td>
        <td>22</td>
        <td>zz</td>
        <td>dd</td>
    </tr>
    <tr class="danger">
        <td>hfh</td>
        <td>nan</td>
        <td>22</td>
        <td>zz</td>
        <td>dd</td>
    </tr>
    <tr class="info">
        <td>hfh</td>
        <td>nan</td>
        <td>22</td>
        <td>zz</td>
        <td>dd</td>
    </tr>
    <tr class="info">
        <td>hfh</td>
        <td>nan</td>
        <td>22</td>
        <td>zz</td>
        <td>dd</td>
    </tr>
</table>

//表单

Email address

Password

File input

Example block-level help text here.

Check me out

Submit

3:栅格系统