layout 布局

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

  基础布局

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

    <el-col :span="8"></el-col>
 <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>

基础分栏

  分栏间隔

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

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

  混合布局

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

 <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-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 其中的值来定义子元素的排版

 <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>

对齐方式

    样式显示为:

    

  响应式布局

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

 <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>

响应式布局

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

 <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;
}
</style>

样式

详细参数说明 :

  

elementUI 学习入门之 layout 布局的更多相关文章

  1. elementUI 学习入门之 container 布局容器

    Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el- ...

  2. Qt入门-layout布局

    开发一个图形界面应用程序,界面的布局影响到界面的美观.在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小.纵横比例.分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这 ...

  3. elementUI 学习入门之 Select 选择器

    Select 选择器 基础用法 <el-select v-model="val1" placeholder="请输入"> <el-option ...

  4. elementUI 学习入门之 inputNumber 计数器

    InputNumber 计数器 基础用法 <el-input-number v-model="num2"></el-input-number> v-mode ...

  5. elementUI 学习入门之 input 输入框

    基础用法 <el-input v-model="input1" palcehoder="请输入"></el-input> var Mai ...

  6. elementUI 学习入门之 checkbox 复选框

    CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...

  7. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  8. elementUI 学习入门之 Button 按钮

    基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: <el-button plain>朴素按钮</el-button& ...

  9. Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

随机推荐

  1. C——没有bool的C语言?

    bool static my_var_initialized = false; 偶然写出了这样一句C代码,环境是visual studio 2012,工程是Compile as C的,竟然报了好几个错 ...

  2. 树莓派安装Transmission-daemon出现的问题

    1,安装时发现默认的源里面没有transmission-daemon包 pi@fynn:/etc/apt/sources.list.d $ sudo apt-get install transmiss ...

  3. oracle数据库的TNS配置

    TNS简要介绍与应用 Oracle中TNS的完整定义:transparence Network Substrate透明网络底层,监听服务是它重要的一部分,不是全部,不要把TNS当作只是监听器. TNS ...

  4. 关闭并且禁用ECSHOP缓存

    ECSHOP的缓存机制从一定程度上可以减少ECSHOP反复读取数据库的几率,从而一定程度上降低服务器负担,提高访问速度.但是启用缓存机制,对一些新手站长也有不利的地方.我就遇到很多新手站长经常问,我明 ...

  5. 逆向project第004篇:令计算器程序显示汉字(下)

    一.前言 钩子技术是一项很有有用价值的技术.在Windows下HOOK技术的方法比較多,使用比較灵活,常见的应用层的HOOK方法有Inline HOOK(详见<反病毒攻防研究第012篇:利用In ...

  6. ASP.NET中Partial Class部分类

    原文:ASP.NET中Partial Class部分类 如果您在开发项目的公用函数库,用于公用函数库的内容越丰富越好,但这不可能一下子就写好,需要一点一点的积累,这时就可以使用Partial Clas ...

  7. Linux/Android多点触摸协议

    链接点击打开链接 关于Linux多点触摸协议大家可以参考kernel中的文档:https://www.kernel.org/doc/Documentation/input/multi-touch-pr ...

  8. JVM平台上的响应式流(Reactive Streams)规范

    // Reactive Streams // 响应式流是一个倡议,用来为具有非阻塞后压的异步流处理提供一个标准.大家努力的目标集中在运行时环境(JVM和JavaScript)和网络协议上. 注:响应式 ...

  9. MySQL字段操作与数据处理

    一,对字段的操作 1.拼接字段:Concat()函数 多数DBMS使用 + 或者 || 来实现拼接,而MySQL使用 Concat() 函数来实现拼接. 实例: Concat()函数拼接时加上的字符需 ...

  10. 浅谈jQuery的promise

    jquery中的Promise,也就是我们所知道的Deferred对象. 举例1: var data=""; function runAsync(){ var def = $.De ...