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

---

---

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>

---

重要代码 · 使用说明：

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

注意bug：

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

---

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