本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下.

metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootstrap,所以满足响应式的UI设计,故同时支持在各种设备和屏幕分辨率下UI样式不会出现大的硬伤.可以做到一套UI兼容各种屏幕各种设备.

打开metronic目录下的start.htm文件,可以看到如下的视图:

框架内置了好几种主题颜色,随便选一个主题,按下html按钮会导向对应主题的页面预览页:

可以看到预览页中主要分为左侧的菜单,上侧的导航和右侧的内容页面及侧边栏这几部分组成,这个框架的整体布局大体就是这样的形式.当然在此基础上我们可以做一些布局的调整,比如去掉上面的导航右侧的边栏等.

左侧菜单中的各种选项就是这个框架为我们内置的各种UI样式,非常丰富,包含各种样式的UI组件表单等等.我们可以查看对应的页面文件来查看对应样式的前端代码.

因为这个是程序员视角的教程,所以不会在这里详细介绍前端的样式代码,但是呢为了更好的使用这个样式库,还是建议扫一眼bootstrap的教程.不会浪费多久时间.

bootstrap菜鸟教程

以上那个菜鸟教程其实已经是很简略的了,但是即便这样也不用看的太细致,只需要看一下第一部分的CSS,简单扫一下第二部分的布局组件即可.

然后这里我举一个实际的使用例子,比如我们打开metronic目录/theme/templates/admin/table_editable.html这个文件.

可以看到这是一个可编辑的table组件.查看table_editable.html的源码可以看到如下引入:

<!-- 页头一堆CSS的引入 -->

<!-- 页尾一堆js的引入-->
<script src="../../assets/admin/pages/scripts/form-editable.js"></script>
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components 重要且必需,初始化metronic核心的东东
Layout.init(); // init current layout 重要且必需,初始化一些布局
//之后的都是非必需的一些组件插件的初始化
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
FormEditable.init(); //这个就是我们这个例子中的table组件初始化的地方
});
</script>

这个页面中引入的form-editable.js文件,实际就是我们自己需要根据业务逻辑和实际需求进行更改的js文件,其中包含table这个组件的UI样式功能实现,这里就需要看一下其中的js代码实现,简单的梳理一下这个组件的使用规则,然后我们将其中的代码全都复制到我们自己的js文件中,并根据需要进行一定的修改,最后只需要引入我们自己修改后的js文件即可.

以上就是这个metronic框架的程序员视角的简易应用流程.整体使用起来还是很方便的,基本只要找到样本样式,查看源码,梳理插件的js逻辑,修改,引入就可以得到外观效果很不错的UI界面了.

PS:在metronic目录\theme\assets\global\css下的全局样式,效果也很不错,尤其是其中的名字中带md的3d阴影样式,很漂亮.可以根据需要引入不同的全局样式.

不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角的更多相关文章

  1. 使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)

    对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. Sa ...

  2. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  3. Taurus.MVC 微服务框架 入门开发教程:项目部署:1、微服务应用程序常规部署实现多开,节点扩容。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  4. 程序员是天生的软件UI设计师

    一个软件项目,谁才是软件开发的主体,是软件UI设计师?还是程序员? 这还用问吗?当然是程序员拉.引用以下alienbat知友的一段评论:对于软件开发而言,码农的工作是必需的.设计师的工作是可选的. 举 ...

  5. GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...

  6. 常见前端UI框架

    祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...

  7. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  8. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  9. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

随机推荐

  1. Net设计模式实例之适配器模式(Adapter Pattern)

    一.适配器模式简介(Brief Introduction) 适配器模式,将一个类装换成客户期望的另外一个接口.Adapter模式使的原本由于接口不兼容而不能工作的那些类可以一起工作. 二.解决的问题( ...

  2. iOS 商品倒计时 限时特价 限时优惠 功能的封装

    最近项目中多个页面用到了 商品特价倒计时的功能  为了偷懒 于是自己封装了一个限时抢购 倒计时的view 代码实现如下: 定向价 限时特价 模型代码实现: #pragma mark 商品定向价模型 @ ...

  3. 如何从线程返回信息——轮询、回调、Callable

    考虑有这样一个LiftOff类: /** * 类LiftOff.java的实现描述:显示发射之前的倒计时 * * @author wql 2016年9月21日 下午1:46:46 */ public ...

  4. Xamarin.Android之封装个简单的网络请求类

    一.前言 回忆到上篇 <Xamarin.Android再体验之简单的登录Demo> 做登录时,用的是GET的请求,还用的是同步, 于是现在将其简单的改写,做了个简单的封装,包含基于Http ...

  5. IIS事件查看器_WebServer事件查看器_帮助查看IIS-Web服务器事件执行日志

    IIS服务器是我们常用的Web站点部署工具,而我们有时可能遇到IIS服务器的应用程序池莫名其妙的关闭了,或者是其他未知原因等等,我们这是可以通过微软提供的WebServer(Web服务事件查看器),来 ...

  6. 记一SQL部署问题

    在部署环境时,不同的环境可能会有一些不同步,而个人遇到的问题就是在开发环境中表中均有字段 BestCaseId 和 RiskId 字段,生产环境中目前只有 BestCaseId 字段,新搭建的测试环境 ...

  7. IDE有毒

    程序员按项目性质大致有三种:写Demo的.写Proto的.写成品的:按项目开发周期大致有:写开头的.写中间的.写结尾的. Demo是样品,主要是表面上初步实现,临时忽悠客户用的,不一定要求继续演化: ...

  8. [moka同学笔记]四、Yii2.0课程笔记(魏曦老师教程)[匿名函数的使用操作]

    在评论页面中index.php中 [ 'attribute'=>'status', 'value'=>'status0.name', 'filter'=>Commentstatus: ...

  9. Java--Jsp内置对象列表

  10. [Tool] SourceTree操作中遇到错误(Filename too long)的解决方案

    [Tool] SourceTree操作中遇到错误(Filename too long)的解决方案 问题情景 使用SourceTree,可以方便开发人员使用图形化接口的Git指令来管理原始码.但是在Wi ...