布局排板大板型左右留边 Container
接下来就是这个Container里头需要载运那些内容了
material-ui 及许多框架都很用英文直翻 在货柜里塞栅格
今天的内容就是 Grid (栅格)
顾名思义就是一格一格排好 有延展性可以RWD
这个栅格可主要可以分12格
基本用法如下
<Grid container spacing={2}>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
在满板时
也就是md 左格12分之8 右边12分之4
在半版 xs 则变成各半分 12/6
达到 不同宽度有不同的排版方式
另外spacing 代表的是 每个Grid中间的等分宽度
可以从0~写到12
所以基本板型的RWD Grid 就可以排列出来了
>>: DAY4 起手式--Nuxt.js(细)说pages(上)
我把从第一天到现在每天的 Home 目录都放上 GitHub 了,README.md 里面有说明 ...
前情提要 在前一篇文章内容中带大家跑过一次 Python 中的基础操作与常见的资料型态的使用。也提供...
猜数字 ( 几 A 几 B ) 教学原文参考:猜数字 ( 几 A 几 B ) 这篇文章会介绍,如何在...
建立结构化的 Log 系列文章 (1/4) - Elastic Common Schema 结构化 ...
Day9 Collision Behavior 当 Laser 跟 Squid 相互撞击时, 我们想...