iView栅格的使用

一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统，将区域进行24等分

基础用法 实例代码：

<template>

　　<Row>

　　　　<Col span="12">col-12</Col>

　　</Row> <br>

　　 <Row>

　　　　 <Col span="8">col-8</Col>

　　</Row> <br>

　　<Row>

　　　　<Col span="6">col-6</Col>

　　</Row>

</template>

区块间隔

　　通过给 row 添加 gutter 属性，可以给下属的 col 添加间距，推荐使用 (16+8n)px 作为栅格间隔。

　　注意：在实际开发中需要给col里面的div加上背景颜色才能看出效果，如果是给col加背景则会看不出效果，因为间隔还是属于col的部分

　　　　　　　　　　　　　　　　　　　　　　　　效果图　

　　<Row :gutter="16">

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　　　<Col span="6">

　　　　　　<div>col-6</div>

　　　　</Col>

　　</Row>

栅格顺序(Flex)

　　通过 Flex（弹性布局）布局的order来改变栅格的顺序。

　　说明：这里是通过设置row的type为fiex,再通过设置col的order来设置它显示的顺序

　　　　　　　　　　　　　　　　　　　　效果图　　

　　<Row type="flex">

　　　　 <Col span="6" order="4">1 </Col>

　　　　<Col span="6" order="3">2</Col>

　　　　<Col span="6" order="2">3</Col>

　　　　<Col span="6" order="1">4</Col>

　　</Row>

　　除上面的方法还可以通过设置 push 和 pull 来改变栅格的顺序。 pull 拉（拉向前）栅格向左移动格数， push 推（推向后）栅格向右移动格数

　　<Row>

　　　　<Col span="18" push="6"> 推向后

　　　　　　qwert

　　　　</Col>

　　　　<Col span="6" pull="18"> 拉向前

　　　　　　asdfg

　　　　</Col>

　　</Row>

左右偏移

　　通过设置 offset属性，将列进行左右偏移设置，偏移栅格数为offset的值。

　　 offset栅格左侧的间隔格数

　　<Row>

　　　　<Col span="8">col-8</Col>

　　　　<Col span="8" offset="8">col-8 | offset-8</Col>

　　</Row> <br>

　　<Row>

　　　　<Col span="6" offset="8">col-6 | offset-8</Col>

　　　　<Col span="6" offset="4">col-6 | offset-4</Col>

　　</Row> <br>

　　<Row>

　　　　<Col span="12" offset="8">col-12 | offset-8</Col>

　　</Row>

Flex布局（弹性布局）

　　通过给row设置参数justify为不同的值，来定义子元素的排布方式。在flex模式下有效。

　　flex 布局的水平排列方式，可选值为start（向左排列）、end（向右排列）、center（居中排列）、space-around（等宽排列）、space-between（分散排列）

　　注：等宽排列和分散排列的区别是，分散排列会有左右两边的边距，等宽排列左右两边是紧靠父元素的

　　 <template>

　　　　 <p>子元素向左排列</p>

　　　　<Row type="flex" justify="start" class="code-row-bg">

　　　　　　 <Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素向右排列</p>

　　　　<Row type="flex" justify="end" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素居中排列</p>

　　　　<Row type="flex" justify="center" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素等宽排列</p>

　　　　<Row type="flex" justify="space-between" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　　　<p>子元素分散排列</p>

　　　　<Row type="flex" justify="space-around" class="code-row-bg">

　　　　　　<Col span="4">col-4</Col>

　　　　</Row>

　　</template>

Flex对齐

　　通过给row设置参数 align 为不同的值，来定义子元素在垂直方向上的排布方式。在flex模式下有效。

　　flex 布局下的垂直对齐方式，参数 align可选值为top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）

　　 <template>

　　　　　　<p>顶部对齐</p>

　　　　　　<Row type="flex" justify="center" align="top" class="code-row-bg">

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 80px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 30px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 100px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 60px">col-4</p>

　　　　　　　　</Col>

　　　　　　</Row>

　　　　　 <p>底部对齐</p>

　　　　　　<Row type="flex" justify="center" align="bottom" class="code-row-bg">

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 80px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 30px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 100px">col-4</p>

　　　　　　　　</Col>

　　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 60px">col-4</p>

　　　　　　　　</Col>

　　　　　</Row>

　　　　　<p>居中对齐</p>

　　　　　<Row type="flex" justify="center" align="middle" class="code-row-bg">

　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 80px">col-4</p>

　　　　　　　</Col>

　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 30px">col-4</p>

　　　　　　　</Col>

　　　　　　　<Col span="4">

　　　　　　　　　　<p style="height: 100px">col-4</p>

　　　　　　　</Col>

　　　　　　　<Col span="4">

　　　　　　　　　<p style="height: 60px">col-4</p>

　　　　　　　</Col>

　　　　　</Row>

　　　</template>

响应式布局

　　iview预设六个响应尺寸：xs sm md lg xl xxl

　　　　　　　　　　　　　　　　下面是lg宽度屏幕下的显示效果

　　<Row>

　　　　<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>

　　　　<Col :xs="20" :sm="16" :md="12" :lg="8">Col</Col>

　　　　<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>

　　</Row>

其它属性的响应式

　　span pull push offset order 属性可以通过内嵌到 xs sm md lg 属性中来使用。其中 :xs="6" 相当于 :xs="{ span: 6 }"。

　　　　　　　　　　　　　　　　下面是在lg宽度屏幕下的效果

　　要注意IView采用了24栅格系统，使用时它们的和，包括偏移（offset）加起来要等于24

　　<Row>

　　　　<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>

　　　　<Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>

　　　　<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>

　　</Row>

实例：

<div class="box-b">
　　<Row :gutter="16">
　　　　
　　　　
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　jquery
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KAKSHHGD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　</Row>
</div>

iView栅格的使用的更多相关文章

使用vue iview遇到的一些问题
使用阿里巴巴图标库下载代码这五个文件 iconfount.css 如果导入多个文件记得把@font-face复制到里面改成./路径 //main.js import './assets/font ...
vue+iview实现一行平均五列布局
iview 的栅格布局是以 html代码部分: <Row :gutter="20"> <Col style="float: left;width: 20 ...
vue、vuex、iview、vue-router报错集锦与爬坑记录
1.vue报错: 没安装 less-loader css-loader style-loader 可能的很大原因:没安装less 2.vuex报错:Computed property &qu ...
使用iview如何使左上的添加按钮和右上的搜索框和边框对齐
使用iview如何使左上的添加按钮和右上的搜索框和边框对齐呢? 效果如下: 使用iview自带的Grid 栅格进行布局,但是由于按钮和搜索框的大小不正好是一个栅格的宽度,所以不是很好跳转,且栅格也不支 ...
iView 实战系列教程(21课时)_4.iView 实战教程之布局篇（二）
https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码.Layout 组件比较简单,,里面一个slot Sider是最复杂的 ...
iView 实战系列教程(21课时)_3.iView 实战教程之布局篇（一）
Grid布局先了解一下iview的24栅格布局清理一下App.vue 然后从iview的color里面获取推荐的背景色我们先渲染栅格 24列,然后再讲解他是一个什么东西: 栅格外面row包裹的, ...
浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
bootstrap（关于栅格布局）
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

随机推荐

oracle ogg 单实例双向-新增表，修改表结构（oracle-oracle
--新增inset测试--dept 表结构orcl,ogg都存在,数据相同(但是rep1配置文件没有添加) SCOTT@ orcl ,'hongquan','BBA'); row created. S ...
SpringCloud:(一)服务注册与发现
最近跟着方志明老师学习SpringCloud,博客地址如下: https://blog.csdn.net/forezp/article/details/81040925 自己也跟着撸了一遍,纸上得来终 ...
nginx+memcached缓存图片
1.nginx的配置如下: location ^~ /images/ { set $memcached_key "$uri"; #用URI作为key去memcached中 ...
使用powershell管理Docker Toolbox
打开PowerShell,输入: docker-machine ls 我们可以看到我们当前的Docker虚拟机的状态.如果什么都没有的话,那么我们可以使用以下命令创建一个Docker虚拟机. dock ...
HTTPS测试
1.首先理解HTTPS的含义,清楚http与HTTPS的区别 2.相对于http而言,https更加安全,因 3.使用数字证书使传输更安全,数字证书使用keytool工具生成测试准备: 创建公钥和秘 ...
python 并发编程多进程互斥锁与join区别
互斥锁与join 互斥锁和join都可以把并发变成串行以下代码是用join实现串行 from multiprocessing import Process import time import js ...
APP登录时Token认证过程
1.App登录Token登录机制: 一般第一次安装App后,会让你进行注册后登录,而只要登录成功后,以后的每次启动App都是登录状态, 不需要每次启动时再登录.但有些App你若长期没有启动,它会提示你 ...
Delphi7所使用的WinAPI大全（摘自VCL源码，一共1200个函数）
经过我整理的,去掉了A和W的重复.虽然没写注释,但以后要一个一个研究.有这些WINAPI就够用了. kernel32 = 'kernel32.dll'; gdi32 = 'gdi32.dll'; us ...
css兼容问题收集+部分效果收集+css重置
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
go & flag
参考 Golang下的flag模块使用 Go基础篇[第6篇]: 内置库模块 flag

iView栅格的使用

iView栅格的使用的更多相关文章

随机推荐

热门专题