Das beste Stiftung Rastersystem-Tutorial im Jahr 2024. In diesem Tutorial können Sie Grid Column,Die Grundstruktur des Rasters,Rasteroptionen,Mit großem Bildschirm, lernen
Stiftung für das System 12 Raster.
Wenn Sie nicht über 12 haben, können Sie eine Reihe von Spalten zusammenführen, schaffen eine Reihe von größerer Breite.
Stiftung des Gittersystems reagiert. Spalte wird automatisch auf die Bildschirmgröße basiert Größe ändern. Auf einem großen Bildschirm, kann es drei sein, die kleine Bildschirmgröße, könnte es drei separate, sequentiell sein.
Stiftung Grid-System besteht aus drei Säulen:
.small
(mobiles Endgerät) .medium
(Tablette) .large
(Computerausrüstung: Notebook, Desktop) Vor Klassen können kombiniert werden, um ein flexibles Layout zu erstellen
Im Folgenden sind die Grundgitterstruktur Instanz Foundation:
Erstellen Sie zunächst eine Zeile ( <div class="row">
). Dies ist ein Niveau von vertikalen Spalten. Dann fügen Sie die Anzahl der Spalten beschrieben small- num
, medium- num
und large- num
Klasse. Hinweis: Die Anzahl der Spalten num
bis 12 ergeben müssen:
Beispiel, die erste Zeile der <div> Klasse .small-12
, die 12 (100% Breite) erzeugt.
Die zweite Zeile zwei Spalten erzeugt, .small-4
ist Breite% 33,3, .small-8
Breite von 66,6%.
Die dritte Zeile haben wir zwei zusätzliche Spalten ( .large-3
und .large-9
). Das bedeutet , dass , wenn die große Bildschirmgröße, die Spalte% 25 (werden wird .large-3
)% und 75 ( .large-9
Verhältnis) von. Wir geben auch den Anteil der kleinen Bildschirm über dem 33% ( .small-4
) und 66% ( .small-8
). Solche Kombinationen für die Anzeige verschiedener Bildschirm ist sehr hilfreich.
Die folgende Tabelle fasst die Stiftung Grid-System auf mehreren Geräten erklärt:
Kleingeräte Phones (<40.0625em (640px)) | Moderate Ausrüstung Tabletten (> = 40.0625em (640px)) | Großgeräte Laptops & Desktops (> = 64.0625em (1025px)) | |
---|---|---|---|
Netzverhalten | Es war das Niveau der | kollabieren begann, brechen über der Horizontalen | kollabieren begann, brechen über der Horizontalen |
Klasse Präfix | .small- * | .medium- * | .large- * |
Anzahl der Klassen | 12 | 12 | 12 |
Kann eingebettet werden | ja | ja | ja |
ausgleichen | ja | ja | ja |
Spaltensortierung | ja | ja | ja |
Grid Maximum ( .row
) Breite 62.5rem. Auf großem Bildschirm, wenn die Breite größer ist als 62.5rem ist, wird die Spalte, um die Breite der Seite nicht überspannen, auch wenn die Breite auf 100% gesetzt wird. Aber Sie können per CSS max-width zurück:
Wenn Sie die Standard max-width verwenden, aber die Hintergrundfarbe über die gesamte Breite der Seite möchten, können Sie verwenden .row
den gesamten Behälter wickeln, und Sie benötigen eine Hintergrundfarbe angeben: