UIkit组件默认样式更克制、呼吸感强，动画轻量且基于CSS transform，图标与排版自然耦合，Less变量按组件精细控制；Bootstrap则节奏紧凑、JS依赖强、图标需手动调整、变量全局统一。
UIkit 的组件默认样式更克制，留白和间距更呼吸感
Bootstrap 默认用 $spacer: 1rem 统一控制所有内边距，.btn、.card、.alert 都套同一套紧凑节奏，视觉上容易“挤”。UIkit 则按组件语义分层定义：按钮用 uk-button 时默认有更宽松的 padding，卡片（uk-card）自带 uk-card-body 子容器，强制内容区与边框分离，天然支持「内容呼吸感」。
常见错误是直接套 uk-card uk-card-default 却忽略内部结构——结果文字贴边、图标没对齐。正确做法是始终嵌套：
<div class="uk-card uk-card-default"><br> <div class="uk-card-body"><p>内容</p></div><br></div>
UIkit 的动画与过渡更轻量，不依赖 JavaScript 控制显隐
Bootstrap 的 modal、dropdown 显隐靠 JS 切换 display: none 或 opacity，动画由 transition 硬写在类里，改起来得覆盖整套 CSS。UIkit 的 uk-toggle、uk-offcanvas 则基于 CSS 自身的 transform + opacity 动画，且默认启用 GPU 加速（will-change: transform），滚动中触发也不卡顿。
容易踩的坑：
• 直接修改 uk-modal 的 transition 属性，会破坏其与 uk-scrollspy 的联动逻辑
• 在 iOS Safari 中禁用 transform 动画（如设 transform: none），会导致 uk-offcanvas 消失后背景无法恢复滚动
UIkit 的图标系统与文本排版耦合更自然
Bootstrap 图标（Bootstrap Icons）是独立 SVG 集合，插入后需手动调大小、对齐、配色；UIkit 图标（uk-icon）则内置语义化尺寸缩放：uk-icon="icon: heart; ratio: 1.5" 会自动按当前字体大小等比缩放，且颜色继承父级 color，无需额外写 fill。
典型使用场景：
• 导航菜单项带图标：<a href="#"><span uk-icon="icon: home"></span>首页</a>，图标与文字基线自动对齐
• 表单提示：<span uk-icon="icon: check; ratio: 0.8"></span>，小号图标不压文字行高
• 错误状态：<span uk-icon="icon: warning; color: @danger"></span>，颜色变量直接生效
定制时 UIkit 的 Less 变量更贴近设计语言颗粒度
Bootstrap 的 $border-radius 是全局开关，改了按钮圆角，.card 和 .input-group 全跟着变。UIkit 的 Less 变量按组件拆得细：@card-border-radius、@button-border-radius、@badge-border-radius 各自独立，改一个不影响其他。
性能影响要注意：
• 若只改 @button-border-radius 却没删掉未用组件（比如 components/tooltip），编译出的 CSS 仍含冗余规则
• uk-icon 的 SVG 内联渲染依赖 uk-icons.min.js，若页面禁用 JS，图标将不显示——这点比 Bootstrap Icons 的纯静态 SVG 更脆弱
.btn 规则链，还容易漏掉 :focus-visible 或 aria-pressed 状态。 
