我刚开始使用Foundation 4(来自Bootstrap).我真的无法理解一些概念,他们的文档中没有任何解释的迹象:
我有以下内容:
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
我真的无法理解小2和大4的组合意味着什么.在bootstrap中只有span*所以我猜small-*是相同的,但是怎么样large-*？大型代表什么？在我看来,我可以省略其中一个,并且只是large-*或者small-*.
还有,columns班级怎么样？如果"span"已经由其他类定义,为什么我甚至需要呢？
提前致谢.
使用" 小 "和" 大 "可以为小尺寸屏幕定义列结构,为大尺寸屏幕定义一个列结构.因此,在上面的设置中,当您在大屏幕中查看时,您会看到四列,而当它们很小时,您会看到两列.
例如
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------------------------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------
如果您只使用' large-# '并省略' small-# '值,则在小屏幕上查看时,默认为12列,与写小12-big-4基本相同.
如果在所有屏幕尺寸上查看时仅使用" 小 - # "并省略"大 - # "值,则将使用" 小 - # "值.
' column '类将div定义为列.如果你没有定义' small-# '或' large-# ',它会将div设置为100%宽度(即12列).
基金会也使用' 行 '.
如果你换了一套"的列 "的div的" 行 " DIV所有的" 列 "的div将尝试坐在同一行,如果连续定义的列的总数为12以上,他们将包裹.如果列总数小于12,则列不会换行.
2排
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">...</div>
</div>
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 | (row 1)
| | | |
-----------------------------------------------------------------------
-----------------------------------------------
| | |
| div1 | div2 | (row 2)
| | |
-----------------------------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------
| | | |
| div1 | div2 | div3 | (row 1)
| | | |
-----------------------------------
-----------------------
| | |
| div1 | div2 | (row 2)
| | |
-----------------------
现在有1排
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">. . .</div>
<div class="small-2 large-4 columns end" style="background-color:lightgrey">. . .</div>
</div>
大 - 大于12的1行列,因此它们包裹
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------------------------------------------
| | |
| div4 | div5 |
| | |
-----------------------------------------------
小 - 1行列小于12,没有包装
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------
| | | | | |
| div1 | div2 | div3 | div4 | div5 |
| | | | | |
-----------------------------------------------------------
希望这可以帮助.
注意:如果不按照上述布局使用正好12列,则需要将类" end " 添加到行的最后一列,以使其向左浮动,因为默认情况下最后一列浮动.
例如
<div class="row">
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
<div class="small-2 large-4 columns" style="background-color:lightgrey">...</div>
</div>
没有最终类将如下所示:
大
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
----------------------- ------------------------
| | | |
| div1 | | div2 |
| | | |
----------------------- ------------------------
小
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
----------- ------------
| | | |
| div1 | | div2 |
| | | |
----------- ------------