Materialisieren - Gitter
Materialise bietet ein auf Flüssigkeit reagierendes Gitter mit 12 Säulen.
Es verwendet die Zeilen- und Spaltenstilklassen, um Zeilen bzw. Spalten zu definieren.
| Sr.Nr. | Klassenname & Beschreibung |
|---|---|
| 1 | row Gibt einen paddinglosen Container an, der für reaktionsfähige Spalten verwendet werden soll. Diese Klasse ist obligatorisch, damit reaktionsfähige Klassen vollständig reagieren können. |
| 2 | col Gibt eine Spalte mit Unterklassen an. |
col hat mehrere Unterklassen für verschiedene Arten von Bildschirmen.
Spalten für Geräte mit kleinem Bildschirm
Im Folgenden finden Sie eine Liste von Stilen auf Spaltenebene für Geräte mit kleinem Bildschirm, normalerweise Smartphones.
| Sr.Nr. | Klassenname & Beschreibung | |
|---|---|---|
| 1 | s1 Definiert 1 von 12 Spalten mit einer Breite von 08,33%. |
|
| 2 | s2 Definiert 2 von 12 Spalten mit einer Breite von 16,66%. |
|
| 3 | s3 Definiert 3 von 12 Spalten mit einer Breite von 25,00%. |
|
| 4 | s4 Definiert 4 von 12 Spalten mit einer Breite von 33,33%. |
|
| s5 - s11 | ||
| 12 | s12 Definiert 12 von 12 Spalten mit einer Breite von 100%. Standardklasse für Telefone mit kleinem Bildschirm. |
|
Spalten für Geräte mit mittlerem Bildschirm
Im Folgenden finden Sie eine Liste von Stilen auf Spaltenebene für Geräte mit mittlerem Bildschirm, normalerweise Tablets.
| Sr.Nr. | Klassenname & Beschreibung | |
|---|---|---|
| 1 | m1 Definiert 1 von 12 Spalten mit einer Breite von 08,33% |
|
| 2 | m2 Definiert 2 von 12 Spalten mit einer Breite von 16,66%. |
|
| 3 | m3 Definiert 3 von 12 Spalten mit einer Breite von 25,00%. |
|
| 4 | m4 Definiert 4 von 12 Spalten mit einer Breite von 33,33%. |
|
| m5 - m11 | ||
| 12 | m12 Definiert 12 von 12 Spalten mit einer Breite von 100%. Standardklasse für Telefone mit mittlerem Bildschirm. |
|
Spalten für Großbildgeräte
Im Folgenden finden Sie eine Liste von Stilen auf Spaltenebene für Geräte mit großem Bildschirm, normalerweise Laptops.
| Sr.Nr. | Klassenname & Beschreibung | |
|---|---|---|
| 1 | l1 Definiert 1 von 12 Spalten mit einer Breite von 08,33%. |
|
| 2 | l2 Definiert 2 von 12 Spalten mit einer Breite von 16,66%. |
|
| 3 | l3 Definiert 3 von 12 Spalten mit einer Breite von 25,00%. |
|
| 4 | l4 Definiert 4 von 12 Spalten mit einer Breite von 33,33%. |
|
| l5 - l11 | ||
| 12 | l12 Definiert 12 von 12 Spalten mit einer Breite von 100%. Standardklasse für Großbildgeräte. |
|
Verwendung
Jede Unterklasse bestimmt die Anzahl der zu verwendenden Spalten des Rasters basierend auf dem Typ eines Geräts. Betrachten Sie das folgende HTML-Snippet.
<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>Die zu verwendenden Standardspalten sind 12 auf einem Gerät, wenn eine Unterklasse im Klassenattribut eines HTML-Elements nicht erwähnt wird.
Beispiel
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>Ergebnis
Überprüfen Sie das Ergebnis.