初学Foundation之网格系统

作者：Spy 日期：2013-11-06 点击：3614
CSS
Foundation

本文由Spy根据的《Foundation for Beginners: The Grid System》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-the-grid-system/，以及作者相关信息

——作者：

——译者：Spy

在学习Foundation系列文章中的上一篇，我们大概讲述了可以用这个框架来干什么，框架本身又可以做什么和如何自定义符合自己需求的框架。那么此文章就将深入地研究学习“网格系统”，过程中我将使用实例来演示。到最后，为了做出一些震撼的效果，我们还会学习对各种内容都可以实现滑动效果的插件：Orbit:Javascript插件。

初学Foundation之网格系统

网格系统

Foundation是一个以移动优先的流行框架。意味着将会加载最少的代码量和减少成本可致使页面渲染速度更快。与一些前端框架一样，Foundation是完全支持响应式的。但不同的是，Foundation只需要用到一个断点即可支持架构的改变。这断点定义viewport的宽度为768px宽。

实际上，这个网格系统本身有3个部分：电脑端网格，移动端网格和块网格。由于Foundation是以移动优先的前端框架，那就从移动端网格开始吧。

在Foundation网格系统中我们只使用一个主要断点，实现768px宽度的布局。

小型网格

初学Foundation之网格系统

<div class="row">
    <div class="small-12 columns">
        <h2>This is Foundation</h2>
    </div>
</div>

上面代码列出了3个重要的class：第一个class为row（行）,是用来包含列数，就好像由许多列如细胞一般地排列在一行当中。在这个演示中，我们使用到12列网格，默认12是一行当中能有列数的最大值。如果你需要更多列数，Foundation允许你在自定义界面中设置最多为16列。

第二个class是small-12，改变里面的数字就可以定义该列的宽度。small-12只是定义宽度而已，还没有定义该列的存在，因此还需要第三个class为columns。这3个class都是网格系统的基础class。

简单地说，上面的5行代码形成一个由12列组成的，占满父窗口宽度。里面12列所展示的就是我们的内容。让我们使用更复杂的代码来进一步说明。

<div class="row">
    <div class="small-4 columns">
        <h2>This is a sidebar</h2>
    </div>
    <div class="small-8 columns">
        <h2>This is the content area</h2>
    </div>
</div>

在上面的例子当中，我们可以看到有两个div包含类名columns，还有搭配另一个class(如：small-4)来定义该列的宽度。Foundation定义这些列在同一个父容器内来保证这些列是在同一层的，占满父容器宽度的。这两大列分别占据了4个（单位）列和8个（单位）列的宽度。刚好占满12个（单位）列，用百分比来说明就是分别占父容器宽度的33.3% 和66.6%。

这也重要地说明：这些div块是可以无限地内嵌套的，因此大大地提高灵活性。见下面代码例子：

<div class="row">
    <div class="small-4 columns">
        <h2>This is a sidebar</h2>
        <div class="row">
            <div class="small-1 columns">
                <h6>#1</h6>
            </div>
            <div class="small-9 columns">
                <p>A post title</p>
            </div>
            <div class="small-2 columns">
                <button>Go</button>
            </div>
        </div>
    </div>
    <div class="small-8 columns">
        <h2>This is the content area</h2>
    </div>
</div>

可以看到这个sidebar例子用了row（行）内嵌套在column(列)里面，再嵌套column(列)，在第二个row里面嵌套了3列，分别宽度为small-1、small-9和small-2。是不是很方便实现？呵，我们是时候编写些Demo来实践体会一下，享受Foundation带来的方便。

大网格

初学Foundation之网格系统

<div class="row">
    <div class="small-4 large-3 columns">
        <h2>This is a sidebar</h2>
    </div>
    <div class="small-8 large-9 columns">
        <h2>This is the content area</h2>
    </div>
</div>

上面的例子中给每一列额外添加一个class，分别为large-3和large-9,作用就是当网页在大屏幕上浏览时，就会把sidebar原来的33.3%宽扩展为large-3，也就相当于25%(3/12=0.25)父容器宽。内容空间也会随之扩展的。这是个简单方法，但对于适应不同浏览窗口来说，组织自己的内容布局是非常有帮助的。
接下来我们可以使用class为large-centered和small-centered快速地使某列内容居中，但是前提是某行中只有一列。如果有多列呢，又怎么办？我们就可以使用class为push和pull来控制列的位置了。

<div class="row">
    <div class="small-3 push-9 columns">3</div>
    <div class="small-9 pull-3 columns">9, last</div>
</div>

在此例子中，第二个div本来应该显示在第一个div之后，但现在被pull（拉出到）前面显示，而第一个div却被push（推进到）后面显示。因此当在大屏幕下就可以左边显示列表，右边就显示主要内容，当屏幕变小的时候，内容就会自动地显示在列表下面。

块网格

初学Foundation之网格系统

讲了以上两种网格系统，接下来要讲的是块网格，块网格是在不管屏幕的大小，使得列表元素都可以均匀的分布。特别是对块状的内容来说更为理想，并不要求正确地显示多少行或者多少列。如果你想在电脑端网页和移动端页面上显示相同的布局，你只需要使用以 small-block-grid-为前缀的class。

这也像前面谈到的网格一样。你只需要使用一个small-12来代替small-12和large-12。很容易吧。

<ul class="small-block-grid-2 large-block-grid-4">
    <li><img src="../img/photo1.png"></li>
    <li><img src="../img/photo2.png"></li>
    <li><img src="../img/photo3.png"></li>
    <li><img src="../img/photo4.png"></li>
</ul>

总得来说，以上3种网格系统都是Foundation提供的，记住一点就是，从小网格到大网格只改变一次，使用小型网格目标运用在小型设备上，而大型网格则运用在电脑或者更大的屏幕。

Orbit插件

为了更震感的效果，接下来要介绍的是Foundation的一个非常有用的插件：Orbit。

初学Foundation之网格系统

这个方便的插件可以当作滑动门来使用， 可以将图片、video甚至普通的html内容做成滑动效果。用法是使用简单的标记，很容易掌握运用，当使用得当时，效果就会变得无比震撼。

<ul data-orbit>
    <li>
        <img src="../img/demos/demo1.jpg" />
        <div class="orbit-caption">...</div>
    </li>
    <li>
        <img src="../img/demos/demo2.jpg" />
        <div class="orbit-caption">...</div>
    </li>
    <li>
        <img src="../img/demos/demo3.jpg" />
        <div class="orbit-caption">...</div>
    </li>
</ul>

Orbit用到一个列表架构，每个列表项目都当作为一个滑动片。上面代码中可以看到，除了img标签外，还有一个div包含一个class为orbit-caption，作用是可以为每张图片添加一个标题。Orbit还提供显示分页、（左右）控制器甚至（滑动间隔）时间器。

看下面你可以在Orbit中改变参数的例子：

timer_speed: 10000,
animation_speed: 500,
bullets: true,
stack_on_small: true

这些参数包含了滑动速度、分页和有选择地在小屏幕上堆栈。值得注意的是，这些参数是需要通过初始化才起作用的，因此你要使用放在body底部的$(document).foundation()标准使用代码：

<script>
    $(document).foundation();
</script>

然后加上Orbit的选择参数：

<script>
    $(document).foundation('orbit', {
        timer_speed: 10000,
        animation_speed: 500,
        bullets: true,
        stack_on_small: true
    });
</script>

到目前为止，你就可以使用Orbit的效果了，还有更多的选择（参数）可以Foundation官方文档上查看。

备注：Foundation可以分开下载选择的js文件，要记得把这些文件都放到body的底部，以加快页面渲染速度，如果你更喜欢一个压缩后的js文件的话，那也可以只引入一个js文件。

<script src="js/foundation.min.js"></script>
<!--
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
-->

有用工具

你想不想下载Foundation玩玩呢？或者是想在一个干净的环境来测试你的想法？那就是点击jsfiddle。将可以用上最新版本的Foundation和包含所有的组件。

下一篇预告

在本文章当中讲解了Foundation的3大基础网格系统，简单介绍了Orbit插件。那么在下一篇文章将学习导航栏和部分插件，伴随着一些有用的工具……

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微薄。

如需转载，烦请注明出处：

英文原文：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-the-grid-system/

中文译文：http://www.w3cplus.com/css/foundation-for-beginners-the-grid-system.html

返回顶部