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:

Bildschirme Ansichtsfenstergr??e Containerbreite Klasse Pr?fix Extra kleine Bildschirme Foundation umfasst fünf EM-basierte Medienabfragen. Diese sind in der folgenden Tabelle angezeigt: Bildschirme Ansichtsfenstergr??e Klasse Pr?fix (Standardraster) Klassenpr?fix (Blockgitter) Kleine Bildschirme ≤ 40em (640px) .Small-* .Column (s) .Small-Block-Grid-* Mittlere Bildschirme ≥ 40,063em (641px) .medium-* .Column (en) .Medium-Block-Grid-* Gro?e Bildschirme ≥ 64,063em (1025px) .large-* .Column (s) .LaRge-Block-Grid-* Xlarge -Bildschirme ≥ 90,063em (1441px) Nicht aktiviert Nicht aktiviert Xxlarge Bildschirme ≥ 120.063em (1921px) Nicht aktiviert Nicht aktiviert

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.

Mit

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

1. Im Gegensatz zum Standardraster, das eine maximale Breite auf jede Zeile anwendet, füllt das Blockraster immer die vollst?ndige Fensterbreite.
2. 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:

Hier w?hlen wir einen anderen Layout -Modus im Vergleich zum vorherigen Beispiel.

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!