Materialize一款不错的框架(装逼必备,想想一帮渣渣们还在说bootstrap的时候,你用materialize,高端洋气,别人仰望着,同事们鄙视的看着你还能不能愉快的玩耍的时候,那种孤高的感觉!-_-//意淫结束)
这个materialize感觉比bootstrap好一点
当然啦中文文档还木有!所以想搞个materialize中文网的可以抢先咯!
materialize是谷歌设计制作的一款框架。
HOHO,出去别人面试都在说bootstrap的时候你说你用的是google的materialize多洋气
浏览器兼容方面
Chrome 35+, Firefox 31+, Safari 7+, IE 10+
CDN
You can find all the versions of the CDN at cdnjs.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
NPM
You can also get the latest release using NPM. this release contains source files as well as the compiled CSS and JavaScript files.
npm install materialize-css
Bower
You can also get the latest release using bower. this release contains source files as well as the compiled CSS and JavaScript files.
bower install materialize
Setup
Project Structure
After downloading, extract the files into the directory where your website is located. Your directory will look something like this.
You'll notice that there are two sets of the files. The min
means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.
MyWebsite/
|--css/
| |--materialize.css
|
|--font/
| |--material-design-icons/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
HTML Setup
Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage.
One last thing to note is that you have to import jQuery before importing materialize.js!
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head> <body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Materialize
This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option require little to no setup. Use this if you are unfamiliar with Sass.
down
http://files.cnblogs.com/files/LoveOrHate/materialize-v0.96.1.zip
materializecss官方网址:http://materializecss.com/
materializecss的github:https://github.com/dogfalo/materialize/
Materialize一款不错的框架(装逼必备,想想一帮渣渣们还在说bootstrap的时候,你用materialize,高端洋气,别人仰望着,同事们鄙视的看着你还能不能愉快的玩耍的时候,那种孤高的感觉!-_-//意淫结束)的更多相关文章
- Windows 运行命令大全,装逼必备哦!
以下已整理,以字母先后排序: appwiz.cpl:程序和功能 cliconfg:SQL SERVER 客户端网络实用工具 cmd:CMD命令提示符 comexp.msc或者dcomcnfg:组件服务 ...
- js取整 - 优雅版(装逼必备)
var a = 2.98; var z1 = ~~a; var z2 = a | 0; var z3 = a>>0; console.log(z1, z2, z3); // 2, ...
- Revealjs网页版PPT让你复制粘贴另类装逼,简洁优雅又低调,不懂编程也看过来
Revealjs网页版PPT让你复制粘贴另类装逼,简洁优雅又低调,不懂编程也看过来 要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js噢 ...
- WebApp简单制作(后端也可以装逼啦)
前端越来越吃香的感觉 年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料.自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因, ...
- JavaScript 装逼指南
Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...
- 前端 JSer 装逼手册
阅读 8143收藏 2352016-7-18 SegmentFault 分享:吉祥物 @ SegmentFault 在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记. 作者:kenberk ...
- Spring浅入浅出——不吹牛逼不装逼
Spring浅入浅出——不吹牛逼不装逼 前言: 今天决定要开始总结框架了,虽然以前总结过两篇,但是思维是变化的,而且也没有什么规定说总结过的东西就不能再总结了,是吧.这次总结我命名为浅入浅出,主要在于 ...
- Spring的数据库编程浅入浅出——不吹牛逼不装逼
Spring的数据库编程浅入浅出——不吹牛逼不装逼 前言 上文书我写了Spring的核心部分控制反转和依赖注入,后来又衔接了注解,在这后面本来是应该写Spring AOP的,但我觉得对于初学者来说,这 ...
- 不装逼地说,在 Google 到底能学到啥?
不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...
随机推荐
- javaScript与MVC
MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求 ...
- 数组、ArraryList和List三者的区别
在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...
- 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Midterm
Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Section 2 Random sampling with and without replacement
Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- AngularJs ngCloak、ngController、ngInit、ngModel
ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak ...
- How to overcome “datetime.datetime not JSON serializable” in python?
json.dumps(datetime.now) 意思是datetime.now不可json序列化,解决办法是转化成str或者加一个参数 cls=xxx 详细见: http://stackoverfl ...
- Java多线程问题总结
前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行 ...
- JSP表单提交中文乱码解决方案
分2种提交方式,解决方案不同: 1.form表单提交方式为get 乱码: 解决方案: 因为get方法是参数在URL中显示,因为tomcat的URL编码默认是:IOS-8859-1所以要么改tomcat ...
- C++ Primer Plus读书笔记
第五章 循环和关系表达式 1. 2.类别别名: (1) #define FLOAT_POINTER float * FLOAT_POINTER pa, pb; 预处理器置换将该声明转换成 flo ...
- BZOJ4690: Never Wait for Weights
裸带权并查集. #include<cstdio> #define N 100005 int m,i,j,s,t,u,d[N],p[N]; char k; int find(int i){ ...