样式

Kico Style 的内置样式

栅格系统

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

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

栅格尺寸：

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

col-6

col-s-4

.col-m-3

col-l-6

查看代码：

自动栅格

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

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>