elementUI 学习入门之 layout 布局

layout 布局

  通过基础的 24 分栏,可进行快速布局

  基础布局

    使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小

    <el-col :span="8"></el-col>
elementUI 学习入门之 layout 布局
1 <el-row>
2   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
4   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
5 </el-row>
基础分栏

  分栏间隔

    row 组件提供 gutter 属性指定每栏之间的间隔,默认为0

    <el-row :gutter="10"></el-row>

  混合布局

    根据指定 span 属性值大小不同,每栏大小不一样进行混合布局

elementUI 学习入门之 layout 布局
1 <el-row :gutter="20">
2   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
4   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
5   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
6 </el-row>
混合布局

  分栏偏移

    通过指定 el-col 组件中 属性 offset 的值对每栏进行偏移控制。eg:offset="6" ,使其向右偏移 6 栏大小

    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

  对齐方式

    将 row 组件中的 type 属性赋值为 flex,并通过 justify 属性指定 start、center、end、space-between、space-around 其中的值来定义子元素的排版

elementUI 学习入门之 layout 布局
 1 <el-row type="flex" class="row-bg">
 2   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 3   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 4   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 5 </el-row>
 6 <el-row type="flex" class="row-bg" justify="center">
 7   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 8   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 9   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
10 </el-row>
11 <el-row type="flex" class="row-bg" justify="end">
12   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
13   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
14   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
15 </el-row>
16 <el-row type="flex" class="row-bg" justify="space-between">
17   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
18   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
19   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
20 </el-row>
21 <el-row type="flex" class="row-bg" justify="space-around">
22   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
23   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
24   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
25 </el-row>
对齐方式

    样式显示为:

    elementUI 学习入门之 layout 布局

  响应式布局

    参照 bootstrap 的响应式设计,预设了五个响应尺寸,xs、sm、md、lg、xl。当显示大小 从最小到最大时,响应依次为 xs、sm、md、lg、xl

elementUI 学习入门之 layout 布局
1 <el-row :gutter="10">
2   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
4   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
5   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
6 </el-row>
响应式布局

 

其中用到的样式为(不包括响应式布局样式):

elementUI 学习入门之 layout 布局
 1 <style>
 2   .el-row {
 3     margin-bottom: 20px;
 4     &:last-child {
 5       margin-bottom: 0;
 6     }
 7   }
 8   .el-col {
 9     border-radius: 4px;
10   }
11   .bg-purple-dark {
12     background: #99a9bf;
13   }
14   .bg-purple {
15     background: #d3dce6;
16   }
17   .bg-purple-light {
18     background: #e5e9f2;
19   }
20   .grid-content {
21     border-radius: 4px;
22     min-height: 36px;
23   }
24   .row-bg {
25     padding: 10px 0;
26     background-color: #f9fafc;
27   }
28 </style>
样式

 

详细参数说明 :

    elementUI 学习入门之 layout 布局

elementUI 学习入门之 layout 布局

 

 

  

上一篇:Bootstrap03


下一篇:Python3 tkinter基础 Button bg 按钮的背景颜色