資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Materialize CSS 中有哪些不同的實用程式類？
在本文中，我們將學習 Materialize CSS 中不同的實用程式類，但在繼續之前，讓我們瞭解一下什麼是 Materialize CSS。Materialize CSS 是一個流行的前端開發框架，它提供各種功能和實用程式來建立響應式且吸引人的 Web 應用程式。Materialize CSS 的一個重要組成部分是其實用程式類，它提供了一種簡單有效的方法來向 HTML 元素新增樣式。
實用程式類是預定義的 CSS 類，可以應用於任何 HTML 元素以實現特定的樣式。
以下是一些您可以使用的實用程式類
顏色實用程式類
對齊實用程式類
隱藏/顯示內容實用程式類
格式化實用程式類
顏色實用程式類
Materialize CSS 中的顏色實用程式類提供了一種簡單的方法來向 HTML 元素新增顏色。這些類允許開發人員從各種預定義顏色中進行選擇，或為其 Web 應用程式定義自定義顏色。顏色實用程式類包括文字顏色類和背景顏色類。
示例
<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 元素。這些類包括左對齊、右對齊、居中對齊、兩端對齊、valign-wrapper 和 valign。左對齊、右對齊、居中對齊和兩端對齊類用於對齊文字內容，而 valign-wrapper 和 valign 類用於垂直對齊元素。
文字對齊
它允許您控制元素內文字的水平對齊方式，包括左對齊、右對齊、居中對齊和兩端對齊等類。
示例
<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. Truncate (截斷)
此類用於截斷內容並顯示省略號以指示還有更多當前不可見的文字。
示例
<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. card-panel.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>
在本文中，我們瞭解到 Materialize CSS 是一個強大的前端開發框架，它提供各種功能和實用程式來建立響應式且視覺上吸引人的 Web 應用程式。其最有用的元件之一是一組實用程式類，它們提供了一種簡單有效的方法來向 HTML 元素新增樣式。這些實用程式類包括顏色、對齊、隱藏/顯示內容和格式化類等。透過使用這些實用程式類，開發人員可以輕鬆實現其所需的樣式效果，而無需編寫複雜的 CSS 程式碼。總而言之，Materialize CSS 對於希望快速輕鬆地建立美觀且響應式 Web 應用程式的開發人員來說是一個絕佳的選擇。
瀏覽量：183
