recherche

Maison  >  Article  >  interface Web  >  Quelles sont les différentes classes utilitaires dans Materialise CSS ?

Quelles sont les différentes classes utilitaires dans Materialise CSS ?

WBOY
WBOYavant
2023-09-12 17:57:071439parcourir

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

Dans cet article, nous découvrirons les différentes classes utilitaires de Materialise CSS, mais avant de continuer, comprenons ce qu'est Materialise CSS. Materialise CSS est un framework de développement frontal populaire qui fournit diverses fonctionnalités et utilitaires pour créer des applications Web réactives et attrayantes. L'un des composants fondamentaux de Materialise CSS réside dans ses classes utilitaires, qui fournissent un moyen simple et efficace d'ajouter des styles aux éléments HTML

Les classes utilitaires sont des classes CSS prédéfinies qui peuvent être appliquées à n'importe quel élément HTML pour obtenir un style spécifique.

Voici quelques classes utilitaires que vous pouvez utiliser

  • Catégorie pratique couleur

  • Classe utilitaire d'alignement

  • Classes utilitaires pour masquer/afficher du contenu

  • Classe utilitaire de format

Catégorie pratique couleur

La classe utilitaire Color de Materialise CSS fournit un moyen simple d'ajouter de la couleur aux éléments HTML. Ces classes permettent aux développeurs de choisir parmi une large gamme de couleurs prédéfinies ou de définir des couleurs personnalisées pour leurs applications Web. Les classes d’utilitaires de couleur incluent les classes de couleur du texte et de couleur d’arrière-plan.

Exemple

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

Classe utilitaire d'alignement

Materialize CSS fournit plusieurs classes utilitaires d'alignement qui permettent aux développeurs d'aligner leurs éléments HTML. Ces classes incluent l'alignement à gauche, l'alignement à droite, l'alignement au centre, l'alignement justifié, le valign-wrapper et le valign ). Les classes left-align, right-align, center-align et justifier-align sont utilisées pour aligner le contenu du texte, tandis que les classes valign-wrapper et valign sont utilisées pour aligner les éléments verticalement.

Alignement du texte

Il vous permet de contrôler l'alignement horizontal du texte dans un élément, il comprend des classes telles que l'alignement à gauche, l'alignement à droite, l'alignement au centre et l'alignement par justification.

Exemple

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

Alignement vertical

Il vous permet d'aligner verticalement des éléments à l'aide de la classe valign-wrapper, cela peut être appliqué à un élément de conteneur parent et alignera verticalement les éléments enfants dans ce conteneur.

Exemple

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

Masquer/afficher la classe utilitaire de contenu

En utilisant des classes utilitaires pour masquer et afficher, nous pouvons facilement masquer et afficher le contenu en fonction de la taille de l'appareil et pouvoir afficher le contenu de manière sélective. À l'aide de ces classes utilitaires, vous pouvez appliquer différentes propriétés au contenu en fonction de la taille de l'appareil. Par exemple, si nous voulons masquer du texte sur les appareils mobiles, nous pouvons simplement utiliser la classe "hide-on-small-only" pour le texte qui ne doit être visible que sur les grands écrans ou sur les appareils de bureau.

De nombreuses classes différentes sont disponibles ici, telles que .hide, .hide-on-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med- et -haut, .masquer-en-large-uniquement, .afficher-en-petit, .afficher-en-large, .afficher-en-moyen-et-haut, afficher-en-moyen-et-bas.

Exemple

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

Classe utilitaire de format

Materialize CSS fournit plusieurs classes qui peuvent être utilisées pour formater le contenu HTML de manière simple et efficace. En tirant parti de ces classes utilitaires de formatage, nous pouvons facilement tronquer le contenu affiché dans le navigateur et ajouter un effet d'ombre lorsque la souris survole l'élément de la carte sans utiliser de code CSS complexe.

Pour obtenir ces effets de formatage, nous pouvons utiliser les classes suivantes -

1. Tronquer

Cette classe est utilisée pour tronquer le contenu et afficher des points de suspension pour indiquer qu'il y a plus de texte actuellement invisible.

Exemple

<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. Panneau de cartes.hoverable

Cette classe ajoute un effet d'ombre aux éléments de la carte lorsque vous les survolez, ce qui permet d'aligner et de mettre en évidence le contenu de la carte.

Exemple

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

Dans cet article, nous avons appris que CSS est un puissant framework de développement frontal qui fournit diverses fonctionnalités et utilitaires pour créer des applications Web réactives et visuellement attrayantes. L'un de ses composants les plus utiles est un ensemble de classes utilitaires qui fournissent un moyen simple mais efficace d'ajouter des styles aux éléments HTML. Ces classes d'utilitaires incluent, entre autres, les classes de couleur, d'alignement, de masquage/affichage du contenu et de formatage. En tirant parti de ces classes utilitaires, les développeurs peuvent facilement obtenir les effets de style souhaités sans écrire de code CSS complexe. Dans l’ensemble, Materialise CSS est un excellent choix pour les développeurs cherchant à créer rapidement et facilement des applications Web belles et réactives.

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!

css html
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment placer une image ou une vidéo à l'intérieur d'une silhouette ?Article suivant：Comment placer une image ou une vidéo à l'intérieur d'une silhouette ?

Articles Liés

Voir plus