这个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. 启动Hadoop HA Hbase zookeeper spark

    服务器角色 服务器 192.168.58.180 192.168.58.181 192.168.58.182 192.168.58.183 Name CentOSMaster Slvae1 Slave ...

  2. HDU 1754 I Hate It

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. 打通多个帝国CMS系统的会员整合与同步教程

    例子:我们要整合下面三个帝国CMS系统网站名称分别为"A网站"."B网站"."C网站":安装系统的数据库名分别为"adb" ...

  4. A.Kaw矩阵代数初步学习笔记 4. Unary Matrix Operations

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  5. Python 操作 mongodb 数据库

    原文地址:https://serholiu.com/python-mongodb 这几天在学习Python Web开发,于 是做准备做一个博客来练练手,当然,只是练手的,博客界有WordPress这样 ...

  6. codevs 1001 舒适的路线（Kruskal）

    传送门 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤5 ...

  7. BZOJ2049: [Sdoi2008]Cave 洞穴勘测 Link-Cut-Tree 模板题

    传送门 搞了这么长时间Splay终于可以搞LCT了,等等,什么是LCT? $LCT$就是$Link-Cut-Tree$,是维护动态树的一个很高效的数据结构,每次修改和查询的均摊复杂度为$O(logN) ...

  8. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  9. 京东分布式MySQL集群方案介绍

    背景 数据库作为一个非常基础的系统,任何一家互联网公司都会使用,数据库产品也很多,有Oracle.SQL Server .MySQL.PostgeSQL.MariaDB等,像SQLServer/Ora ...

  10. JSContext

    An instance of JSContext represents a JavaScript execution environment. All JavaScript execution tak ...