Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
基础用法
使用列创建基础网格布局。
通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。
html
<os-row class="os-margin-bottom-base">
<os-col :span="24"><div class="demo-col os-background-primary-light" /></os-col>
</os-row>
<os-row>
<os-col :span="12"><div class="demo-col os-background-primary" /></os-col>
<os-col :span="12"><div class="demo-col os-background-primary-light" /></os-col>
</os-row>分栏间隔
支持列间距。
行提供 gutter 属性来指定列之间的间距,其默认值为8。
html
<os-row :gutter="0">
<os-col :span="6"><div class="demo-col os-background-primary" /></os-col>
<os-col :span="6"><div class="demo-col os-background-primary-light" /></os-col>
<os-col :span="6"><div class="demo-col os-background-primary" /></os-col>
<os-col :span="6"><div class="demo-col os-background-primary-light" /></os-col>
</os-row>混合布局
html
<os-row>
<os-col :span="3"><div class="demo-col os-background-primary" /></os-col>
<os-col :span="5"><div class="demo-col os-background-primary-light" /></os-col>
<os-col :span="7"><div class="demo-col os-background-primary" /></os-col>
<os-col :span="9"><div class="demo-col os-background-primary-light" /></os-col>
</os-row>响应式布局
参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。