javaWEB(4)——bootstrap,layui使用

1 bootstrap

1 概述

Bootstrap，来自 Twitter，是目前最受欢迎的 用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

1.1 bootstrap引入

1.2 到处搜资料学习昂

< meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” >
1.width = device-width：宽度等于当前设备的宽度
2.initial-scale：初始的缩放比例（默认设置为1.0）
3.minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
4.maximum-scale： 允许用户缩放到的最大比例（默认设置为1.0）
5.user-scalable： 用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

Bootstrap 栅格系统：
https://www.cnblogs.com/linjiqin/p/3559800.html

Bootstrap可视化布局系统：
https://www.bootcss.com/p/layoutit/

Bootstrap脚本之家学习：
https://www.jb51.net/Special/334.htm

2 layUI

锻炼一个能力，那就是Ctrl+C/V，注意导入的包就ok…

徽章-在线演示：https://www.layui.com/demo/badge.html

个人比较喜欢layUI，样式好看，简单易上手，嗝儿~

2.1 表单验证

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值：
required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）
自定义值

同时支持多条规则的验证，格式：lay-verify=”验证A|验证B”
如：lay-verify=”required|phone|number”

另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=”pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义

示例：

<div class="layui-form-item">
	<label for="" class="layui-form-label">请输入邮件</label>
	<div class="layui-input-block">
		<input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input">
	</div>
</div>

2.2 layui ajax请求示例

原文：https://blog.csdn.net/qq_16024861/article/details/81449703