Heim >Web-Frontend >CSS-Tutorial >Grid -System -Vergleich: Bootstrap 3 gegen Foundation 5
Grid -System -Vergleich: Bootstrap 3 gegen Foundation 5
- Joseph Gordon-LevittOriginal
- 2025-02-25 14:06:09319Durchsuche
Bootstrap und Foundation sind zwei meiner bevorzugten Front-End-Frameworks, insbesondere für schnelle Website-Prototypen. Beide sind mit fertigen Komponenten ausgestattet, die meinen Workflow beschleunigen. Über ihre kleinen Unterschiede hinaus sehen die meisten ihrer grundlegenden Merkmale ähnlich aus.
In diesem Artikel werde ich die Grundlagen ihrer Netze behandeln. Zunächst zeige ich Ihnen, wie sie strukturiert sind und ihre Schlüsselkomponenten beschreiben und wie sie je nach Bildschirmgröße unterscheiden. Dann werde ich ein echtes Beispiel durchgehen, das Ihnen hilft, das Wissen in die Praxis umzusetzen.
Beginnen wir!
Key Takeaways
- Sowohl Bootstrap als auch Foundation sind beliebte Front-End-Frontworks mit ähnlichen grundlegenden Merkmalen, unterscheiden sich jedoch in ihren Gitterstrukturen und Anpassungsoptionen.
- Bootstrap gibt vier Pixel-basierte Medienabfrage-Haltepunkte für reaktionsschnelle Layouts an, während die Foundation fünf EM-basierte Medienabfragen enthält. Beide Frameworks bieten ein mobiles 12-Spal-Netz, das aus Zeilen und Spalten besteht.
- Bootstraps Netz benötigt ein Wrapper-Element für Zeilen, das eine Klasse von Container oder Containerfluid aufweisen sollte. Das Gitter der Foundation hingegen ist etwas einfacher und benötigt kein Wrapper -Element.
- Foundation unterstützt eine zusätzliche Gitterfunktion namens Block Grid, die die Erstellung von Spalten mit minimalem Markup ermöglicht. Bootstrap bietet keine ähnliche Funktion.
Vergleich von Medienabfragen
Bevor Sie die Grid -Struktur von Bootstraps und Foundation analysieren, schauen wir uns zunächst die Haltepunkte an, die beide für reaktionsschnelle Layouts anbieten. Diese werden verwendet, um die Anzahl der verfügbaren Netze einzustellen, die jedes Framework bietet.
Bootstrap gibt vier Pixel-basierte Medienabfrage-Haltepunkte an. Die folgende Tabelle zeigt sie:
Um Ihnen eine Vorstellung davon zu geben, wie diese Medienfragen funktionieren, empfehle ich Ihnen einen Blick auf eine Bootstrap -Demo und die entsprechende Foundation -Demo. Aber wenn Sie noch ein wenig verwirrt sind, werden die kommenden Abschnitte die Dinge klarstellen.
Hinweis: Die Gitter der Foundation für XLARGE- und XXLARGE -Bildschirme sind standardmäßig deaktiviert. Wenn Sie sie verwenden möchten, müssen Sie die Werte des $ -Kl-HTML-Grid-Klassen und $ -Clyse-XL-HTML-Block-Grid-Klassen-Klassen an True „incommentiert“ und $-XL-HTML-Block-Grid-Klassen festlegen. Sie finden diese Variablen in den Teils.Scss -Teil.
Gitterstruktur
Bootstrap und Foundation bieten jeweils ein mobiles 12-Spalte-Netz, das aus Zeilen und Säulen besteht. Säulen sind in einer Reihe verschachtelt. Sie skalieren für jede Reihe bis zu 12. Zeilen können auch innerhalb der Spalten verschachtelt werden.
Beide Frameworks werden mit vielen vordefinierten Klassen geliefert, mit denen Sie die Größe Ihrer Spalten festlegen können. Wie oben erwähnt, enthält Bootstrap vier Medienabfragebrechpoints und die Stiftung hat fünf. Für jedes Raster gibt es ein anderes Klassenpräfix, mit dem die Größe der Spalten festgelegt werden kann (siehe die beiden Tabellen).
Bootstraps Netz benötigt auch ein Wrapper -Element für Zeilen. Dies sollte eine Klasse von Container oder Container-Fluid haben. Ein Element mit der Containerklasse hat eine feste Breite, die je nach Ansichtsfenster variiert (siehe die erste Tabelle oben), während ein Element mit einer Klasse von Containerfluid die gesamte Breite des Browserfensters ausgeht.
Spalten! = 12?
Es ist möglich, dass die Anzahl der Spalten in einem Raster nicht genau 12 beträgt. Wenn Sie das Standardverhalten der Foundation überschreiben möchten, fügen Sie die Endklasse zur letzten Spalte hinzu.
Um diesen Unterschied in Aktion zu erkennen, können Sie sich ein Bootstrap -Beispiel und ein Fundamentbeispiel ansehen.
Dienstprogrammklassen
Beide Frameworks bieten zusätzliche Klassen an, die Ihnen eine große Flexibilität bieten, um ihre Gitter anzupassen.
MitSichtbarkeitsklassen können Sie Inhalte basierend auf bestimmten Bildschirmgrößen anzeigen oder ausblenden. Mit Offset -Klassen können Sie unvollständige Spalten zentrieren oder den Abstand zwischen ihnen einstellen. Es gibt auch Klassen, die die Reihenfolge der Spalten auf verschiedenen Geräten angeben.
Beispiele für all diese verschiedenen Klassen können in dieser Bootstrap -Demo und dieser Foundation -Demo gezeigt werden.
Blockgitter
Über das Standardgitter hinaus unterstützt die Foundation eine weitere Gitterfunktion namens Block Grid. Auf diese Weise können Sie Spalten mit minimalem Markup gleicher Größe erstellen. Um es zu verwenden, definieren Sie die Zeile als UL -Element und die darin enthaltenen Spalten als Li -Elemente. Geben Sie dann die Spaltengrößen an, indem Sie die zugehörigen Klassen (siehe 2. Tabelle oben) auf das UL -Element anwenden.
Zu diesem Zeitpunkt denken Sie vielleicht, was sind die Unterschiede zwischen dem regulären Netz und dem Blocknetz? Schauen wir uns kurz zwei davon an:
- Im Gegensatz zum Standardraster, das eine maximale Breite auf jede Zeile anwendet, füllt das Blockraster immer die vollständige Fensterbreite.
- Das Blocknetz kann nur für Elemente gleicher Größe verwendet werden.
, um besser zu demonstrieren, wie sich die Gitter unterscheiden, hier ist eine Demo.
Verwenden der Gitter
Jetzt, da wir ein gutes Verständnis der Gitter dieser beiden Frameworks haben, sehen wir uns an, wie wir sie verwenden können, um eine Bootstrap -Seite und die entsprechende Fundamentseite zu erstellen.
Das Screenshot unten zeigt das erste Layout, das wir erstellen werden:
Beginnend mit Bootstrap definieren wir ein Element mit einer Klasse von Container. Wie bereits erwähnt, legt diese Klasse eine feste Breite auf das Element fest, wobei der Wert von der Bildschirmgröße abhängt (siehe Bootstrap -Tabelle). Dann fügen wir ein Element mit einer Reihe von Zeile hinzu.
Jetzt sind wir bereit, unsere Spalten einzurichten. Für große Bildschirme möchten wir vier Spalten mit gleichem großem Wert. Deshalb definieren wir vier DIV-Elemente mit jeweils eine Klasse von Col-LG-3. Für kleine und mittlere Geräte bevorzugen wir jedoch zwei Spalten pro Zeile. Aus diesem Grund verwenden wir die Col-SM-6-Klasse. Zum Schluss möchten wir, dass extra-kleiner Geräte gestapelt werden. Dies ist das Standardverhalten von mobilen Frameworks, und daher müssen die Col-XS-12-Klasse nicht definiert.
So sieht das HTML aus:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Lassen Sie uns mit der Foundation fortfahren.
Die Grid der Foundation der Foundation ist dem von Bootstrap sehr ähnlich, aber es ist etwas einfacher. Zunächst müssen wir ein Element mit einer Reihe von Zeile definieren, die unsere Spalten enthält. Diese Klasse setzt die maximale Breite des Elements auf 62,5Rems (1000px). Als nächstes fügen wir die Spalten hinzu. Um dies zu erreichen, geben wir DIV -Elemente jeweils mit einer Säulen- oder Spaltenklasse an und setzen ihre Breite mit den entsprechenden Rasterklassen fest (siehe Fundamententabelle oben). Auch bei kleinen Geräten müssen wir die kleine 12-Klasse nicht definieren.Hier ist die HTML basierend auf dem Netz der Foundation:
<span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>Zu diesem Zeitpunkt hoffe ich, dass Sie sich mit dem Gittersystem der beiden Frameworks vertraut gemacht haben. Aber vielleicht wird ein weiteres Beispiel dazu beitragen, dies klarer zu machen.
In diesem nächsten Fall werden wir die Fußzeile strukturieren. Die folgende grafische Darstellung zeigt, wie wir es stylen möchten:
Für mittelschwere Bildschirmgrößen und nach oben (oder klein und auf dem Startgitter) möchten wir drei Spalten anzeigen. Beachten Sie jedoch, dass es in der letzten Spalte eine verschachtelte Zeile gibt. Dies besteht aus zwei Spalten. Wir werden ihre Breite auf 50% der Breite einer Reihe für alle Geräte einstellen. Schließlich passen wir die Sichtbarkeit der Symbole an, die in den verschachtelten Spalten auftreten.
Hier ist der Code für Bootstrap:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-4"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-4"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-4"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-xs-6"</span>></span> </span> <span><span><span><a</span> href<span>="#"</span>></span> </span> <span><span><span><p</span>></span>Let's meet and discuss<span><span></p</span>></span> </span> <span><span><span><i</span> class<span>="fa fa-map-marker fa-2x visible-lg"</span>></span><span><span></i</span>></span> </span> <span><span><span></a</span>></span> </span> <span><span><span></div</span>></span><!-- .col-xs-6 --> </span> <span><span><span><div</span> class<span>="col-xs-6"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span><!-- .row --> </span> <span><span><span></div</span>></span><!-- .col-sm-4 --> </span> <span><span><span></div</span>></span><!-- .row --> </span><span><span><span></div</span>></span><!-- .container --></span>und mit Foundation:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Hinweis: Anstelle des Blocknetzes hätten wir das Standardraster der Foundation zum Erstellen der verschachtelten Zeile verwenden können.
Schlussfolgerung
Wenn Sie weitere Informationen zum Grid -System von Bootstrap wünschen, möchten Sie möglicherweise auch Syed Fazle Rahmans Artikel verstehen, das das Grid -System von Bootstrap versteht.
In diesem Artikel habe ich die Gitterstruktur von Bootstrap und Foundation eingeführt. Dann haben wir uns angesehen, wie sie ihre Gitter in einem echten Projekt ausnutzen können. Wie Sie sehen können, sehen beide Gitter ähnlich aus und können weiter angepasst werden.
Ich hoffe, Sie haben es genossen, diesen Artikel zu lesen, und vielleicht können Sie das, was Sie hier gelernt haben, auf Ihre eigenen Projekte anwenden. Wie immer können Sie Ihre Gedanken zu diesen Frameworks in den Kommentaren unten teilen.
häufig gestellte Fragen (FAQs) auf Bootstrap vs Foundation
Was sind die wichtigsten Unterschiede zwischen Bootstrap und Foundation? Sie haben jedoch einige wichtige Unterschiede. Bootstrap ist bekannt für seine umfangreichen Funktionen und vorgeschriebenen Komponenten, die es zu einer guten Wahl für Anfänger oder Entwickler machen, die ein Design schnell prototypisieren möchten. Auf der anderen Seite ist die Foundation flexibler und anpassbarer, was es zu einer bevorzugten Wahl für Entwickler macht, die mehr Kontrolle über ihr Design wünschen. Es hat auch ein komplexeres Gittersystem im Vergleich zu Bootstrap. Die Foundation verfolgt jedoch einen mobilen Ansatz, was bedeutet, dass er mit Blick auf mobile Geräte entwickelt wurde und dann nach größeren Bildschirmen skaliert wird. Bootstrap hingegen wurde zunächst für Desktop-First-Erstes entwickelt, hat aber seitdem einen mobilen Ansatz von Bootstrap 3 angewendet. Beide Frameworks bieten reaktionsschnelles Design, aber die Auswahl zwischen beiden hängt häufig von persönlichen Präferenz- und Projektanforderungen ab. Ein Netzsystem zur Struktur und Ausrichtung des Inhalts, aber sie tun dies auf etwas unterschiedliche Weise. Bootstrap verwendet ein 12-Spal-Gittersystem, das leicht zu verstehen und zu verwenden ist. Die Grundlage hingegen verwendet ein flexibles Netzsystem, das so angepasst werden kann, dass sie eine beliebige Anzahl von Spalten bis zu 12 verwenden. Dadurch wird das Gittersystem der Foundation flexibler, aber auch etwas komplexer zu verwenden.
Was sind die Unterschiede in den Anpassungsoptionen zwischen Bootstrap und Foundation? Bootstrap bietet ein Customizer -Tool, mit dem Sie seine Komponenten und Variablen problemlos anpassen können. Die Foundation hingegen verwendet ein SASS-basiertes Anpassungssystem, das Ihnen mehr Kontrolle über das Design gibt, aber ein gutes Verständnis von SASS erfordert. 🎜> Sowohl Bootstrap als auch Foundation verfügen über eine Reihe von JavaScript -Komponenten, die Ihrer Website Funktionen hinzufügen. Die JavaScript -Komponenten von Bootstrap basieren auf JQuery, während Foundation zwei Versionen bietet: eine, die JQuery verwendet und eine, die Zepto.js verwendet, eine leichtere Alternative zu JQuery. Die JavaScript -Komponenten beider Frameworks sind modular, was bedeutet, dass Sie nur diejenigen einbeziehen können, die Sie benötigen. Sie benutzen sie. Beide Frameworks können so angepasst werden, dass nur die von Ihnen benötigten Komponenten einbezogen werden. Dies kann zur Verbesserung der Leistung beitragen. Da die Foundation flexibler und anpassbarer ist, kann sie möglicherweise zu einer leichteren und schnelleren Website führen, wenn sie korrekt verwendet werden. Hat eine größere Community und mehr Ressourcen zur Verfügung, einschließlich einer Vielzahl von Themen, Vorlagen und Plugins von Drittanbietern. Die Stiftung ist zwar eine kleinere Gemeinschaft, wird von Zurb unterstützt, einem Designunternehmen, das professionelle Unterstützung und Ressourcen bietet. Die Migration von einem Framework zum anderen kann eine komplexe Aufgabe sein, da es sich um die Umschreiben Ihres HTML, CSS und möglicherweise JavaScript umfasst. Sowohl Bootstrap als auch Foundation verfügen jedoch über ähnliche Konzepte und Komponenten. Wenn Sie also mit dem einen vertraut sind, sollte das Lernen relativ einfach sein. 🎜> Sowohl Bootstrap als auch Foundation haben Anstrengungen unternommen, um zugänglich zu sein, aber sie nähern sich auf unterschiedliche Weise. Bootstrap enthält eine Reihe von Zugänglichkeitsfunktionen in seinen Komponenten und bietet eine detaillierte Dokumentation von Barrierefreiheit. Die Foundation hingegen verfügt über eine Reihe von Zugänglichkeitstools in das Framework und bietet auch eine umfassende Dokumentation von Barrierefreiheit.
Welches Framework sollte ich wählen: Bootstrap oder Foundation? Wenn Sie ein Framework mit umfangreichen Funktionen, vorgeschriebenen Komponenten und einer großen Community wünschen, ist Bootstrap möglicherweise die bessere Wahl. Wenn Sie ein flexibleres, anpassbareres Framework bevorzugen und einen mobilen Ansatz verfolgen, ist die Foundation möglicherweise besser geeignet.
Das obige ist der detaillierte Inhalt vonGrid -System -Vergleich: Bootstrap 3 gegen Foundation 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!