Metronic中文版 v4.5.2官方最新版

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合，是一套基于Twitter Bootstrap 3.3.4框架开始的多功能响应式后台管理和前台开发模板，一个完全响应式管理模板。Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76 个模板页面，包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。高度可定制的，易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。整合了很多Bootstrap的前端技术和插件的使用，是一个非常不错的技术框架。Metronic采用了时尚、简洁、直观的metro扁平化分格设计，让你的项目看起来更吸引人，用户体验更好。

介绍

Metronic是基于BootStrap 3.3.5 框架开发的一个响应式的管理后台加前端主题模板。Metronic可以用于各种形式的网站程序，如管理员后台，管理仪表，电子商务后台，CMS，CRM，SAAS，公司网站，电商网站，商务网站，信息展示站，博客等。Metronic的时尚，干净，扁平化的设计，可以让你的网站看起来很友好，很吸引人。Metronic模板包含了大量的插件和UI元素，并且可以在主流浏览器和平板设备，智能设备正常显示。本站提供的这款Metronic采用了时尚、简洁、直观的metro扁平化分格设计，让你的项目看起来更吸引人，用户体验更好。并且集成了大量的插件和UI元素，支持目前流行的各种PC浏览器、平板电脑和手机，兼容iE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome等浏览器。

功能

简洁、直观、完全响应式的Metro风格设计基于Bootstrap 3.3.5框架，完整的Sass支持，完整的RTL支持，友好的开发代码，具体的metronic功能如下：
谷歌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 4.7.5提供了7种样式的模板，迎合不同开发者的爱好，也方便不同网站需求者选择。
1、仪表盘
2、经典的侧边栏
3、默认布局
4、横向的菜单
5、光栏
6、水平选项卡
7、Web App应用程序

使用说明

整体性项目的总的效果图

数据库中菜单的信息是一个树形结构，如下图所示：

布局页面的使用
同时，我们为了提高页面的重用，一般情况下，是把每个页面相同部分的内容抽离出来，放到总的布局页面上，这样处理内容区域外，其他部分全部是继承自布局视图页面的内容了，我们的动态菜单部分，也是在布局视图里面的一部分内容。_Layout.cshtml就是基于C#的MVC总的布局视图页面。这样，我们在这个页面里面，设定了菜单的展示内容，以及留出主页面内容的部分，以及脚本的部分展示，就可以了。

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

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

由于Bootstrap一般把JS文件放到最后加载，因此我们在布局页面保留部分必备的Jquery等脚本外，还需要把脚本部分内容放到页面底部进行加载，并且我们脚本加载可以利用MVC的Bundles技术进行压缩整合处理。

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

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

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