栅格 Grid ​

通过划分 24 个栅格，保证页面布局的协调性。

基础用法 ​

通过 row 和 col 可以设定不同的栏位占比。

<template>
  <div class="demo-row" v-for="row in demoList">
    <bp-row>
      <bp-col v-for="col in row" :span="col">
        <div class="demo">col - {{ col }}</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<script setup lang="ts">
const demoList = [[24], [12, 12], [8, 8, 8], [6, 6, 6, 6], [4, 4, 4, 4, 4, 4]];
</script>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .bp-col:nth-child(2n) {
    .demo {
      background-color: #4096ff;
    }
  }

  .bp-col:nth-child(2n + 1) {
    .demo {
      background-color: #1677ff;
    }
  }
}
</style>

栅格间距 ​

通过给 row 设置 gutter 属性实现控制栅格之间的距离。

<template>
  <div class="demo-row">
    <bp-row :gutter="10">
      <bp-col :span="4">
        <div class="demo">col - 4</div>
      </bp-col>
      <bp-col :span="6">
        <div class="demo">col - 6</div>
      </bp-col>
      <bp-col :span="8">
        <div class="demo">col - 8</div>
      </bp-col>
      <bp-col :span="6">
        <div class="demo">col - 6</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
  }
}
</style>

栅格偏移 ​

在 col 上通过设置 offset 属性可实现偏移距离。

<template>
  <div class="demo-row">
    <bp-row>
      <bp-col :span="4">
        <div class="demo">col - 4</div>
      </bp-col>
      <bp-col :span="10" :offset="10">
        <div class="demo">offset - 10 & col - 10</div>
      </bp-col>
    </bp-row>
  </div>

  <div class="demo-row">
    <bp-row>
      <bp-col :span="12" :offset="6">
        <div class="demo">offset - 6 & col - 12</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
  }
}
</style>

响应式布局 ​

通过分别设置对应尺寸下的属性实现响应式。

<template>
  <div class="demo-row">
    <bp-row>
      <bp-col :xs="24" :sm="20" :md="16" :lg="10" :xl="8">
        <div class="demo">xs=24 sm=20 md=16 lg=10 xl=6</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .bp-col:nth-child(2n) {
    .demo {
      background-color: #4096ff;
    }
  }

  .bp-col:nth-child(2n + 1) {
    .demo {
      background-color: #1677ff;
    }
  }
}
</style>

Row 属性 ​

gutter
栏位间隔
StringNumber
-
justify
水平对齐方式
Enum
start
align
垂直对齐方式
Enum
start

Col 属性 ​

span
栏位数量 1-24
StringNumber
24
offset
偏移量
StringNumber
-
xs
<768px 响应式栅格数或者栅格属性对象
ColResponsiveNumber
-
sm
≥768px 响应式栅格数或者栅格属性对象
ColResponsiveNumber
-
md
≥992px 响应式栅格数或者栅格属性对象
ColResponsiveNumber
-
lg
≥1200px 响应式栅格数或者栅格属性对象
ColResponsiveNumber
-
xl
≥1920px 响应式栅格数或者栅格属性对象
ColResponsiveNumber
-