Bootstrap und Foundation sind zwei meiner bevorzugten Front-End-Frameworks, insbesondere auf Prototypen für schnell entwickelte Websites. Sie alle bieten fertige Komponenten und beschleunigen meinen Workflow. Mit Ausnahme einiger kleiner Unterschiede scheinen mir die meisten ihrer Grundmerkmale ähnlich zu sein.
In diesem Artikel werde ich die grundlegende Konstruktion ihrer Gitter vorstellen. Zunächst zeige ich Ihnen, wie sie gebaut werden, ihre Hauptkomponenten beschreiben und wie sie Unterschiede in der Größe verschiedener Bildschirme zeigen. Ich werde Ihnen dann helfen, Wissen durch eine echte Beispielpraxis hinzuzufügen.
Fangen wir zusammen an!
Vergleich 1: Vergleich von Medienfragen
Bevor Sie die Rasterstrukturen von Bootstrap und Foundation analysieren, schauen wir uns die Haltepunkte an, die sie für das Antwortlayout bereitstellen. Dies ist, was jeder Frame für die Anzahl der verfügbaren Raster bereitstellt.
Bootstrap gibt 4 PX-basierte Medienabfragebrechpoints an. Wie folgt angezeigt:
Die Foundation enthält 5 EM-basierte Medienabfragen. Sie werden in der folgenden Tabelle angezeigt:
Um Ihnen eine Möglichkeit zu geben, zu verstehen, wie Medienfragen funktionieren, empfehlen Sie Ihnen, die Demo und die verwandten Fundamentdemos von Bootstrap zu besuchen. Aber wenn Sie immer noch verwirrt sind, wird der nächste Teil alles erklären.
Hinweis: Das Netz und die super großen Bildschirme der Foundation sind standardmäßig deaktiviert. Wenn Sie sie verwenden möchten, müssen Sie die Werte der beiden Variablen $ -XL-HTML-Grid-Klassen und $ -Cly-XL-HTML-Block-Grid-Klassen zu True "abbrechen" und festlegen. Sie finden diese Variablen im Abschnitt _Settings.scss.
Vergleich 2: Gitterstruktur
Sowohl Bootstrap als auch Foundation bieten ein bewegendes erstes 12-Spal-Netz, das aus Zeilen und Säulen besteht. Säulen sind in Reihen verschachtelt. Die Summe der Spalten in jeder Zeile beträgt 12 Spalten. Zeilen können auch in Säulen verschachtelt werden.
Diese beiden Frameworks enthalten viele vordefinierte Klassen, mit denen Sie die Größe einer Spalte festlegen können. Wie oben erwähnt, enthält Bootstrap 4 Medienabfrage -Haltepunkte und die Foundation enthält 5. Für jedes Netz haben sie unterschiedliche Klassenpräfixe, mit denen die Spaltengröße festgelegt werden kann (siehe die beiden oben genannten Tabellen).
Bootstrap -Gitterlinien erfordern ebenfalls eingekapselte Elemente. Dies sollte eine Container- oder Container-Fluid-Klasse haben. Die Containerklasse in einem Element hat einen festen Wert, und sein Wert hängt vom Fenster ab (siehe die erste Tabelle oben), während sich die Container-Fluid-Klasse in einem Element bis zur gesamten Breite des Browserfensters erstreckt.
Vergleich 3: Spalte! = 12?
Es ist möglich, dass die Anzahl der Spalten in einem Gittersystem nicht gleich 12 entspricht. In diesem Fall schwebt Bootstrap die letzte Spalte links und das Foundation wird nach rechts schweben. Wenn Sie das Standardverhalten der Foundation überschreiben möchten, fügen Sie die .end -Klasse in der letzten Spalte hinzu.
Vergleich 4: Funktionsklasse
Beide Frameworks bieten zusätzliche Klassen, mit denen Sie ihr Netz sehr flexibel definieren können.
Mit sichtbaren Klassen können Sie Inhalte auf Bildschirmen einer bestimmten Größe anzeigen oder ausblenden. Mit der Offset -Klasse können Sie unvollständige Spalten zentrieren oder den Abstand zwischen ihnen einstellen. Natürlich gibt es andere Klassen, die die Reihenfolge der Spalten nach verschiedenen Geräten angeben können.
Vergleich fünf: Gitterblöcke
Zusätzlich zum Standardraster unterstützt die Foundation eine weitere Rasterfunktion, nämlich Gitterblöcke. Sie können Spalten mit der gleichen Größe mit der kleinsten Marke erstellen. Definieren Sie die Zeile als UL -Element und die Spalten in der Zeile als Li -Element. Geben Sie dann die Größe der Spalte an, indem Sie die entsprechende Klasse auf das UL -Element anwenden (Einzelheiten finden Sie in der zweiten Tabelle).
Zu diesem Zeitpunkt fragen Sie sich vielleicht, was der Unterschied zwischen einem regulären Netz und einem Netzblock ist. Werfen wir einen kurzen Blick auf die beiden Unterschiede zwischen ihnen:
Im Gegensatz zum Standardgitter (Gitterblöcke) hat jede Zeile eine maximale Breite angelegt, sodass das gesamte Browserfenster immer abgedeckt ist.
Maschenblöcke können nur in Projekten gleicher Größe verwendet werden.
Mit dem Netz
Nachdem wir nun ein gutes Verständnis der Gitter dieser beiden Frameworks haben, lassen Sie uns sehen, wie wir sie verwenden können, um eine Bootstrap -Seite und die entsprechende Fundamentseite zu erstellen.
Der folgende Screenshot zeigt das erste Layout, das wir erstellen werden:
Beginnend mit Bootstrap definieren wir ein Element mit der Containerklasse. Wie bereits erwähnt, setzt diese Klasse eine feste Breite für dieses Element gemäß der Größe des Bildschirms (siehe Tabelle in Bootstrap für Details). Dann fügen wir der Klassenzeile ein Element hinzu.
Jetzt sind wir bereit, unsere Spalten einzurichten. Für große Bildschirme möchten wir 4 Spalten derselben Größe. Deshalb definieren wir jeweils 4 Div-Elemente mit Col-LG-3-Klasse. Für kleine und mittelgroße Geräte bevorzugen wir jedoch zwei Spalten in jeder Zeile. Aus diesem Grund verwenden wir die Col-SM-6-Klasse. Zum Schluss möchten wir, dass die Spalten gestapelt werden. Dies ist das Standardverhalten des Verschiebens des ersten Frameworks, sodass die Col-XS-12-Klasse nicht definiert werden muss.
Seine HTML sieht so aus:
<Div> <div> <div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!
Betrachten wir weiterhin die Foundation.
Das Stiftungsnetz ist dem Netz der Bootstrap sehr ähnlich, ist aber etwas einfacher. Zunächst müssen wir ein Element mit der Zeilenklasse definieren, die unsere Spalten enthalten. Diese Klasse setzt die maximale Breite des Elements auf 62,5Rem (1000px). Als nächstes fügen wir die Spalte hinzu. Um dies zu erreichen, geben wir an, dass jedes DIV -Element eine Spalte oder eine Spaltenklasse hat, und verwenden dann die entsprechende Rasterklasse (siehe Tabelle oben, um Einzelheiten zu fundieren), um ihre Breite festzulegen. In ähnlicher Weise müssen wir für kleine Geräte die kleine 12-Klasse nicht definieren.
Dies ist HTML basierend auf Foundation Raster :
<div> <div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!-Inhalt-> </div> <!
In diesem Moment denke ich, dass Sie sich mit dem Gittersystem dieser beiden Frameworks besser vertraut gemacht haben. Aber vielleicht kann ein anderes Beispiel Ihnen helfen, klarer zu verstehen.
Im nächsten Beispiel werden wir Fußzeile bauen. Das folgende Diagramm zeigt den gewünschten Stil:
Hier wählen wir ein anderes Layout, um mit dem vorherigen Beispiel zu vergleichen. Für Bildschirme mit Mittelbildschirm und darüber (oder Bildschirme mit einem kleinen Bildschirm und oben im Bootstrap-Raster) möchten wir drei Spalten anzeigen. Wir haben jedoch festgestellt, dass es in der letzten Spalte eine verschachtelte Reihe gibt. Dies besteht aus zwei Spalten. Wir werden ihre Breite auf die Hälfte der Zeilenbreite in allen Geräten einstellen. Schließlich passen wir die Sichtbarkeit der Bilder an, die in den verschachtelten Zeilen erscheinen.
Hier ist der Code in Bootstrap:
<div> <div> <div> <!-Inhalt-> </div> <!-Inhalt-> </div> <div> <a href = "#"> <p> Treffen und Diskussion </p> <i> </i> </a> </div> <! </div> <!-.col-sm-4-> </div> <!-.Row-> </div> <!-.Container->
Hier ist der Code für die Stiftung:
<div> <div> <!-Inhalt-> </div> <!-Inhalt-> </div> <li- <li> <a href = "#"> <p> Treffen und Diskussion </p> <i> </i> </a> </li> <! .Row ->
Hinweis: Wenn Sie Mesh -Blöcke ersetzen möchten, können wir das Standardnetz der Foundation verwenden, um verschachtelte Zeilen zu erstellen.
abschließend
Wenn Sie weitere Informationen zum Bootstrap -Gittersystem wünschen, können Sie diesen Artikel überprüfen: "Bootstrap muss jeden Tag (Layout) erfahren."
Schließlich stelle ich in diesem Artikel die Netzstruktur von Bootstrap und Foundation vor. Dann sahen wir in einem echten Projekt, wie sie ihre Netze benutzen können. Wie Sie sehen können, sind alle Netze ähnlich und können weiter definiert werden.
Ich hoffe dir gefällt diesen Artikel. Vielleicht können Sie das, was Sie gelernt haben, auf Ihr Projekt anwenden. Für weitere Bootstrap -Inhalte folgen Sie bitte: "Bootstrap Learning Tutorial", vielen Dank für das Lesen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.