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

WBOY 转载: 2023-09-12 17:57:07 1026浏览

在本文中，我们将学习 Materialize CSS 中的不同实用程序类，但在继续之前，让我们先了解一下 Materialize CSS 是什么。 Materialise CSS 是一种流行的前端开发框架，它提供各种功能和实用程序来创建响应灵敏且有吸引力的 Web 应用程序。 Materialise 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。截断

此类用于截断内容并显示省略号以指示还有更多当前不可见的文本。

示例

<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 = "//m.sbmmt.com/m/faq/#"> This is a link </a>
               <a href = "//m.sbmmt.com/m/faq/#"> This is a link </a>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

在本文中，我们了解了 CSS 是一个强大的前端开发框架，它提供了各种功能和实用程序来创建响应灵敏且具有视觉吸引力的 Web 应用程序。它最有用的组件之一是一组实用程序类，它提供了一种简单而有效的方法来向 HTML 元素添加样式。这些实用程序类包括颜色、对齐、隐藏/显示内容和格式设置类等。通过利用这些实用程序类，开发人员可以轻松实现他们想要的样式效果，而无需编写复杂的 CSS 代码。总的来说，Materialize CSS 对于那些寻求快速轻松地创建美观且响应灵敏的 Web 应用程序的开发人员来说是一个绝佳的选择。

以上就是Materialise CSS 中有哪些不同的实用程序类？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何将图像或视频放置在剪影内？下一条：使用 CSS 使 div 水平滚动