基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2024-04-09 23:13:17

本文主要介绍这个Bootstrap框架的总体性功能界面，介绍其中用到的知识点和整体性的界面。希望读者对框架有一个更加直观、真实的认识了解，界面设计以及相关思路可以借鉴提高，也可以对相关的内容进行相互探讨，共同提高。

1、《基于Metronic的Bootstrap开发框架》技术特点

1）采用最新最炫的Bootstrap响应式框架技术

整个基于Metronic的Bootstrap开发框架，界面部分采用较新的Bootstrap技术，采用当前最新的Bootstrap3.x，集成了众多功能强大的Bootstrap控件。

Bootstrap是一个前端的技术框架，很多平台都可以采用，JAVA/PHP/.NET都可以用来做前端界面，整合JQuery可以实现非常丰富的界面效果，目前也有很多Bootstrap的插件能够提供给大家使用，本框架集合了众多最为优秀的插件，能给我们Web的用户体验提升到一个前所未有的水平。

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合，整合了很多Bootstrap的前端技术和插件的使用，是一个非常不错的技术框架。本框架以这个为基础，结合我对MVC的Web框架的研究，整合了基于MVC的Bootstrap开发框架，使之能够符合实际项目的结构需要。

框架后台采用基于C#的MVC技术，是目前.NET开发最为成熟流行的技术，框架后台数据库支持Oracle、SqlServer、MySql、Sqlite、Access等常规数据库，可通过配置进行自由切换，使用Enterprise Library模块进行数据访问的控制，使得数据访问更方便轻松。

整体框架开发采用Visual Studuio 2013以及页面编辑工具Sublime Text结合开发，页面以及后台代码，通过代码生成工具Database2Sharp进行快速开发，实现整体性开发的最大效率提高。

框架的总体结构如下所示：

使得控制器能够获得很好的继承关系，并能以更少的代码，更高效的开发效率，实现Web项目的开发工作，整个控制器的设计思路如下所示。

权限控制：良好的控制器设计规则，可以为Web开发框架本身提供了很好用户访问控制和权限控制，使得用户界面呈现菜单、Web界面的按钮和内容、Action的提交控制，均能在总体权限功能分配和控制之下。

代码快速生成：良好的架构使得无论在业务逻辑层、控制器层、Web界面的UI层，均能提供统一的代码逻辑，这些代码均能通过代码生成工具Database2Sharp进行生成。Web界面代码可以充分利用代码生成工具Database2Sharp的元数据信息，实现Web界面的快速生成。有效减少出错的几率，提高Web界面编码的开发效率和乐趣，更可以使得企业内部的编码模式进行高效的统一。

Enterprise Library代码生成，可以快速生成除界面外的整体性的框架代码，Bootstrap的Web界面代码生成，可以快速生成基于Metronic的Bootstrap的前端界面代码和后台控制器代码，界面部分包括查询、分页、数据展示、数据导入导出、新增、编辑、查看、删除等基础功能界面，生成后我们可以基于这个基础上进行简单、快速的修改即可符合实际需要，极大提高我们Web界面的开发效率。

框架布局：以下是我整体性项目的总的效果图。

【系统菜单栏】的内容，是动态从数据库里面获取的菜单；【系统顶栏】放置一些信息展示，以及提供用户对个人数据快速处理，如查看个人信息、注销、锁屏等操作内容；内容区一般包括【树列表区】、【条件查询区】和【列表数据及分页】内容，内容区域主要是可视化展示的数据，可以通过树列表控件、表格控件进行展示，一般数据还有增删改查、以及分页的需要，因此需要整合各种功能的处理。另外，用户的数据，除了查询展示外，还需要有导入、导出等相关操作，这些是常规性的数据处理功能。

菜单的处理和展示：一般为了管理方便，菜单分为三级，选中的菜单和别的菜单样式有所区分，菜单可以折叠最小化，效果如下所示。

2、《基于Metronic的Bootstrap开发框架》模块界面介绍

2.1 首页图表模块界面

2.2 系统顶栏功能

2.3 行业动态功能（政策法规、通知公告、动态信息）

政策法规/通知公告/动态信息列表界面

编辑界面如下所示：

查看内容界面如下所示：

2.4 客户信息管理

客户列表界面如下所示：

客户信息编辑界面：

客户信息导入界面：

2.5 客户联系人管理

客户联系人添加/编辑界面

客户联系人查看界面

附件信息界面

2.6 通讯录管理

通讯录列表

通讯录编辑界面如下所示。

2.7 权限管理

1) 系统用户列表界面

系统用户导入界面

系统用户编辑界面

系统用户的肖像上传和编辑

系统用户删除确认对话框。

系统用户的RDLC报表界面。

2）机构管理界面

组织机构包含用户编辑界面

3）用户角色管理

角色可操作功能集合展示

角色可访问数据权限控制：

角色包含机构管理：

4）系统功能管理

5）系统菜单管理

编辑菜单信息界面：

选择菜单图标界面：

6）系统登录日志管理

7）通用字典管理

8）菜单图标管理

9）图片相册管理

编辑图片界面如下所示：

图片查看界面

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍的相关内容，希望对大家有所帮助！

使用BootStrap实现用户登录界面UI

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现思路详解. 布局 1.左右各一半(col-md-6) 2.左侧登录框占左侧一半的10/12 3.右侧是登录系统的注意事项使用到的HTML元素 well 输入框组(input-group) 按钮(btn-success) HTML代码 <div class="row" style="margin-top:30px;"> <div class="col-md-6" style
JavaScript结合Bootstrap仿微信后台多图文界面管理

js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms
BootStrap下拉框在firefox浏览器界面不友好的解决方案

http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式很不友好上谷歌查了一下 1.小容器可以利用select:padding:0 2.下拉图标可以利用background-image:-moz-appearance:none把下拉框的样式去掉,然后 @-moz-document url-prefix() { select.form-control { -moz-appearance: none; appear
使用BootStrap和Metroui设计的metro风格微网站或手机app界面

今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面程序的源代码可以从此处获得:https://github.com/mz121star/weixin-metro 有喜欢的朋友可以拿去修改一下. <!DOCTYPE html>  <!--[if
使用Bootstrap框架制作查询页面的界面实例代码

以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

本文主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式框架技术整个基于Metronic的Bootstrap开发框架,界面部分采用较新的Bootstrap技术,采用当前最新的Bootstrap3.x,集成了众多功能强大的Boot
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也有很多Bootstrap的插件能够提供给大家使用,但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上,介绍Bootstrap的各种基础知识和简单的使用:本文希望以基于C#的MVC实际项目的基础上,对Bootstrap开发框架进行全面的案例介绍,以实际项目的代码和效果截图进行讲解,力
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.本文基于Bootstrap的框架基础上,再对这个模块进行更新处理,以及Office文档或者图片等附件的查看处理. 1.数据的导入操作一般系统模块里面,都有数据导入和导出操作,因此在界面自动生成的时候,我都倾向于给用户自动生成这些标准的查询.导入.导出等操作功能,界面效果如下所示. 导入操作,在Bootstrap框架里面,我把它作为一个层的
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

在前面的一篇随笔基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜单信息的图标样式,也是从数据库里面获取的,因此要求我们能够动态取得Bootstrap里面的各种图标定义了.本篇主要介绍如何提取Bootstrap的图标信息,存储到数据库里面为我所用. 1.菜单的显示及各种Bootstrap图标我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码这里条形码生成使用了JsBarcode组件进行处理,它支持很多

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

相关推荐

随机推荐