在本文中，我們將學(xué)習(xí) Materialize CSS 中的不同實(shí)用程序類，但在繼續(xù)之前，讓我們先了解一下 Materialize CSS 是什么。 Materialise CSS 是一種流行的前端開發(fā)框架，它提供各種功能和實(shí)用程序來創(chuàng)建響應(yīng)靈敏且有吸引力的 Web 應(yīng)用程序。 Materialise CSS 的基本組件之一是它的實(shí)用程序類，它提供了一種簡單有效的方法來向 HTML 元素添加樣式
實(shí)用程序類是預(yù)定義的 CSS 類，可以應(yīng)用于任何 HTML 元素以實(shí)現(xiàn)特定的樣式。
這里是一些你可以使用的實(shí)用類
顏色實(shí)用類
對齊實(shí)用程序類
隱藏/顯示內(nèi)容的實(shí)用類
格式化實(shí)用程序類
顏色實(shí)用類
Materialize CSS中的顏色實(shí)用類提供了一種簡單的方法來為HTML元素添加顏色。這些類允許開發(fā)人員從廣泛的預(yù)定義顏色中選擇，或?yàn)樗麄兊腤eb應(yīng)用程序定義自定義顏色。顏色實(shí)用類包括文本顏色和背景顏色類。
示例
<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>
登錄后復(fù)制
對齊實(shí)用程序類
Materialize CSS提供了幾個對齊實(shí)用類，允許開發(fā)人員對其HTML元素進(jìn)行對齊。這些類包括left-align（左對齊）、right-align（右對齊）、center-align（居中對齊）、justify-align（兩端對齊）、valign-wrapper（垂直對齊包裝器）和valign（垂直對齊）。left-align、right-align、center-align和justify-align類用于對齊文本內(nèi)容，而valign-wrapper和valign類用于垂直對齊元素。
文本對齊
它允許您控制元素內(nèi)文本的水平對齊方式，它包括 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>
登錄后復(fù)制
垂直對齊
它允許您使用 valign-wrapper 類垂直對齊元素，這可以應(yīng)用于父容器元素，并且它將在該容器內(nèi)垂直對齊子元素。
示例
<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>
登錄后復(fù)制
隱藏/顯示內(nèi)容實(shí)用類
通過使用隱藏和顯示的實(shí)用類，我們可以根據(jù)設(shè)備的尺寸輕松隱藏和顯示內(nèi)容，并且能夠有選擇地顯示內(nèi)容。使用這些實(shí)用類，可以根據(jù)設(shè)備的尺寸應(yīng)用不同的屬性于內(nèi)容。例如，如果我們想要在移動設(shè)備上隱藏任何文本，那么我們可以簡單地為應(yīng)該僅在大屏幕尺寸或桌面設(shè)備上可見的文本使用“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>
登錄后復(fù)制
格式化實(shí)用程序類
Materialize CSS提供了幾個類，可以用于以簡單有效的方式格式化HTML內(nèi)容。通過利用這些格式化實(shí)用類，我們可以輕松地截斷在瀏覽器中顯示的內(nèi)容，并在鼠標(biāo)懸停在卡片元素上時添加陰影效果，而無需使用復(fù)雜的CSS代碼。
為了實(shí)現(xiàn)這些格式化效果，我們可以使用以下類 –
1。截斷
此類用于截斷內(nèi)容并顯示省略號以指示還有更多當(dāng)前不可見的文本。
示例
<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>
登錄后復(fù)制
2?？ㄆ姘?hoverable
此類在將鼠標(biāo)懸停在卡片元素上時為其添加陰影效果，這有助于對齊和突出顯示卡片中包含的內(nèi)容。
示例
<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>
登錄后復(fù)制
在本文中，我們了解了 CSS 是一個強(qiáng)大的前端開發(fā)框架，它提供了各種功能和實(shí)用程序來創(chuàng)建響應(yīng)靈敏且具有視覺吸引力的 Web 應(yīng)用程序。它最有用的組件之一是一組實(shí)用程序類，它提供了一種簡單而有效的方法來向 HTML 元素添加樣式。這些實(shí)用程序類包括顏色、對齊、隱藏/顯示內(nèi)容和格式設(shè)置類等。通過利用這些實(shí)用程序類，開發(fā)人員可以輕松實(shí)現(xiàn)他們想要的樣式效果，而無需編寫復(fù)雜的 CSS 代碼。總的來說，Materialize CSS 對于那些尋求快速輕松地創(chuàng)建美觀且響應(yīng)靈敏的 Web 應(yīng)用程序的開發(fā)人員來說是一個絕佳的選擇。
以上就是Materialise CSS 中有哪些不同的實(shí)用程序類？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
