控件样式

整套控件样式都是基于以下付费 UI 框架,能起到以下核心目的:

  • 不再依赖前端开发人员
  • 大幅提高后端开发人员的开发效率(都是成型的控件)

http://keenthemes.com/preview/metronic/theme/admin_1/

面包屑

http://www.keenthemes.com/preview/metronic/theme/admin_1/layout_content_grey.html

默认:左侧面包屑,右侧操作按钮

右侧操作按钮选中

如果操作按钮只有一项,点击直接响应(示例上有多个操作按钮)。

表单

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

右侧的一行操作按钮不要

普通列表

http://www.keenthemes.com/preview/metronic/theme/admin_1/table_static_basic.html

排序列表

http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_buttons.html

自排序列表

http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_ajax.html

分页

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

列表单功能按钮

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_buttons.html

使用最频繁的场景:列表模块最右侧的操作列

使用示例 http://fuwu.jikexueyuan.com/user

列表多功能按钮

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_buttons.html

使用最频繁的场景:列表模块最右侧的操作列

使用示例 http://fuwu.jikexueyuan.com/role

表单操作按钮

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_buttons.html

肯定按钮:下图中「Green」 否定按钮:下图中「Default」

使用示例
提示:按钮需要与表单右侧的内容左对齐

输入框 Input

http://www.keenthemes.com/preview/metronic/theme/admin_1/form_validation.html

搜索栏输入框 Input
与「输入框 Input」一样,只是将 hint 写入到 Input 框内,形如:

输入框组 Input Group

http://www.keenthemes.com/preview/metronic/theme/admin_1/form_controls.html

使用示例

多文本输入框 Textarea

http://keenthemes.com/preview/metronic/theme/admin_1/form_controls.html

下拉单择框 Single Dropdown

http://keenthemes.com/preview/metronic/theme/admin_1/components_bootstrap_select.html

下拉多选框 Multiple Dropdown

http://keenthemes.com/preview/metronic/theme/admin_1/components_bootstrap_select.html

下拉检索单择框 Selected Single Dropdown

http://keenthemes.com/preview/metronic/theme/admin_1/components_bootstrap_select.html

Checkbox

http://www.keenthemes.com/preview/metronic/theme/admin_1/form_icheck.html

RadioButton

http://www.keenthemes.com/preview/metronic/theme/admin_1/form_icheck.html

弹框

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

页签 Tab

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_tabs_accordions_navs.html

日期时间输入框

http://fuwu.jikexueyuan.com/class/create

日期区间选择控件

http://fuwu.jikexueyuan.com/finance/detail

步骤

http://www.keenthemes.com/preview/metronic/theme/admin_1/elements_steps.html

警告

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

提示

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

只用两种:

  • Success,柔和一点,比如温馨提示;
  • Warning,突显一点,比如警告。

进度条

标签 Flag

http://www.keenthemes.com/preview/metronic/theme/admin_1/ui_general.html

上传文件

http://www.keenthemes.com/preview/metronic/theme/admin_1/components_bootstrap_fileinput.html

results matching ""

    No results matching ""