Materialise ist ein CSS-Framework für Design, das klassische Prinzipien nutzt und diese mit Innovation und Technologie kombiniert. Die Schöpfer von Materialise sind Google, die ein Designsystem entwickelt haben, das jedem Benutzer ein einheitliches Benutzererlebnis in jeder Art von Produkt bietet, unabhängig von der verwendeten Plattform. Breadcrumbs ist eine in Materialise CSS integrierte Komponente, die hauptsächlich dazu dient, den aktuellen Standort des Benutzers anzuzeigen, wenn es viele Ebenen gibt, sei es auf einer Website oder einer Webanwendung.
In diesem Artikel werfen wir einen Blick auf die Breadcrumb-Klassen in materialise CSS?
Breadcrumb-Kategorien in Materialise CSS
CSS-Klassen in Materialise CSS zur einfachen Erstellung von Breadcrumbs. Zu den verwendeten Klassen gehören -
Breadcrumbs − Breadcrumbs werden verwendet, um anzuzeigen, dass das letzte Ankertag aktiv ist, und der Rest ist ausgegraut.
nav-wrapper class − Diese Klasse wird verwendet, um die Komponente des Navigationssystems auf Breadcrumb zu setzen.
Werfen wir einen Blick auf die Syntax zum Erstellen von Breadcrumbs in Materialise CSS
Syntax
<nav>
<div class="nav-wrapper blue">
<a href="#html5" class="breadcrumb">HTML</a>
<a href="#materialize example" class="breadcrumb">Materialize example</a>
<a href="#breadcrumb" class="breadcrumb example">BreadCrumb example</a>
</div>
</nav>
Nach dem Login kopieren
Im obigen Beispiel können Sie sehen, dass wir zuerst ein Navigations-Tag geöffnet und dann einen Klassen-Navigations-Wrapper erstellt haben. Anschließend haben wir drei verschiedene Anker-Tags erstellt und ihnen die Breadcrumb-Klasse zugewiesen.
Um das Konzept der Breadcrumb-Navigation besser zu verstehen, schauen wir uns ein Beispiel an
Die chinesische Übersetzung von
Beispiel
lautet:
Beispiel
Im Beispiel verfolgen wir den Ansatz, einen einfachen Breadcrumb zu erstellen, was bedeutet, dass der HTML-Code auf die Breadcrumb-Seite verweist. Werfen wir einen Blick auf den Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of breadcrumb CSS</title>
<style>
.breadcrumb {
padding: 0.5rem 1rem;
background-color: #f5f5f5;
color: #333;
font-size: 1rem;
text-decoration: none;
font-family: Arial, sans-serif;
}
.breadcrumb:hover {
background-color: #2596be;
}
.breadcrumb:active {
background-color:#efaf67;
}
.breadcrumb:not(:last-child):after {
content: ">";
padding: 0 0.5rem;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>
</body>
</html>
Nach dem Login kopieren
Im obigen Beispiel haben wir die Klasse „breadcrumb“ verwendet, die uns hilft, das Element zu verankern, das sich innerhalb des Elements „nav“ befindet. Der Benutzer kann verschiedene Klassen wie „Cyan“ oder „Hellblau“ verwenden, um die Farbe der Brotkrümel zu ändern. Wenn der Benutzer die Position der Brotkrümel nach rechts ändern möchte, kann er die Klasse „richtig“ verwenden.
Hinweis - Es gibt verschiedene Möglichkeiten, materialise CSS zu installieren. Eine Möglichkeit besteht darin, auf die offizielle Website von materialise CSS zu gehen und dann die neueste verfügbare Version herunterzuladen, in der Sie materialize.min.js herunterladen und materialisieren müssten. min.css in dem Verzeichnis, in dem Ihr Projekt gespeichert ist.
Die zweite Möglichkeit, das Materialise-CSS zu installieren oder zu verwenden, besteht darin, die CDN-Versionen zu verwenden und dann diese CDN-Links in das Skript-Tag einzufügen. Anschließend können Sie alle Funktionen des Materialise-CSS nutzen.
Sehen wir uns ein weiteres Beispiel zum Verständnis der Breadcrumb-Kategorien in Materialise CSS an
Die chinesische Übersetzung von
Beispiel
lautet:
Beispiel
In diesem Beispiel erstellen wir einen einfachen Breadcrumb, indem wir den aktuellen Speicherort des aktiven Breadcrumbs verwenden.
Der Code für die Herstellung von Semmelbröseln lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<style>
.breadcrumb {
background-color: rgb(255, 99, 71); /* tomato */
background-color: hsl(9, 100%, 64%); /* tomato */
background-color: #ff6347; /* tomato */
background-color: rgba(255, 99, 71, 0.5); /* tomato with 50% transparency */
font-family: Arial, sans-serif;
padding: 0 50px ;
}
</style>
</head>
<body>
<nav class="red">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>
</body>
</html>
Nach dem Login kopieren
Im obigen Code haben wir zuerst materialise CSS CDN und einige externe Schriftarten hinzugefügt, dann unseren HTML-Code gestartet, darin die Breadcrumb-Klasse verwendet, drei Links hinzugefügt und dann den Nav-Wrapper geändert.
Was ist Materialise CSS?
Materialise CSS ist ein Front-End-Framework, das auf Materialdesign basiert und reagiert, da der Entwickler benutzerdefinierte Komponenten, Animationen und Übergänge verwenden kann und sich dann auf die Benutzererfahrung konzentriert, da das Framework dem Benutzer ein reaktionsfähiges System auf allen Plattformen bietet stehen dem Benutzer zur Verfügung.
Für die Implementierung von CSS stehen verschiedene Themes zur Verfügung, mit detaillierten Beispielen, die die Verwendung erleichtern.
Fazit
Materialise CSS ist eine Sprache, die Design mit Innovation und Technologie verbindet und von Google entwickelt wurde, um ein verfeinertes Benutzererlebnis für alle Plattformen zu bieten. Breadcrumbs sind eine in Materialise CSS integrierte Komponente. Bei großen Inhaltsmengen können verschiedene Klassen verwendet werden, um auf einfache Weise Breadcrumbs zu erstellen.
In diesem Artikel haben wir gesehen, was die Klassen des Breadcrumbs im Materialise-CSS sind und was Materialise-CSS ist.
Das obige ist der detaillierte Inhalt vonWelche Kategorien gibt es für Breadcrumbs in Materialise CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
