The Grid
优质
小牛编辑
128浏览
2023-12-01
描述 (Description)
基础网格系统通过页面最多可扩展到12列。 网格系统用于通过一系列容纳内容的行和列来创建页面布局。
网格选项
下表简要介绍了Foundation网格系统如何在多个设备中工作。
小型设备电话(<640px) | 中型设备平板电脑(> = 640px) | 大型设备笔记本电脑和台式机(> = 1200px) | |
---|---|---|---|
Grid behavior | Horizontal at all times | 倒塌开始,水平在断点之上 | 倒塌开始,水平在断点之上 |
类前缀 | .small-* | .medium-* | .large-* |
Number of columns | 12 | 12 | 12 |
Nestable | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes |
基础网格的基本结构
以下是基础网格的基本结构 -
<div class = "row">
<div class = "small-*"></div>
<div class = "medium-*"></div>
<div class = "large-*"></div>
</div>
<div class = "row">
...
</div>
首先,创建一个row类来创建水平的列组。
内容应放在列中,只有列可能是行的直接子项。
通过指定要跨越的十二个可用列的数量来创建网格列。 例如,对于四个相等的列,我们将使用.large-3
以下是Foundation网格系统中使用的三个类 -
Sr.No. | 基本网格类和描述 |
---|---|
1 | Large large-*类用于大型设备。 |
2 | Medium medium-*类用于中型设备。 |
3 | Small small-* class用于小型设备。 |
高级网格
以下是Foundation中使用的高级网格格式。
Sr.No. | 高级网格和描述 |
---|---|
1 | 组合列/行 column和row类用于同一元素,以获取用作容器的全宽列。 |
2 | Nesting 我们可以将网格列嵌套在另一列中。 |
3 | Offsets 使用large-offset-*或small-offset-*类,可以将列向右移动。 |
4 | 不完整的行 当行不包含最多12列时,Foundation会自动向右浮动最后一个元素。 |
5 | 折叠/展开行 使用媒体查询大小,折叠和解除折叠类包含在row元素中以显示填充。 |
6 | 中心列 通过在列中包含以small-centered的类,可以将列设置在中心。 |
7 | 来源订购 源排序类用于在断点之间移动列。 |
8 | 块网格 块网格用于分割内容。 |
建筑语义
使用SASS mixins集合,生成网格CSS,用于构建自己的语义网格。 有关更多信息, 请单击此处
SASS参考 (SASS Reference)
以下是Foundation中使用的网格的SASS参考。
Sr.No. | 基本网格和描述 |
---|---|
1 | Variables 使用sass变量,我们可以修改此组件的默认样式。 |
2 | Mixins 最终的CSS输出是使用mixin构建的。 |