Entwicklungsingenieure, die Bootstrap, Front-End-Entwickler mit Foundation verwenden. Reden wir darüber, warum.
Es gibt viele wichtige Unterschiede zwischen Bootstrap und Foundation, aber ich denke, Sie müssen sich nur an eine Sache erinnern:
Die beiden Designkonzepte von Zurb und Twitter sind sehr klar, wie sie aus ihrer Benennung ihrer eigenen Frameworks hervorgeht: Bootstrap bedeutet Bootstrap, Bootstrap, mit anderen Worten, es versucht, alles, was Sie in Ihrem Projekt benötigen, zu bewältigen. Foundation bedeutet Schöpfung, Schöpfung, mit anderen Worten, sie gibt Ihnen nur eine starke Kreativität in Ihrem Projekt.
Wenn Sie diese Ansicht behalten, werde ich jetzt mehr der wichtigsten Unterschiede zwischen den beiden auflisten:
1. UI -Elemente
Foundation arrangiert nur einige begrenzte Elemente, während Bootstrap Ihnen alle Elemente gibt, die Sie sich vorstellen können.
Das Designziel von Zurb für die Foundation ist, dass selbst wenn Sie vordefinierte UI -Elemente verwenden, es Ihrer Website nicht zu ähnlich aussehen sollte.
Andererseits versucht Bootstrap, Ihnen alle definierten UI -Elemente zu bieten.
2. REMS vs Pixel
Foundation verwendet REMs, während Bootstrap Pixel verwendet .
Wenn Sie Pixel verwenden, müssen Sie die Höhe, Breite, innere Ränder, äußere Ränder einer Komponente und in jedem Gerät und in jedem Gerät und der Bildschirmgröße genau definieren, da verschiedene Geräte tendenziell einen großen Unterschied in den Anzeigeeffekten aufweisen.
Jetzt verwendet Foundation 5 REMs, nicht em. Dies vermeidet das EM Cascade -Problem.
Wenn Sie REMs verwenden, können Sie eine Schriftgröße verwenden: 80%; Um die gesamte Komponente und ihre Unterkomponenten um 20%zu reduzieren.
Es ist erwähnenswert, dass Sie mit REMs die Details von Pixeln loswerden können, sodass es sich lohnt, REMs zu verwenden, um sie zu verarbeiten.
Foundation bietet außerdem eine Mixin -Methode von SASS, um Pixel in REMs umzuwandeln, damit Sie weiterhin die Pixel -Denkmethode verwenden können, um Seiten zu definieren:
.Element {width: rem-calc (10px); // wird in REMS konvertiert}3.. Flexible Netz gegen vordefinierte Gitter
Das Grid der Foundation kann sich automatisch an die Breite des aktuellen Browsers anpassen. Boostrap hat mehrere Gittergrößen vordefiniert, um sich an Mainstream -Geräte und Bildschirme anzupassen.
Bootstrap ändert plötzlich sein Netz, wenn Sie die Browserbreite ändern.
Die Foundation wird sich flexibel an die aktuelle Browserbreite anpassen. Dies ist eine neue technische Methode. Bei automatischer Anpassung kann es den gleichen Effekt wie Transformator ausführen.
Die Foundation hat zwei wichtige Punkte, wenn sich das Netz ändert: klein, mittel und groß. Alle Operationen werden nur reduziert und vergrößert und an die Breite des Strombrowsers angepasst. Vordefinierte Bildschirmgrößen sind nicht erforderlich, und der wichtigere Grund dafür ist, dass Sie ermutigt werden, verschiedene Stile basierend auf der Größe des Bildschirms zu definieren.
Mit Bootstrap erhalten Sie ein festes oder vielfältiges Netz, was bedeutet, dass Sie für den Netzbehälter eine vordefinierte Breite einstellen müssen.
Mit Foundation und Sass können Sie die Größe des größten Netzes (mittel- und kleiner werden automatisch berechnet), die Anzahl der Spalten für große Bildschirme und die Anzahl der Spalten für kleine Bildschirme anpassen.
4.. Mobile Geräte werden bevorzugt, im Vergleich zu Mobilgeräten werden ebenfalls unterstützt
Die Foundation wurde mit einem beliebigen Bildschirm mit vier Eckern entworfen. Bootstrap wurde mit vorbereiteten in: Mobiltelefonen, Tablets, Desktops und Desktops mit übergroßen Bildschirmen entwickelt .
Auf dem Erstellen einer mobilen Website, die mobile Geräte unterstützt, ist sie sicherlich auf einem größeren Bildschirm verfügbar. Die Foundation ermutigt Sie also, dies zu tun: Mobile-First.
Wenn Sie das Sass Media Query Mixin der Stiftung verwenden, werden Sie feststellen, dass es keine spezifische Medienabfrage gibt, um abzufragen, was ein mobiles Gerät ist. Sie verwenden jedoch Medienabfrage, um zu definieren, wie es auf einem größeren Bildschirm angezeigt werden soll.
Wenn Sie beim Entwerfen von Desktop -Computern zum ersten Mal in Betracht gezogen werden, können Sie bei der Unterstützung kleinerer Bildschirme auf große Probleme stoßen. Wenn Sie Ihr Telefon zum ersten Mal in Betracht ziehen, konzentrieren Sie sich auf das, was für Benutzer am wichtigsten ist, und erhöhen Sie Ihr Speichersinn.
5. Gemeinschaft
Bootstrap hat eine größere Gemeinschaft. Und mit der Grundlage muss man selbstständiger sein.
Der große Höhepunkt von Bootstrap ist die Community. Es ist ein sehr großes All-inclusive-Unternehmen, und Sie können fast alles finden, was Sie wollen.
Wenn Sie sich für Foundation entscheiden, ist die Selbstständigkeit möglicherweise etwas, das Sie meistern müssen. Fast alle Lösungen sind für Bootstrap gelten und Sie können nur Ihre eigenen erstellen.
abschließend
Stellen Sie sich ein paar Fragen:
Möchten Sie, dass etwas nützlicher ist oder es lebensechter macht?
Möchten Sie Ihr eigenes CSS organisieren und es einfach zu Ihrer zugrunde liegenden Komponente machen?
Die Antworten sind: Bootstrap. Stiftung .
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Ist das ein interessanter Vergleich? Ich hoffe, es wird für alle hilfreich sein, die Front-End-Frameworks Bootstrap 3 und Foundation 5 zu verstehen.