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),不过在行的外层还需 ...

随机推荐

Java使用JDBC连接Hive
最近一段时间,处理过一个问题,那就是hive jdbc的连接问题,其实也不是大问题,就是url写的不对,导致无法连接.问题在于HiveServer2增加了别的安全验证,导致正常的情况下,传递的参数无法 ...
Python学习之==>常用字符串方法
1.常用字符串方法 a = '\n 字符串 \n\n' b = a.strip() # 默认去掉字符串两边的空格和换行符 c = a.lstrip() # 默认去掉字符串左边的空格和换行符 d = ...
我在DBGridEh增加一栏复选框及对应操作的解决方案
最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...
golang error (slice of unaddressable value)
使用 Golang 将生成的 md5 转化为 string 的过程出现如下编译错误: 错误解析: 值得注意的一点是 func Sum(data []byte) [Size]byte 这个函数返回的 ...
【扩展事件】跟踪超过3秒的SQL
msdn 扩展事件:点击打开链接转自:https://blog.csdn.net/yenange/article/details/52592814 -- 删除事件会话 IF EXISTS(SELEC ...
STM32 晶振系统时钟8MHZ和72Mhz的原因
首先问题描述: 1.自己画的板子和淘宝买的最小系统板系统时钟不一致,自己画的是8Mhz,HSE失败:最小系统板72Mhz 2.最小系统板在程序1运行仿真的时候,查看peripherals->P ...
（二）inlineCallbacks，同步方式写异步代码
一. 上篇提到了用defered对象注册回调的方式,来处理异步操作,这样大家都知道,实际情况代码很难搞的.因为当业务逻辑复杂后,这边一个异步操作,我们注册一个回调,代码跳到A地方,A里面也有异步操作, ...
activemq高可用
这里是基于 zookeeper 选举方式实现的集群配置,服务器过半数才可提供服务,所以是2n+1台这里以三台为例. 只有master节点能提供服务,slave节点无法提供服务,只有当master节点挂 ...
mysql支持的存储引擎
1.InnoDB 存储引擎支持事务,其设计目标主要面向联机事务处理(OLTP)的应用.其特点是行锁设计.支持外键,并支持类似 Oracle 的非锁定读,即默认读取操作不会产生锁. 从 MySQL 5 ...
前端开发HTML&CSS入门——具体是做什么的
软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...

iView栅格的使用

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

随机推荐

热门专题