Skip to content
On this page

Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

基础用法

使用列创建基础网格布局。

通过 rowcol 组件,并通过 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 的 响应式设计,预设了五个响应尺寸:xssmmdlgxl

Released under the MIT License.