JavaWeb总复习——bootstrap基础和validate

bootstrap:

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

bootstarp的入门

1. 下载bootstarp

   网站:http://www.bootcss.com/
   下载:用于生产环境的 Bootstrap
   

2. 导入bootstarp.css

3. 导入jquery.js

4. 导入bootstrap.js

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

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

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

   Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
   方式1:
   	<div class="container"></div>
   方式1:
   	<div class="container-fluid"></div>
   

7. 注意:

   bootstrap将每一行分成12份

8. 媒体查询:

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

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

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

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

bootstrap组成部分:

全局css样式--定义了一套css样式
组件--定义了很多可以直接使用的组件 例如:字体图标 导航条 
js插件--例如:轮播图 选项卡

validate使用步骤:

validate是别人封装好的第三方工具
1.导入jquery.js
2.导入validate.js
3.在页面加载成功之后 对表单进行校验  $("选择器").validate()
4.在validate中编写校验规则
	$("选择器").validate({
		rules:{},
		messages:{}
	});

rules格式:
	格式1:
		字段的name属性:"校验器"
	格式2:				
		字段的name属性:{校验器:值,校验器:值}
例如:
	username:"required",
	password:{
		required:true,
		digits:true
	},
	repassword:{
		equalTo:"[name='password']"
	},
	zuixiaozhi:{
		min:5
	},
	shuzhiqujian:{
		range:[5,10]
	}

messages的格式:

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

例如:

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