Materialize est un framework CSS pour le design qui utilise des principes classiques et les combine avec l'innovation et la technologie. Les créateurs de Materialise sont Google, qui a développé un système de conception qui offre à chaque utilisateur une expérience utilisateur unifiée dans tout type de produit, quelle que soit la plateforme qu'il utilise. Breadcrumbs est un composant intégré à Materialise CSS qui est principalement utilisé pour afficher l'emplacement actuel de l'utilisateur lorsqu'il existe plusieurs niveaux, que ce soit sur un site Web ou une application Web.
Dans cet article, nous allons jeter un œil aux classes de fil d'Ariane dans Materialise CSS ?
Catégories de fil d'Ariane dans Materialise CSS
Classes CSS présentes dans Materialise CSS pour une création facile du fil d'Ariane. Les classes utilisées incluent -
Fil d'Ariane - Le fil d'Ariane est utilisé pour montrer que la dernière balise d'ancrage est active et que le reste est grisé.
classe nav-wrapper - Cette classe est utilisée pour définir le composant de la navigation sur le fil d'Ariane.
Jetons un coup d'œil à la syntaxe de création de fil d'Ariane dans Materialise CSS
Syntaxe
<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>
Copier après la connexion
Dans l'exemple ci-dessus, vous pouvez voir que nous avons d'abord ouvert une balise de navigation, puis créé une classe nav-wrapper, après quoi nous avons créé 3 balises d'ancrage différentes et leur avons donné la classe fil d'Ariane.
Pour mieux comprendre le concept de navigation par fil d'Ariane, regardons un exemple
La traduction chinoise de
Exemple
est :
Exemple
Dans l'exemple, l'approche que nous adopterons consiste à créer un simple fil d'Ariane, ce qui signifie que le HTML pointera vers la page du fil d'Ariane. Jetons un coup d'oeil au 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>
Copier après la connexion
Dans l'exemple ci-dessus, nous avons utilisé la classe "breadcrumb", qui nous aide à ancrer l'élément situé à l'intérieur de l'élément "nav". L'utilisateur peut utiliser différentes classes comme "cyan" ou "bleu clair" pour changer la couleur du fil d'Ariane, ou si l'utilisateur souhaite changer la position du fil d'Ariane vers la droite, il peut utiliser la classe "right".
Remarque - Il existe différentes façons d'installer Materialise CSS. Une façon est d'aller sur le site officiel de Materialise CSS, puis de télécharger la dernière version disponible dans laquelle vous devrez télécharger le Materialise.min.js et Materialise. min.css dans le répertoire où est stocké votre projet.
La deuxième façon d'installer ou d'utiliser le CSS Materialise consiste à utiliser les versions CDN, puis à inclure ces liens CDN dans la balise de script, après quoi vous pouvez utiliser toutes les fonctionnalités du CSS Materialise.
Voyons un autre exemple pour comprendre les catégories de fil d'Ariane dans Materialise CSS
La traduction chinoise de
Exemple
est :
Exemple
Dans cet exemple, nous allons créer un fil d'Ariane simple en utilisant l'emplacement actuel du fil d'Ariane actif.
Le code pour faire de la chapelure est le suivant :
<!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>
Copier après la connexion
Dans le code ci-dessus, nous avons d'abord ajouté Materialise CSS CDN et quelques polices externes, puis démarré notre code HTML, utilisé la classe de fil d'Ariane et ajouté trois liens, puis modifié le nav-wrapper.
Qu'est-ce que Materialise CSS ?
Materialize CSS est un framework frontal basé sur la conception matérielle et réactif car le développeur peut utiliser des composants, des animations et des transitions personnalisés, puis se concentre sur l'expérience utilisateur car le framework fournit à l'utilisateur un système réactif sur toutes les plates-formes qui sont à la disposition de l'utilisateur.
Il existe différents thèmes disponibles pour implémenter CSS, avec des exemples détaillés facilitant son utilisation.
Conclusion
Materialize CSS est un langage qui allie design, innovation et technologie, conçu par Google pour offrir une expérience utilisateur raffinée pour toutes les plateformes. Le fil d'Ariane est un composant intégré à Materialise CSS. Lorsqu'il y a une grande quantité de contenu, diverses classes peuvent être utilisées pour créer facilement un fil d'Ariane.
Dans cet article, nous avons vu quelles sont les classes du fil d'Ariane dans le CSS Materialise et qu'est-ce que le CSS Materialise.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
