栅格系统

Cola 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕尺寸的变化将会自适应显示模式，默认分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。使用方法类似于Bootstrap,但Cola比传统栅格系统更适合mis类应用界面的设计。

简介

栅格系统用于通过一系列的行row与列columns的组合来创建页面布局，你的内容就可以放入columns中。下面就介绍 Cola 栅格系统的工作原理：

• 行row可放置任何区域,row将区域等比例划分12格。
• 通过“行row在水平方向创建一组“列columns”。
• 你的内容应当放置于“列columns”内，并且，只有“列columns”可以作为行row”的直接子元素。
• 类似 .row 和 .small-4 这种预定义的类，可以用来快速创建栅格布局。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .small-4 来创建。
• 如果一“行row”中包含了的“列columns”大于 12，多余的“列columns”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .small- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .large- 不存在， 也影响大屏幕设备。

设备宽度定义

• 手机屏幕(small-*):小于等于768px;
• 平板屏幕(medium-*):大于769px and 小于等于1024px;
• 大屏幕(large-*):大于1024px and 小于等于1440px;
• 超大屏幕(xlarge-*):大于1440px;

...
...
...
...
...
...

列定义继承

列的定义可从小屏幕继承到大屏，如small-2将未定义medium-*和large-*的条件下直接影响到比small大的所有尺寸

...
...
...
...
...
...

小屏幕占满12列

当只定义大屏幕列数时，小屏幕将自动占满12格。如定义medium-2但未定义small-*时 small尺寸下会占满12列

...
...
...

尾部元素自动靠右

.small-4
.small-2
.small-4
.small-2.end

当列数不完整时当前行的最后一个元素将靠右显示，可通过也可添加end className进行消除此效果

多余的列将另起一行排列

...
...
...

列偏移

使用 .small-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.small-offset-4 类将 .small-4 元素向右侧偏移了4个列的宽度。

...
...
...
...
...
...
...
...

列排序

通过使用 .small-push-* 和 .small-pull-* 类就可以很容易的改变列的顺序。

...
...
...
...