fastadmin常用按钮和颜色

Fastadmin

首页 > PHP框架 > Fastadmin >

 shitouadmin  2026-01-21 22:12:55 

FastAdmin 基于 Bootstrap 框架构建，其按钮样式完全兼容 Bootstrap 的样式体系，同时还扩展了一些适合后台管理系统的自定义样式。下面为你整理了最常用的按钮类型、样式类和颜色搭配：
FastAdmin 核心按钮样式
1. 基础按钮（兼容 Bootstrap）

按钮类型	样式类	颜色	适用场景
主要按钮	`btn btn-primary`	深蓝色	核心操作（提交、保存、确认）
成功按钮	`btn btn-success`	绿色	成功操作（启用、恢复、导出）
信息按钮	`btn btn-info`	天蓝色	信息类操作（查看、详情）
警告按钮	`btn btn-warning`	橙色	提醒操作（编辑、修改）
危险按钮	`btn btn-danger`	红色	危险操作（删除、禁用、清空）
默认按钮	`btn btn-default`	浅灰色	普通操作（返回、取消）
链接按钮	`btn btn-link`	蓝色（文字）	跳转类操作（查看原文）

2. FastAdmin 扩展按钮（后台常用）

扩展样式类	效果 / 颜色	适用场景
`btn btn-primary btn-xs`	小尺寸主色按钮	表格行内操作（编辑、删除）
`btn btn-sm`	小号按钮	工具栏紧凑操作
`btn btn-lg`	大号按钮	页面核心操作（批量提交）
`btn btn-flat`	扁平风格（无阴影）	简约风格的后台界面
`btn btn-disabled`	禁用状态（灰色）	不可点击的操作
`btn btn-refresh`	刷新按钮（带图标）	刷新数据、重新加载

3. 带图标的按钮（FastAdmin 高频使用）
FastAdmin 集成了 Font Awesome 图标，按钮 + 图标是后台最常用的组合：

<button class="btn btn-primary"><i class="fa fa-plus"></i> 新增</button>



<button class="btn btn-warning btn-xs"><i class="fa fa-pencil"></i> 编辑</button>



<button class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 删除</button>



<button class="btn btn-success btn-xs"><i class="fa fa-check"></i> 启用</button>



<button class="btn btn-default btn-xs"><i class="fa fa-close"></i> 禁用</button>



<button class="btn btn-info"><i class="fa fa-download"></i> 导出</button>



<button class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i> 刷新</button>

4. FastAdmin 表格操作栏按钮（最常用）
表格的 operate 列是使用按钮最频繁的地方，推荐统一样式：

// 表格操作列配置示例

{

    field: 'operate',

    title: __('Operate'),

    table: table,

    events: Table.api.events.operate,

    buttons: [

        {

            name: 'edit',

            text: __('Edit'),

            title: __('Edit'),

            classname: 'btn btn-warning btn-xs btn-editone', // 小尺寸警告色

            icon: 'fa fa-pencil',

            url: 'xxx/edit'

        },

        {

            name: 'del',

            text: __('Delete'),

            title: __('Delete'),

            classname: 'btn btn-danger btn-xs btn-delone', // 小尺寸危险色

            icon: 'fa fa-trash',

            url: 'xxx/del'

        },

        {

            name: 'enable',

            text: __('Enable'),

            title: __('Enable'),

            classname: 'btn btn-success btn-xs btn-ajax', // 小尺寸成功色

            icon: 'fa fa-check',

            url: 'xxx/enable',

            confirm: '确认启用？'

        }

    ],

    formatter: Table.api.formatter.operate

}