Layui框架：layui的格栅布局规则

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

躺平的赶海人

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

阅读量3.5k

点赞数 1

分类专栏： layUI

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

版权

layui 栅格系统响应式布局列间距列偏移

关键词由CSDN通过智能技术生成

layUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、划分layui区域

layui-container：layui框架的容器，作用类似于flex布局的容器。
```
<div class="layui-container">
    // 在网页上划分一个区域，该区域专门使用layui的布局模块
</div>
```
在layui框架中，任何行上方不允许存在浮动元素。

1.1、Layui的列元素

先使用class="layui-container"在网页上划分出一个区域，该区域专门使用layui的布局模块。
Layui框架中采用class="layui-row"去在layui的布局模块中新建一个行，然后使用layui-col这样的预设类来定义一组列(column)，并且放在行内。
layui-col的后面还需要跟上两组参数，具体格式如下：
layui-col-媒体类型+列所占的宽度比例：
媒体类型：分别是xs(超小屏幕，如手机)、sm(小屏幕，如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)，以呈现更加灵活的布局。
列所占的宽度比例：代表的是该列所占用的12等分，可选值为1~12，如果多个列的“等分数值”总和等于12，则刚好满行排列，如果大于12，多余的将自动另起一行。

<!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-md9" style="background-color: #009688;">
		      12份中占9份
		  </div>
		   <div class="layui-col-md3" style="background-color: #00FF00;">
		      12份中占3份
		   </div>
		  </div>
		</div>
	</body>
</html>

1.2、定义layui区域不同设备的列布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用 栅格布局</title>
        <link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
        <script type="text/javascript" src="layui-v2.6.8/layui/layui.js"></script>
		<style type="text/css">
          /* .layui-container {
                height: 50vh;
                border: 1px solid #ccc;
            } */
          /*  .layui-row > div {
                height: 50px;
                line-height: 50px;
                background: slateblue;
            } */
        </style>
    </head>

    <body>
        <div class="layui-container">
            <div class="layui-row">
                <!--中等桌面屏幕一行排列 | 平板屏幕两行排列-->
                <!-- <div class="layui-col-md3 layui-col-sm6" style="background-color: #009688;">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6" style="background-color: #009688;">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6" style="background-color: #00F7DE;">数据内容</div>
                <div class="layui-col-md3 layui-col-sm6" style="background-color: #01AAED;">数据内容</div>
  -->         
				<div class="layui-col-sm3" style="background-color: #009688;">beijing</div>
                <div class="layui-col-sm3" style="background-color: #00F7DE;">shanghai</div>
               <div class="layui-col-sm3" style="background-color: #009688;">beijing</div>
               <div class="layui-col-sm3" style="background-color: #01AAED;">shanghai</div>           
			</div>
        </div>
    </body>
</html>

效果如下图所示:

1.3、layui容器区域内元素的显示类型的变化

元素的宽度，列数，显示类型等变化都是基于响应式网站设计理念而来，之所以UI框架加入这一特性，目的是为了能够使UI框架的适用范围更大。
显示为块元素：
```
layui-show-md-block
```
显示为行内元素：
```
layui-show-md-inline
```
显示为行内块元素：
```
layui-show-md-inline-block
```
元素消失：
```
layui-hide-md
```
1.4、layui-col-space列间距：容器区域内多列内容之间的间距设置

格式：
layui-col-space$ $为数字，代表每一列内容的间距，从本质上讲：这个间距是加在了每一个layui-col的左右内边距上的像素。
```
       <div class="layui-container"> 
		  <div class="layui-row layui-col-space10">
		    <div class="layui-col-sm4">
		      <div class='dem'>内容</div>
		      </div>
		      <div class="layui-col-sm4">
		      <div class='dem'>内容</div>
		      </div>
		      <div class="layui-col-sm4">
		      <div class='dem'>内容</div>
		    </div>
		  </div>
		</div>
```
1.4、layui-col-屏幕类型-offset$：列偏移，Layui容器区域内的某一列向右偏移列数

格式：
layui-col-屏幕类型-offset$$为数字，代表该列内容距离左边内容的偏移的列数
如果列宽+列偏移 > 12，那么自动换行，换到下一行的列如果具备偏移的性质，那么该偏移会依旧生效。

<div class="layui-container">
	<div class="layui-row">
		<div class="layui-col-sm4 " style="background-color: #00F7DE">法国</div>
		<div class="layui-col-sm4 layui-col-sm-offset8" style="background-color: #01AAED">偏移8</div>
		</div>
</div>

效果如下：