样式

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

<div class="row s">
    <div class="col-6">
        <p>col-6</p>
    </div>
    <div class="col-6">
        <p>col-6</p>
    </div>
</div>
<div class="row s">
    <div class="col-s-4">
        <p>col-s-4</p>
    </div>
    <div class="col-s-4">
        <p>col-s-4</p>
    </div>
    <div class="col-s-4">
        <p>col-s-4</p>
    </div>
</div>
<div class="row s">
    <div class="col-m-3">
        <p>.col-m-3</p>
    </div>
    <div class="col-m-3">
        <p>.col-m-3</p>
    </div>
    <div class="col-m-3">
        <p>.col-m-3</p>
    </div>
    <div class="col-m-3">
        <p>.col-m-3</p>
    </div>
</div>
<div class="row s">
    <div class="col-l-6">
        <p>col-l-6</p>
    </div>
    <div class="col-l-6">
        <p>col-l-6</p>
    </div>
</div>

自动栅格

通过设置自动栅格,可以构建五栏布局,或是填充单行其余剩下的空间。

PS:该栅格类型可能不支持 IE9 等古老浏览器

col-auto

col-auto

col-auto

col-auto

col-auto

col-3

col-4

col-auto

<div class="row s">
    <div class="col-auto">
        <p>col-auto</p>
    </div>
    <div class="col-auto">
        <p>col-auto</p>
    </div>
    <div class="col-auto">
        <p>col-auto</p>
    </div>
    <div class="col-auto">
        <p>col-auto</p>
    </div>
    <div class="col-auto">
        <p>col-auto</p>
    </div>
</div>
<div class="row s">
    <div class="col-3">
        <p>col-3</p>
    </div>
    <div class="col-4">
        <p>col-4</p>
    </div>
    <div class="col-auto">
        <p>col-auto</p>
    </div>
</div>

栅格类型:

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

适用环境 类名 行为
固定 .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 自适应间距 新/推荐
<div class="row auto">
    <div class="col-4 col-s-3 col-m-2">
        <p>自动间距的栅格,手机上变窄,电脑上默认宽。</p>
    </div>
</div>

对齐方式:

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

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

栅格隐藏:

通过设置栅格隐藏扩展类 hide-shide-mhide-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>