BFUI

Appearance

Return to top
本页目录

Grid 栅格

栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，使页面排版美观、舒适。

我们的栅格化系统基于弹性布局来实现，将区域分成了 24 等份。

代码示例

基础用法

使用 Row 和 Col 组件，可以创建一个基本的栅格系统，Col 必须放在 Row 里面。

当不指定特定宽度时，所有的栅格将自然地平分并撑满每一行的空间，且默认高度相等。

100%
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
高度撑满，即使内容没有填满空间。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
查看代码
vue
<template>
  <bf-row>
    <bf-col>100%</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>1/2</bf-col>
    <bf-col>1/2</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>1/3</bf-col>
    <bf-col>1/3</bf-col>
    <bf-col>1/3</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>1/4</bf-col>
    <bf-col>1/4</bf-col>
    <bf-col>1/4</bf-col>
    <bf-col>1/4</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>1/6</bf-col>
    <bf-col>1/6</bf-col>
    <bf-col>1/6</bf-col>
    <bf-col>1/6</bf-col>
    <bf-col>1/6</bf-col>
    <bf-col>1/6</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>高度撑满，即使内容没有填满空间。</bf-col>
    <bf-col>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida
      venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas
      sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit
      ultricies neque.
    </bf-col>
  </bf-row>
</template>

<script setup lang="ts">
import { BfRow, BfCol } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-row {
  background-color: var(--bf-color-background);
  margin-bottom: 16px;
}

.bf-row:last-child {
  margin-bottom: 0;
}

.bf-col {
  padding: 10px;
  text-align: center;
  color: white;
}

// 奇数项
.bf-col:nth-child(odd) {
  background-color: #1677ff;
}

// 偶数项
.bf-col:nth-child(even) {
  background-color: #69b1ff;
}
</style>

占位格数(span)

当你的需求不是等宽栅格的时候，可以通过在 Col 上使用 span 属性来设置栅格的占位格数，取值范围是 0~24，为 0 时相当于 display: none。

  • 若每行中的 栅格占位总数＝ 24，正好占满一行；
  • 若每行中的 栅格占位总数＜ 24，会有剩余空间；
  • 若每行中的 栅格占位总数＞ 24，会被挤成多行；

如果某行有剩余空间，并且存在没有指定宽度的自适应栅格，则它们将继续分配可用空间，如下方示例中加了 “auto” 标签的栅格。

24
12
12
8
8
8
6
6
6
6
4
4
4
4
4
4
栅格占位总数小于 24 时会有剩余空间：

8
6
4
1
2
3
5
栅格占位总数大于 24 时将被挤换行：

8
12
6
4
未指定宽度的栅格将自适应地继续平分可用空间：

auto
6
6
auto
4
auto
4
auto
4
查看代码
vue
<template>
  <bf-row>
    <bf-col :span="24">24</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="12">12</bf-col>
    <bf-col :span="12">12</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="8">8</bf-col>
    <bf-col :span="8">8</bf-col>
    <bf-col :span="8">8</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="6">6</bf-col>
    <bf-col :span="6">6</bf-col>
    <bf-col :span="6">6</bf-col>
    <bf-col :span="6">6</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="4">4</bf-col>
    <bf-col :span="4">4</bf-col>
    <bf-col :span="4">4</bf-col>
    <bf-col :span="4">4</bf-col>
    <bf-col :span="4">4</bf-col>
    <bf-col :span="4">4</bf-col>
  </bf-row>

  <hr />
  栅格占位总数小于 24 时会有剩余空间：
  <br /><br />

  <bf-row>
    <bf-col :span="8">8</bf-col>
    <bf-col :span="6">6</bf-col>
    <bf-col :span="4">4</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="1">1</bf-col>
    <bf-col :span="2">2</bf-col>
    <bf-col :span="3">3</bf-col>
    <bf-col :span="5">5</bf-col>
  </bf-row>

  <hr />
  栅格占位总数大于 24 时将被挤换行：
  <br /><br />

  <bf-row>
    <bf-col :span="8">8</bf-col>
    <bf-col :span="12">12</bf-col>
    <bf-col :span="6">6</bf-col>
    <bf-col :span="4">4</bf-col>
  </bf-row>

  <hr />
  未指定宽度的栅格将自适应地继续平分可用空间：
  <br /><br />

  <bf-row>
    <bf-col>auto</bf-col>
    <bf-col :span="6">6</bf-col>
  </bf-row>
  <bf-row>
    <bf-col :span="6">6</bf-col>
    <bf-col>auto</bf-col>
    <bf-col :span="4">4</bf-col>
  </bf-row>
  <bf-row>
    <bf-col>auto</bf-col>
    <bf-col :span="4">4</bf-col>
    <bf-col>auto</bf-col>
    <bf-col :span="4">4</bf-col>
  </bf-row>
</template>

<script setup lang="ts">
import { BfRow, BfCol } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-row {
  background-color: var(--bf-color-background);
  margin-bottom: 16px;
}

.bf-row:last-child {
  margin-bottom: 0;
}

.bf-col {
  padding: 10px;
  text-align: center;
  color: white;
}

// 奇数项
.bf-col:nth-child(odd) {
  background-color: #1677ff;
}

// 偶数项
.bf-col:nth-child(even) {
  background-color: #69b1ff;
}
</style>

区块间隔(gutter)

通过在 Row 上的 gutter 属性可以设置栅格之间的区域间隔(单位 px)，其默认值为 0。

我们推荐使用 8n 作为栅格间隔的值(n 是自然数)，选择其他值时也尽量保持值为偶数。

1
1
1
查看代码
vue
<template>
  <bf-row :gutter="16">
    <bf-col>
      <div>1</div>
    </bf-col>
    <bf-col>
      <div>1</div>
    </bf-col>
    <bf-col>
      <div>1</div>
    </bf-col>
  </bf-row>
</template>

<script setup lang="ts">
import { BfRow, BfCol } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-row {
  background-color: var(--bf-color-background);
  margin-bottom: 16px;
}

.bf-row:last-child {
  margin-bottom: 0;
}

.bf-col div {
  padding: 10px 0;
  text-align: center;
  color: white;
}

// 奇数项
.bf-col:nth-child(odd) div {
  background-color: #1677ff;
}

// 偶数项
.bf-col:nth-child(even) div {
  background-color: #69b1ff;
}
</style>

API

Row Props

属性 Attribute说明 Description类型 Type默认值 Default
gutter栅格间隔Number0

Col Props

属性 Attribute说明 Description类型 Type默认值 Default
span栅格占位格数，为 0 时相当于 display: none;Number-

根据MIT许可证发布

Copyright © 2023-present BF-Teams