iView 实战系列教程(21课时)_3.iView 实战教程之布局篇(一)
Grid布局
先了解一下iview的24栅格布局
清理一下App.vue
然后从iview的color里面获取推荐的背景色
我们先渲染栅格 24列,然后再讲解他是一个什么东西:
栅格外面row包裹的,里面是一个Col组件
使用v-for循环24列,类一列里面用Card
Grid布局就是将整个页面等宽度的划分为了24列,可以解决业务中大部分的布局问题。
只要col的span的值相加等于24就可以
我们写一个两列的布局,两列分别值为12,加起来就是24
如果说内容大于了24怎么办?
超出的部分自动换行了。
我们在列和列之间加空隙:
空隙为16宽度
Gutter的值建议是 16+8*n这样排列:就是8的倍数
Gutter是16或者32是比较好的
里面做一个嵌套,grid布局是可以无限嵌套的
某一列随着浏览器的滚动,能够固定在某一个位置:
展示的效果。我们希望右侧的部分随着浏览器的滚动,能够悬停
当前两部分都是随着滚动条 网上走的
现在我们就需要固定右边的列,
可以单独给右边的card加css position:fixs
但是我们尽可能少使用css打到我们想要的效果。
我们把他嵌套在affix标签内
顶部有个header的导航条。滚动的时候会吸在导航条的一个位置悬停
悬停会盖住导航条
导航条的高度是50 所以这里设置offset-top我们设置为50就可以了
这样就不会被盖住了
布局小技巧
24列布局实现垂直居中的效果
在modal中有个垂直居中的效果
弹窗是上下高度和左右的宽度都是一样的,并且随着拖动浏览器 也是会根据浏览器的高度和宽度的变化 依然垂直居中。
缩小浏览器的效果。
我们要实现的效果就是 随着改变浏览器的大小 头像和对号都居中
Row布局的flex布局,并且规定了居中的方式 都是中间
全屏的情况下 头像和对号已经和顶部有一定的距离了
改变浏览器的大小
技巧2
4+18=22后面空出来一列
现在要实现的效果是让第一列和第二列都居中显示。也就是最左边再空出来一列来。
Offset属性就是给这一列一个向右的一个位移!,位移的尺寸就是栅格的列数
技巧3
20分钟开始
规定左边18列 右边4列
左边18列应该是在左边的。但是由于18列左边是空的 所以把右边的四列顶到了左边。
当点击左边的填充内容的时候。18列有了内容显示了出来。
假设填充内容是提供过ajax去填充的话,也是需要几秒的时候闪动左边的18列。那么我们怎么解决这个默认没有内容 右边挤到左边了呢?
我们只需要在左边的内容加一个空的div标签就可以了。 当然也可以把这个空的div封装成一个组件。
查看默认的页面效果
这样做的好处,不会影响里面正文的内容,加一个1像素的空的元素去占位的话,不会影响你大体的内容。虽然看起来不是很优雅,但是却很简单的解决了这个闪动的问题。比较推荐用这种方法。
使用iview的gird布局 实现响应式布局
响应式布局:一套代码在不同的屏幕或者分辨率下、浏览器中预览的时候呈现出来的了效果是不一样的
重新初始化代码一下:
缩放到很小的时候:
在col上使用我们响应式的属性
左边当小于768的时候 让他占满一整行
当小于768的时候 占满一整行,当大于768的时候就是占6列
当小于768的时候占满一整行,当大于768的时候只占18列
我们打开F12的控制台 托送窗体,会显示宽度和高度
小于了768的情况:
当大于768的时候 还是各自 6:18的比例
当时宽屏的时候 左边留一个像素 右边留一个像素
当变为手机窄屏的时候
宽屏的时候 ,向右便宜一个列,6+16=22因为左右都便宜
小于768的时候 各自占满为24
还有其他用的比较少的 也可以实现相应式布局的,他们在flex布局用的。视频在这里就不多讲了。
iView 实战系列教程(21课时)_3.iView 实战教程之布局篇(一)的更多相关文章
- iView 实战系列教程(21课时)_4.iView 实战教程之布局篇(二)
https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码.Layout 组件比较简单,,里面一个slot Sider是最复杂的 ...
- iView 实战系列教程(21课时)_1.iView 实战教程之配置篇
1.iView 实战教程之配置篇 点击添加插件,. 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动项目 入口文件导入了 ...
- iView 实战系列教程(21课时)_2.iView 实战教程之导航、路由、鉴权篇
在c盘创建一个iview-router的项目 . 然后使用默认的配置 跳过 添加vue-router的插件 编译我们的文件. 编译好之后,我们启动App 默认的页面就打开了. 默认两个路由一个是abo ...
- iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化
首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...
- iView 实战系列教程(21课时)_汇总贴
iView 实战系列教程(21课时)_汇总贴 课程地址; https://segmentfault.com/ls/1650000016424063 iView 实战系列教程(21课时)_1.iView ...
- ElasticSearch实战系列二: ElasticSearch的DSL语句使用教程---图文详解
前言 在上一篇中介绍了ElasticSearch集群和kinaba的安装教程,本篇文章就来讲解下 ElasticSearch的DSL语句使用. ElasticSearch DSL 介绍 Elastic ...
- ElasticSearch实战系列三: ElasticSearch的JAVA API使用教程
前言 在上一篇中介绍了ElasticSearch实战系列二: ElasticSearch的DSL语句使用教程---图文详解,本篇文章就来讲解下 ElasticSearch 6.x官方Java API的 ...
- ElasticSearch实战系列六: Logstash快速入门和实战
前言 本文主要介绍的是ELK日志系统中的Logstash快速入门和实战 ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...
- ElasticSearch实战系列一: ElasticSearch集群+Kinaba安装教程
前言 本文主要介绍的是ElasticSearch集群和kinaba的安装教程. ElasticSearch介绍 ElasticSearch是一个基于Lucene的搜索服务器,其实就是对Lucene进行 ...
随机推荐
- css实现缩放自适应网页--手机web
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- 什么情况下会出现undefined
1.函数定义形参不传值,2.预解释,只声明不定义时输出变量3.对象取属性值,属性值不存在
- 理解PHP面向对象三大特性
一.封装性 目的:保护类里面的数据,让类更安全, protected和private只能在类中或子类访问,通过public提供有限的接口供外部访问,封装是控制访问,而不是拒绝访问 封装关键字:publ ...
- [七月挑选]使用idea创建spring boot 项目
title: 使用idea创建spring boot 项目 参考lindaZ的IntelliJ IDEA 创建spring boot 的Hello World 项目 1.Open IDEA,choos ...
- svn版本服务器的搭建和简单使用
⼀ 服务器搭建篇 1 在”应⽤用程序”⽂文件夹下,找到”实⽤用⼯工具”,打开”终端”APP 2 运⾏行svnadmin create repository,运⾏行完毕之后,可以在当前⺫⽬目录下找 到⼀ ...
- php 操作分表代码
//哈希分表 function get_hash_table($table, $userid) { $str = crc32($userid); if ($str < 0) { $hash = ...
- [转载]NOR和NAND 存储器的联系与区别
转载了,对于我理解两种Flash起到了帮助,希望博主继续再接再厉,更新博文 原文地址:存储器的联系与区别">NOR和NAND 存储器的联系与区别作者:暴走的工程师 一.类型理解 ...
- 009-流程控制 for 语句
流程控制 for 语句 ##################### 语法一 ################################# #!/bin/bash do echo $i done ...
- hdu 1059 Dividing bitset 多重背包
bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...
- PKUSC2019颓废记
Day -x \(THU\):"想过初审?gck" 我:"你说gck,那就gck⑧" 于是就来\(PKU\)碰碰运气了 Day 0 为了赶高铁起的很早. 颓了一 ...