layUI布局使用教程
layui特点
(1)layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果.
(2)layui是提供给后端开发人员的ui框架,基于DOM驱动.
layui的使用
引入layui的核心css文件
<link rel="stylesheet" type="text/css" href="layui.css文件路径" rel="external nofollow" >
引入layui的hexinjs文件(模块化引入)
<script src="layui.js文件路径" type="text/javascript"></script>
1.页面元素
1.1布局
1.1.布局容器
1.1.1固定宽度（两侧有留白效果）
将栅格放入一个带有class="layui-container"的特定容器中,以便在小屏幕以上的设备中固定宽度,让列可控.
<div class="layui-container" style="background-color:navajowhite;height:300px"> 固定宽度 <div>
1.1.2完整宽度(占据屏幕宽度的100%)
可以不固定容器宽度,让栅格或其它元素放入一个带有class="layui-fluid"的容器中,那么宽度将不会固定,而是100%适应.
<div class="layui-fluid" style="background-color : cyan; height:300px"> 完整宽度 </div>
1.2.栅格系统
为了丰富网页布局,简化HTML/CSS代码的耦合,并提升多终端的适配能力,layui引进了一套具备响应式能力的栅格系统.将容器进行了12等分,预设了4*12种CSS排列类,他们在移动设备、平板、桌面上/大尺寸四种不同的屏幕下发挥着各自的作用.
1.2.1栅格布局规划
1.采用 layui-row 来定义行,如:
<div class="layui-row"></div>
2.采用类似layui-col-md*这种的预设类来定义一组列(column),且放在行(row)内.其中:
- 变量md代表的是不同屏幕下的标记
- 变量*代表的是该列所占用的12等分数(如6/12),可选值为1-12
- 如果多个列的"等分数值"总和等于12,则刚好满行排列,如果大于12,多余的列将自动另起一行.
3.列可以同时出翔最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕).
4.可对列追加类似layui-col-space5、layui=col-md-offset3这样的预设类来定义列的间距和偏移.
5.可以在列(column)元素中放入你自己的任意元素填充内容.
<!--
栅格系统
列组合
1.定义行 .layui-row
2.定义列 .layui-col-md*
md表示不同屏幕的标识(xs(超小屏幕,如手机),sm(小屏幕,如平板),md(桌面中等屏幕),lg(桌面大型屏幕))
*列的数量
3.每一行被均分为12列,列的总数不能超过12,否则会自动换行
4.响应式规则
栅格会自动根据屏幕的分辨率选择对应的样式效果.
列间距
.layui-col-space*
*代表的是px值(1-30)
列偏移
将列向右偏移指定列数
.*layui-col-md-offset*
*代表的是列数
列嵌套
列之前可以无限嵌套列
-->
<!-- 布局容器 -->
<div class="layui-container">
<!-- 定义行 -->
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md5" style="background-color:cyan">内容5/12</div>
<div class="layui-col-md7" style="background-color:burlywood">内容7/12</div>
</div>
</div>1.2.2响应式规则
栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕进行相应的配置处理.
| 超小屏幕(手机<7686px) | 小屏幕(平板>=768px) | 中等屏幕(桌面>=992px) | 大型屏幕(桌面>=1200px) | |
|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px |
| 标记 | xs | sm | md | lg |
| 列对应类*为1-12的等分数值 | layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| 总列数 | 12 | 12 | 12 | 12 |
| 响应行为 | 始终按设置的比例水平排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 |
<!-- 响应式规则 -->
<div class="layui-row">
<div class="layui-col-md4 layui-col-sm6" style="background-color: #009688">平板>=768px 6/12| 桌面端>=992px 4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-md8 layui-col-xs12" style="background-color: #009688">手机<768px 12/12| 桌面端>=992px 6/12
</div>
</div>
1.2.3列间距
通过"列间距"的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距.列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度.我们结合网页常用的边距,预设了12种不同尺寸的边距,分别是:
/*支持列之间为 1px-30px区间的所有双数间隔, 以及1px 5px 15px 25px的单数间隔*/
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
<!-- 列边距 -->
<h3>列边距</h3>
<div class="layui-row layui-col-space10">
<!-- 定义列 -->
<div class="layui-col-md6">
<div style="background-color:gray">内容6/12</div>
</div>
<div class="layui-col-md6">
<div style="background-color:navajowhite">内容6/12</div>
</div>
</div>注:
1.layui-col-space:设置后不起作用主要是因为设置的是padding,也就是说向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样.可以在里面再加一个div,来达到目的.
2.间距一般不高于30px,如果超过30,建议使用列偏移.
1.2.4列偏移
对列追加 类似 layui-col-md-offset * 的预设类,从而让列向右偏移.其中 * 号代表偏移占据的列数,可选中为1-12.
如:layui-col-md-offset3,即代表在"中型桌面屏幕下",让该列向右偏移3个列宽度.
<!-- 列偏移 -->
<h3>列偏移</h3>
<div class="layui-row">
<!-- 定义列 -->
<div class="layui-col-md4">
<div style="background-color:yellowgreen">内容4/12</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color:deeppink">内容4/12,向右移动四列</div>
</div>
</div>注:列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列.
1.2.5列嵌套
可以对栅格进行无穷层次的嵌套.在列元素 (layui-col-md*) 中插入行元素 (layui-row) ,即可完成嵌套.
<!-- 列嵌套 -->
<h3>列嵌套</h3>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6" style="background-color:blueviolet">
<div class="layui-row">
<div class="layui-col-md4" style="background-color:red">内容4/12</div>
<div class="layui-col-md6" style="background-color:blue">内容8/12</div>
<div class="layui-col-md2">内部列</div>
</div>
</div>
</div>到此这篇关于layUI布局使用教程的文章就介绍到这了,更多相关layUI布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
众所周知javascript语言中只提供了几种基本类型的数据类型,而二叉树是一种数据结构,在一些查询等操作中能提供较好的性能,这篇文章主要给大家介绍了关于利用JS实现二叉树遍历算法的相关资料,需要的朋友可以参考下2021-11-11
javascript实现TreeView 无刷新展开的实例代码
这篇文章介绍了javascript实现TreeView 无刷新展开的实例代码，有需要的朋友可以参考一下2013-07-07
本文主要分享了利用canvas如何绘制圆形时钟的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了bootstrap栅格系统示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
浏览器页面的区域大小如何获取，在本有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要介绍了uniapp小程序之配置首页搜索框,我们介绍一下本次开发使用的是uniapp，本次分享内容的搜索框为禁止输入搜索框，点击跳转专属搜索页面，需要的朋友可以参考下2022-09-09
为Javascript中的String对象添加去除左右空格的方法(示例代码)
这篇文章主要介绍了为Javascript中的String对象添加去除左右空格的方法(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
javascript中Number对象的toString()方法分析
这篇文章主要介绍了javascript中Number对象的toString()方法,较为详细的分析了toString()方法的用法及注意事项,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了微信小程序实现轮播图指示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
原理是分段加载图片，主要用于大型网站节省带宽，可是他们提供的东西压缩混淆看不清，还有的要基于什么雅虎的什么库，总之是很麻烦的，JQ的控件倒是够清晰了，只是还是没有达到节省网络带宽的效果2010-03-03
最新评论