当前博客:08-快码FOF中文编程layui教学-类名:lay-隐藏

196 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

除了这些栅格类名之外,还有一些类名对响应式十分有用。

这些类名可以在不同屏幕大小改变元素的显示模式(display),例如:只在移动端显示的菜单按钮、移动端隐藏导航、只在大型屏幕显示广告,在不同屏幕显示不同尺寸的图片等等。

这些类名的组成是 : lay-屏幕 + 类型(大屏,中屏,小屏,超小屏) + 状态(显示,隐藏)+ 如果是显示,则要设置显示为什么显示模式(内联元素,块级元素,内联块元素)。

例如:lay-大屏隐藏、lay-大屏显示内联元素、lay-小屏显示块级元素等。

代码案例:

<区块 类名="lay-容器">
	<区块 类名="lay-栅格行">
		<区块 类名="lay-栅格中屏1 lay-栅格小屏2 lay-栅格超小屏6">
			<区块 类名="lay-红色背景">LOGO</区块>
		</区块>
		<区块 类名="lay-栅格中屏10 lay-栅格中屏偏移1 lay-栅格小屏9 lay-栅格小屏偏移1 lay-超小屏隐藏">
			<区块 类名="lay-红色背景">导航,在超小屏隐藏</区块>
		</区块>
		<区块 类名="lay-隐藏 lay-栅格超小屏2 lay-栅格超小屏偏移4 lay-超小屏显示内联元素">
			<区块 类名="lay-红色背景">菜单按钮</区块>
		</区块>
	</区块>
</区块>

代码效果展示图:

移动端效果:

点击此处跳转案例下载:点击下载lay-隐藏类名实例

 

08-快码FOF中文编程layui教学-类名:lay-隐藏