Materializza - Griglie

Materialise fornisce una griglia reattiva ai fluidi a 12 colonne.

Utilizza le classi di stile di riga e colonna per definire rispettivamente righe e colonne.

Sr.No.	Nome e descrizione della classe
1	row Specifica un contenitore senza riempimento da utilizzare per le colonne reattive. Questa classe è obbligatoria affinché le classi reattive siano completamente reattive.
2	col Specifica una colonna con sottoclassi.

col ha diverse sottoclassi pensate per diversi tipi di schermi.

Colonne per dispositivi con schermo piccolo

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo piccolo, in genere smartphone.

Sr.No.	Nome e descrizione della classe
1	s1 Definisce 1 di 12 colonne con larghezza come 08,33%.
2	s2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	s3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	s4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
s5 - s11
12	s12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per telefoni con schermo piccolo.

Colonne per dispositivi a schermo medio

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo medio, in genere tablet.

Sr.No.	Nome e descrizione della classe
1	m1 Definisce 1 di 12 colonne con larghezza pari a 08,33%
2	m2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	m3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	m4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
m5 - m11
12	m12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per telefoni con schermo medio.

Colonne per dispositivi con schermo di grandi dimensioni

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo di grandi dimensioni, in genere laptop.

Sr.No.	Nome e descrizione della classe
1	l1 Definisce 1 di 12 colonne con larghezza come 08,33%.
2	l2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	l3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	l4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
l5 - l11
12	l12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per dispositivi con schermo di grandi dimensioni.

Utilizzo

Ogni sottoclasse determina il numero di colonne della griglia da utilizzare in base al tipo di dispositivo. Considera il seguente frammento HTML.

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

Le colonne predefinite da utilizzare sono 12 su un dispositivo, se una sottoclasse non è menzionata nell'attributo class di un elemento HTML.

Esempio

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>

Risultato

Verifica il risultato.

↰ Previous page Next page ↱