描述
基础网格系统通过页面最多可扩展到12列.网格系统用于通过一系列容纳内容的行和列来创建页面布局.
网格选项
下表简要介绍了Foundation网格系统如何在多个设备中工作.
小型设备电话(< 640px) | 中型设备平板电脑(> = 640px) | 大型设备笔记本电脑&桌面(> = 1200px) | |
---|---|---|---|
网格行为 | 始终水平 | 折叠开始,水平在断点之上 | 折叠开始,水平在断点之上 |
类前缀 | .small - * | .medium - * | .large - * |
列数 | 12 | 12 | 12 |
Nestable | 是 | 是 | 是 |
抵消 | 是 | 是 | 是 |
列排序 | 是 | 是 | 是 |
基础网格的基本结构
以下是基础网格的基本结构 :
...
首先,创建一个行类来创建水平组列.
内容应放在列中,只有列可能是行的直接子项.
通过指定要跨越的十二个可用列的数量来创建网格列.例如,对于四个相等的列,我们将使用 .large-3
以下是三个类用于基础网格系统 :
Sr .No. | 基本网格类&说明 |
---|---|
1 | Large large - * 类用于大型设备. |
2 | 媒体 medium - * 类用于中型设备. |
3 | 小 小 - * 类用于小型设备. |
高级网格
以下是Foundation中使用的高级网格格式.
Sr.No. | Advanced Grids&说明 |
---|---|
1 | 合并列/行 列和行类用于获取全宽度列用作容器的相同元素. |
2 | 嵌套 我们可以嵌套网格另一列内的列. |
3 | 抵消 使用 large-offset - * 或小偏移 - * 类,你可以将列移到右边. |
4 | 不完整的行 当行不包含列时,Foundation会自动向右浮动最后一个元素ns最多12个. |
5 | 折叠/取消折叠行 使用媒体查询大小,折叠和取消折叠类包含在row元素中以显示填充. |
6 | 中心列 通过包含类在列中以小中心为单位,您可以将列设置在中心. |
7 | 来源订购 源排序类用于在断点之间移动列. |
8 | 块网格 块网格用来分裂内容. |
建筑语义
使用SASS mixins集合,生成网格CSS,用于构建您自己的语义网格.有关详细信息
SASS参考
以下是Foundation中使用的网格的SASS参考.
Sr.No. | Basic Grids&说明 |
---|---|
1 | 变量 使用sass变量我们可以修改该组件的默认样式. |
2 | Mixins 最终的CSS输出是使用mixin构建的. |