快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

布局 Layout

概述

JUI支持Float浮动布局、Flex弹性布局和Grid网格布局三种方式。

定义元素类型 Display

设置类j-is-*来定义元素的类型(块级元素或行内元素),规定元素的流式布局。*为类型值,包含3种:block块级元素、inline行内元素、inline-block行内块级元素。

在JUI中,div默认为block类型,a标签默认为inline-block类型。

浮动布局 Float Layout

设置类j-float-*来定义浮动对象,*为浮动方向:leftright

清除浮动 在父级容器上设置类j-clearfix来清除浮动,解决浮动可能产生的样式兼容问题。

注意:使用浮动布局时,请自定义浮动对象的宽度等属性。

<div class="j-clearfix">
    <div class="j-float-left">Float Left</div>
    <div class="j-float-right">Float Right</div>
</div>
Float Left
Float Right
弹性布局 Flex Layout

设置类j-is-flexj-is-inline-flex来定义弹性布局对象,通过自定义属性来描述弹性布局的具体指标。

布局方向 设置属性direction="*"来定义flex-direction,说明内部元素在flex容器中的布局方向。*为排列类型值,包含4种:row横向正序、row-reverse横向逆序、column纵向正序、column-reverse纵向逆序。

内容换行 设置属性wrap="*"来定义flex-wrap,说明flex元素单行显示还是多行显示。*为排列类型值,包含3种:wrap换行、nowrap不换行、wrap-reverse换行但方向相反。

主轴排列 设置属性justify="*"来定义justify-content,说明flex元素在弹性空间中沿主轴方向的排列方式。*为排列类型值,包含常用的5种:start默认类型 从首至尾排列、end从尾至首排列、center居中排列、between两端对齐排列、around平均分布排列。

侧轴排列 设置属性align="*"来定义align-items,说明flex元素在弹性空间中沿侧轴方向的排列方式。*为排列类型值,包含常用的5种:stretchstartendcenterbaseline

self 设置属性self="*"来定义align-self,覆盖flex元素在侧轴方向上来自align-items的排列方式。*为排列类型值,包含常用的6种:autostretchcenterstartendbaseline

排序规则 设置属性order="*"来定义flex元素在弹性空间中布局时的排序。*为排列顺序值,JUI预设了11个排序位,分别从010

拉伸规则 设置属性grow="*"来定义flex-grow,说明flex元素在弹性空间中的拉伸规则。*为拉伸值,JUI预设了11个拉伸值,分别从010

收缩规则 设置属性shrink="*"来定义flex-shrink,说明flex元素在弹性空间中的收缩规则。*为收缩值,JUI预设了10个收缩值,分别从110

拉伸比率 设置属性box="*"来定义box-flex,说明flex元素在弹性空间中的可拉伸的比率。*为利率值,JUI预设了11个比率值,分别从010

网格布局 Grid Layout

设置类j-is-grid来定义网格布局对象,通过自定义属性来描述网格布局的具体指标。JUI围绕网格布局,仅提供常用指标支持。如果你有更多需求,请通过自定义类的方式来进行布局描述。

网格列设置类j-is-*来定义网格共有几列,*为列数值。若无定义,默认一列。JUI预设了12列网格。如4列,即j-is-4

1
2
3
4
<div class="j-is-grid j-is-4">
    <div bg="black">1</div>
    <div bg="major">2</div>
    <div bg="default">3</div>
    <div bg="basic">4</div>
</div>

间隙设置属性gap="*"来定义网格行与列之间的平均间隙。*为间隙尺寸值,包括5种:minismalldefaultmediumlarge

1
2
3
4
<div class="j-is-grid j-is-2" gap="default">
    <div bg="black">1</div>
    <div bg="major">2</div>
    <div bg="default">3</div>
    <div bg="basic">4</div>
</div>

行间隙设置属性row-gap="*"来定义网格行间隙。*为间隙尺寸值,包括5种:minismalldefaultmediumlarge

1
2
3
4
<div class="j-is-grid j-is-2" row-gap="small">
    <div bg="black">1</div>
    <div bg="major">2</div>
    <div bg="default">3</div>
    <div bg="basic">4</div>
</div>

列间隙设置属性column-gap="*"来定义网格列间隙。*为间隙尺寸值,包括5种:minismalldefaultmediumlarge

1
2
3
4
<div class="j-is-grid j-is-2" column-gap="mini">
    <div bg="black">1</div>
    <div bg="major">2</div>
    <div bg="default">3</div>
    <div bg="basic">4</div>
</div>
响应式布局 Responsive Layout

JUI未做任何响应式布局的预设,并且,我们不建议大家使用响应式设计:

因为响应式设计意味着Web端和Mobile端的流程同一化,但在实际业务中,为了最大化利用终端特性和最优用户体验,Web端和Mobile端在设计和流程上存在较大差异。

上一章:主题配置
下一章:容器 Docker