Share
Vor kurzem startete Bootstrap, eines der beliebtesten Front-End-Frameworks unter Webdesignern, sein sehr mit Spannung erwartete Version 4! Schauen wir uns an, was neu ist, was entfernt wurde und was man damit machen kann.
Wir haben nie aufgehört zu glauben und hoffen, dass Sie es auch nicht getan haben! Bootstrap 4.0.0 ist endlich gelandet! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18. Januar 2018
Diese Wiederholung von Bootstrap ist laut Mark Otto und dem Team eine "große Umschreibung des gesamten Projekts". Dies verspricht eine Menge Verbesserungen und legt nahe, dass Sie sich bei der Umstellung bestehender Projekte auf diese neue Version noch einiges ausdenken müssen. Es gibt keine „bahnbrechenden Änderungen“, aber es gibt eine Menge zu tun. Zeit, um die wichtigsten Funktionen zu untersuchen.
Traditionell wurde das Layout von Bootstrap durch Float-basierte Styles gesteuert. In den letzten Versionen wurde eine Flexbox-Alternative zur Verfügung gestellt. Aufgrund der weit verbreiteten Browserunterstützung ist Flexbox nun der Master von Bootstrap-Grids. Die CSS-Technologie hinter Bootstrap-Grids macht keinen großen Unterschied, aber Flexbox bietet mehr Flexibilität als Floats. Daher bieten Flexbox-basierte Grids einige weitere Optionen. Die Verwendung von Flexbox bedeutet beispielsweise, dass Sie eine Spalte definieren können und die Größe der Geschwister automatisch geändert wird.
Der Schritt in Richtung Flexbox hat zu einer weiteren Änderung geführt: Browserunterstützung. Bootstrap v4 hat die Unterstützung für Internet Explorer 8, 9 und iOS 6 offiziell eingestellt. Dies bedeutet, dass Ihre Bootstrap-Websites nur IE10 + und iOS 7+ unterstützen. Es lohnt sich, dies zu beachten.
Sass-Fans werden sich freuen zu hören, dass Bootstrap jetzt offiziell ein Sass-first-Projekt ist. Wenn Sie die Bootstrap-Quelle herunterladen, finden Sie einen Ordner mit dem Namen "Sass", in dem alle erforderlichen Teile angezeigt werden. „_Variables.scss“ enthält alle Variablen und Einstellungen, die Sie benötigen, und „bootstrap.scss“ enthält alle @einführen Direktiven, mit denen Sie Ihre Bootstrap-Installation anpassen können, indem Sie die gewünschten Komponenten ein- oder ausschließen.
Abgesehen von Medienabfragen hat Bootstrap v4 an allen Stellen Pixel zugunsten relativer Maßeinheiten wie rems gesenkt. Dadurch wird das Ganze skalierbarer. Wenn Sie sich jetzt noch nicht an Einheiten gewöhnt haben, wäre dies eine gute Gelegenheit, sich diese Ressourcen anzusehen:
Abgesehen von Bootstraps Abkehr von Float-basierten Layouts, ist seine Reaktionsfähigkeit jetzt auch mit einer zusätzlichen Schicht versehen. Von nun an können Sie diese fünf Standardeinstellungen anpassen:
$ grid-breakpoints: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! default;
Die nächste bemerkenswerte Änderung erfolgt in Form einer neuen Reset-Datei. Beim "Reboot" werden die Reset-Vorgänge von Normalize übernommen, die nur Element-Selektoren verwenden, und bauen darauf aufbauend einige meinungsbasierte, klassenbasierte Reset-Stile auf .Tabelle und .Tischrand dort mit mehreren anderen begraben).
Wenn Sie jemals eine frühere Version von Bootstrap heruntergeladen haben, sind Sie mit dem Online-Anpassungsprogramm vertraut. Mit diesem Tool können Sie verschiedene Aspekte des Bootstrap-Frameworks überprüfen und deaktivieren, um die ideale Version zu erstellen.
Nun, es ist weg.
Stattdessen konzentriert sich Bootstrap jetzt auf seine eigene modulare Struktur. So können Sie Sass von Ihrem Ende aus nutzen, nur das aufnehmen, was Sie brauchen, und Ihr eigenes, implementierbares Endergebnis kompilieren .
Mach es selbstBootstrap enthält keine Glyphicons mehr. Stattdessen wird empfohlen, Ihre eigenen Favoriten zu finden und in die von Ihnen gewünschte Art und Weise aufzunehmen. Das Bootstrap-Team selbst bevorzugt die folgenden Sets, die Sie als SVG-Implementierung implementieren sollten, anstatt Web-Zeichensymbole zu verwenden:
Iconic's Daumen hochIn früheren Versionen von Bootstrap war die Unterstützung von Grunt enthalten, um viele der üblichen Aufgaben zu automatisieren. das ist jetzt weg Stattdessen enthält Bootstrap jetzt eine Reihe von npm-Skripts, die Sie in der Datei „package.json“ finden. Sie können diese Funktionen verwenden, um z. B. Ihre Sass-Dateien auf Änderungen zu überprüfen, Flusstests mit Ihrem JavaScript durchzuführen oder einfach nur zu verwenden npm dist laufen um alles zu tun und eine Distributionsversion Ihrer fertigen Website zu erstellen.
Weitere Informationen zur Funktionsweise von Bootstrap und Node.js finden Sie in den Dokumentationen des Build-Tools oder in den folgenden Lernprogrammen:
Neben diesen großen Änderungen gibt es einige kleinere Änderungen am neuesten Bootstrap. Fans von Komponenten wie Panels, Thumbnails und Wells werden enttäuscht sein, dass sie entfernt wurden. Sie haben jedoch Platz gemacht für eine allumfassende Komponente namens "Karte", die eigentlich eine große Verbesserung darstellt. Auf der Migrationsseite können Sie alles über diese Änderungen und mehr lesen.
Bleiben Sie dran für weitere Bootstrap 4-Tutorials und -Kurse zu Tuts +, und wir sehen uns beim nächsten Mal!
Accentsconagua