发布于 2017-04-01 21:05:36 | 91 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下

本文主要介绍这个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 Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
基于BootStrap与jQuery.validate实现表单提交校验功能
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务