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 元素。这些类包括 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. 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 代码。总而言之，对于寻求快速轻松地创建美观且响应式的 Web 应用程序的开发人员来说，Materialize CSS 是一个绝佳的选择。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
