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

随机推荐

三：flask-配置文件的两种方式
项目中,配置的参数一般采用配置文件的形式,方便统一管理第一种方式:模块的形式:使用app.config.from_object(config)的方式加载配置文件,此方式需要导入配置文件视为模块第二 ...
SPA（single page application）
一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容 ...
【ABAP系列】SAP ABAP MIR7预制凭证BAPI
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP MIR7预制凭 ...
angulart 常用
angular: 使用 echarts npm install echarts --save // 安装declare const echarts: any; // 引入https://www.ech ...
[Git] 025 标签命令
0. 前言小时候看<剑花-烟雨-江南>,惊讶于那个多重身份的"小侯爷" 后来发现,现实中拥有比小侯爷更多身份的人多如牛毛其实,在 "Git" 中 ...
Nginx 的root和 alias
nginx是通过alias设置虚拟目录,在nginx的配置中,alias目录和root目录是有区别的:1)alias指定的目录是准确的,即location匹配访问的path目录下的文件直接是在alia ...
P1162填涂颜色
这还是一个搜索题,难度较低,但我提交第三次才AC.. 观察0地图左上角的上面和左面都是一,所以先把他找粗来,然后设成start,然后dfs找到与他联通的块,涂成2即可.再说一下自己犯的低级错误:1.当 ...
Python 入门之推导式
Python 入门之推导式推导式就是构建比较有规律的列表,生成器,字典等一种简便的方式 1.推导式 (1)列表推导式 : <1> 普通循环: [变量 for循环] print([i f ...
jmeter性能测试抛除工具用命令测试的方法
1.我们有时会遇到那种图片或文件大的传输数据,容易将jmeter测试工具卡死,这个时候就需要抛除测试工具,直接用命令进行测试(window和linux都适用) 2.首先在jmeter工具上把性能测试脚 ...
同步锁 synchronized
package ba; public class Tongbu implements Runnable{ int i=100; public void run(){ while(true){ sell ...

iView栅格的使用

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

随机推荐

热门专题