如何使用物化 CSS ？

Materialise CSS 是一种设计语言，用于开发设计系统，允许在任何平台上的所有产品上获得统一的用户体验。

Materialize CSS 有两种不同的形式，任何一种都可以通过简单地下载该文件来使用，您可以将 Materialize CSS 用于您的系统。

• Materialize：这是标准版本，包含缩小和非缩小的 CSS 和 JavaScript 文件。您可以从此链接下载此文件 https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip
• Sass：此版本包含源 SCSS 文件。如果您选择此版本，您可以更好地控制要包含的组件，但您需要一个 Sass 编译器。您可以从此链接下载此文件 https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-src-v1.0.0.zip

注意：我们可以使用 CDN 链接，也可以通过 NPM 和 Bower 安装 Materialize。

使用 CDN 链接：

 

NPM 安装命令：

npm install materialize-css@next

Bower 安装命令：

bower install materialize

实现设置：下载文件后，只需将文件解压缩到项目文件夹中。您的 Materialize 文件夹将如下图所示。

SASS

物化

HTML 设置：现在只需在需要导入 Materialise 的地方创建一个 HTML 文件，我们使用 Materialize 标准版本。

示例 1：在此示例中，我们将简单地使用文本颜色以及背景颜色。为了正确对齐，我们将使用col和flow类。在您的代码中使用上述库或在本地文件夹中使用它们，如下所示。

HTML

  

  
    
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
      
    
        
            
                A Computer Science Portal for Geeks
            
        
    
  
    
    
    

  

输出：

示例 2：在此示例中，我们将简单地使用文本颜色以及col和flow-text类来进行漂亮的视觉设计。

HTML

  

    
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
      
    
        
            
                This is simple example off how to 
                use Materialize in your website
            
        
  
        
            
                Materialize CSS
            
        
    
    
    
    

  

输出：