Metronic(后台管理模板) v4.5.2官方最新版

Metronic中文版是基于Bootstrap推出的一个完全响应式管理模板，拥有完整的Sass和RTL支持，集成大量的插件和UI原色，可以制作出精美的网站，支持目前主力的浏览器、手机和平板电脑等设备，具有简洁、直观、完全响应式的开发风格，有需要的朋友可以来本站下载！

软件功能组件

谷歌Open Sans字体

语言切换栏

多级菜单

卧式巨型菜单

电子商务

仪表板

固定的默认标题的布局

显示/隐藏侧边栏

横侧边栏菜单

横向菜单的网页实例

多用电子邮件模板

空白页的例子

盒装页面示例

非响应盒装的页面布局

用户界面功能

自定义标签和手风琴

地铁风格的按钮、表单元素

glyphicons一体化

字体(字体真棒真棒图标用3.2.0版)

图表

圆刻度盘(jQuery旋钮)

地铁时尚的滑块(jQuery UI)

单选按钮和复选框的Metro风格

自定义切换按钮(启动按钮)

jQuery UI模型

Windows 8风格瓷砖

toastr通知

集成的树视图(引导树)

集成的嵌套列表(jQuery嵌套)

离子范围滑块

noui范围滑块

圆刻度盘旋钮

用户界面的进度条(jQuery blockUI)

标签输入(jQuery标签输入)

日期选择器(引导日期选择器)

时间选择器(引导时间选择器)

钟面时间选择器(引导钟面时间选择器)

日期范围选择器(引导日期范围选择器)

颜色选择器(引导颜色选择器)

下拉菜单选择

自定义选择下拉(引导选择)

多重选择

IP地址输入

输入掩码

标签输入

先进的文件输入

集成WYSIWYG编辑器(引导wysihtml5和CKEditor)

无限的表单控件

推进形式布局(2列，加边，行行分离，剥离，标签剥离)

推进形式验证(jQuery表单验证插件)

表单向导

图像的裁剪

多文件上传

悬浮窗文件上传

组件形式

博客

新闻列表

新闻发布

Metro风格的时间表

综合全日历(jQuery完整的日历)

地图包含了世界地图和谷歌地图

Metronic界面介绍

所有的模板文件都有着固定结构，包括：header, mega menu, top menu, user bar, sidebar menu, quick sidebar, content 和 显示在底部的 footer。

预览效果

官网首页宣传图

主题1的截图

手机等小尺寸屏显示效果

Metronic使用教程

基于Metronic的Bootstrap开发框架总览

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

以下是我整体性项目的总的效果图。

启动菜单区的内容，动态从数据库里面获取，系统顶栏放置一些信息展示，以及提供用户对个人数据快速处理，如查看个人信息、注销、锁屏等操作，内容区域则主要是可视化展示的数据，可以通过树列表控件、表格控件进行展示，一般数据还有增删改查、以及分页的需要，因此需要整合各种功能的处理。另外，用户的数据，除了查询展示外，还需要有导入、导出等相关操作，这些是常规性的数据处理功能。确定好这些规则和界面效果后，我们可以通过代码生成工具进行生成，快速生成这些Web项目的界面效果了。

布局页面的使用

同时，我们为了提高页面的重用，一般情况下，是把每个页面相同部分的内容抽离出来，放到总的布局页面上，这样处理内容区域外，其他部分全部是继承自布局视图页面的内容了，我们的动态菜单部分，也是在布局视图里面的一部分内容。

上图的_Layout.cshtml就是基于C#的MVC总的布局视图页面。这样，我们在这个页面里面，设定了菜单的展示内容，以及留出主页面内容的部分，以及脚本的部分展示，就可以了。

菜单的展示代码如下所示：

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

由于Bootstrap一般把JS文件放到最后加载，因此我们在布局页面保留部分必备的Jquery等脚本外，还需要把脚本部分内容放到页面底部进行加载，并且我们脚本加载可以利用MVC的Bundles技术进行压缩整合处理。关于这方面技术，可以参考我之前的文章介绍《基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码》。

这样，我们在各个子页面的视图里面，引入布局视图页面后，只需要编写个性化展示内容的部分即可，具体代码如下所示。

然后在页面底部，包含所需部分的脚本代码即可，这样在页面生成后，就会依据布局页面设置好的顺序块，进行合理的展示，并且是把所有部分内容进行整合了。

页面编辑工具Sublime Text的使用

我前面截图，很多是VS环境里面的，不过一般我们编辑视图页面的时候，都是采用Sublime Text这个强大的编辑工具的，丰富的插件、智能语法提示等，会让你用了之后爱不释手，是编辑视图页面非常快速的利器，强烈推荐使用。

VS一般我们用来做文件管理，以及编译等处理就可以了。