基于layui框架响应式布局的一些使用详解


Posted in Javascript onSeptember 16, 2019

写在前面的

因为公司的需要,这几天学习了layui框架,稍微有一些心得。介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍。

官网地址:https://www.layui.com/doc/element/layout.html

简单的布局

layui的响应式使用十分简单,虽然官网写了很多很详细,但某种意义上增加了新手学习的难度和劝退的可能。但其实总结下来如何使用响应式布局就几个步骤:

第一,在第一个div设置一个布局类 ,通常我只使用两个类,分别是:layui-container和layui-fluid。

layui-container//此类能在小屏幕以上的设备中固定宽度,让列可控。在PC端会设置一定的宽度且居中
layui-fluid//使用此类不会固定宽度,而是 100%自适应

第二,设置行,很简单,只需要在第二个div选择使用layui-row这个类就行了。

第三,设置列,layui-col(列)这个类需要被使用layui-row这个类的div包裹,这样才能设置列的等分值。

最后,将你要写的元素放入列(layui-col),就完成了简单的布局,这样的布局是具有响应式的页面

写在后面的话

萌新第一次写博客,如有不对的地方欢迎大家指出,我会之后再写一些layui的模板使用,谢谢大家的支持!

以上这篇基于layui框架响应式布局的一些使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 #Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 #Javascript
layui异步加载table表中某一列数据的例子
Sep 16 #Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 #Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 #Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 #Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
react-native 封装选择弹出框示例(试用ios&android)
2017/07/11 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue实现底部菜单功能
2018/07/24 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Python 异常处理实例详解
2014/03/12 Python
Python实现的端口扫描功能示例
2018/04/08 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Weblogc domain问题
2014/01/27 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
服务之星获奖感言
2014/01/21 职场文书
单位单身证明样本
2014/10/11 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2015年公司新年寄语
2014/12/08 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
诚信教育主题班会
2015/08/13 职场文书
python本地文件服务器实例教程
2021/05/02 Python
springboot入门 之profile设置方式
2022/04/04 Java/Android
Python Matplotlib绘制动画的代码详解
2022/05/30 Python