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
。