📜  如何使用物化 CSS ?

📅  最后修改于: 2022-05-13 01:56:22.685000             🧑  作者: Mango

如何使用物化 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:在此示例中,我们将简单地使用文本颜色以及背景颜色。为了正确对齐,我们将使用colflow类。在您的代码中使用上述库或在本地文件夹中使用它们,如下所示。

HTML


  

  
    
    
  
    
    
  
    
    

  

    

        GeeksforGeeks     

           
        
                             A Computer Science Portal for Geeks                      
    
               


HTML


  

    
    
  
    
    
  
    
    

  

    

        GeeksforGeeks     

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


输出:

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

HTML



  

    
    
  
    
    
  
    
    

  

    

        GeeksforGeeks     

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

输出: