Materialize CSS 中有哪些不同的实用程序类？

在本文中，我们将了解 Materialise CSS 中的实用程序类，以及了解可用的类及其实现。

实用程序类通常用于简化设计以及以适当的结构组织内容，其中包括对齐内容、设置文本颜色以及使用所需的类名称隐藏/显示内容、格式化各种内容，即截断或将鼠标悬停在文本上。 Materialize CSS 中有几个实用程序类，如下所示。

• 颜色实用程序类
• 对齐实用程序类
• 隐藏/显示内容实用程序类
• 格式化实用程序类

颜色实用程序类：颜色实用程序类用于更改浏览器元素的颜色。使用颜色工具类，我们可以改变 HTML 元素的背景颜色，甚至改变字体的颜色。

背景颜色：要更改 HTML 特定元素的背景颜色，我们应该将所需的颜色作为类名。

句法：

上例中 div 的背景颜色为红色。

字体颜色：要更改 HTML 特定元素的字体颜色，我们应该将所需的颜色文本作为类名。

句法：

div 内容的字体颜色将为红色。

例子：

HTML

  
  
            
              
      
        
                 
     
       
       
      Color Utilities  
          
         Geeks for Geeks 
        
          
        Geeks for Geeks 
        
          
         Geeks for Geeks 
        
          
        Geeks for Geeks 
        
     

输出：

对齐：垂直对齐、文本对齐、快速浮动，它们用于轻松对齐 HTML 的内容。

垂直对齐：将类命名为“valign-wrapper”，以将 HTML 内容垂直居中到包含要垂直对齐的元素的容器。

文本对齐： Materialize 中有一些特定的类可以帮助我们以非常简单的方式将内容对齐到左、右和中心，而不是添加所有的 CSS 属性。只需相应地命名类以对齐内容。

以下类名用于水平对齐内容。

• .left-align：用于将内容左对齐。
• .right-align：用于将内容向右对齐。
• .center-align：用于将内容对齐到中心。

快速浮动： Materialize 没有使用 CSS，而是为我们提供了一种非常简单的方式来浮动浏览器的内容。只需根据浮动方向分别将类命名为左或右。

以下类用于在 HTML 中快速浮动元素：

• .left：将内容浮动到左侧。
• .right：使内容向右浮动。

示例：查看以下示例以正确理解这些概念。

HTML

  
  
    
       
              
      
        
                    
     
       
                     
      Alignment Utilities  
        
         Vertically Aligned Text
        
      Left Aligned Text  
      Right Aligned Text  
      Center Aligned Text   
      
  

输出：

隐藏/显示内容实用程序类：使用隐藏/显示内容实用程序类，我们可以隐藏/显示内容。使用这些实用程序类，我们可以为不同大小的设备添加不同的属性。例如，让我们考虑一种情况，我们希望在桌面上显示特定文本并在移动设备上显示一些其他文本，那么我们可以简单地使用.show-on-large类来显示我们希望仅显示的文本在桌面上。对我们希望仅在手机上显示的文本使用.show-on-small类。

同样，我们可以使用以下所有实用程序类来隐藏/显示不同尺寸设备上的内容，并为不同尺寸的设备添加不同的属性。

• .hide ：对所有设备隐藏
• .hide-on-small-only ：仅对移动设备隐藏
• .hide-on-med-only ：仅对平板电脑隐藏
• .hide-on-med-and-down : 平板电脑及以下隐藏
• .hide-on-med-and-up：为平板电脑及以上设备隐藏。
• .hide-on-large-only ：仅对桌面隐藏。
• .show-on-small ：仅针对移动设备显示。
• .show-on-medium ：仅针对平板电脑显示。
• .show-on-large ：仅显示桌面。
• .show-on-medium-and-up ：适用于平板电脑及更高版本。
• .show-on-medium-and-down ：显示平板电脑及以下。

例子：

HTML

  
     
       
              
      
        
                    
     
       
    
        
         Geeks for Geeks (Hidden on all devices)  
        
             
        
         Geeks for Geeks (Hidden on mobile devices)  
        
  
        
         Geeks for Geeks (Hidden on desktop devices)  
             
     
  

输出：

• 平板电脑视图：

• 桌面视图：

• 移动视图：

格式化实用程序类：

在物化中有一些类可以轻松地格式化 HTML 内容。格式化实用程序类可用于截断浏览器的内容，并在卡片上添加阴影以在悬停时轻松对齐内容，而不是使用 CSS。

以下类用于格式化内容。

• .truncate：此类用于截断省略号中的内容。
• card-panel hoverable：这个类用于在卡上悬停时添加阴影。

示例：在下面的示例中，当我们使用truncate类时，我们只是接收到一部分内容作为输出。当我们使用hoverable类并将鼠标悬停在卡片上时，我们会得到一个 box-shadow，如输出所示。

HTML

  
  
          
              
      
        
                   
     
       
       
            
      Formatting Utilities   
        
         
              We provide a variety of services for 
              you to learn, thrive and also have fun!
              Free Tutorials, Millions of Articles, 
              Live, Online and Classroom Courses ,
              Frequent Coding Competitions, Webinars 
              by Industry Experts, Internship 
              opportunities and Job Opportunities.
            
                  
        
         
             We provide a variety of services for 
             you to learn, thrive and also have fun!
             Free Tutorials, Millions of Articles, 
             Live, Online and Classroom Courses ,
             Frequent Coding Competitions, 
             Webinars by Industry Experts,
             Internship opportunities and 
             Job Opportunities.
          
        
     

输出：

浏览器默认值：虽然使用类是 Materialize，但我们会覆盖浏览器的许多默认样式。因此.browser-default类用于将这些元素恢复为原始样式。

Name of element	Reverted Style
UL	Bullet points
SELECT	Browser default select element
INPUT	Browser default input

示例：通过考虑以下选择元素的示例，让我们清楚地了解浏览器默认设置。我们在表单中使用了 select，它允许用户在给定的特定选项中进行选择。当我们使用materialize 这样做时，我们得到以下输出，这与默认浏览器属性非常不同，即仅使用HTML 制作的浏览器。我们希望恢复使用 materialize 实现的浏览器的属性并检索原始属性，我们使用这个默认浏览器类。

HTML

  

        
      
      
      
      
      
      
      
      
         $(document).ready(function() {
            $('select').material_select();
          });
      
   
   
       Browser default example
       
       
            
              
                  Choose here 
              GFG
              Gfg
              gfg
              gFg
            
            Choose one of the following :
                   
    

输出：

如果我们想检索默认浏览器属性并恢复到原始浏览器属性，我们需要做的就是添加browser-default类，如下所示。

HTML

  

         
      
      
      
      
     
      
     
      
         $(document).ready(function() {
           $('select').material_select();
         });
      
   
   
       Browser default example
       
       
          
              
                  Choose one of the following: 
               
              GFG
              Gfg
              gfg
              gFg
         
                   
    

输出：