Erfahren Sie, wie Sie die neuesten Funktionen von Bootstrap nutzen können, einschließlich Details zu großen Änderungen an Formularsteuerelementen.
Bootstrap ist ein beliebtes Frontend-Framework, das die Webentwicklung revolutioniert hat. Mit seiner neuesten Version, Bootstrap 5.3.0, hat das Framework eine Fülle spannender neuer Funktionen eingeführt und Verbesserungen, die es Ihnen ermöglichen, beeindruckende, reaktionsfähige und funktionsreiche Websites und Anwendungen zu erstellen.
Dunkler Modus umschalten
Einer der bemerkenswertesten Bootstrap 5.3.0-Ergänzungen ist ein Umschalter für Dunkelmodus. Mit diesem Schalter können Benutzer Ihrer Website mühelos zwischen hellem und dunklem Modus wechseln und so eine nahtlose Nutzung Ihrer Website oder Anwendung bei verschiedenen Lichtverhältnissen ermöglichen.
Um diese Funktion zu nutzen, fügen Sie einfach das hinzu data-bs-toggle="dark-mode" Attribut zu einer beliebigen Schaltfläche oder einem Linkelement hinzufügen.
Hier ist ein Beispiel:
<TasteTyp="Taste"Klasse=„btn btn-primär“data-bs-toggle=„Dunkelmodus“>
Schalten Sie den Dunkelmodus um
Taste>Dienstprogramme zur Schriftskalierung
Bootstrap 5.3.0 führt eine Reihe von Dienstprogrammen zur Schriftskalierung ein, mit denen Sie die Größe Ihres Texts schnell und ohne Aufwand auf der Grundlage vordefinierter Skalierungen anpassen können Wählen Sie selbst bestimmte Schriftartwerte aus.
Sie können diese Dienstprogramme in Kombination mit anderen Bootstrap-Typografieklassen verwenden, um eine skalierbare und konsistente Typografie auf Ihrer gesamten Website oder Anwendung zu erreichen.
Hier sind einige Beispiele dafür, wie Sie die Dienstprogramme zur Schriftskalierung verwenden können:
<PKlasse=„fs-1“>Dies ist die größte SchriftgrößeP>
<PKlasse=„fs-2“>Dies ist eine etwas kleinere SchriftgrößeP>
<PKlasse=„fs-3“>Dies ist eine mittlere SchriftgrößeP>
<PKlasse=„fs-4“>Dies ist eine kleine SchriftgrößeP>
<PKlasse=„fs-5“>Dies ist die kleinste SchriftgrößeP>Dachrinnen-Dienstprogramme
Eine weitere Neuerung in Bootstrap 5.3.0 ist die Einführung von Gutter-Dienstprogrammen. Mit diesen Dienstprogrammen können Sie ganz einfach Zwischenräume zwischen Spalten in Ihrem Bootstrap-Rasterlayout hinzufügen, ohne benutzerdefiniertes CSS schreiben zu müssen.
Hier ist ein Beispiel dafür, wie Sie die Gutter-Dienstprogramme verwenden können:
<divKlasse=„Reihe gx-3“>
<divKlasse=„col“>Spalte 1div>
<divKlasse=„col“>Spalte 2div>
div>In diesem Beispiel wird die verwendet gx-3 -Klasse, um zwischen den beiden Spalten einen Zwischenraum von 3 Einheiten (oder 1,5 Rem) hinzuzufügen.
Aktualisierte Formularsteuerelemente
Der Formularsteuerelemente in Bootstrap wurden in Version 5.3.0 aktualisiert, um die Konsistenz und Benutzerfreundlichkeit zu verbessern. Die neuen Formularsteuerelemente umfassen aktualisierte Stile für Kontrollkästchen, Optionsfelder und Auswahlfelder sowie ein verbessertes Validierungsfeedback.
Kontrollkästchen und Optionsfelder
Bootstrap 5.3.0 führt neue Stile für Kontrollkästchen und Optionsfelder ein, die ihre Verwendung einfacher und zugänglicher machen. Das neue Design verfügt über größere Trefferbereiche und verbesserte Fokusindikatoren, sodass Sie einfacher mit diesen Eingaben interagieren können.
Hier ist ein Beispiel dafür, wie Sie die neuen Kontrollkästchen-Stile verwenden können:
<divKlasse=„Formularprüfung“>
<EingangKlasse=„Form-Check-Eingabe“Typ=„Kontrollkästchen“Wert=""Ausweis=„check1“>
<EtikettKlasse=„form-check-label“für=„check1“>Standard-KontrollkästchenEtikett>
div>Und hier ist ein Beispiel dafür, wie Sie die neuen Optionsfeldstile verwenden können:
<divKlasse=„Formularprüfung“>
<EingangKlasse=„Form-Check-Eingabe“Typ="Radio"Name=„exampleRadios“Ausweis=„radio1“Wert="Option 1">
<EtikettKlasse=„form-check-label“für=„radio1“> Option 1 Etikett>
div>Beachten Sie, wie dieses Markup das verwendet .form-check-input Klasse, um das Eingabeelement selbst zu formatieren, und die .form-check-label Klasse, um das Etikett zu gestalten.
Wählen Sie Boxen aus
Auswahlfelder wurden in Bootstrap 5.3.0 außerdem mit neuen Stilen für bessere Konsistenz und Benutzerfreundlichkeit aktualisiert. Die neuen Auswahlfeldstile verfügen über größere Trefferbereiche und verbesserte Fokusindikatoren, sodass Sie einfacher mit diesen Eingaben interagieren können.
Hier ist ein Beispiel dafür, wie Sie die neuen Auswahlbox-Stile verwenden können:
<wählenKlasse=„Formularauswahl“Arien-Label=„Standardauswahlbeispiel“>
<Möglichkeitausgewählt>Öffnen Sie dieses AuswahlmenüMöglichkeit>
<MöglichkeitWert="1">EinsMöglichkeit>
<MöglichkeitWert="2">ZweiMöglichkeit>
<MöglichkeitWert="3">DreiMöglichkeit>
wählen>Beachten Sie, wie Sie das verwenden können .form-select Klasse, um das Auswahlfeld selbst zu formatieren.
Validierungs-Feedback
Bootstrap 5.3.0 führt außerdem neue Validierungs-Feedback-Stile für Formularsteuerelemente ein. Mit diesen Stilen können Sie Ihren Website-Benutzern einfacher visuelles Feedback geben, wenn sie ein Formular falsch ausfüllen.
Hier ist ein Beispiel dafür, wie Sie die neuen Validierungsstile verwenden können:
<divKlasse="Gruppe formen">
<Etikettfür=„exampleInputPassword1“>PasswortEtikett>
<EingangTyp="Passwort"Klasse=„Formularkontrolle ist ungültig“Ausweis=„exampleInputPassword1“Platzhalter="Passwort"erforderlich>
<divKlasse=„ungültiges Feedback“> Bitte geben Sie ein gültiges Passwort ein. div>
div>Beachten Sie, wie die .ist ungültig Die Klasse gibt an, dass das Eingabefeld ungültig ist, und die .ungültiges-Feedback Die Klasse zeigt dem Benutzer eine Nachricht an.
Mit diesen neuen Stilen ist es einfacher denn je, zugängliche und konsistente Formulare für Ihre Website oder Anwendung zu erstellen.
Spannende Verbesserungen in Bootstrap 5.3.0
Bootstrap 5.3.0 ist ein bedeutendes Update des beliebten CSS-Frameworks, das mehrere neue Funktionen und Verbesserungen mit sich bringt. Von der Umschaltung des Dunkelmodus bis hin zu den Dienstprogrammen für die Schriftskalierung und den Bundstegen stehen Ihnen zahlreiche neue Tools zur Verfügung, mit denen Sie bessere Websites und Anwendungen erstellen können.