网格系统 - Grid

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

把页面水平的宽度平均分成若干份 .. 你可以指定在这排内容上的每个列,或者叫每个栏的内容占用多少份的宽度 .. 这其实就是我们说的 Grid ,网格系统 ... 你也可以把它想成是一套布局内容用的系统 ..

在 Semantic UI 里,默认是 16 栏的网格,也就是一排内容会平均分成 16 份 .. 我们可以去定制这个网格系统,比如可以把它变成 12 栏的网格 ..

一个网格,需要先添加一个包装 .. 用一个 div 标签,上面要加上 ui .. 还有 grid .. 网格里的每列内容可以单独放在一个包装里面 .. 在这个包装上需要一个 column 类 .. 它可以定义一列内容,或者叫一栏内容 ..

如果不指定具体的网格数,这样每列内容会占用一个网格的宽度 .. 这里我添加几栏内容 .. 在每个 column 里面再添加点内容 ..

保存 .. 你会看到这里有 8 栏内容 .. 占用了页面一半的宽度 .. 因为一排内容会被分成 16 份,每栏内容占用其中的一份的宽度 ..

比如现在我想把每排内容分成四份 .. 每个栏占用其中的一份 .. 可以在这个 gird 容器的上面,添加一个 four column .. 保存 ..

现在页面上会显示两排内容,每排内容被分成了四个栏 .. 想把一排内容分成两份, 可以在这个 grid 容器上,把 four column ,换成 two folumn ..

现在每行内容分成两栏显示 ...

网格系统 - Grid《 Semantic UI 网格 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点