这个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. ubuntu 通过命令将数据复制到u盘

    自己现在也不好意思和别人说自己熟悉linux了,自己用linux,也是当做桌面系统用了,很少熟悉那些linux命令结果上次linux桌面图形界面进不去了只能用命令行,经过几个晚上的折腾终于弄好,现在记 ...

  2. QCustomPlot 使用整理

    QCustomPlot 是一个比较小的 QT 图表插件.使用时,我们在程序中写完相关调用的代码后,只需将 QCunstomPlot.cpp 和 QCustomPlot.h 两个文件加入工程,正常编译即 ...

  3. CF 214B Hometask（想法题）

    题目链接: 传送门 Hometask Time Limit: 2 seconds     Memory Limit: 256 megabytes Description Furik loves mat ...

  4. 今天执行grep命令差点把服务器搞崩

    grep "rst" -r ./ >> a.log 今天执行这个命令差点把服务器搞崩了. 本意是查找所有源代码文件中含有rst字符串的行,打印到文件a.log中,然后进 ...

  5. HTML之表格制作

    如何制作一个表格? 如何制作一个表格呢?  观察如下代码: <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. SQL Server 2012 启动

    1.  启动 SQL Server Management studio 2. 选择登录模式 Server name:   "." 代表本地的数据库 Authertication: ...

  7. sql 时间查询 /sql中判断更新或者插入/查询一年所有双休日

    ') update [DBPersonnel].[dbo].[TB証明書] ' else INSERT INTO [DBPersonnel].[dbo].[TB証明書] ([社員番号],[身分証明書] ...

  8. socketserver模块写的一个简单ftp程序

    一坨需求... 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp server上随意切换目录 (cd) ...

  9. 图片上传利用<iframe></iframe>标签实现无刷新上传图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. c++异常捕获

    概念: “C++异常”就是 try{}catch(...){} “SEH异常”就是 __try{} __except(-//){} (关于这两种异常,如有不了解的地方,网上有很多资料可以参考) 目前微 ...