- 高度默认自适应,也可以随意固宽。
2. Tab进行了响应式处理,所以无需担心数量多少。
内容2
内容3
内容4
内容5
3.6进度条
相关样式
layui-progress 代表一个进度条
|-- layui-progress-bar 代表进度条里面的进度
layui-progress-big 变粗了
lay-percent 代表进度值
lay-showpercent=“true” 是否显示进度值
3.7面板
1. 卡片面板
相关样式
layui-row 代表一行
layui-col-space15 space0-space30 代表卡片之间的间距
|-- layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的X/12
|-- layui-card 代表一个卡片
|-- layui-card-header 代表卡片头信息
|-- layui-card-body 代表卡片内容样式
2. 普通折叠面板
相关样式
layui-collapse 代表一个折叠面板
|-- layui-colla-item 代表一个折叠项
|-- layui-colla-title 代表折叠项的显示标题
|-- layui-colla-content 代表折叠项展开的内容
|-- layui-show 是否展开
3. 手风琴面板
在普通面板上加lay-accordion=""
3.8布局
**相关
《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》
【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享
样式**
layui-row
|-- layui-col-xs6 移动设备占比
|-- layui-col-sm6 平板设备占比
|-- layui-col-md6 桌面设置占比
3.9徽章
相关样式
layui-badge-dot 小圆点
layui-badge 弧形徽章
layui-badge-rim 边框徽章
组合使用
3.10时间线
相关样式
layui-timeline 代表一个时间线
|-- layui-timeline-item 代表一个时间节点
|-- layui-timeline-axis 代表左边的竖线
|-- layui-timeline-content 时间线的内容
|-- layui-text 代表文本
|-- layui-timeline-title 代表标题
|–可以分为标题和内容
|–
标题
|–
内容
简约时间线
3.11动画
相关样式
class=“layui-anim”
相关属性
data-anim=“layui-anim-up” 动画的类型
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
动画 style=“margin-top: 30px;”>
动画过程演示