在本文中，我們將學習 Materialize CSS 中的不同實用程序類，但在繼續之前，讓我們先了解一下 Materialize CSS 是什么。 Materialise CSS 是一種流行的前端開發框架，它提供各種功能和實用程序來創建響應靈敏且有吸引力的 Web 應用程序。 Materialise CSS 的基本組件之一是它的實用程序類，它提供了一種簡單有效的方法來向 HTML 元素添加樣式
實用程序類是預定義的 CSS 類，可以應用于任何 HTML 元素以實現特定的樣式。
這里是一些你可以使用的實用類
顏色實用類
對齊實用程序類
隱藏/顯示內容的實用類
格式化實用程序類
顏色實用類
Materialize CSS中的顏色實用類提供了一種簡單的方法來為HTML元素添加顏色。這些類允許開發人員從廣泛的預定義顏色中選擇，或為他們的Web應用程序定義自定義顏色。顏色實用類包括文本顏色和背景顏色類。
示例
<html> <head> <link rel = "stylesheet" > <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h1 class = "red-text text-darken-2">This is red color</h1> <h2 class = "red">This is red color</h2> </body> </html>
登錄后復制
對齊實用程序類
Materialize CSS提供了幾個對齊實用類，允許開發人員對其HTML元素進行對齊。這些類包括left-align（左對齊）、right-align（右對齊）、center-align（居中對齊）、justify-align（兩端對齊）、valign-wrapper（垂直對齊包裝器）和valign（垂直對齊）。left-align、right-align、center-align和justify-align類用于對齊文本內容，而valign-wrapper和valign類用于垂直對齊元素。
文本對齊
它允許您控制元素內文本的水平對齊方式，它包括 left-align、right-align、center-align 和 justify-align 等類。
示例
<html> <head> <link rel = "stylesheet" > <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body class = "container"> <h3 class = "left-align"> Left Aligned </h3> <h3 class = "right-align"> right Aligned </h3> <h3 class = "center-align"> center Aligned </h3> </body> </html>
登錄后復制
垂直對齊
它允許您使用 valign-wrapper 類垂直對齊元素，這可以應用于父容器元素，并且它將在該容器內垂直對齊子元素。
示例
<html>
<head>
<link rel = "stylesheet" >
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "valign-wrapper" style = "height:50vh">
<h5>vertically aligned</h5>
</div>
</body>
</html>
登錄后復制
隱藏/顯示內容實用類
通過使用隱藏和顯示的實用類，我們可以根據設備的尺寸輕松隱藏和顯示內容，并且能夠有選擇地顯示內容。使用這些實用類，可以根據設備的尺寸應用不同的屬性于內容。例如，如果我們想要在移動設備上隱藏任何文本，那么我們可以簡單地為應該僅在大屏幕尺寸或桌面設備上可見的文本使用“hide-on-small-only”類。
這里有許多不同的類可以使用，如.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-large，.show-on-medium-and-up，show-on-medium-and-down。
示例
<html>
<head>
<link rel = "stylesheet" >
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div style = "border:black; border-style:solid; padding:20px; margin:20px">
<h4 class = "hide-on-small-only">hide on small only</h4>
</div>
</body>
</html>
登錄后復制
格式化實用程序類
Materialize CSS提供了幾個類，可以用于以簡單有效的方式格式化HTML內容。通過利用這些格式化實用類，我們可以輕松地截斷在瀏覽器中顯示的內容，并在鼠標懸停在卡片元素上時添加陰影效果，而無需使用復雜的CSS代碼。
為了實現這些格式化效果，我們可以使用以下類 –
1。截斷
此類用于截斷內容并顯示省略號以指示還有更多當前不可見的文本。
示例
<html> <head> <title> Document </title> <link rel = "stylesheet" > <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h4 class = "truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam</h4> </body> </html>
登錄后復制
2。卡片面板.hoverable
此類在將鼠標懸停在卡片元素上時為其添加陰影效果，這有助于對齊和突出顯示卡片中包含的內容。
示例
<html>
<head>
<title> Document </title>
<link rel="stylesheet" >
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "row">
<div class = "col s12 m6">
<div class = " card card-panel hoverable">
<div class = "card-content blue-text">
<span class = "card-title"> Card panel hoverable </span>
<p>:This class adds a shadow effect to a card element when it is hovered over, which helps to align and highlight the content contained within the card. </p>
</div>
<div class = "card-action">
<a href = "#"> This is a link </a>
<a href = "#"> This is a link </a>
</div>
</div>
</div>
</div>
</body>
</html>
登錄后復制
在本文中，我們了解了 CSS 是一個強大的前端開發框架，它提供了各種功能和實用程序來創建響應靈敏且具有視覺吸引力的 Web 應用程序。它最有用的組件之一是一組實用程序類，它提供了一種簡單而有效的方法來向 HTML 元素添加樣式。這些實用程序類包括顏色、對齊、隱藏/顯示內容和格式設置類等。通過利用這些實用程序類，開發人員可以輕松實現他們想要的樣式效果，而無需編寫復雜的 CSS 代碼。總的來說，Materialize CSS 對于那些尋求快速輕松地創建美觀且響應靈敏的 Web 應用程序的開發人員來說是一個絕佳的選擇。
以上就是Materialise CSS 中有哪些不同的實用程序類？的詳細內容，更多請關注www.92cms.cn其它相關文章！
