这个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>

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.zip

materializecss官方网址：http://materializecss.com/

materializecss的github：https://github.com/dogfalo/materialize/

Materialize一款不错的框架（装逼必备，想想一帮渣渣们还在说bootstrap的时候，你用materialize，高端洋气，别人仰望着，同事们鄙视的看着你还能不能愉快的玩耍的时候，那种孤高的感觉！-_-//意淫结束）的更多相关文章

  1. Windows 运行命令大全，装逼必备哦！

    以下已整理,以字母先后排序: appwiz.cpl:程序和功能 cliconfg:SQL SERVER 客户端网络实用工具 cmd:CMD命令提示符 comexp.msc或者dcomcnfg:组件服务 ...

  2. js取整 - 优雅版(装逼必备)

    var a = 2.98; var z1 = ~~a; var z2 = a | 0; var z3 = a>>0; console.log(z1, z2, z3);     // 2, ...

  3. Revealjs网页版PPT让你复制粘贴另类装逼，简洁优雅又低调，不懂编程也看过来

    Revealjs网页版PPT让你复制粘贴另类装逼,简洁优雅又低调,不懂编程也看过来 要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js噢 ...

  4. WebApp简单制作（后端也可以装逼啦）

    前端越来越吃香的感觉 年后回来,跟之前和几个同事和朋友聊天,发现有两个.net的和一个php的朋友都转到了前端,真是出乎意料.自从之前的webapp兴起后,前端感觉比后端吃香很多,总结朋友们转的原因, ...

  5. JavaScript 装逼指南

    Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...

  6. 前端 JSer 装逼手册

    阅读 8143收藏 2352016-7-18 SegmentFault 分享:吉祥物 @ SegmentFault 在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记. 作者:kenberk ...

  7. Spring浅入浅出——不吹牛逼不装逼

    Spring浅入浅出——不吹牛逼不装逼 前言: 今天决定要开始总结框架了,虽然以前总结过两篇,但是思维是变化的,而且也没有什么规定说总结过的东西就不能再总结了,是吧.这次总结我命名为浅入浅出,主要在于 ...

  8. Spring的数据库编程浅入浅出——不吹牛逼不装逼

    Spring的数据库编程浅入浅出——不吹牛逼不装逼 前言 上文书我写了Spring的核心部分控制反转和依赖注入,后来又衔接了注解,在这后面本来是应该写Spring AOP的,但我觉得对于初学者来说,这 ...

  9. 不装逼地说，在 Google 到底能学到啥？

    不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...

随机推荐

  1. 【bzoj2190】 SDOI2008—仪仗队

    http://www.lydsy.com/JudgeOnline/problem.php?id=2190 (题目链接) 题意 一个N*N的方阵,问右下角的人能看到几个人. Solution 如果一个人 ...

  2. ansible模块debug

    示例: # Example that prints the loopback address and gateway for each host - debug: msg="System { ...

  3. hibernate关联映射学习

  4. spring容器初始化执行某个方法

    在做web项目开发中,尤其是企业级应用开发的时候,往往会在工程启动的时候做许多的前置检查. 比如检查是否使用了我们组禁止使用的Mysql的group_concat函数,如果使用了项目就不能启动,并指出 ...

  5. AngularJs ngList、ngRepeat、ngModelOptions

    ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式  通过这个值分隔字符串. ...

  6. HDU 1754 I Hate It(线段树模板题）

    题目链接: 传送门 I Hate It Time Limit: 3000MS     Memory Limit: 32768 K Description 很多学校流行一种比较的习惯.老师们很喜欢询问, ...

  7. python range() 和xrange()的区别

    Help on built-in function range in module __builtin__: range(...) range(stop) -> list of integers ...

  8. Linux 之 编译器 gcc/g++参数详解

    2016年12月9日16:48:53 ----------------------------- 内容目录: [介绍] gcc and g++分别是gnu的c & c++编译器 gcc/g++ ...

  9. Sublime Text 3 编辑器使用

    今天打开别人的python脚本,想找IDE的时候,本来在eclipse中有安装python插件,但是好像是太旧了,很多sys的方法找不着 又上网找了一下python的IDE工具,看好多人在歌颂这个Su ...

  10. Beta Daily Scrum 第六天

    [目录] 1.任务进度 2.困难及解决 3.燃尽图 4.代码check-in 5.总结 1. 任务进度 学号 今日完成 明日完成 612 昨天完成任务,今天看有没有bug,找一找 好像没什么事 615 ...