Layout 布局

用于页面整体布局的组件，基于 24 栅格系统。

基础布局（24栅格）

使用单一分栏创建基础的栅格布局。

t-col-24 (100%)

t-col-12 (50%)

t-col-12 (50%)

t-col-8 (33%)

t-col-8 (33%)

t-col-8 (33%)

t-col-6

t-col-6

t-col-6

t-col-6

<div class="t-row">
  <div class="t-col-24">
    <div class="t-inset">t-col-24 (100%)</div>
  </div>
</div>
<div class="t-row">
  <div class="t-col-12">
    <div class="t-inset">t-col-12 (50%)</div>
  </div>
  <div class="t-col-12">
    <div class="t-inset">t-col-12 (50%)</div>
  </div>
</div>
<div class="t-row">
  <div class="t-col-8">
    <div class="t-inset">t-col-8 (33%)</div>
  </div>
  <div class="t-col-8">
    <div class="t-inset">t-col-8 (33%)</div>
  </div>
  <div class="t-col-8">
    <div class="t-inset">t-col-8 (33%)</div>
  </div>
</div>

分栏间隔

通过 t-row--gap-lg 和 t-row--gap-sm 设置分栏之间的间隔。

间隔大 (t-row--gap-lg)

间隔大

间隔大

间隔大

间隔大

间隔小 (t-row--gap-sm)

间隔小

间隔小

间隔小

间隔小

<!-- 大间隔 -->
<div class="t-row t-row--gap-lg">
  <div class="t-col-6"><div class="t-raised-sm">间隔大</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔大</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔大</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔大</div></div>
</div>

<!-- 小间隔 -->
<div class="t-row t-row--gap-sm">
  <div class="t-col-6"><div class="t-raised-sm">间隔小</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔小</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔小</div></div>
  <div class="t-col-6"><div class="t-raised-sm">间隔小</div></div>
</div>

混合布局

可以灵活组合不同的分栏方式。

t-col-16 (66.6%)

t-col-8 (33.3%)

t-col-4

t-col-4

t-col-4

t-col-4

t-col-4

t-col-4

<div class="t-row">
  <div class="t-col-16">
    <div class="t-raised-sm">t-col-16 (66.6%)</div>
  </div>
  <div class="t-col-8">
    <div class="t-raised-sm">t-col-8 (33.3%)</div>
  </div>
</div>
<div class="t-row">
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
  <div class="t-col-4"><div class="t-raised-sm">t-col-4</div></div>
</div>

偏移布局

通过 t-col-offset-* 设置分栏的偏移量。

偏移6格

偏移6格

t-col-12 偏移6格

<div class="t-row">
  <div class="t-col-6"><div class="t-raised-sm">偏移6格</div></div>
  <div class="t-col-6 t-col-offset-6"><div class="t-raised-sm">偏移6格</div></div>
</div>
<div class="t-row">
  <div class="t-col-12 t-col-offset-6"><div class="t-raised-sm">t-col-12 偏移6格</div></div>
</div>

对齐方式

通过 t-row--justify-* 设置分栏的对齐方式。

居中 (t-row--justify-center)

居中

右对齐 (t-row--justify-end)

右对齐

两端对齐 (t-row--justify-space-between)

两端

对齐

<!-- 居中 -->
<div class="t-row t-row--justify-center">
  <div class="t-col-6"><div class="t-raised-sm">居中</div></div>
</div>

<!-- 右对齐 -->
<div class="t-row t-row--justify-end">
  <div class="t-col-6"><div class="t-raised-sm">右对齐</div></div>
</div>

<!-- 两端对齐 -->
<div class="t-row t-row--justify-space-between">
  <div class="t-col-4"><div class="t-raised-sm">两端</div></div>
  <div class="t-col-4"><div class="t-raised-sm">对齐</div></div>
</div>

响应式布局

支持 t-col-xs-*、t-col-sm-*、t-col-md-*、t-col-lg-* 响应式类名。

响应式

响应式

响应式

响应式

<div class="t-row">
  <div class="t-col-xs-24 t-col-sm-12 t-col-md-8 t-col-lg-6">
    <div class="t-raised-sm">响应式</div>
  </div>
  <div class="t-col-xs-24 t-col-sm-12 t-col-md-8 t-col-lg-6">
    <div class="t-raised-sm">响应式</div>
  </div>
  <div class="t-col-xs-24 t-col-sm-12 t-col-md-8 t-col-lg-6">
    <div class="t-raised-sm">响应式</div>
  </div>
  <div class="t-col-xs-24 t-col-sm-12 t-col-md-8 t-col-lg-6">
    <div class="t-raised-sm">响应式</div>
  </div>
</div>

API

Row 属性

属性名	类型	默认值	说明
class	string	-	额外的类名，支持 t-row--gap-lg、t-row--gap-sm、t-row--justify-center、t-row--justify-end、t-row--justify-space-between 等

Col 属性

属性名	类型	默认值	说明
class	string	-	栅格类名，格式为 t-col-{1-24}，支持 t-col-xs-*、t-col-sm-*、t-col-md-*、t-col-lg-*、t-col-offset-*