semantic-ui网格布局详解

网格布局是一种比较早的概念了。semantic的网格布局和其他css框架的也是类似的,使用方法有点区别。

一、概念

网格:是一种网页的设计结构,将网页的空间分割为一个个小格子的空间,从而满足网页布局的需求。可以理解为一个表格。
网格的声明方式为 class=”ui grid”

:将横向的空间分割为一个或多个独立的单元格。可以理解为表格的竖列。
semantic默认主题使用的列宽度总数为16个。网格中列的默认宽度为1。列的宽度可以使用几个wide来表示。如占用4个宽度则为 four wide。
八个宽度eight wide。列宽的总数加起来必须是16,才能横向填满整个空间。当总数超过16,则另起一行。
列的声明方式为 class=”column”,指定宽度用 wide表示。
如下代码指定了列的宽度:

4个宽度
4个宽度
4个宽度
4个宽度
8个宽度
8个宽度
10个宽度

结果为:
semantic-ui网格布局
使用默认宽度代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4

显示效果为:
semantic默认网格布局
:是横向的一组列。可以理解为表格中的行,一行可以有一个或多个列。
行的声明方式为 class=”row”。
如下代码 four column指定了列的宽度,表示这个网格中有4个列,即每个列占用4个宽度,总共16。此时内部又使用row对column进行了分组。
虽然分组了,但是并没有改变column的宽度。宽度已经在定义网格时指定。

结果为:
semantic网格的行

也可以在行上直接定义列的数量,等价于定义了列的宽度。此时列的数量需放在row上。
如指定一行有三列,一行有两列:

1
2
3
4
5

显示结果为:
semantic网格布局行

semantic中网格的使用非常灵活,网格默认填充到最大空间,行填充到网格的宽度,列默认自动流动布局,超出后另起一行。网格也可以互相嵌套。

二、定义网格布局的背景色

当使用样式class=”ui padded grid”,即padded grid网格时即可指定网格的背景色,可以将背景色设置在行或者列上。
如下代码:
 

1
2
3
4
5
6
7

显示效果:
semantic网格布局背景色

 

如若转载,请注明出处:https://www.javaidea.cn/article/8131.html

(0)
上一篇 2022年2月7日 上午10:03
下一篇 2022年2月7日 上午10:03

相关推荐

发表评论

您的电子邮箱地址不会被公开。