Bootstrap 5 Alpha ist da.

Was ist Bootstrap?

Bootstrap ist das beliebteste kostenlose und Open-Source-CSS-Framework für die reaktionsfähige Front-End-Webentwicklung mit dem Schwerpunkt „Mobile First“. Es enthält CSS- und JavaScript-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten.

Reise

Nach der Einführung von Bootstrap brachten sie zunächst die zweite Version nach zwei Jahren und dann die dritte Version nach einem Jahr nach der Einführung von V2 heraus. Es dauerte jedoch fünf lange Jahre, bis sie Version 4 einführten. Und nun wurde am 16. Juni 2020 die Alpha-Version des mit Spannung erwarteten Bootstrap 5-Frameworks veröffentlicht.

Wichtige Änderungen im Bootstrap 5 Alpha-Framework:

• Neues Logo
• Bootstrap 5 Alpha ist nicht mehr von jQuery abhängig
• Benutzerdefinierte CSS-Eigenschaften hinzugefügt
• Erweiterte Dienstprogramm-API
• Besseres Gittersystem
• Von Jekyll zu Hugo gewechselt
• Wechseln Sie zu Vanilla JavaScript
• Responsive Schriftgrößen
• Die Unterstützung für IE 10 und 11 wurde entfernt
• Benutzerdefinierter Satz SVG-Symbole hinzugefügt
• Verbesserte Anpassungsdokumente
• Aktualisierte Formulare

 

Bootstrap 5 Alpha ist nicht mehr von jQuery abhängig

jQuery ist eine JavaScript-Bibliothek, die das Durchlaufen und Bearbeiten von HTML-DOM-Bäumen sowie die Ereignisbehandlung, CSS-Animation und Ajax vereinfacht und bei nahezu allen Webentwicklungsanforderungen effizient ist. Bootstrap verwendet JQuery seit mehr als 8 Jahren, aber mittlerweile ist es ein ziemlich großes und ausgedehntes Framework geworden. Aus diesem Grund müssen Websites ihre Bibliothek herunterladen und die Ladezeit verlängern. JavaScript-Frameworks wie Vue, React und Angular dominieren die Webentwicklungs-Community, JQuery verliert aufgrund seiner deutlich geringeren Leistung an Popularität, da es virtuelles DOM anstelle von direktem DOM verwendet. Das Bootstrap-Team hat jQuery aus 11 Plugins entfernt, darunter Util, Alert, Button, Carousel und mehr. Die Verwendung von „Data“ und „EventHandler“ in Unit-Tests wird nicht mehr unterstützt.

 

Benutzerdefinierte CSS-Eigenschaften hinzugefügt

In Version 4 waren nur eine Handvoll Stammvariablen für Farben und Schriftarten enthalten, jetzt wurden sie für eine Handvoll Komponenten und Layoutoptionen hinzugefügt. Nehmen Sie zum Beispiel unsere .table-Komponente, in der eine Handvoll lokaler Variablen hinzugefügt wurden, um gestreifte, schwebende und aktive Tabellenstile einfacher zu machen:

 

table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
   // Styles here...
}
 

 

Erweiterte Dienstprogramm-API

They implemented a brand new utility API into Bootstrap 5.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);
API based approach, they created a language and syntax in Sass to create our own utilities on the fly while also being able to modify or remove.

 

Besseres Gittersystem

• Das Team hat eine neue Rasterebene hinzugefügt! Sag Hallo zu XXL.
• .gutter-Klassen wurden durch .g*-Dienstprogramme ersetzt, ähnlich wie unsere Rand-/Padding-Dienstprogramme.
• Die Optionen für das Formularlayout wurden durch das neue Rastersystem ersetzt.
• Vertikale Abstandsklassen wurden hinzugefügt.
• Spalten sind standardmäßig nicht mehr position:relativ.
• Bootstrap umfasst sechs Standard-Haltepunkte, manchmal auch als Grid-Ebenen bezeichnet, für eine reaktionsfähige Erstellung.

Beispiel für die Verwendung der neuen Gitterrinnenklassen:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

 

Von Jekyll zu Hugo gewechselt

Jekyll ist ein Website-Generator, der für die Erstellung minimaler, statischer Blogs mit benutzerfreundlichen Navigations- und Website-Komponenten entwickelt wurde. Bootstrap 5 wechselte jedoch zu Hugo, da dieser als schneller und flexibler statischer Site-Generator beschrieben wird. Es ist in der Go-Sprache geschrieben, was es schnell, einfach zu verwenden und zu konfigurieren macht. Fast alle Funktionen sind mit Jekyll identisch, Hugo lässt sich jedoch hervorragend in den beliebten Webhost integrieren und kann Ihre Inhalte auch mit jeder URL-Struktur organisieren.

 

Auf Vanilla JavaScript umgestellt

Vanilla JS ist ein Name, der sich auf die Verwendung von einfachem JavaScript ohne zusätzliche Bibliotheken wie jQuery bezieht. Vanilla JS ist das leichteste Framework, das es gibt. Die moderne Webentwicklungs-Community wird von JavaScript dominiert. Fast alle modernen Webbrowser auf Konsolen, Desktops, Spielen, Tablets und Mobiltelefonen enthalten JavaScript-Interpreter.

 

Responsive Schriftgrößen

Wenn wir die Lesbarkeit der Seite auf kleineren Bildschirmen beibehalten möchten, müssen wir die Schriftgröße sowie die meisten anderen Elemente (Bilder, Schaltflächen usw.) verringern. Bootstrap 5 aktiviert standardmäßig responsive Schriftgrößen. Jetzt ist es einfacher, die Größe der Typografiekomponenten über die Responsive Font Sizes- oder RFS-Engine entsprechend dem Ansichtsfenster des Benutzers zu ändern.

Gelöschte Klassen: .font-size-sm, .font-size-base, .font-size-lg, .font-size-xl
Neues Dienstprogramm: .text-sm, .text-base, .text-lg, .text-xl

Die Unterstützung für IE 10 und 11 wurde entfernt

Die neue Version von Bootstrap hat die Unterstützung von Internet Explorer v-10 und v-11, die früher in Bootstrap-Version 4 vorhanden war, eingestellt, um Webdesigner und Entwickler zu ermutigen, sich mehr auf die Gestaltung moderner Webseiten zu konzentrieren, anstatt sich Sorgen machen zu müssen, dass irgendwelche kaputt gehen Codestück in alten Browsern.

Benutzerdefinierter Satz SVG-Symbole hinzugefügt

Für Bootstrap 5 stellten sie eine brandneue SVG-Symbolbibliothek vor, die von Mark Otto, Mitbegründer von Bootstrap, hervorragend gestaltet wurde. Sie lassen sich schnell und einfach skalieren und mit CSS gestalten. Sie sind Open-Source (MIT), sodass Sie sie kostenlos herunterladen, verwenden und erweitern können.

Verbesserte Anpassungsdokumente

Sie haben die Themenseite um weitere Inhalte und Code-Snippets erweitert, um auf den Quell-Sass-Dateien von Bootstrap aufzubauen. Sie haben auch die Farbpalette in Version 5 erweitert.
Umfangreiches integriertes Farbsystem für ein individuelleres Erscheinungsbild, ohne jemals die Codebasis verlassen zu müssen.

Aktualisierte Formulare

Es wurde ein neuer Abschnitt „Formulare“ erstellt (einschließlich der Eingabegruppenkomponente). Mit Version 5 sind sie vollständig benutzerdefiniert.
Mit einem einzigen Satz von Formularsteuerelementen und einem Fokus auf die Neugestaltung vorhandener Elemente anstelle der Generierung neuer Elemente über Pseudoelemente, die ein einheitlicheres Erscheinungsbild ergeben.
 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="” id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
 
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
 <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Jedes Kontrollkästchen, jedes Optionsfeld, jede Auswahl, jede Datei, jeder Bereich und mehr verfügt über ein benutzerdefiniertes Erscheinungsbild, um den Stil und das Verhalten von Formularsteuerelementen im Betriebssystem und im Browser zu vereinheitlichen.

Abschluss

Das neue Bootstrap 5 macht das Framework zum Nutzen des Entwicklers leichtgewichtig, einfach, nützlich und schneller. Sie verfügen über vorgefertigte Designs, codierte Vorlagen und Themen für Projekte. Spawoz-Technologien können Ihnen dabei helfen, das Beste der Branche zum Nutzen Ihres Unternehmens herauszuholen.