管理后台基础布局为「顶部导航栏+侧边菜单栏+主内容区」三段式，需用Bulma的section/aside/main配合Flexbox构建；侧边菜单折叠靠CSS类控制宽距而非display:none；表格、卡片、表单需按规范封装以统一风格；避免布局跳动须约束容器高度与滚动范围。
管理后台需要哪些基础布局模块
管理后台最核心的结构是「顶部导航栏 + 侧边菜单栏 + 主内容区」三段式布局，Bulma 本身不提供现成的 admin layout 组件，但用 section、aside、main 和 Flexbox 工具类就能快速搭出骨架。关键不是套模板，而是控制好容器宽度、高度继承和滚动行为。
- 顶部导航用
navbar，固定定位需手动加is-fixed-top并给body补padding-top - 侧边菜单建议用
aside+menu，设为is-2（占 2/12 列）或固定宽度（如width: 240px），避免响应式错乱 - 主内容区用
main+section，必须设min-height: calc(100vh - 64px)（减去 navbar 高度），否则内容短时 footer 会塌陷 - 别直接套
container——它带 max-width，后台通常需要撑满宽度，改用container is-fluid或直接用columns
侧边菜单折叠与展开怎么写才可靠
Bulma 没有内置 JS，所以侧边菜单收放必须自己写逻辑，但不用重造轮子。关键是把状态存在 class 上，让 CSS 控制显隐，JS 只负责 toggle。
- 初始状态：侧边菜单加
is-expanded类（自定义），主内容区加is-expanded对应调整 margin-left - 点击按钮触发
document.body.classList.toggle('has-sidebar-collapsed')，然后用 CSS 规则匹配：.has-sidebar-collapsed aside { width: 64px; }、.has-sidebar-collapsed main { margin-left: 64px; } - 不要用
display: none隐藏菜单——会导致内部组件（比如 dropdown）初始化异常；改用transform: translateX(-100%)或width: 0; overflow: hidden; - 移动端默认折叠，用
is-hidden-touch隐藏侧边栏，再用navbar-burger控制展开，但注意：burger 点击后要同时操作navbar-menu和侧边菜单两个区域
表格、卡片、表单在后台里怎么统一风格
后台高频元素就这三类，Bulma 提供了开箱即用的类，但容易忽略细节适配。
- 表格必须包在
table-container里，否则小屏横向溢出；加is-striped is-hoverable比默认更易读，但别叠加is-bordered——边框太多会让数据密度下降 - 卡片用
card+card-content即可，标题用card-header；注意card-footer默认没有 padding，要手动加pt-4 pb-4 - 表单字段统一套
field+control，但后台常需左右标签布局：用field is-horizontal，再配合field-label和field-body，否则 label 和 input 容易错位 - 所有输入控件（
input、select、textarea）加is-fullwidth，不然在 flex 容器里会收缩到最小内容宽
为什么后台页面总感觉“卡”或“跳动”
这不是 Bulma 的 bug，而是没处理好 height、overflow 和渲染时机。后台页面常含长列表或动态加载区块，布局抖动多源于容器高度未约束。
立即学习“前端免费学习笔记（深入）”；
-
main区域如果用了is-flex is-flex-direction-column，但子元素没设flex: 1，滚动条就会出现在整个页面而非仅内容区 - 搜索结果列表用
table时，每行高度不一致（比如含多行文本），会导致is-hoverable高亮闪烁——给tr加height: 48px或min-height: 48px可稳定视觉节奏 - 下拉菜单（
dropdown）弹出位置偏移，大概率是父容器没设position: relative；Bulma 的dropdown依赖这个定位上下文 - 深色模式切换后按钮颜色不对？检查是否覆盖了
$primary变量但没同步更新$primary-invert——Bulma 很多颜色类（如is-primary）会自动反色文字，变量不配对就会白字压白底
实际搭后台时，最难的从来不是写多少代码，而是决定哪些地方该留白、哪些地方该截断、哪些交互必须加 loading 状态——Bulma 给你工具，但边界感得你自己划。
