# 样式

## Kico Style 的内置样式

# 栅格系统

Kico Style 采用了类似 BootStrap 的 12 格布局，可用于手机，平板和台式机，并设置有三个尺寸的栅格系统。通过改变您的浏览器宽度，即可体验到不同类的效果 😉

建议在一行内不要使栅格超过总和 12，避免间距出现错误。（在新版已经支持多行展示，但会通过清除底部 `margin` 的方式纠正间距，建议为此保留足够的空间）同时建议在一行内不要混用不同类型的 Column 列元素。

## 栅格尺寸：

通过设置栅格尺寸，就可以快速构建一套多元化的响应式布局。

col-6

col-6

col-s-4

col-s-4

col-s-4

.col-m-3

.col-m-3

.col-m-3

.col-m-3

col-l-6

col-l-6

查看代码：

## 自动栅格

通过设置自动栅格，可以构建五栏布局（需根据子元素内容来决定），或是填充单行其余剩下的空间。

col-auto

col-auto

col-auto

col-auto

col-auto

col-3

col-4

col-auto

查看代码：

## 栅格类型：

通过设置栅格类型，可以增强该栅格的响应式效果。

适用环境 | 类名 | 行为
--- | --- | ---
固定 | `.col-*` | 始终为横向摆放，死都不会改（叠加后面的类则作为小于 600px 的设置，不竖向摆放）
手机 | `.col-s-*` | 大于 600px 的屏幕将更换为横向摆放
平板 | `.col-m-*` | 大于 900px 的屏幕将更换为横向摆放
台式机 | `.col-l-*` | 大于 1024px 的屏幕将更换为横向摆放

## 栅格间距：

通过栅格间距，可以用更窄的方式设计较为传统的页面。在 `.row` 元素上设置即可。

间距大小 | 类名 | 描述
--- | --- | ---
0 | `.full` | 没有间距
1em | `.s` | 较窄的间距
2em | 无需添加 | 默认间距
2.5em | `.m` | 较宽间距
3em | `.l` | 宽间距
1em/2em | `auto` | 自适应间距 新/推荐

自动间距的栅格

手机上变窄

电脑上默认宽

查看代码：

## 对齐方式：

通过设置对齐方式，可以实现一些用 `Float` 浮动方案较难解决的垂直居中对齐方式。

对齐方式 | 类名
--- | ---
左上 | 不添加任何类
右上 | `right` 或 `right top`
左下 | `bottom` 或 `left bottom`
右下 | `right bottom`
全局居中 | `center`
左居中 | `left center`
右居中 | `right center`
上居中 | `top center`
下居中 | `bottom center`
左下 | `bottom` 或 `left bottom`
右下 | `right bottom`
电脑为左，手机为横向居中 | `to-center` 或 `left to-center`
电脑为右，手机为横向居中 | `right to-center`

## 栅格隐藏：

通过设置栅格隐藏扩展类 `hide-s`，`hide-m`，`hide-l` 就可以在对应宽度时隐藏该栅格。

在小于 600px 时隐藏

在小于 900px 时隐藏

在小于 1024px 时隐藏

查看代码：

    <div class="row s">
      <div class="col-s-4 hide-s">
        <p>在小于 600px 时隐藏</p>
      </div>
      <div class="col-m-4 hide-m">
        <p>在小于 900px 时隐藏</p>
      </div>
      <div class="col-l-4 hide-l">
        <p>在小于 1024px 时隐藏</p>
      </div>
    </div>