容器

推荐使用 tailwindcss, unocss 等 CSS 工具，更有利于个性化定制 UI 和按需构建最小化 CSS 文件。

默认样式文件中的 CSS 容器类。

基础容器

Flex 容器

见 Flex 布局

Grid 容器

见 Grid 布局

iOS 安全区

适用于以独立模式运行的 iOS 应用：

HTML
<div class="ios-safe-x">水平安全区</div><div class="ios-safe-y">垂直安全区</div><div class="ios-safe-left">左侧安全区</div><div class="ios-safe-right">右侧安全区</div><div class="ios-safe-top">顶部安全区</div><div class="ios-safe-bottom">底部安全区</div>

背景装饰

背景网格

用于落地页的装饰性网格背景：

HTML
<div class="j-background-grid"></div>

背景渐变

JUI 默认提供了 9 种背景渐变。使用工具类 bg-gradient-* 用于添加背景渐变。

• auto 自动渐变，根据主题颜色自动生成渐变。
• sunrise 晨曦。
• aurora 极光。
• ocean 海洋。
• meadow 草地。
• ember 余烬。
• dusk 黄昏。
• gold 鎏金。
• forest 森林。

HTML
<div class="grid-container grid-col-3">    <div class="bg-gradient-auto">bg-gradient-auto</div>    <div class="bg-gradient-sunrise">bg-gradient-sunrise</div>    <div class="bg-gradient-aurora">bg-gradient-aurora</div>    <div class="bg-gradient-ocean">bg-gradient-ocean</div>    <div class="bg-gradient-meadow">bg-gradient-meadow</div>    <div class="bg-gradient-ember">bg-gradient-ember</div>    <div class="bg-gradient-dusk">bg-gradient-dusk</div>    <div class="bg-gradient-gold">bg-gradient-gold</div>    <div class="bg-gradient-forest">bg-gradient-forest</div></div>

宽度工具

宽度类

HTML
<div class="w-full">100% 宽度</div><div class="w-half">50% 宽度</div><div class="w-screen">100vw 宽度</div>

宽高比

HTML
<div class="aspect-square">1:1</div><div class="aspect-video">16:9</div><div class="aspect-auto">自动</div>