15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

layui布局和栅格系统

闫志林| 发布于 2021-11-30 19:01:57| 566阅读| 0点赞| 0评论
举报

Layui入门

栅格系统
栅格系统是一种布局方案,在 Layui 中一行最多分为 12 个栅格支持移动手机、平板、中型和大型 PC 桌面的适配处理,方便响应式切换.
定义栅格系统最外层 div 设置 class 为:.layui-container 行的定义 div 设置 class 为:.layui-row,为了方便测试,可以加上背景色;

<div class="layui-container">
<div class="layui-row">
1
div>
div>

如果我们想在这一行中,设置三个列可以使用 class 为:.layui-col-md4;

<div class="layui-row">
<div class="layui-col-md4">1div> //每列占一行4/12
<div class="layui-col-md4">2div> 
<div class="layui-col-md4">3div>
div>

*号代表1-12 等分 layui-col-xs*(超小屏幕)

 layui-col-sm* (小屏幕)

 layui-col-md*  (中等)

layui-col-lg*(大)
6. 除了固定大小的布局容器之外,还有 100%流体布局.layui-fluid;

"layui-fluid"> ...

可以使用:layui-col-space*(1-30)设置间距

<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-sm4">
<div class="layui-bg-blue a">1div>
div>
<div class="layui-col-sm4">
<div class="layui-bg-orange a">2div>
div>
<div class="layui-col-sm4">
<div class="layui-bg-green a">3div>
div>
div>
div>

栅格位一行只有 12 列,需要计算好,超过后就会导致换行

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

闫志林
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部