在前面介紹了一系列的《基于Metronic的Bootstrap開發框架經驗總結》的隨筆文章，隨筆主要是介紹各個知識點的內容，對框架的總體性界面沒有很好的闡述，本篇隨筆主要介紹這個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進行快速開發，實現整體性開發的最大效率提高。
框架的總體結構如下所示：
控制器設計：Bootstrap開發框架沿用了我的《Winform開發框架》和《基于EasyUI的Web框架》的很多架構設計思路和特點，對Controller進行了封裝。使得控制器能夠獲得很好的繼承關系，并能以更少的代碼，更高效的開發效率，實現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 行業動態功能（政策法規、通知公告、動態信息）
政策法規/通知公告/動態信息 列表界面
編輯界面如下所示：
[圖片上傳中。。。（12）]
查看內容界面如下所示：
2.4 客戶信息管理
客戶列表界面如下所示：
[圖片上傳中。。。（14）]
客戶信息編輯界面：
客戶信息導入界面：
2.5 客戶聯系人管理
客戶聯系人添加/編輯界面
[圖片上傳中。。。（18）]
客戶聯系人查看界面
[圖片上傳中。。。（19）]
附件信息界面
[圖片上傳中。。。（20）]
2.6 通訊錄管理
通訊錄列表
[圖片上傳中。。。（21）]
通訊錄編輯界面如下所示。
[圖片上傳中。。。（22）]
2.7 權限管理
- 系統用戶 列表界面
[圖片上傳中。。。（23）]
系統用戶導入界面
[圖片上傳中。。。（24）]
系統用戶編輯界面
[圖片上傳中。。。（25）]
[圖片上傳中。。。（26）]
[圖片上傳中。。。（27）]
系統用戶的肖像上傳和編輯
[圖片上傳中。。。（28）]
系統用戶刪除確認對話框。
[圖片上傳中。。。（29）]
系統用戶的RDLC報表界面。
[圖片上傳中。。。（30）]
2）機構管理界面
[圖片上傳中。。。（31）]
組織機構包含用戶編輯界面
[圖片上傳中。。。（32）]
3）用戶角色管理
[圖片上傳中。。。（33）]
角色可操作功能集合展示
[圖片上傳中。。。（34）]
角色可訪問數據權限控制：
[圖片上傳中。。。（35）]
角色包含機構管理：
[圖片上傳中。。。（36）]
4）系統功能管理
[圖片上傳中。。。（37）]
5）系統菜單管理
[圖片上傳中。。。（38）]
編輯菜單信息界面：
[圖片上傳中。。。（39）]
選擇菜單圖標界面：
[圖片上傳中。。。（40）]
6）系統登錄日志管理
[圖片上傳中。。。（41）]
7）通用字典管理
[圖片上傳中。。。（42）]
8）菜單圖標管理
[圖片上傳中。。。（43）]
9）圖片相冊管理
[圖片上傳中。。。（44）]
編輯圖片界面如下所示：
[圖片上傳中。。。（45）]
圖片查看界面
[圖片上傳中。。。（46）]
