<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<style>
.grid-demo{
height: 80px;
background-color: #00F7DE;
}
.grid-demo-bg1{
background-color: #00FF00;
}
</style>
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>始终等比例水平排列</legend>
</fieldset>
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo">6/12</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
</div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
element.on('collapse(filter)', function(data){
console.log(data.show); //得到当前面板的展开状态，true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
//…
});
</script>
</body>
</html>
相关样式:
layui-row:代表行，
layui-col-xs6 :移动设备占比
layui-col-sm6：平板设备占比
layui-col-md4 :电脑设备占比
