基于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 相关文章推荐
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Openlayers实现地图的基本操作
Sep 28 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
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
document.getElementById介绍
2011/09/13 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python实现logistic分类算法代码
2020/02/28 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
自强之星事迹材料
2014/05/12 职场文书
2014年化验室工作总结
2014/11/21 职场文书
学生会招新宣传语
2015/07/13 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL