跳到主要内容
前端术语库

UI 组件 · 操作

底部操作栏

Bottom Action Bar

也叫：吸底操作栏、底部工具栏、固定底栏、提交栏、Footer Toolbar、Sticky Action Bar

固定在页面或面板底部的一条横栏，放「保存」「提交订单」这类完成任务的最后操作，页面怎么滚都看得见。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

给这个长表单加一个吸底的底部操作栏：position: sticky 贴在内容区底部，高 64px、白底、顶部 1px 分隔线和一点向上的阴影，宽度和内容区一致。左侧显示灰色提示「有 3 处修改未保存」，右侧依次是「取消」普通按钮和「保存」主按钮（高 36px，间距 12px）。表单没有改动时「保存」禁用；页面底部加 80px 内边距，避免最后一个字段被挡住；手机上再加 env(safe-area-inset-bottom)。

发给

01判断

你的内容是这样吗？

对照两列，确认底部操作栏是不是你要找的。

符合这些情况，用底部操作栏

  • 很长的表单或设置页，用户填到哪里都能直接保存或取消
  • 手机上的商品详情、购物车、下单页，需要一直露出购买或结算按钮
  • 勾选多条记录后，需要在底部显示已选数量和批量操作

是这些情况，换成别的

  • 只有三五个字段的短表单，按钮直接放在表单末尾即可

  • 在几个主要页面之间切换

    改用底部标签栏

  • 次要的、偶尔才用的操作，常驻底部会一直占着屏幕

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    固定的底栏盖住了页面最后一个输入框或按钮，页面底部没有留出空间

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    底栏里塞了五六个按钮，没有主次，手机上挤成两行

  3. 03

    页面里已经有「保存」按钮，底栏又放一个，用户不知道该点哪个

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由固定在底部的横向容器、左侧的汇总信息或提示、右侧的主次操作按钮组成，常带顶部分隔线或阴影。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1贴在屏幕或面板最底部的一条横栏，页面滚动时位置不变
  2. 2顶部有一条分隔线或向上的阴影，和上方内容分开
  3. 3右侧是一两个按钮，最右边是深色主按钮，左侧常有合计金额或提示文字

04解释

详细解释

底部操作栏贴在屏幕（或抽屉、对话框）的最下面：长表单底部的「取消 / 保存」，商品页底部的「加入购物车 / 立即购买」，购物车底部的「合计 ¥ 326 · 去结算」，勾选多条记录后出现的「已选 3 项 · 删除」都是它。左边常放汇总信息或提示，右边放按钮，主要按钮在最右边。抽屉、对话框底部那一排按钮也是同一种东西。

它和 工具栏 的区别：工具栏在内容上方，放对这块内容的各种操作（新建、导出、刷新）；底部操作栏在最下面，只放完成这一页任务的最后一两个动作。它和 底部标签栏 都贴在手机底部，但标签栏用来在几个主页面之间切换，操作栏是对当前页做提交。它也不是 页脚：页脚在页面最末尾放版权和链接，不会固定在屏幕上。

按钮不超过 3 个，主次分明。固定定位会盖住页面最后一截内容，要给页面底部留出同样高度的内边距；手机上还要加上安全区（iPhone 底部横条）的高度。表单没改动时「保存」可以置灰，有未保存的修改时在左侧提示。

开发者信息
术语 ID
component-action-bar
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-pro-footer-bar
  • .van-submit-bar
  • .van-action-bar
  • .ant-drawer-footer
  • .el-drawer__footer
  • .ant-modal-footer
  • .el-dialog__footer
  • .modal-footer
  • [data-slot="dialog-footer"]
  • [data-slot="sheet-footer"]
  • [data-slot="drawer-footer"]
  • .fixed-bottom:has(button, .btn):not(nav)
  • .sticky-bottom:has(button, .btn):not(nav)
  • .fixed.bottom-0:has(button):not(nav)
  • .sticky.bottom-0:has(button):not(nav)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • action-bar
  • actions-bar
  • bottom-actions
  • sticky-actions
  • fixed-actions
  • footer-toolbar
  • footer-actions
  • form-actions
  • form-footer
  • submit-bar
  • checkout-bar
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • FooterToolbar
  • ActionBar
  • SubmitBar
  • BottomActionBar
  • StickyActionBar
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 固定在底部
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30