Home-theater-designers
Bootstrap 5 hat wichtige Änderungen mit sich gebracht, darunter die Einstellung der Unterstützung von Internet Explorer (IE) und der jQuery-Abhängigkeit. Bootstrap wurde von Twitter entwickelt und ist das weltweit beliebteste CSS-Framework. Das Open-Source-Benutzeroberflächen-Framework versucht, sich für die Zukunft zu positionieren, und hat in v5 bahnbrechende Änderungen vorgenommen.
Der Drop von Bootstrap für den IE hat es zum ersten Webentwicklungstool gemacht, das dies tut. Der Schritt erfolgt, da der Marktanteil von Internet Explorer weiter schwindet und weniger als 3% aller Webbrowser ausmacht.
Lesen Sie weiter, um zu sehen, welche weiteren Verbesserungen an Bootstrap vorgenommen wurden und wie sich diese auf Sie auswirken.
1. jQuery-Unterstützung
Bootstrap verwendet die jQuery-Bibliothek nicht mehr. Das Entwicklungsteam hat stattdessen die JavaScript-Bibliothek verbessert, um diese Änderung zu bewirken. Die jQuery-Abhängigkeit war in Bootstrap nicht unbedingt eine schlechte Sache.
Tatsächlich hat die Einführung von jQuery die Verwendung von JavaScript radikal verändert. Es vereinfachte das Schreiben von Aufgaben in JavaScript, die sonst viele Codezeilen erfordert hätten.
Verwandt: Erfahren Sie, wie Sie ein Element in jQuery erstellen
Trotzdem hat sich das Team entschieden, darauf zu verzichten. Dies hat den Vorteil kleinerer Quelldateien und höherer Seitenladezeiten. Dies war eine dringend notwendige Änderung, die Bootstrap einen zukunftsfreundlicheren Stil verleihen wird.
Die Quelldateigröße ist um 85 KB von minimiertem JavaScript geringer geworden, und dies ist wichtig, da Google die Seitenladezeiten für mobile Websites als Rankingfaktor betrachtet.
So sehr die Verwendung von jQuery in Bootstrap 5 nicht mehr benötigt wird, können Sie es dennoch verwenden, wenn Sie möchten. Es ist auch erwähnenswert, dass alle JavaScript-Plugins verfügbar bleiben.
2. Benutzerdefinierte CSS-Eigenschaften
Durch die Einstellung der Internet Explorer-Unterstützung können benutzerdefinierte CSS-Eigenschaften (Variablen) verwendet werden. Der IE unterstützt keine benutzerdefinierten Eigenschaften – nur ein Grund, warum Webentwickler lange Zeit davon abgehalten wurden.
Benutzerdefinierte CSS-Eigenschaften machen CSS flexibler und programmierbarer. CSS-Variablen haben das Präfix -bs um Konflikte mit CSS von Drittanbietern zu vermeiden.
Es stehen zwei Arten von Variablen zur Verfügung: Root-Variablen und Komponenten-Variablen.
Auf Root-Variablen kann überall dort zugegriffen werden, wo Bootstrap CSS geladen ist. Diese Variablen befinden sich im _root.scss Datei und sind Teil der kompilierten dist-Dateien.
Komponentenvariablen werden als lokale Variablen in bestimmten Komponenten verwendet. Sie sind hilfreich, um eine versehentliche Vererbung von Stilen in Komponenten wie verschachtelten Tabellen zu vermeiden.
3. Verbessertes Netzsystem
Da es beim Upgrade von Version 3 auf 4 einige Probleme gab, behält Bootstrap 5 diesmal den Großteil des Systems bei und baut auf dem bestehenden System auf, anstatt es vollständig zu ändern. Einige der Änderungen sind:
- Die Rinnenklasse ( .Jungs ) wurde durch ein Dienstprogramm ersetzt ( .g* ) ähnlich wie der Rand und die Auffüllung
- Vertikale Abstandsklassen wurden ebenfalls aufgenommen
- Spalten sind nicht mehr standardmäßig auf Position: relativ
4. Verbesserte Dokumentation
Die Dokumentation wurde um weitere Informationen erweitert, insbesondere wenn es um die Anpassung geht. Ein häufiges Problem war, dass Sie bei vielen Websites, die Bootstrap verwenden, sofort feststellen konnten, dass sie Bootstrap verwenden. Bootstrap 5 hat jetzt ein neues Erscheinungsbild und eine bessere Anpassung.
Es gibt jetzt mehr Flexibilität beim Anpassen Ihrer Designs, sodass nicht jede Website oder App die gleiche Ähnlichkeit aufweist. Die v4-Themenseite wurde mit mehr Inhalten und Code-Snippets zum Aufbauen auf Sass-Dateien (dem beliebten CSS-Präprozessor) erweitert. Auf der GitHub-Plattform finden Sie auch ein Starter-npm-Projekt, das als Vorlagen-Repository verfügbar ist.
Die Farbpalette wurde in Version 5 ebenfalls erweitert. Das erweiterte eingebaute Farbsystem impliziert, dass Sie Ihre Farbgebung einfach gestalten können, ohne Ihre Codebasis verlassen zu müssen. Es wurde auch mehr daran gearbeitet, den Farbkontrast zu verbessern, einschließlich der Hinzufügung einer Farbkontrastmetrik in den Bootstrap-Farbdokumenten.
5. Verbesserte Formularsteuerung
Bootstrap hat seine Formularsteuerelemente, Eingabegruppen und mehr verbessert.
In v4 verwendete Bootstrap zusätzlich zu den von jedem Browser bereitgestellten Standardeinstellungen benutzerdefinierte Formularsteuerelemente. In v5 sind diese jetzt alle angepasst. Alle Optionsfelder, Kontrollkästchen, Dateien, Bereiche und mehr, um ihnen in verschiedenen Browsern das gleiche Aussehen und Verhalten zu geben.
Die neuen Formularsteuerelemente enthalten kein unnötiges buntes Markup mehr, sondern konzentrieren sich auf die standardmäßigen und logischen Designfunktionen.
6. Bootstrap 5 fügt Utilities API hinzu
Nach neuen CSS-Bibliotheken wie Tailwind CSS fügt Bootstrap nun auch eine Dienstprogrammbibliothek hinzu. Das Bootstrap-Team freut sich zu sehen, wie andere Entwickler die Art und Weise, wie wir das Web in den letzten zehn Jahren aufgebaut haben, herausfordern.
Dienstprogramme gewinnen in der Entwickler-Community an Fahrt und das Bootstrap-Team hat dies bemerkt. Das Team hatte zuvor in v4 mithilfe von globalen . Dienstprogramme bereitgestellt $aktivieren-* Klassen. In v5 haben sie zu einem API-Ansatz und einer neuen Sprache und Syntax in Sass gewechselt. Dies gibt Ihnen die Möglichkeit, neue Dienstprogramme zu erstellen und gleichzeitig die angegebenen Standardeinstellungen zu entfernen oder zu ändern.
Um eine bessere Organisation zu ermöglichen, wurden einige der Dienstprogramme, die in v4 enthalten waren, in den Abschnitt 'Helfer' verschoben.
7. Neue Bootstrap-Symbolbibliothek
Bootstrap verfügt jetzt über eine eigene Open-Source-SVG-Symbolbibliothek mit über 1.300 Symbolen. Es ist maßgeschneidert für die Komponenten des Frameworks, aber Sie können trotzdem an jedem Projekt damit arbeiten.
Da es sich um SVG-Bilder handelt, lassen sie sich schnell skalieren und können auf vielfältige Weise implementiert und auch mit CSS gestylt werden.
Sie können die Symbole installieren mit Über dem Meeresspiegel:
$ npm i bootstrap-iconsInstallieren Sie Bootstrap 5
Du kannst zu dem ... gehen Bootstrap 5 offizielle Download-Seite wenn Sie es installieren möchten. Wenn Sie mit der neuesten Entwicklungsversion auf dem Laufenden bleiben möchten, können Sie Über dem Meeresspiegel um es zu ziehen:
$ npm i bootstrap@next
Zum Zeitpunkt dieses Schreibens befindet sich das Framework in der Beta-3-Version. Dies bedeutet, dass die Software sicher zu verwenden ist, sich aber noch in der Entwicklung befindet. Fühlen Sie sich frei, dem Team Feedback zu geben und jeden notwendigen Beitrag zu leisten.
Teilen Teilen Tweet Email Eine Einführung in Webkomponenten und komponentenbasierte ArchitekturLassen Sie uns einen Blick auf gängige Webkomponenten werfen und sehen, warum sie nützlich sind.
Weiter lesen Verwandte Themen- Programmierung
- Web Entwicklung
- JavaScript
- CSS
Jerome ist Staff Writer bei MakeUseOf. Er behandelt Artikel über Programmierung und Linux. Er ist auch ein Krypto-Enthusiast und behält die Krypto-Industrie immer im Auge.
Mehr von Jerome DavidsonAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Ton funktioniert nicht Windows 10Klicken Sie hier, um sich zu abonnieren