Bootstrap 之 Metronic 模板的学习之路 - (1)总览
写在前面
bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者。觉得贵的,想必不用我说,你也会找到途径。:b
目录结构
拿到 Metronic 后,可以看一下他的文件目录
_documentation: 说明文档,我的学习就是从看这文档开始,下面的会有部分摘录和体会。
_resources:PSD 设计源码,你如果想在其基础上重新设计,不妨看看。
start.html和_start文件夹:模板预览开始的地方,打开 start.html 就能看到全部 7 个模板的展示,没有下载的朋友,也可移步官网演示进行查看。;
theme:所有 Metronic 风格都在这文件夹里面,你可以挑一个布局作为自己的开发起点;
theme_rtl: 镜面布局的模板,这种界面布局根据阿拉伯语、波斯语等RTL语言而反转。
概述
Metronic is a responsive and multipurpose admin theme powered with Twitter Bootstrap 3.3.6 Framework. Metronic can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and more. Metronic has a sleek, clean and intuitive metro & flat balanced design which makes your next project look awesome and yet user friendly. Metronic has a huge collection of plugins and UI components and works seamlessly on all major web browsers, tablets and phones.
Metronic 是一个基于 Bootstrap 3.* 设计的自适应、多用途的管理后台模板。Metronic 被广泛应用于各种 web 应用:定制化管理控制台、CMS, CRM, SAAS 以及更多。它有着平滑、清爽、简洁的设计,让你的项目能显得友好却又高大上。Metronic 有着大量的插件和 UI 组件,并且可以和谐地工作在各个主流浏览器、平板和手机上。
We put a lot of love and effort to make Metronic a useful tool for everyone and now Metronic comes with 7 complete admin layouts. We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.
我们非常用心、努力地去让 Metronic 变为一个对每个人都有用的工具,现在 Metronic 已经有了 7 个完整的管理模板设计。(后面懒得翻译,因为我翻译水平太烂啦^_^)
We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.
(懒得翻译,一句话,你只要有一个 license 就可以免费下载所有的更新。)
Author: KeenThemes
Contact: support@keenthemes.com
Follow: twitter.com/keenthemes
Like: facebook.com/keenthemes
Dribbble: dribbble.com/keenthemes
Created On: 13/02/2013
Updated On: 10/07/2016
预览效果
官网首页宣传图
主题1的截图
手机等小尺寸屏显示效果
更多预览效果参加官网 7个主题演示地址:http://www.keenthemes.com/pre...
模板结构
All template files have fixed structure consisting of header, mega menu, top menu, user bar, sidebar menu, quick sidebar, content and footer as shown below:
所有的模板文件都有着固定结构,包括:header, mega menu, top menu, user bar, sidebar menu, quick sidebar, content 和 显示在底部的 footer。
Bootstrap 之 Metronic 模板的学习之路 - (1)总览的更多相关文章
- (转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分
https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (1)总览
https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (5)主题&布局配置
https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分
https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAIN ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一)
前言: 第一次接触ABP的项目是在2018年6月份,但是当时没有深入具体的研究,而今天因为工作的需要,需要学习.了解这个框架,在时隔半年之后,今天重新下载了这个项目,虽然在园子里有很多前辈们写的这类的 ...
随机推荐
- Qt:QFileInfo
0.说明 QFileInfo提供了独立于系统的文件信息. QFileInfo提供的信息包括文件名.路径.访问权限.文件大小.修改时间等.此外,它也可以用于获取有关Qt 资源的信息(resource). ...
- Pandas:读取数据库read_sql
学习自:pandas.read_sql - pandas 1.2.4 documentation (10条消息) pd.read_sql()参数详解_pandas.read_csv()参数详解-CSD ...
- Java:List(一)——概述
说明 在集合类中,List是最基础的一种集合--有序List. List的行为和数组几乎相同:List内部按照放入元素先后顺序存放,每个元素都可以通过索引确定自己的位置,List的索引和数组相同,都是 ...
- 解压jdk报错gzip: stdin: not in gzip format
0x00 报错截图 0x01 下载方式 下载地址是直接在oracle官网[复制链接地址]获得. 0x02 解决问题 查看一下下载的文件 发现下载下来的是HTML文件. 然后就去oracle官网抓包看了 ...
- python+pytest接口自动化(4)-requests发送get请求
python中用于请求http接口的有自带的urllib和第三方库requests,但 urllib 写法稍微有点繁琐,所以在进行接口自动化测试过程中,一般使用更为简洁且功能强大的 requests ...
- 怎么在 liunx 上安装docker
怎么在 liunx 上安装docker 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 1.打开x ...
- 『德不孤』Pytest框架 — 10、setUp()和tearDown()函数
目录 1.setUp()和tearDown()函数介绍 2.setUp()和tearDown()函数作用 3.setUp()和tearDown()函数说明 4.示例 (1)方法级 (2)类级 (3)函 ...
- think php 验证码
1.下载 composer require topthink/think-captcha 1.* // composer 下载 //过程 D:\PHP\phpstudy_pro\WWW\1906A\p ...
- Linux命令 之 “救命稻草”
一.前言 虽然Linux操作系统图形界面已经退出,但由于大量的操作在终端操作比较快捷,所以,对linux命令的使用必不可少.在linux系统日常的学习和工作中,常常会出现有些命令忘记了或者该命令的参数 ...
- Applied Social Network Analysis in Python 相关笔记3
如果是option2的话,答案选A. 这里节点s,从左边的选择,节点t从右边选择. 这里计算还是用以前的值,不用更新过的值.