本文主要介绍这个Bootstrap框架的总体性功能界面，介绍其中用到的知识点和整体性的界面。希望读者对框架有一个更加直观、真实的认识了解，界面设计以及相关思路可以借鉴提高，也可以对相关的内容进行相互探讨，共同提高。 [b]1、《基于Metronic的Bootstrap开发框架》技术特点[/b] [b]1）采用最新最炫的Bootstrap响应式框架技术[/b] 整个基于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进行快速开发，实现整体性开发的最大效率提高。 框架的总体结构如下所示： [img]http://files.jb51.net/file_images/article/201605/20160512115904100.png[/img] 使得控制器能够获得很好的继承关系，并能以更少的代码，更高效的开发效率，实现Web项目的开发工作，整个控制器的设计思路如下所示。 [img]http://files.jb51.net/file_images/article/201605/20160512115904101.png[/img] 权限控制：良好的控制器设计规则，可以为Web开发框架本身提供了很好用户访问控制和权限控制，使得用户界面呈现菜单、Web界面的按钮和内容、Action的提交控制，均能在总体权限功能分配和控制之下。 [img]http://files.jb51.net/file_images/article/201605/20160512115904102.png[/img] 代码快速生成：良好的架构使得无论在业务逻辑层、控制器层、Web界面的UI层，均能提供统一的代码逻辑，这些代码均能通过代码生成工具Database2Sharp进行生成。Web界面代码可以充分利用代码生成工具Database2Sharp的元数据信息，实现Web界面的快速生成。有效减少出错的几率，提高Web界面编码的开发效率和乐趣，更可以使得企业内部的编码模式进行高效的统一。 [img]http://files.jb51.net/file_images/article/201605/20160512115904103.png[/img] Enterprise Library代码生成，可以快速生成除界面外的整体性的框架代码，Bootstrap的Web界面代码生成，可以快速生成基于Metronic的Bootstrap的前端界面代码和后台控制器代码，界面部分包括查询、分页、数据展示、数据导入导出、新增、编辑、查看、删除等基础功能界面，生成后我们可以基于这个基础上进行简单、快速的修改即可符合实际需要，极大提高我们Web界面的开发效率。 框架布局：以下是我整体性项目的总的效果图。 [img]http://files.jb51.net/file_images/article/201605/20160512115904104.png[/img] 【系统菜单栏】的内容，是动态从数据库里面获取的菜单；【系统顶栏】放置一些信息展示，以及提供用户对个人数据快速处理，如查看个人信息、注销、锁屏等操作内容；内容区一般包括【树列表区】、【条件查询区】和【列表数据及分页】内容，内容区域主要是可视化展示的数据，可以通过树列表控件、表格控件进行展示，一般数据还有增删改查、以及分页的需要，因此需要整合各种功能的处理。另外，用户的数据，除了查询展示外，还需要有导入、导出等相关操作，这些是常规性的数据处理功能。 菜单的处理和展示：一般为了管理方便，菜单分为三级，选中的菜单和别的菜单样式有所区分，菜单可以折叠最小化，效果如下所示。 [img]http://files.jb51.net/file_images/article/201605/20160512115905105.png[/img] [img]http://files.jb51.net/file_images/article/201605/20160512115905106.png[/img] [b]2、《基于Metronic的Bootstrap开发框架》模块界面介绍[/b] [b]2.1 首页图表模块界面[/b] [img]http://files.jb51.net/file_images/article/201605/20160512115905107.png[/img] [b]2.2 系统顶栏功能[/b] [img]http://files.jb51.net/file_images/article/201605/20160512115905108.png[/img] [img]http://files.jb51.net/file_images/article/201605/20160512115905109.png[/img] [b]2.3 行业动态功能（政策法规、通知公告、动态信息）[/b] 政策法规/通知公告/动态信息 列表界面 [img]http://files.jb51.net/file_images/article/201605/20160512115905110.png[/img] 编辑界面如下所示： [img]http://files.jb51.net/file_images/article/201605/20160512115905111.png[/img] 查看内容界面如下所示： [img]http://files.jb51.net/file_images/article/201605/20160512115905112.png[/img] [b]2.4 客户信息管理[/b] 客户列表界面如下所示： [img]http://files.jb51.net/file_images/article/201605/20160512115905113.png[/img] 客户信息编辑界面： [img]http://files.jb51.net/file_images/article/201605/20160512115905114.png[/img] 客户信息导入界面： [img]http://files.jb51.net/file_images/article/201605/20160512115905115.png[/img] [b]2.5 客户联系人管理[/b] [img]http://files.jb51.net/file_images/article/201605/20160512115905116.png[/img] 客户联系人添加/编辑界面 [img]http://files.jb51.net/file_images/article/201605/20160512115905117.png[/img] 客户联系人查看界面 [img]http://files.jb51.net/file_images/article/201605/20160512115905118.png[/img] 附件信息界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906119.png[/img] [b]2.6 通讯录管理[/b] 通讯录列表 [img]http://files.jb51.net/file_images/article/201605/20160512115906120.png[/img] 通讯录编辑界面如下所示。 [img]http://files.jb51.net/file_images/article/201605/20160512115906121.png[/img] [b]2.7 权限管理[/b] 1) 系统用户 列表界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906122.png[/img] 系统用户导入界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906123.png[/img] 系统用户编辑界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906124.png[/img] [img]http://files.jb51.net/file_images/article/201605/20160512115906125.png[/img] [img]http://files.jb51.net/file_images/article/201605/20160512115906126.png[/img] 系统用户的肖像上传和编辑 [img]http://files.jb51.net/file_images/article/201605/20160512115906127.png[/img] 系统用户删除确认对话框。 [img]http://files.jb51.net/file_images/article/201605/20160512115906128.png[/img] 系统用户的RDLC报表界面。 [img]http://files.jb51.net/file_images/article/201605/20160512115906129.png[/img] 2）机构管理界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906130.png[/img] 组织机构包含用户编辑界面 [img]http://files.jb51.net/file_images/article/201605/20160512115906131.png[/img] 3）用户角色管理 [img]http://files.jb51.net/file_images/article/201605/20160512115906132.png[/img] 角色可操作功能集合展示 [img]http://files.jb51.net/file_images/article/201605/20160512115907133.png[/img] 角色可访问数据权限控制： [img]http://files.jb51.net/file_images/article/201605/20160512115907134.png[/img] 角色包含机构管理： [img]http://files.jb51.net/file_images/article/201605/20160512115907135.png[/img] 4）系统功能管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907136.png[/img] 5）系统菜单管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907137.png[/img] 编辑菜单信息界面： [img]http://files.jb51.net/file_images/article/201605/20160512115907138.png[/img] 选择菜单图标界面： [img]http://files.jb51.net/file_images/article/201605/20160512115907139.png[/img] 6）系统登录日志管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907140.png[/img] 7）通用字典管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907141.png[/img] 8）菜单图标管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907142.png[/img] 9）图片相册管理 [img]http://files.jb51.net/file_images/article/201605/20160512115907143.png[/img] 编辑图片界面如下所示： [img]http://files.jb51.net/file_images/article/201605/20160512115907144.png[/img] 图片查看界面 [img]http://files.jb51.net/file_images/article/201605/20160512115907145.png[/img] 以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍的相关内容，希望对大家有所帮助！