使用网格

容器

容器是用于包装站点内容的固定宽度元素. 它保持恒定的大小和用途 保证金 中心. 容器是将页面内容置于网格中心的最简单方法.

文本容器

有时你只需要在页面中放置一column文本. A 文本容器 特殊类型的容器是否针对单个流动的文本column进行了优化, 就像这页上的说明.

文本容器 不需要使用网格 并帮助简化基本的页面布局.

网格的内容

column流

网格不一定需要指定行. 如果你包括 column 作为 ui grid 当在当前行中获取所有网格column时,内容将自动流到下一行.

清算行

添加行包装器允许您手动指定要开始的新行.

指定行宽度

指定网格column数将把column划分为具有预定column数的行. 其他column将自动流到下一行.

column
column
column
column
column
column

指定column宽

还可以为每个column单独指定column宽

宽四column
eight wide column
宽四column

特殊的变化

一些特殊的变体要求您指定行来格式化表格之类的网格. 例如,一个 划分网格 或者一个 (变网格 需要行包装.

(变网格
内部的365客户端官网入口称之为网格
划分网格
垂直划分网格

调整网格

中心内容

如果一行不占用所有16个网格column,则可以使用 ui为中心的网格, 集中的行, or 集中column 将column内容居中放置在网格中.

浮动行

由于语义UI的网格是基于伸缩框的 左浮动 项目应该是第一位的 正确的提出 项目排在最后.

左浮动
正确的提出

文本对齐方式

可以使用网格、行或column级别上的对齐变体指定文本对齐方式.

右对齐column
左对齐column
中心对齐行
中心对齐行
右对齐column

垂直对齐

您可以在网格、行或column级别上指定垂直对齐.

等于column宽度

指定一个 相等宽度的网格 将自动确定column大小以均匀地适合一行

column
column
column
column
column
column
column

响应模式

翻倍

您可以在每次设备跳转时将column的宽度设置为两倍

column
column
column
column
column

可叠起堆放的

您可以设置column堆叠移动

column
column
column

响应宽度调整

您可以指定column在不同的屏幕上以不同的宽度出现

指定设备的可见性

您可以指定column只出现在特定的屏幕上

只有十宽栏电脑
六宽column电脑仅限
16宽纵队可移动
电脑才行
电脑才行
电脑才行
手机只column
手机只column
column
column
友情链接: 1 2 3 4 5 6 7 8 9 10