这个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. 【poj3522】 Slim Span

    http://poj.org/problem?id=3522 (题目链接) 题意 求最小生成树的最大边与最小边差最小. Solution 排序后滑动窗口维护 代码 // poj3522 #includ ...

  2. css设置background图片的位置实现居中

    /* 例 1: 默认值 */ background-position: 0 0; /* 元素的左上角 */ /* 例 2: 把图片向右移动 */ background-position: 75px 0 ...

  3. namespace std

    c++中使用namespace来防止命名冲突(重命名),我们经常使用的一些函数和变量都被放在一个叫std的namespace中,如标准I/O流操作,vector等等.我们在每一个文件中都可使用std中 ...

  4. POJ 2457 Part Acquisition

    第一反应是BFS,比较直观,但是输出路径写的不是很熟练,此外,习惯不好,“==”写成了“=”,所以常量一定放前面! #include <cstdio> #include <queue ...

  5. scala break & continue

    Scala没有提供break和continue,我们可以自己实现一个,参考例子: import util.control.Breaks._ object BreakDemo { def main(ar ...

  6. HDU 5904 LCIS （最长公共上升序列）

    传送门 Description Alex has two sequences a1,a2,...,an and b1,b2,...,bm. He wants find a longest common ...

  7. Java 线程池的使用

    转载原文链接: http://www.cnblogs.com/dolphin0520/p/3932921.html 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有 ...

  8. java字符串拼接与性能

    使用 Concatenation Operator (+) String concat method – concat(String str) StringBuffer append method – ...

  9. 云计算之KVM安装（二）

    云计算之KVM安装(二) 调整虚拟机 虚拟化Intel使用的是intel VT-X AMD使用的是AMD-V 创建虚拟机步骤 1.准备虚拟机硬盘 2.需要系统iso镜像 3.需要安装一个vnc的客户端 ...

  10. Nginx系列1之部分模块详解

    1 内核模块: 名称: daemon 语法: daemon on |off 默认值: on 功能: 决定nginx 在前台执行还是后台守护进程执行的 ================== 名称: En ...