布局 Layout

通过布局高效的组织内容，优化页面结构，加速开发进程。

基础用法

通过 Row 和 Col 组件快速实现栅格布局。

Col - 24

Col - 12

Col - 8

Col - 6

Col - 4

vue

<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: 38px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }

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

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

分栏偏移

通过 offset 属性可以指定分栏偏移的栏数。

col - 4

offset - 10 & col - 10

offset - 6 & col - 12

vue

<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: 38px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
    font-weight: 600;
  }
}
</style>

分栏间隔

通过 gutter 属性可以指定分栏之间的间隔，默认间隔为 0。

col - 4

col - 6

col - 8

col - 6

vue

<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: 38px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
    font-weight: 600;
  }
}
</style>

响应式布局

预设六个响应尺寸：xs sm md lg xl。

xs=24 sm=20 md=16 lg=10 xl=8

vue

<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=8</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: 38px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
  }

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

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

Row 属性

gutter	栏位间隔	StringNumber	-	-
justify	水平对齐方式	Justify	start	-
align	纵向对齐方式	Align	start	-

Col 属性

span	1-24 栏位	Number	24	-
offset	偏移量	Number	0	-
xs	<768px 响应式配置	ColResponsive	-	-
sm	≥768px 响应式配置	ColResponsive	-	-
md	≥992px 响应式配置	ColResponsive	-	-
lg	≥1200px 响应式配置	ColResponsive	-	-
xl	≥1920px 响应式配置	ColResponsive	-	-

布局 Layout ​

基础用法 ​

分栏偏移 ​

分栏间隔 ​

响应式布局 ​

Row 属性 ​