Menu

Grid
网格是用来协调布局中的负空间

下载

介绍

Grids

网格是一种结构 悠久的历史 用于调整设计中的负空间.

使用网格可以使内容看起来更自然地在页面上流动.

columns

网格将水平空间划分为不可分割的单元,称为“列”。. 网格中的所有列必须指定它们的宽度,以占总可用行宽度的比例.

所有网格系统都允许每行选择一个任意的列计数. 语义的默认主题使用 16列.

下面的示例显示了四个 四个大 列将适合第一行, 16 / 4 = 4,以及第二行中三个不同大小的列. 2 + 8 + 6 = 16

默认列计数, 以及网格的其他任意特性可以通过调整语义UI的底层来改变 主题化变量.

rows

行是水平对齐的一组列.

行可以是 显式的,标上附加号 row 元素,或 隐式的,当前一行没有剩余空间时自动发生.

在每组列之后添加垂直间距,以分隔每组列, 创建垂直节奏.

排水沟

网格柱被称为“排水沟”的空白区域隔开。. 排水沟通过提供, 负空间 页面元素之间.

无论网格的宽度或一行中有多少列,水槽的大小保持不变. 若要增加特定网格中的水槽大小,可以使用 放松的网格 变异.

负利润

由于所有的网格列都包括排水沟,网格使用 负利润 以确保第一列和最后一列与网格外的内容齐平.

在下面的例子中,您可以看到即使第一行有填充, 连接按钮 仍然与网格边缘齐平.

在某些情况下,比如一列或一行 colored,您可能希望避免使用负边距. 你可以通过使用 的网格 变异.

按钮在网格
按钮后的网格

页面网格

网格是流体的,并且将自动在大小上流动以获取最大可用宽度.

容器 元素的设计是否根据用户屏幕的大小来限制页面内容的合理最大宽度.

使用一个 ui网格Container 在网格中包含顶级页面内容是最好的方法吗.

在版本 1.x 365客户端 页面网格 是用来包含网格的最大宽度保持页面内容. 页面网格已被弃用,取而代之的是更简单的网格 容器 元素.

columns

自动流

大多数网格不需要指定行. 当当前行中的所有网格列都被取走时,内容将自动流到下一行.

列内容

因为列使用填充来创建水槽, 内容样式不应该直接应用于列, 而是指向列内的元素.

列宽

列宽度可以使用 (x)宽 类名. 如果一列不能容纳一行,它将自动流到下一行

rows

分组

行包装器允许您对一组列应用变体.

清除内容

行包装器将自动清除以前的列,使它们在使用时很有用 提出 变化.

特殊的网格

此外,一些类型的网格,比如 划分 or celled 要求行包装器正确地应用格式.

不同的网格

嵌套网格

网格可以放在其他网格中,让您对列进行细分.

colored

网格可以使用命名的 colors 变化 添加背景色,但只与 的网格 这还不包括负利润率.

要包含默认调色板中不可用的颜色,使用CSS是非常好的

black
自定义行
black

自动列数

the 平等的宽度 变异将自动划分列宽度均匀. 这对于不预先知道列数的动态内容非常有用.

中心内容

如果一行没有占据所有16个网格列,则可以使用 为中心的 变量将列内容居中放置在网格内.

重要的词序

网格包括许多调整方式,比如垂直或水平对齐, 文本对齐方式, 或默认排水沟大小.

一些多词变体,比如 左浮动 or 右对齐 是否依赖于词序,并且需要使用相邻的类名.

左浮动右对齐列
右浮动左对齐列
中心对齐行
中心对齐行
右对齐网格

响应电网

容器

A 容器 可以与网格一起使用,以提供响应, 用于包装页面内容的固定宽度容器.

可叠起堆放的

A 可叠起堆放的网格 会自动堆叠行到一个单一的列在移动设备

相反的顺序

语义包括特殊 逆转 允许您按设备颠倒列或行顺序的变体

first
second
third

翻倍

A 翻倍 网格将为每次设备跳转增加两倍列宽.

手动调整

尽管设计模式像 翻倍 or 可叠起堆放的 在简化响应式样式方面是否有用, 您还可以通过指定手动调整设备的表示方式 (x)广泛的设备 or 设备只 列或行.

types

Grid Flexbox

一个基本的网格

divided 需要行

网格的列之间可以有分隔符

垂直分裂 需要行

网格可以在行之间有分隔符

celled 需要行

网格可以将行划分为单元格

内部的365客户端官网入口称之为 需要行

网格只能在内部行之间进行行划分

Content

rows

行是列的水平分组

columns

每一列都包含沟槽,使它们与其他列具有相等的间距.

变化

floated

列可以与行的左边缘或右边缘齐平

列宽

一个列的宽度可能会变化,占用一个以上的网格列.

列数

一个网格的每行可以有不同的列数

平等的宽度

网格可以自动调整所有元素的大小,以平均分割可用宽度

1
2
3
1
2
3
4
1
2
3
1
2

拉伸

行可以拉伸其内容以占据整个列的高度

1
1
2
1
2
3
1
2
1
2
1
2
1
2

padded

网格可以保留其第一和最后一列的垂直和水平水槽

下面的网格有垂直和水平水槽

下面的网格有垂直的排水沟.

下面的网格有水平排水沟

relaxed

网格可以增加排水沟,以允许更多的负空间

colored

行或列可以被着色

red
orange
yellow
green
teal
blue
violet
purple
pink
布朗
grey
black
red
orange
yellow
green
teal
blue
violet
purple
pink
布朗
grey
black

为中心的

网格可以将其列居中

文本对齐方式

网格、行或列可以指定其文本对齐方式

对齐的内容正好适合在网格列中, 占据了从一边到另一边的整个宽度. 对齐的内容正好适合在网格列中, 占据了从一边到另一边的整个宽度. 对齐的内容正好适合在网格列中, 占据了从一边到另一边的整个宽度. 对齐的内容正好适合在网格列中, 占据了从一边到另一边的整个宽度. 对齐的内容正好适合在网格列中, 占据了从一边到另一边的整个宽度.

垂直对齐

a Grid, row, 或列可以指定其垂直对齐方式,使其所有列垂直居中.

响应变化

翻倍

在平板电脑和移动设备上,网格可以将其列宽增加一倍

当加倍时,网格将其列四舍五入到最接近合理的值,例如A 五列网格 将使用 2台手机,3台平板电脑,5台桌面电脑. 要强制移动1列,你可以添加 可叠起堆放的

可叠起堆放的

在到达移动断点后,网格可以让它的列相互堆叠

要查看网格堆栈,请尝试将浏览器调整为小宽度

逆转

网格或行可以指定它的列在不同的设备大小下应该倒序排列

反向网格是兼容的 划分 网格和其他复杂的网格类型.
电脑第四个
电脑三分之一
电脑一个
计算机第一次
计算机B第四
计算机B第三
计算机B第二
计算机B第一
平板电脑第四
平板电脑第三
平板电脑第二
平板电脑第一
移动第四
移动第三
移动第二
手机第一
电脑行4
电脑第三行
电脑第二行
计算机第一行
平板电脑行4
平板电脑第三行
平板电脑的第二行
平板电脑第一行
移动一行4
移动第3行
移动第二行
移动第一行

设备的可见性

列或行只能在特定的设备或屏幕尺寸下显示

see 容器文档 有关断点计算的信息
大屏幕
大屏幕
宽屏
宽屏
mobile
mobile
电脑
平板电脑和手机
所有的尺寸
所有的尺寸
电脑
电脑
电脑
电脑
tablet
tablet
tablet

响应宽度

列可以指定特定设备的宽度

建议使用像这样的响应模式 翻倍 or 可叠起堆放的 降低响应式设计的复杂性, 然而,在某些情况下,可能需要为屏幕大小指定精确的宽度.

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9 10