📅 最后修改于: 2020-10-25 05:54:11 🧑 作者: Mango
Foundation网格系统最多可在页面中扩展12列。网格系统用于通过一系列容纳您的内容的行和列来创建页面布局。
下表简要介绍了Foundation网格系统如何在多个设备中工作。
| Small devices Phones(<640px) | Medium devices Tablets(>=640px) | Large devices Laptops & Desktops(>=1200px) | |
|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Class prefix | .small-* | .medium-* | .large-* |
| Number of columns | 12 | 12 | 12 |
| Nestable | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes |
以下是基础网格的基本结构-
...
以下是Foundation网格系统中使用的三个类-
| Sr.No. | Basic Grid classes & Description |
|---|---|
| 1 | Large
The large-* classes is used for the large devices. |
| 2 | Medium
The medium-* class is used for the medium devices. |
| 3 | Small
small-* class is used for the small devices. |
以下是Foundation中使用的高级网格格式。
| Sr.No. | Advanced Grids & Description |
|---|---|
| 1 | Combined Column/Row
The column and row classes are used on the same element to get the full width column to use as a container. |
| 2 | Nesting
We can nest the grid columns inside another columns. |
| 3 | Offsets
Using large-offset-* or small-offset-* class, you can move the columns to the right. |
| 4 | Incomplete Rows
Foundation floats the last element automatically to the right when the rows do not include columns up to 12. |
| 5 | Collapse/Uncollapse Rows
Using the media query size, the collapse and uncollapse classes are included to the row element to show the paddings. |
| 6 | Centered Columns
By including the class small-centered in the column, you can make the column at the center. |
| 7 | Source Ordering
Source ordering class is used to shift the columns between the breakpoint. |
| 8 | Block Grids
Block-grid is used to split the content. |
使用这组SASS mixins，将生成一个网格CSS，该CSS用于构建您自己的语义网格。欲了解更多信息，请点击这里
以下是Foundation中使用的网格的SASS参考。
| Sr.No. | Basic Grids & Description |
|---|---|
| 1 | Variables
Using the sass variables we can modify the default styles of this component. |
| 2 | Mixins
The final CSS output is build using the mixin. |