搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

时间线

将时间抽象到二维平面,垂直呈现一段从过去到现在的故事。
快速使用

对应的代码code

  1. <ul class="layui-timeline">
  2. <li class="layui-timeline-item">
  3. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  4. <div class="layui-timeline-content layui-text">
  5. <h3 class="layui-timeline-title">8月18日</h3>
  6. <p>
  7. layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
  8. <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
  9. <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
  10. </p>
  11. </div>
  12. </li>
  13. <li class="layui-timeline-item">
  14. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  15. <div class="layui-timeline-content layui-text">
  16. <h3 class="layui-timeline-title">8月16日</h3>
  17. <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
  18. <ul>
  19. <li>《登高》</li>
  20. <li>《茅屋为秋风所破歌》</li>
  21. </ul>
  22. </div>
  23. </li>
  24. <li class="layui-timeline-item">
  25. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  26. <div class="layui-timeline-content layui-text">
  27. <h3 class="layui-timeline-title">8月15日</h3>
  28. <p>
  29. 中国人民抗日战争胜利72周年
  30. <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
  31. <br>铭记、感恩
  32. <br>所有为中华民族浴血奋战的英雄将士
  33. <br>永垂不朽
  34. </p>
  35. </div>
  36. </li>
  37. <li class="layui-timeline-item">
  38. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  39. <div class="layui-timeline-content layui-text">
  40. <div class="layui-timeline-title">过去</div>
  41. </div>
  42. </li>
  43. </ul>

关于时间线,似乎也没有什么太多可介绍的东西。你需要留意的是以下几点

  • 图标可以任意定义(但并不推荐更改)
  • 标题区域并不意味着一定要加粗
  • 内容区域可自由填充。
结语

授之以鱼不如授之以渔,时间线怎么用,就看你的了。

layui - 在每一个细节中,用心与你沟通