Materialize一款不错的框架(装逼必备,想想一帮渣渣们还在说bootstrap的时候,你用materialize,高端洋气,别人仰望着,同事们鄙视的看着你还能不能愉快的玩耍的时候,那种孤高的感觉!-_-//意淫结束)
2015-04-30 21:29
555 查看
这个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
minmeans 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>
DEMO 1
DEMO 2
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.zipmaterializecss官方网址:http://materializecss.com/
materializecss的github:https://github.com/dogfalo/materialize/
相关文章推荐
- 一款非常不错的asp.net图片处理类,自己用的时候需要做相应的修改(水印、剪裁、缩略图)
- vue.js为什么不能new两次?不是不能new两次,而是第一次new之后,{{}}已经没有了, 第二次vue的时候,识别不到{{}}了,所以第二次的参数没办法替换了,给人的感觉好像是第二次new不起
- 解决在vc调试代码结束时候,不能把控制台黑屏目退出的问题
- sping security3.1 别人博客写的 看着不错 转一下
- 一款成熟的前端框架——Bootstrap
- 解决在vc调试代码结束时候,不能把控制台黑屏目退出的问题
- 一款非常不错的文本编辑器 和一个前端开发的工具包Bootstrap
- JQuery 制作的一款在线编辑器(xheditor)。兼容IE,Firefox...感觉不错
- 学期小结-你在休息的时候,别人还在奔跑
- Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题
- shell语句(在别人那看到的 感觉不错 分享下)
- 休息的时候不要忘记:别人还在奔跑!
- 解决在vc调试代码结束时候,不能把控制台黑屏目退出的问题
- 还能不能愉快地起一个web服务啦?——1st Step!白话http和代码交互的那点儿事儿~
- Foundation-一款不错的前沿响应式移动框架
- 推荐一款基于bootstrap的漂亮的前端模板——inspinia_admin(国内翻译的叫 H+后台主题UI框架)
- 完全不能跟vs愉快的玩耍
- 开发一款高端大气上档次的android应用需要必备的知识——记于2013年末
- 推荐一款Web 前端 UI 框架 — Bootstrap
- 转载别人的,但是感觉写的非常不错。Gson解析