Materialise CSS 中有哪些不同的實用程式類別？-css教學-PHP中文網

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

在本文中，我們將學習 Materialize CSS 中的不同實用程式類，但在繼續之前，讓我們先了解一下 Materialize CSS 是什麼。 Materialise CSS 是一種流行的前端開發框架，它提供各種功能和實用程式來創建響應靈敏且有吸引力的 Web 應用程式。 Materialise CSS 的基本元件之一是它的實用程式類，它提供了一種簡單有效的方法來為 HTML 元素添加樣式

實用程式類別是預先定義的 CSS 類，可以套用於任何 HTML 元素以實現特定的樣式。

這裡是一些你可以使用的實用類別

顏色實用類別
#對齊實用程式類別
#隱藏/顯示內容的實用類別
格式化實用程式類別

#顏色實用類別

Materialize CSS中的顏色實用類別提供了一種簡單的方法來為HTML元素添加顏色。這些類別允許開發人員從廣泛的預定義顏色中選擇，或為他們的網頁應用程式定義自訂顏色。顏色實用類別包括文字顏色和背景顏色類別。

範例

<html>
<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <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 中有哪些不同的實用程式類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！