Bootstrap, das beliebteste Front-End-Framework zur Gestaltung moderner, reaktionsschneller und dynamischer Schnittstellen für professionelle Design-Webseiten, wird derzeit umfassend aktualisiert, Bootstrap 5.
Bootstrap 5 alpha wurde am 16. Juni 2020 nach mehrmonatiger Verfeinerung offiziell freigegeben. Bei allen wichtigen Änderungen in dieser Version informierte das Boostrap 5-Entwicklungsteam die Benutzer, dass sich die aktuelle Version immer noch in der Alpha-Version befindet. Daher werden bis zur Veröffentlichung der ersten Beta-Version weiterhin Änderungen vorgenommen, so dass es besser ist, immer die offenen Fragen zu prüfen und Anfragen auf ihrem offiziellen GitHub-Repository für offene Fragen und Feedback zu ziehen.
Bootstrap ist eine freie und quelloffene Collection von CSS- und JavaScript/jQuery-Code, die zur Erstellung von Websites und Webanwendungen mit dynamischem Layout verwendet wird. Als Werkzeug zur Erstellung von Frontend-Design besteht es aus einer Reihe von HTML- und CSS-basierten Designvorlagen für verschiedene Komponenten einer Website oder Anwendung wie Formulare, Schaltflächen, Navigation, Modale, Typografie und andere Schnittstellenkomponenten mit hilfreichen JavaScript-Erweiterungen. Es spielt keine Rolle, ob Sie ein Anfänger in der Webentwicklung oder ein erfahrener Entwickler sind, Bootstrap ist ein leistungsstarkes Werkzeug für jede Art von Website und Webanwendung, die Sie erstellen möchten.
Darüber hinaus bietet Bootstrap eine sofort einsatzbereite Lösung mit Hunderten von Komponenten von Drittanbietern, die Sie in Bootstrap integrieren können, so dass Sie schnell und ohne großen Zeitaufwand einen Prototyp erstellen können, um Ihre ideale Website zu realisieren. Am Ende können Sie diese Komponenten anpassen, um das endgültige Design Ihrer Website oder Webanwendung zu erstellen, da der größte Teil der Konfiguration bereits für Sie eingerichtet ist.
Bootstrap 4 liegt derzeit in der Version 4.5.0 vor, die jetzt viele wichtige Funktionen wie Cards, Flexbox, Sass-Integration und leistungsstarke Plugins auf Basis von jQuery enthält. Nach mehr als 4 Jahren des Fortschritts seit der Veröffentlichung der Alpha-Version von Bootstrap 4 am 19. August 2015 wird im Hintergrund ein Update für das Upgrade auf Version 5 entwickelt.
Die Startup-App wird auf Bootstrap 5 aktualisiert, sobald das Framework aktualisiert wird. Außerdem werden wir die Galerie der Bootstrap-Vorlagen aktualisieren.
In diesem Artikel werfen wir einen Blick auf die wichtigsten Aktualisierungen von Bootstrap 5, einschließlich des Veröffentlichungsdatums, der Integration und der Modifikationen.
Das offizielle Github project tracking board von Bootstrap 5 hat mehr als 765 tasks, die mit mehr als 83 pull requests und 311 issues ausgeliefert werden. Wenn wir das Release-Datum vom vorherigen Entwicklungszeitrahmen (Bootstrap 4 bis Bootstrap 4.1) ausgehen, hat das Entwicklungsteam etwa 3 Monate gebraucht, um Bootstrap 4.1 bis Bootstrap 4.2 fertigzustellen. Wir könnten Bootstrap 5 in der ersten Hälfte des Jahres 2020 erwarten. Bootstrap hat das offizielle Veröffentlichungsdatum noch nicht bestätigt.
Folgend gibt es eine Liste von Änderungen, die wir für Version 5 erwarten, wie z.B. die Entfernung von jQuery, die eine wesentliche Verbesserung für diese Version darstellt, und den Wegfall der Unterstützung für Internet Explorer 10 und 11.
Im Folgenden sind einige der erwarteten Änderungen in Bootstrap 5 aufgeführt:
jQuery ist eine Bibliothek, die eine universell einsetzbare Abstraktionsschicht für klassisches Web-Scripting bietet, die bei fast allen Anforderungen der Webentwicklung effizient ist. Ihr erweiterbare System erlaubt es Ihnen, auf Elemente in einem Dokument zuzugreifen, ohne viel JavaScript zu schreiben, das Erscheinungsbild Ihres Inhalts in einer Webseite zu verändern, was sich Entwickler zunutze machen, um die Kluft zwischen allen Browsern zu überbrücken, den Inhalt eines Dokuments zu ändern, auf die Interaktion eines Benutzers zu reagieren, Informationen von einem Server abzurufen, ohne eine Seite über AJAX zu aktualisieren, Ihrer Webseite eine Animation hinzuzufügen, allgemeine JavaScript-Aufgaben zu vereinfachen und die Liste geht noch weiter.
Bootstrap verwendet jQuery seit mehr als 8 Jahren, jQuery hat sich zu einem ziemlich großen und aufgeblähten Framework entwickelt, was zu sehr lange Ladezeiten von Webseiten führt.
Da JavaScript-Frameworks wie Angular, Vue und React heutzutage die Webentwicklungs-Community dominieren, hat jQuery seine Popularität verloren, da die meisten dieser modernen Frameworks über das virtual DOM und nicht direkt auf dem DOM arbeiten, was zu einer viel schnelleren Leistung führt. Auch wenn es absurd klingen mag, es stellt sich heraus, dass es viel kompetenter ist und jeder, der diese Frameworks verwendet, eine bessere Kontrolle und Wartung über seinen Code hat als diejenigen, die jQuery verwenden.
Zukünftig müssen alle jQuery-Abfragefunktionen mit reinem oder Vanille-JavaScript-Code in Bootstrap 5 ausgeführt werden.
JavaScript ist die Programmiersprache des Webs. Die meisten modernen Websites basieren auf JavaScript und alle modernen Webbrowser auf Desktops, Konsolen, Tablets, Spielen und Mobiltelefonen enthalten JavaScript-Interpreter, was JavaScript zur universellsten Programmiersprache der Welt macht.
Die Entfernung der jQuery-Unterstützung in Bootstrap 5 macht es möglich, effizienten Vanille-JavaScript-Code zu schreiben, ohne sich um die Größe zu kümmern oder andere nicht essentielle Funktionen hinzuzufügen. jQuery gibt es schon seit langer Zeit, es ist völlig unmöglich, jQuery allein zu verwenden, weil in den meisten Fällen jQuery ein $-Objekt in den globalen Anwendungsbereich hinzufügt, mit einer Menge von Funktionen. Noch raffiniertere Bibliotheken wie Prototyp sind keine Alternative zu JavaScript, sondern existieren nur als zusätzliche Werkzeuge zur Lösung gängiger Probleme.
Wenn Sie wissen, wie JavaScript funktioniert, wird Sie diese wichtige Änderung nicht viel ausmachen, aber für einige Entwickler, die nur mit jQuery umgehen können, könnte dies eine gute Gelegenheit sein, die Sprache zu erlernen.
Eine Website zu entwerfen, die über mehrere Plattformen oder Viewports hinweg gut aussieht, war für einige Entwickler eine ziemliche Herausforderung. Medienabfragen waren ein großartiges Werkzeug zur Lösung typografischer allgemeiner Probleme, die es Entwicklern ermöglichen, das Erscheinungsbild von Typografien auf Webseiten zu kontrollieren, indem sie bestimmte Schriftgrößen für die typografischen Elemente auf einem bestimmten Ansichtsfenster festlegen.
Bootstrap 5 aktiviert standardmäßig reaktionsfähige Schriftgrößen, die automatisch die Größe des Typografieelements entsprechend der Größe des Ansichtsfensters des Benutzers durch die RFS-Engine oder responsivefähige Schriftgrößen anpassen.
Laut RFS-Repository ist RFS eine Unit Resizing Engine, die ursprünglich entwickelt wurde, um Schriftgrößen zu ändern. RFS bietet die Möglichkeit, praktisch jeden Wert für jede CSS-Eigenschaft mit Einheiten, wie margin, padding, border-radius oder box-shadow, in der Größe zu verändern.
Es handelt sich um einen preprocessor oder postprocessor-powered-mechanism, der automatisch die geeigneten Schriftgrößenwerte auf der Grundlage der Bildschirmgröße oder des Ansichtsfensters des Benutzers berechnet. Er arbeitet mit bekannten preprocessors oder postprocessor-tools wie Sass, Less, Stylus oder PostCSS.
Nehmen wir als Beispiel an, Sie haben eine hero-title clas, die eine Klasse für Ihr h1-Tag-Element ist, das Sie für Ihren Haupttitel im Helden-Abschnitt verwenden möchten. Mit Sass wird das folgende Mixin den Zweck erfüllen:
.hero-title {
@include font-size(4rem);
}
.hero-title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.hero-title {
font-size: 4rem;
}
}
1995 brachte Microsoft den Internet Explorer auf den Markt, der alle umhaute, denn zum ersten Mal gab es einen Browser, der CSS und Java-Applets unterstützte, was ihn 2003 mit einem Nutzungsanteil von 95% zu einem der meistgenutzten Webbrowser machte.
Spulen Sie bis 2020 vor, der Internet Explorer ist mit Chrome, Firefox und Edge nicht mehr relevant. Tatsächlich wurde er zu einem der Albträume der Webdesigner, da er moderne JavaScript-Standards nicht unterstützt. Um mit dem Internet Explorer, sei es 10 oder 11, arbeiten zu können, müssen JavaScript-Codes in ES5 statt ES6 kompiliert werden, wodurch sich der Umfang Ihrer Projekte bis zu 30 % erhöht. Dies schränkt natürlich Ihre Möglichkeiten ein, die Funktionen von ES6 oder neueren JavaScript-Standards zu nutzen. Noch schlimmer ist, dass viele moderne CSS-Eigenschaften nicht unterstützt werden, was Ihr modernes Webdesign-Potenzial einschränkt.
In Bootstrap 5 beschloss das Bootstrap-Team, die Unterstützung für den Internet Explorer 10 und 11 fallen zu lassen. Dies ist ein ziemlich guter Schritt, da es Webdesignern und Entwicklern ermöglichen wird, sich mehr auf die Gestaltung moderner Webseiten zu konzentrieren, ohne sich Sorgen machen zu müssen, dass irgendein Stück Code auf alten Browsern gebrochen oder die Größe jedes Projekts erhöht wird.
CSS bietet Möglichkeiten zur Angabe von Größen oder Längen von Elementen unter Verwendung verschiedener Maßeinheiten wie px, em, rem, % vw und vh. Während Pixel oder px als weithin bekannt gilt und für seine absoluten Einheiten, relativ zu DPI und Auflösung des Anzeigegeräts, verwendet wird, ändert es sich nicht auf der Grundlage eines anderen Elements, das für modernes reaktionsschnelles Webdesign nicht gut geeignet ist.
Bootstrap verwendet px schon seit geraumer Zeit für seine Gutter Width, was bei Bootstrap 5 nicht mehr der Fall sein wird. Gemäß den Korrekturen, die im offiziellen Github-Projekt-Tracking-Board von Bootstrap 5 vorgenommen wurden, wird die Gutter Width nun auf rem statt auf px eingestellt.
Rem steht für "root em", was soviel bedeutet wie der berechnete Wert der Schriftgröße auf dem Wurzelelement. Zum Beispiel ist 1 rem gleich der Schriftgröße des HTML-Elements (die meisten Browser haben einen Standardwert von 16px).
Damit Sie in Bootstrap 4 Cards gleicher Breite und Höhe einstellen können, die nicht aneinander befestigt sind, müssen Sie in Bootstrap 4 Card Decks wie unten gezeigt verwenden.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="…" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="…" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="…" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
Bei Bootstrap 5 entfernte das Bootstrap-Team die Card Decks, da das neue Grid-System eine responsivefähigere Steuerung bietet. Daher wurden unnötige zusätzliche Klassen entfernt, die über das Grid gelöst werden können.
Die Bootstrap-Navbar-Komponente ist ein Hauptbestandteil von Bootstrap, der ständig verwendet wird. In früheren Versionen von Bootstrap benötigen Sie eine ordentliche Menge an Markup, damit es funktioniert. In Bootstrap 4 wurde dies jedoch durch die Verwendung eines nav- oder div-HTML-Elements und einer ungeordneten Liste vereinfacht. Die navbar-Klasse ist die Standardklasse, die immer auf der Komponente erscheinen muss.
Standardmäßig verwendet Bootstrap 4 inline-block der Anzeigeoption, aber in Bootstrap 5 wurde sie entfernt. Es wurde auch Flex-Shorthand verwendet und der brand margin entfernt, der durch das Erfordernis von Containern in Navbars verursacht wurde. Abgesehen davon haben sie auch eine dunkle Dropdown-Klasse per dropdown-menu-dark implementiert, die das Dropdown in einen schwarzen Hintergrund verwandelt, den wir normalerweise auf navbar dropdown items sehen.
In Version 3 von Bootstrap gibt es 250 wiederverwendbare Icon-Komponenten im Schriftformat "Glyphicons", die erstellt wurden, für input groups, alerts, dropdowns und anderen nützlichen Bootstrap-Komponenten eine Ikonographie zu bieten.
In Bootstrap 4 wurde es jedoch völlig verschrottet, und Webdesigner und Entwickler müssen sich auf kostenlose Icon-Schriften wie Font Awesome verlassen oder ihre eigenen benutzerdefinierten SVG-Icons verwenden, um den Wert ihres Webdesigns zu steigern.
In Bootstrap 5 gibt es eine brandneue SVG-Icon-Bibliothek, die von Mark Otto, dem Mitbegründer von Bootstrap, sorgfältig erstellt wurde. Vor der offiziellen Veröffentlichung von Bootstrap 5 können diese Icons nun zu diesem Zeitpunkt zu Ihrem Projekt hinzugefügt und verwendet werden.
Jekyll ist ein freier und quelloffener statischer Website-Generator. Wenn Sie wissen, wie WordPress, Joomla oder Drupal funktioniert, dann haben Sie wahrscheinlich eine Vorstellung davon, wie es funktioniert. Jekyll wird verwendet, um Websites mit einfach zu benutzender Navigation und Website-Komponenten zu erstellen und den gesamten Inhalt auf einmal zu generieren. Jekyll stellt im Wesentlichen Seitenvorlagen wie Navigation und Fußzeilen zur Verfügung, die sich auf allen Ihren Webseiten widerspiegeln. Diese Vorlagen werden mit anderen Dateien mit bestimmten Informationen zusammengeführt (z.B. eine Datei für jeden Blog-Beitrag auf Ihrer Website), um vollständige HTML-Seiten zu erzeugen, die die Benutzer Ihrer Website sehen können.
Bootstrap 4 war ein großartiges Werkzeug zur Integration mit Jekyll durch Sass (Syntactically Awesome Style Sheets), aber in Bootstrap 5 wird ein größerer Wechsel von Jekyll zu Hugo erwartet.
Hugo wird beschrieben als "Ein schneller und flexibler statischer Site-Generator, der mit Liebe von spf13 in GoLang gebaut wurde". Ähnlich wie Jekyll ist er ein statischer Website-Generator, aber in Go-Sprache geschrieben. Ein möglicher Grund für die Umstellung ist, dass Hugo blitzschnell, einfach zu benutzen und konfigurierbar ist. Im Vergleich zu Jekyll hat er eine gute Integration mit dem beliebten Webhosts und kann Ihre Inhalte mit jeder URL-Struktur organisieren.
Natürlich wird Bootstrap 5 ohne die neue Bootstrap-CSS-Klasse nicht interessant sein. Bootstrap 4 hat mehr als 1.500 CSS-Klassen. Es wird einige CSS-Klassen geben, die in der neuen Version nicht mehr verfügbar sein werden, und einige CSS-Klassen, die hinzugefügt werden.
Einige der CSS-Klassen, die laut dem offiziellen Github-Projekt-Tracking-Board von Bootstrap 5 bereits entfernt wurden, sind
Eine der frustrierenden Erfahrungen als Entwickler ist es, das Basis-HTML, CSS und JavaScript für jedes Projekt neu zu erfinden. Während einige es vorziehen, ihren eigenen Code zu schreiben, macht es dennoch Sinn, einfach ein bestehendes Framework wie Bootstrap zu verwenden.
Mit all den neuen Updates, die mit Bootstrap 5 kommen, kann man mit Sicherheit sagen, dass das Bootstrap-Team große Schritte geht, um das Framework zum Vorteil des Entwicklers leicht, einfach, nützlich und schneller zu machen.
Wenn Sie Bootstrap in Ihren Projekten verwenden, dann werden Sie wahrscheinlich die Startup-App - Bootstrap Builder - lieben. Es ist ein großartiges Entwicklungswerkzeug mit vielen vorgefertigten gestalteten und kodierten Vorlagen und Themen für eine schnellere Bereitstellung Ihrer Projekte.
Laravel Bootstrap Components ist ein Starter-Kit für Laravel mit Blade und Bootstrap speziell entwickelt für Entwickler.
© 2024 Zundel-Webdesign - Alle Rechte vorbehalten.
Die als Artikel veröffentlichten Inhalte unterliegen dieser Creative Commons Licence.