小白也能乘风破浪:ViewUI 使用入门经验教程(二)栅格

俗话说,人要脸,树要皮。

古往今来从未像现如今这样全民热衷于看脸,没点颜值差点姿色你都不好意思直播带货。

可惜不得不承认的是,有些人的高颜值是与生俱来的,就看这父母手艺的高低了。

的确,这么大一张脸上,要想颜值暴表这五官的摆放首先就显得极为重要。

而在WEB江湖中,经过多位前辈的努力于是乎也派生出一门WEB界面风水学,叫作 Grid & Layout

有人说了,你整这英文洋字码我倒是认识几个,可拼在一块儿我咋就看不懂了呢,啥意思啊?

其实把它翻译过来就是 栅格布局 的意思,那具体啥意思?

别急,这正是我们接下来要慢慢道来的WEB前端框架之一 View UI 的界面风水学。


第二弹:栅格

友情提示:

在接下来的学习演示中,为保证测试速度和效果,建议将 View UI 及其所需库文件下载到本地。

可以到本经验教程的前一篇下载所有库文件,或在文末下载本文的示例文件。

前文参考阅读:

小白也能乘风破浪:ViewUI 使用入门经验教程(一)开篇介绍


年轻的小伙伴们,你们见过老式电视机或大屁股显示器吗?

它们显示图像的原理之一就是从左到右、自上而下地逐行扫描像素点。


扫描完第一行后,回到最左边再扫描第二行,直到底部完成扫描,最终形成一幅完整的图像。


View UI 采用的是24栅格系统,就是将你能看到的页面窗口竖着等分为24列,然后将这24列组合成任意宽度的内容即可。

因此你可以简单地理解为,在WEB页面上,任何一行都最多只有24个像素点,这个像素点就叫最小分隔列

然后从页面左上角开始,按像素点位置水平向右依次摆放多个列单元内容,放满24个最小分隔列后,再从下一行的最左侧开始水平向右再依次摆放内容,以此类推。

你看,是不是像极了逐行扫描啊?

如果你有 Bootstrap 的学习经验,会更好理解一些,只不过 View UI 把列数分得更多了一些。

就像下图这个样子,每一行内容可以分为若干个列,最多可分成相等宽度的24列。


比如,想显示的内容就单独占一列,那就是 24

分成等分的两列,那就是 12+12

分成等分的3列,就是 8+8+8


可以理解吧?

当然了,你也可以分成不等分的比如 16+86+8+10 等等,只不过这些数字相加结果务必要等于24。


那位说了,先等分24列,然后将这24列组合成我想要的各种不同宽度的列,这个我懂了,但这个行内容怎么控制的?

其实我们前面说的什么等分也好,24列也好,其实是针对一行内容讲的。

如果有多行,那么就要每一行都做到24列合理分配,如果占用超过24则自动换到下一行。

而每一行的高度是另外通过样式实现的,具体后面有讲。


一、最基本的一行和它的多列

原理我们大概了解了,那么实际怎么用代码实现呢?

很简单,三个标记,三句话:

  • 使用 row 标记创建水平方向上的一行
  • 使用多个 col 标记插入到 row 中形成多个列
  • 使用 span 标记分别标识每个 col 的列宽


最最基本的代码如下。

如果你像我一样使用 CDN 方式引入的 View UI ,那么需要注意,非 template/render 模式下,需使用 i-col

<Row>
    <i-col span="7">
        我是第一列,我占用了7个最小分隔
    </i-col>
    <i-col span="8">
        我是第二列,我占用了8个最小分隔
    </i-col>
    <i-col span="9">
        我是第三列,我占用了9个最小分隔
    </i-col>
</Row>
 


可以看到,这同一行的三列分隔总和是24。

如果需要显示多行内容,那么就按照上面的例子一样写上多个 row+col 组合即可。


图中的横线是我加上的,为的是让小伙伴们看得更清楚。

不过你也应该注意到,虽然按指定的宽度分隔了每列的内容,但是每列之间的内容似乎粘连在了一起,看起来能让强迫症尴尬死有木有?

别慌,我有特效药!


二、用<列间隔>保持列与列之间的距离

row 有一个参数可以让每列之间保持一定的间距,这个特效药叫作 gutter

由于栅格系统按24等分来分隔,所以官方推荐使用 (16+8n)px 作为栅格间隔,也就是说 gutter 的值建议取 162432 等等。

只要在 row 后面加上个 gutter 就可以产生效果,像这样子:

<Row :gutter="16">
    <i-col span="8">
        <div style="background:#ff9900;"><我是第一列,我占用了8个最小分隔></div>
    </i-col>
    <i-col span="4">
        <div style="background:#ff9900;"><我是第二列,我占用了4个最小分隔></div>
    </i-col>
    <i-col span="3">
        <div style="background:#ff9900;"><我是第三列,我占用了3个最小分隔></div>
    </i-col>
    <i-col span="9">
        <div style="background:#ff9900;"><我是第四列,我占用了9个最小分隔></div>
    </i-col>
</Row>
 


这里要注意,千万不要把 Row 写成 i-row ,可不要犯了我以前犯过的低级错误哦!

从效果图上看,每一列之间都有一定的间隔,看起来舒服多了吧。

哎,眼尖的小伙伴们会发现,为啥给块块们涂上了颜色?

实际上,这个间隔是通过 padding 来实现的,只有给 col 里面的 div 加上背景颜色才能看出效果,如果是给 col 直接加背景则会看不出任何效果,因为间隔还是属于 col 的部分哦,这一点需要多多注意哦!


三、用布局模式让行列活起来

我们可以看到我们用颜色区分出来的被分隔的内容块,那么这些块块能不能不要这么死板,让它们活泼一些不要都是一个样子不好吗?

答案是肯定的哈!

其实可以使用 rowflex 布局模式配合一些样式来达到我们想要的效果。

官网有很多举例,什么上下左右居中对齐,在此只举一个简单例子:

<Row type="flex" justify="center" align="middle" class="code-row-bg">
    <i-col span="5">
        <div style="background:#808695;"><p style="height: 80px"><我是第一列,我占用了5个最小分隔,我的身高是80px></p></div>
    </i-col>
    <i-col span="5">
        <div style="background:#808695;"><p style="height: 30px"><我是第二列,我占用了5个最小分隔,我的身高是30px></p></div>
    </i-col>
    <i-col span="5">
        <div style="background:#808695;"><p style="height: 100px"><我是第三列,我占用了5个最小分隔,我的身高是100px></p></div>
    </i-col>
    <i-col span="5">
        <div style="background:#808695;"><p style="height: 60px"><我是第四列,我占用了5个最小分隔,我的身高是60px></p></div>
    </i-col>
</Row>
 


同样加上颜色也是为了看得清楚一些,总之,高矮胖瘦、上窜下跳,你想怎么摆就可以怎么摆。

呃...哎?不对啊!

你不是说一行一共是24分隔嘛,怎么这四个5加起来才20,不够24啊?

哈哈,这是因为为了让小伙伴们看得清楚,让这一行中的所有块块都居中、两边留空,所以故意少了一些啊。

能看出问题来,说明小伙伴们的确很认真啊!

冲你们这个学习劲头,给你们点24个赞哈!


四、多行怎么做

这时,可能又会有小伙伴举起小手提问了,列间隔有了,花样还不少,那行与行之间呢?

这个问题提的好,一般最简单地我是通过换行标签 <br> 来实现的。

比如:

<Row>
    ...
</Row>
<br>
<Row>
    ...
</Row>
<br>
<Row>
    ...
</Row>
 


若想行间距大一些,那么多加几个 <br> 就行了。

就是辣么简单粗暴啊,一般对于小白够用就行。


另外需要重点补充一点,我们说的一行24列,这个一行并不仅仅指的是屏幕页面的一行,它也可以是页面某个区域的一行。

比如像下图这个样子,headercontent 等部分都可以是栅格系统的摆放区域:


栅格系统是界面最基础的概念之一,把握好其原理和使用方法,对今后的界面布局将大有裨益。

今天介绍的内容经过精简,做到了最最基础、容易上手,属于经验之谈,希望对小伙伴们有所帮忙!

有了栅格系统的基础就可以更深入地去了解布局了。

下一回,我们接着聊!


本文相关文件下载:

vue.min.js.7z:https://o8.cn/4JnupS 密码:zyc8

ViewUI-4.3.2.zip:https://o8.cn/ilEeNU 密码:88pi

test02.7z:https://o8.cn/Du5mwg 密码:4633


WeChat @网管小贾 | www.sysadm.cc


提交评论

安全码
刷新

© 2020-present 网管小贾 | 微信公众号 @网管小贾
许可协议:CC-BY-NC 4.0 | 转载文章请注明作者出处及相关链接