logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Typography 排版Layout 布局
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Grid 栅格

基于12列、6个默认的响应层，使用flexbox网格来构建各种形状和尺寸的布局

基础布局

使用单一分栏创建基础的栅格布局。

分栏间隔

分栏之间存在间隔。
.gx-n：修改水平间隔
.gy-n：修改垂直间隔
.g-n：修改所有方向间隔
.g-0：可用于去除间隔
n：为1-5自热数，如：
.gx-1 .gx-2 .gx-3 .gx-4 .gx-5
.gy-1 .gy-2 .gy-3 .gy-4 .gy-5
.g-1 .g-2 .g-3 .g-4 .g-5

混合布局

通过基础的 1/12 分栏任意扩展组合形成较为复杂的混合布局。

分栏偏移

通过制定 col 组件的 offset- 属性可以指定分栏偏移的栏数。

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

垂直居中

通过给行设置.align-items-，通过给列设置.align-self-，定义子元素的垂直排版方式

重新排序

使用.order-类来控制内容的视觉顺序。这些类是响应式的，所以你可以通过断点来设置顺序（例如，.order-1 .order-md-2）。

响应式布局

预设六个响应尺寸：.col-xs-* .col-sm-* .col-md-* .col-lg-* .col-xl-* .col-xxl-*

水平居中

通过给行设置.justify-content-，定义子元素的水平排版方式