目录
1.栅格系统
2.按钮
2.表单
3.表格
4.面板
5.时间线
6.选项卡
7.弹出层
8.数据表格
layui的优缺点以及使用layui前的准备
优点:
LayUi作为一款国产开源的前端UI,简单易上手,并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员,也适合后端人员使用。
(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
(2)layui是提供给后端开发人员最好的ui框架,基于DOM驱动,只要不涉及到交互layui还是很不错的
缺点:
由于LayUi是个人开源的项目并且开源时间不长,因此bug会比较多,也会有一些限制。兼容性也不强,尤其是在移动端。不由于设计的初衷,LayUi只适合小型项目,即便是小项目,也经常会遇到诸多问题。官网对集成较好的技术收费。
layui官网已于2021年10月13日下架,但是我们可以在layui镜像站里来学习layui的相关知识
镜像站@Layui - 经典开源模块化前端 UI 框架 https://www.layui.site/index.htm 使用layui需要进行layui的引入,直接点击下方地址即可进行下载使用(可根据下方图片提示)
layui引入所需文件https://pan.baidu.com/s/1_RquAr1UNlYPW-SIUANL6A?pwd=wmy1
1.栅格系统
1. | 采用 layui-row 来定义行,如:<div class="layui-row"></div> |
2. | 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:
|
3. | 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。 |
4. | 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 |
5. | 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局! |
示例
<body>
<div class="layui-container">
<!-- 定义行-->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color: #007DDB;">
内容5/12
</div>
<div class="layui-col-md7" style="background-color: #00F7DE;">
内容7/12
</div>
</div>
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4" style="background-color: #EB7350;">
内容4/12
</div>
<div class="layui-col-md4" style="background-color: #FFB800;">
内容4/12
</div>
<!-- 超过12会自动换行 -->
<div class="layui-col-md6" style="background-color: #C2C2C2;">
内容6/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">
移动:6/12 | 平板:6/12 | 桌面:4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">
移动:6/12 | 平板:6/12 | 桌面:4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">
移动:4/12 | 平板:12/12 | 桌面:4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">
移动:4/12 | 平板:7/12 | 桌面:8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">
移动:4/12 | 平板:5/12 | 桌面:4/12
</div>
</div>
</div>
</body>
效果如下:
2.按钮
主题:
名称 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-primary" |
默认 | class="layui-btn" |
百搭 | class="layui-btn layui-btn-normal" |
暖色 | class="layui-btn layui-btn-warm" |
警告 | class="layui-btn layui-btn-danger" |
禁用 | class="layui-btn layui-btn-disabled" |
主色 | class="layui-btn layui-btn-primary layui-border-green" |
百搭 | class="layui-btn layui-btn-primary layui-border-blue" |
暖色 | class="layui-btn layui-btn-primary layui-border-orange" |
警告 | class="layui-btn layui-btn-primary layui-border-red" |
深色 | class="layui-btn layui-btn-primary layui-border-black" |
文章来源:https://www.toymoban.com/news/detail-448174.html
2.尺寸文章来源地址https://www.toymoban.com/news/detail-448174.html
尺寸 | 组合 |
---|---|
到了这里,关于layui框架的一些基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!