Layui布局总结：容器和栅格系统

最新推荐文章于 2024-08-26 20:25:07 发布

躺平的赶海人

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量458

点赞数 1

分类专栏： layUI 文章标签： layui html

本文链接：https://blog.csdn.net/anzhenxi3529/article/details/120796694

版权

layUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

总览

布局容器

1.固定宽度（两侧有留白效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局容器</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
		<!-- <script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="UTF-8"></script> -->

	</head>
	<body>
		
		<!-- 
		    栅格系统
		        1、定义行 .layui-row
		        2、定义列 .layui-col-md*
		            md 表示不同屏幕的标识（xs、sm、md、lg）
		            * 表示列的数量
		 -->
		<!-- 布局容器 -->
		<div class="layui-container" style="background-color: #00F7DE;height: 100px;">
		    固定宽度(两侧留有空白效果) - 进击的赶海人
		</div>

	</body>
</html>

图示效果如下：

2.完整宽度（占据屏幕宽度的100%）

<div class="layui-fluid" style="background-color: #00F7DE;height: 100px;">
	固定宽度(完整宽度) - 进击的赶海人
</div>

栅格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<link rel="stylesheet" href="text/css" href="layui-v2.6.8/layui/css/layui.css">
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md4" style="background-color: #009688;">
					4/12内容
				</div>
				<div class="layui-col-md4" style="background-color: #00F7DE;">
					4/12内容
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md5" style="background-color: #00FF00;">
					5/12内容
				</div>
				<div class="layui-col-md7" style="background-color: #00FF00;">
					7/12内容
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md6" style="background-color: #000000;">
					6/12内容
				</div>
				<div class="layui-col-md6" style="background-color: #01AAED;">
					6/12内容
				</div>
			</div>
		</div>
	</body>
</html>

<h3>平板桌面端的不同</h3>
<div class="layui-row">
    <div class="layui-col-sm4 layui-col-md5" style="background-color: #009688;">
	    平板>=768px: 4/12 | 桌面端>=992px: 5/12
    </div>
</div>
<div class="layui-row">
	<div class="layui-col-sm6 layui-col-md5" style="background-color: #00FFFF;">
			平板>=768px: 6/12 | 桌面端>=992px: 5/12
	</div>
</div>