数据结构
网络
关系数据库管理系统 (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
