Materialize一款不錯的框架(裝逼必備,想一想一幫渣渣們還在說bootstrap的時候,你用materialize,高端洋氣,別人仰望着,同事們鄙視的看着你還能不能愉快的玩耍的時候,那種孤高的感

這個materialize感受比bootstrap好一點javascript

固然啦中文文檔還木有!因此想搞個materialize中文網的能夠搶先咯!css

materialize是谷歌設計製做的一款框架html

HOHO,出去別人面試都在說bootstrap的時候你說你用的是google的materialize多洋氣java

瀏覽器兼容方面

Chrome 35+, Firefox 31+, Safari 7+, IE 10+jquery

CDN

You can find all the versions of the CDN at cdnjs.git

 <!-- 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.github

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

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

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/

相關文章
相關標籤/搜索