materializecss开始使用materializecss


备注

MaterialiseCSS是一个基于CSS和Javascript的前端响应框架,源自Google的Material Design。它完全基于Google的材料设计指南,并作为样板,以更好,更快的方式使用材料设计。它有一些预定义的插件,如Scrollspy,Scrollfire,lightbox,parallax等等。

版本

发布日期
0.93.0 情节中字
0.94.0 2015年12月30日
0.95.0 2015年1月17日
0.96.0 2015-04-01
0.97.0 2015年7月2日
0.97.7 2016年7月23日
0.97.8 2016年10月30日
0.98.0 2017年1月25日
0.98.1 2017年3月21日

下载

有两种方法可以使用MaterialiseCSS,您可以下载系统上的文件或使用CDN(内容分发网络)中的文件。

下载文件

  • 下载Materialise包
  • 下载Materialise SASS包
  • 通过NPM npm install materialize-cssnpm install materialize-css
  • 通过Bower bower install materializebower install materialize

包括来自CDN

  • 头部包含minifed CSS:

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     
  • 包含JavaScript在主体部分文件,只需在结束标记之前。

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
     

我怎样才能编译我的Sass

只有使用Materialise的Sass版本时,此部分才有意义。

首先,您需要在工作目录中安装Sass:

gem install sass
 

如果在项目中安装了Sass并且想要更新输出.css文件,则需要使用以下命令:

sass sass/materialize.scss public/style.css
 

注意 :第二个参数sass / materialize.scss是.scss文件的路径,最后一个参数sass / style.css是文件.css文件所在的输出文件夹的路径。

如果要在每次执行更改时都避免使用此命令,可以运行watch命令:

 sass --watch sass/sass:public/stylesheets
 

注意 :此命令监视scss目录中的所有Sass文件以进行更改,然后将样式文件更新到我们的公共目录中。

建立

下载文件后,将它们解压缩到指定目录中。

您会注意到有两组文件。 min 表示文件被“压缩”以减少加载时间。这些缩小的文件通常用于生产,而在开发过程中最好使用未分解的文件。


解压缩后,您的目录的文件结构应如下所示:

  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html
 

示例MaterialiseCSS HTML页面:

<!DOCTYPE html>
<html>
 <head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--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"/>
 </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>
 

模板

这些是最简单的启动页面,包含标题,号召性用语和图标功能。

入门模板视差模板
入门模板 视差模板
演示下载 演示下载

使用具有Angular的MaterialiseCSS

有许多方法可以使用MaterialiseCSS框架。

在安装之前要记住几件事

  • 虽然它有CSS名称,但它不仅仅是CSS框架。我们也可以使用它的SCSS
  • 它不是为Angular构建的
  • 它是一个基于jquery构建的组件框架。虽然我们不应该在角度使用jquery(不建议),但我们仍然导入。

您可以使用以下任何方法:

  • CDN
  • 资产
  • 包含在Angular(NPM)中
  • 包含在Angular中(来自SCSS的源代码)

每个都有自己的优点和缺点。

CDN

只需将其添加到index.html 即可。

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
 
 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
 

资产

将其添加为项目中的资产。这有助于在本地构建和运行时不依赖于互联网。

下载jQuery

下载CSS版本

  • 提取它们

  • 在assets文件夹中复制materialize.min.cssjquery-3.2.1.min.jsmaterialize.min.js

  • 将它们添加到index.html

     <link rel="stylesheet" href="./assets/materialize.min.css" >
     <script src="./assets/jquery-3.2.1.min.js"></script>
     <script src="./assets/materialize.min.js"></script>
     

包括角度(NPM)

在这个方法中,我们直接将文件包含在角度构建中。我假设角度项目是使用@angular/cli 构建的,以简化。

npm install materialize-css --save 
npm install jquery --save
 

这与下载CSS文件相同,但我们不需要在我们的存储库中添加它们。

将以下内容添加到.angular-cli.json

"styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "styles.scss"
]

...

"scripts":[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]
 

包括角度(SCSS)

使用SCSS版本下载源代码

如果要利用SCSS 更改库的默认行为,请执行此操作。否则,您仍然可以使用以前的方法并使用SCSS。

将它们添加到src 外的文件夹中。可以创建一个文件夹materialize-src 作为src 并将内容粘贴到那里。我们这样做是因为npm install of materialize-css并没有给我们scss版本。 ( 如果我错了,请纠正我

安装jquery

npm install jquery --save 
 

将它们添加到.angular-cli.json

"styles": [
    "../materialize-src/sass/materialize.scss",
    "styles.scss"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../materialize-src/js/bin/materialize.min.js"
 ],
 

与Angular集成:

上述所有安装方法都提供了实现的全部功能, 无需进一步安装任何角度工作 。举个例子,在角度的组成部分内部使用适当的HTML结构,你就可以了。

在某些情况下,您可能需要修改javascript,为此我们需要使用jQuery。而不是我们可以在angular2-materialize处使用角度包装开发者。我开发了一个使用角度和物化的全功能站点,从来没有感觉到需要。

如果你仍然相信你需要它。您可以按如下方式安装:

  • 使用上述任何方式安装实现

  • 安装angular2-materialize

     npm install angular2-materilize --save 
     

    添加角度app.module.ts

     import { MaterializeModule } from "angular2-materialize";
    
     @NgModule({
       imports: [
         //...
         MaterializeModule,
       ],
       //...
     })
     

使用Materialisecss的网页

以下是使用Materialize CSS框架的基本页面示例,该框架包含网格系统和materialboxed

<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/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"/>
</head>

<body>
  <div class="container"> 
    <div class="row">
      <div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220"  src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
        <h4>Katun Nature Reserve</h4>
        <p><i>Lovely Place</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
        <h4>Art</h4>
        <p><i>Simple & Attractive</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
        <h4>Food</h4>
        <p><i>For any occasion</i></p>
       </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
        <h4>Steve Jobs</h4>
        <p><i>Inspiration</i></p>
      </div>
    <div class="col s12"><h5>Comment your suggestion</h5></div>
    </div>
  </div>
  <!--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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
  $('.materialboxed').materialbox();
});
</script>
</body>