网格系统
网格系统
网格系统有两个元素:行而且列．
行包含列。列决定内容的宽度。
为列分配一个数字以指定它们的大小。(一、二、三……12)
网格最多可以包含12列。每个列的宽度不是固定的大小，而是其父容器的百分比。
一行中的列之和不能超过12。但它们加起来可能小于12。
12等于100%。
Content A(二)
Content B(二)
内容A(大-3栏)
内容B(大-3栏)
最后一列总是向右浮动。若要重写此设置，请添加类= "结束"到列
内容A(大-3栏)
内容B(大-3列端)
列大小和设备大小
列大小几乎可以添加到任何元素，但建议避免这样做，而是将元素放在行/列中。元素在调整大小时将保持这些比例。
这是一个面板(大-5列)
| 月 | 储蓄 | 费用 | 增长 |
|---|---|---|---|
| Lorem ipsum | 400美元 | 100美元 | 5% |
| Lorem ipsum | 400美元 | 100美元 | 5% |
为了在特定屏幕大小上指定列宽，需要添加带有该屏幕大小数字的额外类。
例如:
在大屏幕上是6列宽，在中等屏幕(平板电脑)上是8列宽，在小屏幕(手机)上是10列宽。(大-6中-8小-10列)
重要的是:如果您没有为较小的屏幕尺寸指定大小，那么在小型设备上，它们将自动为12列宽。中型设备将继承大尺寸集。
在大屏幕上是6列宽，在中型(平板电脑)屏幕上是8列宽，在小屏幕(手机)上是10列宽。(large-6 - medium-8 - small-10列)
嵌套
列可以包含额外的行，比如在TD中添加表。这允许更复杂和更精细的布局。在大多数情况下，你应该能够使用非嵌套的列得到你想要的布局。
(large-12)
B (large-4)
C (large-4)
E (large-4)
F (large-4)
G (large-4)
D (large-4)
元素将使用其父元素的百分比。如果父元素设置了宽度，子元素将使用该数字的百分比。基金会称之为“嵌套”。
内容A (large-6)
内容B (large-6)
内容C (large-3)
内容D (large-3)
偏移量
偏移量允许您在列之间创建空间。在列计算中计算偏移量。偏移量+列不能超过12。
内容A (large-3)
内容B (large-3 large-offset-1)
内容C (large-3 large-offset-1)
Content A (large-3列大-offset-1)< div class="panel">
Content B (large-3列大-offset-1)
Content C (large-3列大-offset-1)
集中列
可以将一行中的单列居中。但你只能在行中只有一列的情况下这样做。注意，这并没有将内容居中。通过应用“small- centric”，它会将列集中在小设备(移动电话)上。Medium将以平板电脑及以上产品为中心，Large将只以台式机和大屏幕为中心。
你可以通过“大不居中”、“中不居中”等方式取消特定屏幕尺寸上的列的居中位置。
内容A (large-2 large-居中)
内容B(大-5中心)
内容C(大-9小中心大-无中心)
Content A (large-2列小居中)
Content B (large-5列小居中)
可见性
Foundation支持大量用于在不同屏幕尺寸上隐藏或显示内容的类。
我们通常使用以下两种选择:
- show-for-small
- hide-for-small
总是显示这个面板
只在移动设备上显示此面板
始终显示此面板
在移动端隐藏此面板
仅在移动端显示此面板
浮动元素
你可以使用左或正确的浮动元素。
面板左侧浮动
在中世纪，那些攻击城堡的人使用的是投石机，这种军用发动机能够发射出可怕的导弹。在本节中，查看NOVA建造的实际投石机，并在网上建造和发射一个。此外，还可以了解中世纪城堡中使用的其他武器以及日常生活是什么样的。
面板右侧浮动
在中世纪，那些攻击城堡的人使用的是投石机，这种军用发动机能够发射出可怕的导弹。在本节中，查看NOVA建造的实际投石机，并在网上建造和发射一个。此外，还可以了解中世纪城堡中使用的其他武器以及日常生活是什么样的。
块网格
块网格为您提供了一种在网格中均匀分割列表内容的方法。如果你想创建一行5张图片或段落，无论屏幕大小如何，都需要保持均匀的间距，请使用块网格。
这是如何
- 添加一个类来告诉foundation你需要多少列("large-block-grid-4")
- 添加另一个类来告诉foundation你想为平板电脑添加多少列(“medium-block-grid-3”)
- 添加另一个类来告诉foundation你想要多少个移动列("small-block-grid-2")
-
内容一
-
B的内容
-
内容C
-
内容D
-
内容E
-
内容F
< ul类= " large-block-grid-4 medium-block-grid-3 small-block-grid-2”> <李> < div class = "板" > < p >内容< / p > < / div > < /李> <李> < div class = "面板callout > < p >内容B < / p > < / div > < /李> <李> < div class = "板" > < p >内容C < / p > < / div > < /李> <李> < div class = "面板callout > < p >内容D < / p > < / div > < /李> <李> < div class = "板" > < p >内容E < / p > < / div > < /李> <李> < div class = "面板callout > < p >内容F < / p > < / div > < /李> < / ul >