如何使用块网格 类
How to use block-grid classes
一切都很好:网格、媒体查询、文本可见性和所有其他好东西。
我尝试为我的社交媒体图片链接使用块状网格,但发现它根本不起作用。我搜索了项目中包含的基础文件,发现 block-grid
classes 没有在任何地方定义。我很好奇我错过了什么。是否需要将单独的文件包含到我的项目中才能使用 block-grid
?
Foundation block grid documentation
我的项目中包含的脚本和样式表:
<!-- Within Head tag -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/terminal/jquery.terminal-0.9.2.css" />
<!-- At End of Body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/terminal/js/jquery.terminal-0.9.2.min.js"></script>
<script src="js/terminal/js/jquery.mousewheel-min.js"></script>
我尝试做的一个例子:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img class="img-icon" src="./img/blogger.png" /></li>
<li><img class="img-icon" src="./img/email.png" /></li>
<li><img class="img-icon" src="./img/github.png" /></li>
<li><img class="img-icon" src="./img/googleplus.png" /></li>
<li><img class="img-icon" src="./img/linkedin.png" /></li>
<li><img class="img-icon" src="./img/Whosebug.png" /></li>
<li><img class="img-icon" src="./img/twitter.png" /></li>
</ul>
以上代码的结果只是一个普通的无序列表,每张图片在单独的一行上都有一个项目符号。
此外,img-icon
class 不会覆盖任何内容。删除此 class 不会使 block-grid
起作用。
编辑:请注意,我通过他们的网站从 website section 下载了 foundation 6。通过查看上面的脚本和样式表标签,您可以看到我在项目中包含了哪些文件。
编辑 2:foundation.css
(由于大小而添加到 jsfiddle):foundation.css file contents
您链接到 Foundation 5 block-grid 文档,但您使用的是 Foundation 6。在 Foundation 6 中,block-grid 与常规网格相结合。
The block grid from Foundation 5 has been merged into the main grid. Add a class of the format [size]-up-[n] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 6.
来源:http://foundation.zurb.com/sites/docs/grid.html#block-grids
示例:
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>
基础 6 使用该结构。
请记住,默认的最大列数是 6。
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>
一切都很好:网格、媒体查询、文本可见性和所有其他好东西。
我尝试为我的社交媒体图片链接使用块状网格,但发现它根本不起作用。我搜索了项目中包含的基础文件,发现 block-grid
classes 没有在任何地方定义。我很好奇我错过了什么。是否需要将单独的文件包含到我的项目中才能使用 block-grid
?
Foundation block grid documentation
我的项目中包含的脚本和样式表:
<!-- Within Head tag -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/terminal/jquery.terminal-0.9.2.css" />
<!-- At End of Body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/terminal/js/jquery.terminal-0.9.2.min.js"></script>
<script src="js/terminal/js/jquery.mousewheel-min.js"></script>
我尝试做的一个例子:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img class="img-icon" src="./img/blogger.png" /></li>
<li><img class="img-icon" src="./img/email.png" /></li>
<li><img class="img-icon" src="./img/github.png" /></li>
<li><img class="img-icon" src="./img/googleplus.png" /></li>
<li><img class="img-icon" src="./img/linkedin.png" /></li>
<li><img class="img-icon" src="./img/Whosebug.png" /></li>
<li><img class="img-icon" src="./img/twitter.png" /></li>
</ul>
以上代码的结果只是一个普通的无序列表,每张图片在单独的一行上都有一个项目符号。
此外,img-icon
class 不会覆盖任何内容。删除此 class 不会使 block-grid
起作用。
编辑:请注意,我通过他们的网站从 website section 下载了 foundation 6。通过查看上面的脚本和样式表标签,您可以看到我在项目中包含了哪些文件。
编辑 2:foundation.css
(由于大小而添加到 jsfiddle):foundation.css file contents
您链接到 Foundation 5 block-grid 文档,但您使用的是 Foundation 6。在 Foundation 6 中,block-grid 与常规网格相结合。
The block grid from Foundation 5 has been merged into the main grid. Add a class of the format [size]-up-[n] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 6.
来源:http://foundation.zurb.com/sites/docs/grid.html#block-grids
示例:
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>
基础 6 使用该结构。 请记住,默认的最大列数是 6。
<div class="row small-up-1 medium-up-2 large-up-4">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>