Was ohne Bootstrap verwenden?

Was ohne Bootstrap verwenden?

Sie können Foundation anstelle von Bootstrap verwenden. Normalerweise verwenden Entwicklungsingenieure Bootstrap, während Front-End-Entwickler zuerst Foundation verwenden.

Es gibt viele wesentliche Unterschiede zwischen Bootstrap und Foundation, aber ich denke, Sie müssen sich nur eines merken:

Die beiden Designphilosophien von ZURB und Twitter sind durch ihre Paarung sehr klar Das können Sie schon an der Benennung Ihres eigenen Frameworks erkennen: Bootstrap bedeutet, beim Start anzuleiten und zu booten, mit anderen Worten, es versucht, alles zu handhaben, was Sie in Ihrem Projekt benötigen, und Foundation bedeutet, mit anderen Worten, es gibt Ihnen nur alles, was Sie brauchen Sie benötigen in Ihrem Projekt starke Kreativität.

Lassen Sie mich nun weitere wichtige Unterschiede zwischen den beiden auflisten:

1 >Foundation ordnet nur eine begrenzte Anzahl von Elementen an, während Bootstrap Ihnen alle Elemente bietet, die Sie sich vorstellen können.

ZURBs Designziel für Foundation besteht darin, dass es auch bei Verwendung vordefinierter UI-Elemente nicht zu ähnlich aussehen sollte auf jedermanns Website.

Andererseits versucht Bootstrap, Ihnen alle definierten UI-Elemente zur Verfügung zu stellen.

2. REMs VS Pixels

Foundation verwendet REMs, während Bootstrap Pixel verwendet.

Die Verwendung von Pixeln bedeutet, dass Sie die Höhe, Breite, Polsterung und den Rand einer Komponente genau definieren müssen, und zwar in jedem A-Gerät und in der Bildschirmgröße, da oft unterschiedliche Geräte verwendet werden haben sehr unterschiedliche Anzeigeeffekte.

Jetzt verwendet Foundation 5 REMs anstelle von EM. Auf diese Weise wird das EM-Kaskadenproblem vermieden: http://css-tricks.com/font-sizing-with-rem/.

Die Verwendung von REMs bedeutet, dass Sie die gesamte Komponente und ihre Unterkomponenten direkt mit „font-size: 80 %“ um 20 % verkleinern können.

Es ist erwähnenswert, dass durch REMs Sie können die Details von Pixeln entfernen, daher lohnt es sich sehr, REMs zur Verarbeitung zu verwenden.

Foundation bietet auch die Sass-Mixin-Methode zum Konvertieren von Pixeln in REMs. Auf diese Weise können Sie die weiter verwenden Pixel-Denkweise zum Definieren der Seite:

.element {
  width: rem-calc(10px); // will be converted to REMs
}

3. Flexibles Raster vs. vordefiniertes Raster

Foundation-Raster Es kann sich automatisch an die Breite des aktuellen Browsers anpassen Definiert mehrere Rastergrößen zur Anpassung an gängige Geräte und Bildschirme.

Bootstrap ändert es plötzlich, wenn Sie die Browserbreite ändern Eine neue technische Methode, die sich automatisch anpassen kann und dabei den gleichen Effekt wie Transformer zeigt.

Grundlage Es gibt zwei Hauptpunkte, wenn sich das Raster ändert: klein, mittel und groß. Alle Vorgänge werden nur verkleinert und vergrößert und passen sich an Aktuelle Browserbreite. Es ist keine vordefinierte Bildschirmgröße erforderlich. Der Hauptgrund dafür ist, dass Sie je nach Bildschirmgröße verschiedene Stile definieren sollten.

Mit Bootstrap erhalten Sie einen festen oder vielfältigen Stil Raster, was bedeutet, dass Sie den Rastercontainer separat festlegen oder konfigurieren müssen. Keine vordefinierte Breite.

Mit Foundation und Sass können Sie die Größe des größten Rasters (mittel und klein werden automatisch berechnet) frei anpassen Anzahl der Spalten für große Bildschirme und Anzahl der Spalten für kleine Bildschirme.

4. Mobile Geräte zuerst VS unterstützt auch mobile Geräte

Foundation wurde mit vier beliebigen Spalten entworfen -Eckbildschirm im Hinterkopf. Bootstrap ist beim Entwerfen vorab unterteilt in: Mobiltelefone, Tablets, Desktops und Desktops mit extragroßem Bildschirm.

Der Aufbau einer Mobile-First-Website bedeutet, dass sie definitiv auf größeren Bildschirmen nutzbar ist. Foundation empfiehlt Ihnen daher Folgendes: Mobile Priorisierung.

Wenn Sie das Sass Media Query Mixin der Foundation verwenden, werden Sie feststellen, dass es keine spezielle Medienabfrage gibt, um abzufragen, was ein mobiles Gerät ist, sondern Sie verwenden ein Medium Abfrage zum Definieren, was auf einem größeren Bildschirm angezeigt werden soll

Wenn Sie zuerst etwas für den Desktop entwerfen, werden Sie wahrscheinlich auf große Probleme bei der Unterstützung kleinerer Bildschirme stoßen, und wenn Sie zuerst über Mobiltelefone nachdenken, Dadurch können Sie sich auf das konzentrieren, was den Benutzern am wichtigsten ist, und Ihr Gefühl für die Raumnutzung steigern.

Bootstrap hat eine größere Community Foundation, man muss selbstständiger sein.

Das größte Highlight von Bootstrap ist die Community. Dies ist eine sehr große, allumfassende Community, und Sie können fast alles finden, was Sie suchen.

Wenn Sie sich für Foundation entscheiden, müssen Sie möglicherweise die Eigenständigkeit beherrschen. Fast alle Lösungen sind für Bootstrap, Sie können nur Ihre eigenen erstellen.

Das obige ist der detaillierte Inhalt vonWas ohne Bootstrap verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!