In diesem Artikel lernen wir die verschiedenen Utility-Klassen in Materialise CSS kennen, aber bevor wir fortfahren, wollen wir verstehen, was Materialise CSS ist. Materialise CSS ist ein beliebtes Front-End-Entwicklungsframework, das verschiedene Funktionen und Dienstprogramme zum Erstellen reaktionsfähiger und attraktiver Webanwendungen bereitstellt. Eine der grundlegenden Komponenten von Materialise CSS sind seine Hilfsklassen, die eine einfache und effiziente Möglichkeit bieten, Stile zu HTML-Elementen hinzuzufügen
Utility-Klassen sind vordefinierte CSS-Klassen, die auf jedes HTML-Element angewendet werden können, um einen bestimmten Stil zu erreichen.
Praxiskategorie Farbe
Alignment Utility-Klasse
Utility-Klassen zum Ausblenden/Anzeigen von Inhalten
Dienstprogrammklasse formatieren
Die Color-Dienstprogrammklasse in Materialise CSS bietet eine einfache Möglichkeit, HTML-Elementen Farbe hinzuzufügen. Mit diesen Klassen können Entwickler aus einer breiten Palette vordefinierter Farben wählen oder benutzerdefinierte Farben für ihre Webanwendungen definieren. Zu den Farbdienstprogrammklassen gehören Klassen für Textfarben und Hintergrundfarben.
<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>
Materialise CSS bietet mehrere Ausrichtungsdienstprogrammklassen, mit denen Entwickler ihre HTML-Elemente ausrichten können. Zu diesen Klassen gehören left-align, right-align, center-align, justify-align, valign-wrapper und valign). Die Klassen „left-align“, „right-align“, „center-align“ und „justify-align“ werden zum Ausrichten von Textinhalten verwendet, während die Klassen „valign-wrapper“ und „valign“ zum vertikalen Ausrichten von Elementen verwendet werden.
Damit können Sie die horizontale Ausrichtung von Text innerhalb eines Elements steuern. Dazu gehören Klassen wie linksbündig, rechtsbündig, zentriert und im Blocksatz.
<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>
Mit der Klasse valign-wrapper können Sie Elemente vertikal ausrichten. Diese kann auf ein übergeordnetes Containerelement angewendet werden und richtet untergeordnete Elemente innerhalb dieses Containers vertikal aus.
<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>
Durch die Verwendung von Dienstprogrammklassen zum Ausblenden und Anzeigen können wir Inhalte entsprechend der Größe des Geräts einfach ein- und ausblenden und Inhalte selektiv anzeigen. Mithilfe dieser Dienstprogrammklassen können Sie abhängig von der Größe des Geräts unterschiedliche Eigenschaften auf Inhalte anwenden. Wenn wir beispielsweise Text auf Mobilgeräten ausblenden möchten, können wir einfach die Klasse „hide-on-small-only“ für den Text verwenden, der nur auf großen Bildschirmen oder auf Desktop-Geräten sichtbar sein soll.
Hier stehen viele verschiedene Klassen zur Verfügung, z. B. .hide, .hide-on-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med- und -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>
Materialise CSS bietet mehrere Klassen, mit denen sich HTML-Inhalte auf einfache und effektive Weise formatieren lassen. Durch die Nutzung dieser Formatierungsdienstprogrammklassen können wir den im Browser angezeigten Inhalt problemlos abschneiden und einen Schatteneffekt hinzufügen, wenn die Maus über dem Kartenelement schwebt, ohne komplexen CSS-Code zu verwenden.
Um diese Formatierungseffekte zu erzielen, können wir die folgenden Klassen verwenden -
Diese Klasse wird verwendet, um Inhalte abzuschneiden und Ellipsen anzuzeigen, um anzuzeigen, dass mehr Text vorhanden ist, der derzeit unsichtbar ist.
<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>
Diese Klasse fügt Kartenelementen einen Schatteneffekt hinzu, wenn Sie mit der Maus darüber fahren, was dabei hilft, den in der Karte enthaltenen Inhalt auszurichten und hervorzuheben.
<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>
In diesem Artikel haben wir erfahren, dass CSS ein leistungsstarkes Front-End-Entwicklungsframework ist, das verschiedene Funktionen und Dienstprogramme zum Erstellen reaktionsfähiger und optisch ansprechender Webanwendungen bereitstellt. Eine seiner nützlichsten Komponenten ist eine Reihe von Hilfsklassen, die eine einfache, aber effektive Möglichkeit bieten, Stile zu HTML-Elementen hinzuzufügen. Zu diesen Dienstprogrammklassen gehören unter anderem Klassen für Farbe, Ausrichtung, Ein-/Ausblenden von Inhalten und Formatierungsklassen. Durch die Nutzung dieser Dienstprogrammklassen können Entwickler problemlos die gewünschten Styling-Effekte erzielen, ohne komplexen CSS-Code schreiben zu müssen. Insgesamt ist Materialise CSS eine ausgezeichnete Wahl für Entwickler, die schnell und einfach schöne und reaktionsfähige Webanwendungen erstellen möchten.
Das obige ist der detaillierte Inhalt vonWas sind die verschiedenen Dienstprogrammklassen in Materialise CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
