layui响应式：隐藏与显示

在指定宽度的屏幕显示或者隐藏某个元素；
1. 隐藏class类名：layui-hide-后缀
2. 显示class类名：layui-show-后缀

官方文档 · 地址：

https://www.layui.com/doc/base/element.html

1.1. 转化前：小尺寸，隐藏

1.2. 转化前：大尺寸，显示

2.1. 转化后：小尺寸，隐藏

2.2. 转化后：大尺寸，显示

案例 · 效果截图：

代码示例：

<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-primary layui-btn-xs layui-hide-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-danger layui-btn-xs layui-hide-xs" lay-event="del">删除</a><a class="layui-btn layui-btn-xs layui-hide-md" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;"><button class="layui-btn changebtn" data-type="parseTable">{L('collect')}: 立即转化为数据表格</button>
</div>
<!-- 表格 -->
<table lay-filter="aiticle-table-demo" lay-data="{width: 100%, height:auto, toolbar: '#toolbarDemo', page:true, limit: 5, limits:[5,10,15,20,25,30], id:'aiticle-table-demo'}" class="table"><thead><tr><th lay-data="{type:'checkbox', fixed: 'left'}" class="layui-hide-xs"></th><th lay-data="{width:60, field:'id', sort: true, fixed: true}" class="layui-hide-xs">ID</th><th lay-data="{width:100, field:'username'}" class="layui-hide-xs">作者</th><th lay-data="{ field:'sign', sort: true}">标题名称</th><th lay-data="{minWidth:150, field:'joinTime', sort: true}">添加时间</th><th lay-data="{minWidth: 150,align:'center', fixed: 'right', toolbar: '#barDemo'}">操作</th></tr> </thead><tbody>{pc:member  action="favoritelist" userid="$memberinfo['userid']" num="100" page="$page"}   {loop $data $k $v}<tr><td class="layui-hide-xs"></td><td class="layui-hide-xs">{$n}</td><td class="layui-hide-xs">默认</td><td><a href="{$v['url']}" target="_blank">{$v['title']}</a></td><td><em>{format::date($v['adddate'], 1)}</em></td><td><a href="index.php?m=member&c=index&a=favorite&id={$v['id']}">{L('delete')}</a></td></tr>{/loop}{$pages}{/pc}</tbody>
</table>

重要代码 · 使用说明：

只需要给指定DOM元素，增加对应的class类名后缀（如-xs \ -md \ -lg）即可;
使用如class="layui-hide-md"

注意bug：

注意bug：为什么转化后的表格不支持响应式控制隐藏或显示？？？
原因与分析；

以上就是关于“ layui响应式：隐藏与显示 ”的全部内容。

layui响应式：隐藏与显示（class 类名后缀）相关推荐

elementUI响应式隐藏元素
main.js中引入 import 'element-ui/lib/theme-chalk/display.css'; 使用类名 hidden-xs-only - 当视口在 xs 尺寸时隐藏 hidd ...
Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
为什么响应式（自适应）网站是一个坑
什么是自适应网站?其实自适应更专业的说法是响应式网站.在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版 ...
来看看优酷是如何测试 App 响应式布局的！
作者 | 阿里巴巴文娱技术刘丽琴头图 | CSDN 下载自东方IC 响应式布局是在屏幕尺寸发生变化时,APP的页面.组件按照规则进行动态自适应,实现一套代码兼容多尺寸终端设备.响应式技术应用在多 ...
WordPress 时光轴响应式Niconiconi主题
介绍: 文章缩略图显示 HTML5 语义标签和 CSS3 特效,兼容到 Chrome,firefox,IE7及以上自适应宽屏和响应式移动版显示文章特色图片清新单栏时光轴网盘下载地址: http ...
bootstrap不同分辨率显示滚动条_bootstrap基础快速入门-8 响应式显示与隐藏
大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解.有疑问留言交流哦. bootstrap是进阶html5很基础常用的前端框架,可以做自适应漂亮的界面 ...
vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）
项目涉及到的问题,按钮需要根据后端返回的参数情况,实现按钮的显示与隐藏. 效果如图: 1.查看后端接口 get请求,需要传businessId和compoCode两个参数,返回的data有数据就显示按 ...
elementUI响应式布局@media：基于断点的隐藏类
引言:elementUI的响应式布局: 参照了 Bootstrap 的响应式设计,预设了五个响应尺寸:xs.sm.md.lg 和 xl. 官方文档 · 说明参考: 响应式布局 · 文档说明基于断点 ...
显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...

layui响应式：隐藏与显示（class 类名后缀）

文章目录

layui响应式：隐藏与显示

官方文档 · 地址：

1.1. 转化前：小尺寸，隐藏

1.2. 转化前：大尺寸，显示

2.1. 转化后：小尺寸，隐藏

2.2. 转化后：大尺寸，显示

案例 · 效果截图：

代码示例：

重要代码 · 使用说明：

注意bug：

layui响应式：隐藏与显示（class 类名后缀）相关推荐

最新文章

热门文章