Boostrap
官网：http://getbootstrap.com/
中文网：http://www.bootcss.com/
BootStrap 特点
1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。 2. 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设 计，12列格网，样式向导文档。
3. 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bootstrap4 基于 Sass 的 CSS 预处理 技术
4. Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计， 给用户提供更好的视觉使用体验。
5. 丰富的组件
布局容器
固定宽度 .container -->
<div class="container" style="height: 50px; background-color: #00CCFF;"></div>
<!--100%宽度 .container-fluid -->
<div class="container-fluid" style="height: 50px; background-color: #000099;"></div>栅格网格系统
行 row 列 column
行 .roe
列 col-xs-列数 col-sm-列数 col-md-列数 col-lg-列数
排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.4.1/dist/css/bootstrap.css"/>
</head>
<body>
<!-- 标题 -->
<h1>bootstrap 哈咯<small>副标题</small></h1>
bootstrap 哈咯<div class="h1">bootstrap 哈咯<span class="small">副标题</span></div>
<!-- 段落 -->
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
<!-- 强调 -->
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
<!-- 对齐效果 -->
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
</p>
<!-- 去点样式 -->
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>
<!-- 水平/内联列表 -->
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
<!-- 定义列表 -->
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度,否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>
<!-- 代码 -->
<code>System.out.println("hello");</code>
<pre>
public static void main(String[] args){
System.out.println("hello");
}
</pre>
<!-- 快捷键 -->
保存：<kbd>ctrl</kbd> + <kbd>s</kbd>
<button class="btn">按钮</button>
<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>
<button class="btn btn-danger disabled" disabled="disabled">禁用按钮</button>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css"/>
</head>
<!-- 输入框 -->
<body>
<div class="col-sm-3">
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>
<!-- 下拉框 -->
<div class="col-sm-3">
<select class="form-control">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select class="form-control" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<!-- 文本域 -->
<div class="col-sm-3">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<!-- 复选框 -->
<!-- 垂直显示 -->
<div>
<div class="checkbox">
<label><input type="checkbox" >游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox" >学习</label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="checkbox-inline">
<input type="checkbox" >游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" >学习
</label>
</div>
<!-- 单选框 -->
<!-- 垂直显示 -->
<div>
<div class="radio">
<label><input type="radio" >男</label>
</div>
<div class="radio">
<label><input type="radio" >女</label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="radio-inline">
<input type="radio" >男
</label>
<label class="radio-inline">
<input type="radio" >女
</label>
</div>
<!-- 按钮 -->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>
<!-- 按钮大小 -->
<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>
<!-- 按钮禁用 -->
<button class="btn btn-danger" disabled="disabled">禁用按钮</button>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.4.1/dist/css/bootstrap.css" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢频道 <span class="glyphicon glyphicon-signal"></span>
<!--下拉箭头-->
</button>
<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
<ul class="dropdown-menu">
<!--dropdown-menu-right右对齐-->
<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
<li class="dropdown-header">----科普----</li>
<li>
<a href="#">人与自然</a>
</li>
<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
<li class="divider"></li>
<li class="dropdown-header">----搞笑----</li>
<li>
<a href="#">欢乐喜剧人</a>
</li>
<li>
<a href="#">快乐大本营</a>
</li>
<li class="divider"></li>
<li class="disabled">
<!--禁用状态-->
<a href="#">生活大爆炸</a>
</li>
</ul>
</div>
<!-- 使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可 -->
<div class="dropdown ">
<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢频道 <span class="caret"></span><!--下拉箭头-->
</button>
<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
<ul class="dropdown-menu"> <!--dropdown-menu-right右对齐-->
<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
<li class="dropdown-header">----科普----</li>
<li>
<a href="#">人与自然</a>
</li>
<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
<li class="divider"></li>
<li class="dropdown-header">----搞笑----</li>
<li>
<a href="#">欢乐喜剧人</a>
</li>
<li>
<a href="#">快乐大本营</a>
</li>
<li class="divider"></li>
<li class="disabled"> <!--禁用状态-->
<a href="#">生活大爆炸</a>
</li>
</ul>
</div>
</body>
</html>BootStrapDemo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢频道 <span class="glyphicon glyphicon-signal"></span>
<!--下拉箭头-->
</button>
<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
<ul class="dropdown-menu">
<!--dropdown-menu-right右对齐-->
<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
<li class="dropdown-header">----科普----</li>
<li>
<a href="#">人与自然</a>
</li>
<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
<li class="divider"></li>
<li class="dropdown-header">----搞笑----</li>
<li>
<a href="#">欢乐喜剧人</a>
</li>
<li>
<a href="#">快乐大本营</a>
</li>
<li class="divider"></li>
<li class="disabled">
<!--禁用状态-->
<a href="#">生活大爆炸</a>
</li>
</ul>
</div>
</body>
</html>LayUi
官网：https://www.layui.com
官方文档：https://www.layui.com/doc/
LayUI 的特点
（1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。
基础使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="layui/layui.js"></script>
<script>
// 模块和回调函数
// 一般直接写在一个js文件中
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
数据表格
实现流程:
- 引入css与js
- 准备一个容器
- 加载table模块
- 加载table实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<div id="test1"></div>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 第一个实例
table.render({
elem: '#test1'
,url: 'js/data.json' // 数据接口
,page:true
,cols: [[ // 表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
,{field: 'uname', title: '用户名'}
,{field: 'sex', title: '性别', sort: true}
,{field: 'age', title: '年龄'}
,{field: 'job', title: '工作' },
,{title: '操作', toolbar:'#barDemo' }
]]
,toolbar:"#toolbarDemo" //开启头部工具栏
});
/* table.render({
elem: '#test1' // 指定原始表格元素选择器（推荐id选择器）
,url: 'js/data.json' // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
}); */
//监听头部工具栏
table.on('toolbar(test1)',function(obj){
console.log('1111111');
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
console.log(obj);
});
//监听行工具栏
table.on('tool(test1)',function(obj){
console.log('1111111');
});
/* table.on('toolbar(test1)', function(obj){
console.log("11111");
// obj.config.id 当前选择器的id属性值，即demo
// 获取当前表格被选中的记录对象，返回数组
var checkStatus = table.checkStatus(obj.config.id);
// obj.event 得到当前点击元素的事件名
switch(obj.event){
case 'getCheckData':
// 获取被选中的记录的数组
var data = checkStatus.data;
// 将数组数据解析成字符串
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
// checkStatus.isAll 判断记录是否被全选
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
// 自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
}); */
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
</head>
<body>
<table id="test1" lay-filter='test1'></table>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event 给元素绑定事件名 -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 第一个实例
table.render({
elem: '#test1'
,url: 'js/data.json' // 数据接口
,page:true
,cols: [[ // 表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
,{field: 'uname', title: '用户名', edit: 'text'}
,{field: 'sex', title: '性别', sort: true}
,{field: 'age', title: '年龄'}
,{field: 'job', title: '工作' }
,{title: '操作', toolbar:'#barDemo' }
]]
,toolbar:"#toolbarDemo" //开启头部工具栏
});
//监听头部工具栏 括号中监听的是数据容器的lay-filter属性值
table.on("toolbar(test1)",function(obj){
// 获取当前表格被选中的记录对象，返回数组
var checkData = table.checkStatus(obj.config.id);
if(checkData.data.length > 1){
alert("不能操作多行");
return;
}else if(checkData.data.length < 1){
alert("请至少选择一行");
return;
}
console.log(obj);
if(obj.event == 'getCheckData'){
console.log(checkData.data[0]);
}else if(obj.event == 'getCheckLength'){
console.log(checkData.data.length);
}else if(obj.event == 'isAll'){
console.log(checkData.isAll);
}
});
//监听行工具栏 括号中监听的是数据容器的lay-filter属性值
table.on("tool(test1)",function(obj){
console.log(obj);
//判断用户行为
if(obj.event == 'del'){
obj.del();
}
});
// 监听单元格编辑 括号中监听的是数据容器的lay-filter属性值
table.on('edit(test1)', function(obj){
console.log(obj);
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
});
</script>
</body>
</html>
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
