后臺管理模板(Metronic)

Metronic v4.1.0 正式版 基于Bootstrap v3.3.5前端框架，Metronic v4.1.0 正式版 基于Bootstrap v3.3.5前端框架，Metronic 是一套精美的響應式后臺管理模板，基于強大的 Twitter Bootstrap 框架實現。Metronic 擁有簡潔優雅的 Metro UI 風格界面，6 種顏色可選，76 個模板頁面，包括圖表、表格、地圖、消息中心、監控面板等后臺管理項目所需的各種組件。

Metronic 是一個自適應管理面板 HTML模板，特點：自適應， Twitter Bootstrap 3.3.1 和AngularJS 框架，自定義管理面板，電子商務模塊，CMS, CRM, SAAS ，3個前端風格，4個后端管理面板風格，提供說明文檔等。

Bootstrap是一個前端的技術框架，很多平臺都可以采用，JAVA/PHP/.NET都可以用來做前端界面，整合JQuery可以實現非常豐富的界面效果，目前也有很多Bootstrap的插件能夠提供給大家使用，但是在國內很多基于Bootstrap的介紹很多還是停留在教學的基礎上，介紹Bootstrap的各種基礎知識和簡單的使用；本文希望以基于C#的MVC實際項目的基礎上，對Bootstrap開發框架進行全面的案例介紹，以實際項目的代碼和效果截圖進行講解，力求詳盡、直觀為大家介紹這方面的經驗和心得。

基于Metronic的Bootstrap開發框架總覽

Metronic是一個國外的基于HTML、JS等技術的Bootstrap開發框架整合，整合了很多Bootstrap的前端技術和插件的使用，是一個非常不錯的技術框架。本文以這個為基礎，結合我對MVC的Web框架的研究，整合了基于MVC的Bootstrap開發框架，使之能夠符合實際項目的結構需要的實際項目。

以下是我整體性項目的總的效果圖。

啟動菜單區的內容，動態從數據庫里面獲取，系統頂欄放置一些信息展示，以及提供用戶對個人數據快速處理，如查看個人信息、注銷、鎖屏等操作，內容區域則主要是可視化展示的數據，可以通過樹列表控件、表格控件進行展示，一般數據還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，用戶的數據，除了查詢展示外，還需要有導入、導出等相關操作，這些是常規性的數據處理功能。確定好這些規則和界面效果后，我們可以通過代碼生成工具進行生成，快速生成這些Web項目的界面效果了。

Bootstrap開發框架菜單展示

整個框架涉及了很多內容，包括常規Bootstrap的各種CSS特性的使用，以及菜單欄、Bootstrap圖標管理、系統頂欄、樹形控件JSTree、Portlet容器、Modal對話框、Tab控件、、下拉列表Select2、復選框iCheck、多文本編輯控件summernote、文件及圖片上傳展示fileinput、提示控件bootstrap-toastr和sweetalert、數值調整控件touchspin、視頻播放展示控件video-player等等，這些特性在整體性的解決方案里面都有設計，集合這些優秀的插件，能夠為我們的框架提供更強大的功能和豐富的界面體驗。

本節繼續回到框架的開始部分，菜單的處理和展示。一般為了管理方便，菜單分為三級，選中的菜單和別的菜單樣式有所區分，菜單可以折疊最小化，效果如下所示。

在Bootstrap，構建菜單是一個相對比較容易的事情，主要是利用了UL和LI，通過樣式的處理，就可以實現了菜單的布局設置了，代碼如下所示。

<ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">

<li class="start" id="1">

    <a href="/Home/index">

        <i class="icon-home"></i>

        <span class="title">首頁</span>

        <span class="selected"></span>

        <span class="arrow open"></span>

    </a>

</li>

<li id="2">

    <a href="javascript:;">

        <i class="icon-basket"></i>

        <span class="title">行業動態</span>

        <span class="selected"></span>

        <span class="arrow open"></span>

    </a>

    <ul class="sub-menu">

        <li class="heading" style="font-size:14px;color:yellow">

            <i class="icon-home"></i>

            行業動態

        </li>

        <li>

            <a href="#">

                <i class="icon-home"></i>

                <span class="badge badge-danger">4</span>

                政策法規

            </a>

        </li>

        <li>

            <a href="#">

                <i class="icon-basket"></i>

                <span class="badge badge-warning">4</span>

                通知公告

            </a>

        </li>

        <li>

            <a href="#">

                <i class="icon-tag"></i>

                <span class="badge badge-success">4</span>

                動態信息

            </a>

        </li>

    </ul>

</li>

</ul>

但是，我們一般的菜單是動態變化的，也就是需要從數據庫里面獲取，并設置到前端顯示，這樣我們就需要在MVC的控制器里面，輸出菜單的內容，然后綁定到前端的界面上，實現菜單數據的動態化，同時這也是權限控制的基礎處理。

在基類里面，我們可以在用戶登陸后，獲取菜單的數據放到ViewBag對象里面。

其中，GetMenuString函數就是對菜單的組裝處理。數據庫中菜單的信息是一個樹形結構，如下所示。

我們可以根據數據庫的菜單信息，構建一部分界面用到的HTML代碼。

布局頁面的使用

同時，我們為了提高頁面的重用，一般情況下，是把每個頁面相同部分的內容抽離出來，放到總的布局頁面上，這樣處理內容區域外，其他部分全部是繼承自布局視圖頁面的內容了，我們的動態菜單部分，也是在布局視圖里面的一部分內容。

上圖的_Layout.cshtml就是基于C#的MVC總的布局視圖頁面。這樣，我們在這個頁面里面，設定了菜單的展示內容，以及留出主頁面內容的部分，以及腳本的部分展示，就可以了。

菜單的展示代碼如下所示：

布局頁面留出的頁面展示Section如下所示。

由于Bootstrap一般把JS文件放到最后加載，因此我們在布局頁面保留部分必備的Jquery等腳本外，還需要把腳本部分內容放到頁面底部進行加載，并且我們腳本加載可以利用MVC的Bundles技術進行壓縮整合處理。關于這方面技術，可以參考我之前的文章介紹《基于MVC4+EasyUI的Web開發框架經驗總結（11）--使用Bundles處理簡化頁面代碼》。

這樣，我們在各個子頁面的視圖里面，引入布局視圖頁面后，只需要編寫個性化展示內容的部分即可，具體代碼如下所示。

然后在頁面底部，包含所需部分的腳本代碼即可，這樣在頁面生成后，就會依據布局頁面設置好的順序塊，進行合理的展示，并且是把所有部分內容進行整合了。

4、頁面編輯工具Sublime Text的使用

我前面截圖，很多是VS環境里面的，不過一般我們編輯視圖頁面的時候，都是采用Sublime Text這個強大的編輯工具的，豐富的插件、智能語法提示等，會讓你用了之后愛不釋手，是編輯視圖頁面非?？焖俚睦��?，強烈推薦使用。

VS一般我們用來做文件管理，以及編譯等處理就可以了。