ElementUI 组件：Layout布局（el-row、el-col）

ElementUI安装与使用指南

Layout布局

点击下载learnelementuispringboot项目源码

效果图

el-row_el-col.vue页面效果图

项目里el-row_el-col.vue代码

<script>
export default {
  name:'el-row_el-col 布局'
}

</script>

<template>
  <div class="root">
    <h1>Layout 布局</h1>
    <h4>通过基础的 24 分栏，迅速简便地创建布局。</h4>
    <h2>一、基础布局</h2>
    <h5>使用单一分栏创建基础的栅格布局。</h5>
    <h5>通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。</h5>
    <p>
      el-row的gutter属性：	栅格间隔； 默认值0；
      <br/>
      el-col的span属性：	栅格占据的列数，默认值24；
    </p>
<!--
   <el-row :gutter="10">
      <el-col span="32" :span="8"> <div></div></el-col>  8/32 即此div显示宽度为1/4
    </el-row>

-->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <h2>二、分栏间隔</h2>
    <h5>分栏之间存在间隔。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。</h5>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <h2>三、混合布局</h2>
    <h5>通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。</h5>
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <h2>四、分栏偏移</h2>
    <h5>支持偏移指定的栏数。通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。</h5>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <h2>五、对齐方式</h2>
    <h5>通过 flex 布局来对分栏进行灵活的对齐。</h5>
    <p>将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。</p>
    <el-row type="flex" class="row-bg">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <h2>六、响应式布局</h2>
    <h5>参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。</h5>
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <h2>基于断点的隐藏类</h2>
    <p>
      Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件
      import 'element-ui/lib/theme-chalk/display.css';
    </p>
    <h4>包含的类名及其含义为：</h4>
    <ul id="ulist">
      <li>hidden-xs-only - 当视口在 xs 尺寸时隐藏</li>
      <li>hidden-sm-only - 当视口在 sm 尺寸时隐藏</li>
      <li>hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏</li>
      <li>hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏</li>
      <li>hidden-md-only - 当视口在 md 尺寸时隐藏</li>
      <li>hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏</li>
      <li>hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏</li>
      <li>hidden-lg-only - 当视口在 lg 尺寸时隐藏</li>
      <li>hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏</li>
      <li>hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏</li>
      <li>hidden-xl-only - 当视口在 xl 尺寸时隐藏</li>
    </ul>


  </div>

</template>

<style>

  .el-row{
    margin-bottom: 20px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .root{
    margin-left: 300px;
    margin-right: 300px;
  }

  #ulist{
    padding: 0;
    margin: 0;
    //list-style-type: none;
  }

  #ulist li{
    //float: left;
    text-align: left;
  }

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

el-row属性简介

el-col属性简介

欢迎关注我的公众号，不定期推送优质的文章，
微信扫一扫下方二维码即可关注。