Matérialiser - Grilles

Materialise fournit une grille sensible aux fluides à 12 colonnes.

Il utilise les classes de style de ligne et de colonne pour définir respectivement les lignes et les colonnes.

N ° Sr.	Nom et description de la classe
1	row Spécifie un conteneur sans remplissage à utiliser pour les colonnes réactives. Cette classe est obligatoire pour que les classes réactives soient entièrement réactives.
2	col Spécifie une colonne avec des sous-classes.

col a plusieurs sous-classes destinées à différents types d'écrans.

Colonnes pour les appareils à petit écran

Vous trouverez ci-dessous une liste de styles au niveau des colonnes pour les appareils à petit écran, généralement les smartphones.

N ° Sr.	Nom et description de la classe
1	s1 Définit 1 des 12 colonnes avec une largeur de 08,33%.
2	s2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	s3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	s4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
s5 - s11
12	s12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les téléphones à petit écran.

Colonnes pour les appareils à écran moyen

Voici une liste de styles au niveau des colonnes pour les appareils à écran moyen, généralement les tablettes.

N ° Sr.	Nom et description de la classe
1	m1 Définit 1 des 12 colonnes avec une largeur de 08,33%
2	m2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	m3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	m4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
m5 - m11
12	m12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les téléphones à écran moyen.

Colonnes pour les appareils grand écran

Vous trouverez ci-dessous une liste de styles au niveau des colonnes pour les appareils à grand écran, généralement les ordinateurs portables.

N ° Sr.	Nom et description de la classe
1	l1 Définit 1 des 12 colonnes avec une largeur de 08,33%.
2	l2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	l3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	l4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
l5 - l11
12	l12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les appareils grand écran.

Usage

Chaque sous-classe détermine le nombre de colonnes de la grille à utiliser en fonction du type de périphérique. Considérez l'extrait de code HTML suivant.

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

Les colonnes par défaut à utiliser sont 12 sur un appareil, si une sous-classe n'est pas mentionnée dans l'attribut class d'un élément HTML.

Exemple

materialize_grids.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>
      
      <hr/> 
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>
      
      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>
         
         <div class = "col s4 m8 l9 grey">  
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

↰ Previous page Next page ↱