layUI学习记录------列间距

本人第一次写博客,只为记录自己的学习日常。最近在自学layUI,我把其中自己遇到的问题记录下来,希望能帮到和我一样初学layUI的朋友。如果谁有更好的学习资料欢迎分享出来,供大家一起学习。本文都是我的一些碎碎念,有不足之处欢迎指正,不喜勿喷。

列间距:通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
layui-col-space1 列之间间隔 1px
layui-col-space3 列之间间隔 3px
layui-col-space5 列之间间隔 5px
layui-col-space8 列之间间隔 8px
layui-col-space10 列之间间隔 10px
layui-col-space12 列之间间隔 12px
layui-col-space15 列之间间隔 15px
layui-col-space18 列之间间隔 18px
layui-col-space20 列之间间隔 20px
layui-col-space22 列之间间隔 22px
layui-col-space28 列之间间隔 28px
layui-col-space30 列之间间隔 30px
(以上粘自layUI文档)

<div class="layui-row layui-col-space10">
  <div class="layui-col-md4 bg">
    1/3
  </div>
  <div class="layui-col-md4 bg">
    1/3
  </div>
  <div class="layui-col-md4 bg">
    1/3
  </div>
</div>

我按照以上代码编写却怎么也显示不出列间距,只改变div的高度
没有间隔查阅资料后,在layui-col-md4下又加了一层div就出来效果了

<div class="layui-row layui-col-space10">
			<div class="layui-col-md4">
				<!-- 需要在layui-col-md4下再加一层div列间距有效 -->
				<div class="bg">1/3</div>
			</div>
			<div class="layui-col-md4">
				<div class="bg">1/3</div>
			</div>
			<div class="layui-col-md4">
				<div class="bg">1/3</div>
			</div>
		</div>

效果图如下:

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Layui中,通过使用`layui-openTab`类可以实现打开选项卡的功能。该类可以应用于HTML元素中,例如使用`layui-openTab`类的按钮。此外,你还可以通过使用`layui-tab`组件来创建包含选项卡的容器,并使用`layui-tab-title`和`layui-tab-item`来定义选项卡的标题和内容。其中,通过为选项卡指定不同的类名来显示不同的选项卡内容。例如,在HTML代码中可以这样定义选项卡: ```html <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> ``` 在上述代码中,通过添加`layui-this`类名来指定默认显示的选项卡,即"网站设置"选项卡。通过切换`layui-tab-item`元素的类名来切换显示不同的选项卡内容。 另外,如果你想对选项卡进行样式调整,可以使用`layui-row`和`layui-col-*`类来定义选项卡的布局。例如,可以使用下面的代码来定义不同屏幕大小下选项卡的数和间距: ```html <h2>平板、桌面端的不同表现</h2> <div class="layui-row"> <div class="layui-col-sm3 layui-col-md6 layui-bg-red">(平板≥768px):3/12 | (桌面≥992px):6/12</div> </div> <div class="layui-row"> <div class="layui-col-sm6 layui-col-md10 layui-bg-orange">(平板≥768px):6/12 | (桌面≥992px):10/12</div> </div> <div class="layui-row"> <div class="layui-col-sm4 layui-col-md3 layui-bg-blue">(平板≥768px):4/12 | (桌面≥992px):3/12</div> </div> ``` 上述代码中,通过将选项卡内容包裹在`layui-row`和`layui-col-*`的元素中,可以设置不同的数和间距。 最后,如果你想创建一个按钮组,可以将按钮放入一个`layui-btn-group`元素中。例如,可以使用下面的代码来创建一个包含多个按钮的按钮组: ```html <div class="layui-btn-group"> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 编辑 </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 分享 </button> <button class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-font-16"></i> 删除 </button> </div> ``` 上述代码中,通过添加`layui-btn-group`类名来将多个按钮组合成一个按钮组。 希望以上的解释对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值