suchen

Heim  >  Artikel  >  Web-Frontend  >  Was sind die verschiedenen Dienstprogrammklassen in Materialise CSS?

Was sind die verschiedenen Dienstprogrammklassen in Materialise CSS?

WBOY
WBOYnach vorne
2023-09-12 17:57:071438Durchsuche

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

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.

Hier sind einige Utility-Klassen, die Sie verwenden können

  • Praxiskategorie Farbe

  • Alignment Utility-Klasse

  • Utility-Klassen zum Ausblenden/Anzeigen von Inhalten

  • Dienstprogrammklasse formatieren

Praxiskategorie Farbe

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.

Beispiel

<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>

Alignment Utility-Klasse

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.

Textausrichtung

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.

Beispiel

<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>

Vertikale Ausrichtung

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.

Beispiel

<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>

Inhaltsdienstprogrammklasse ein-/ausblenden

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.

Beispiel

<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>

Dienstprogrammklasse formatieren

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 -

1. Abschneiden

Diese Klasse wird verwendet, um Inhalte abzuschneiden und Ellipsen anzuzeigen, um anzuzeigen, dass mehr Text vorhanden ist, der derzeit unsichtbar ist.

Beispiel

<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. Kartenpanel.schwebbar

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.

Beispiel

<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!

css html
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie platziere ich ein Bild oder Video in einer Silhouette?Nächster Artikel：Wie platziere ich ein Bild oder Video in einer Silhouette?

In Verbindung stehende Artikel

Mehr sehen