Bootstrap 5.3.0: zijn opwindende nieuwe functies ontgrendelen

Bootstrap is een populair front-end framework dat een revolutie teweeg heeft gebracht in webontwikkeling. Met de nieuwste release, Bootstrap 5.3.0, heeft het framework een schat aan opwindende nieuwe functies geïntroduceerd en verbeteringen waarmee u verbluffende, responsieve websites en applicaties met veel functies kunt maken.

Schakelen tussen donkere modus

Een van de opmerkelijke Bootstrap 5.3.0 toevoegingen is een schakelaar voor donkere modus. Met deze schakelaar kunnen gebruikers van uw website moeiteloos schakelen tussen lichte en donkere modi, wat een naadloos gebruik van uw website of applicatie onder verschillende lichtomstandigheden mogelijk maakt.

Om deze functie te gebruiken, voegt u gewoon het data-bs-toggle="donkere-modus" attribuut toe aan een knop of linkelement.

Hier is een voorbeeld:

<knoptype="knop"klas="btn btn-primair"data-bs-toggle="donkere modus">
 Schakel de donkere modus in
knop>

Font Scale-hulpprogramma's

Bootstrap 5.3.0 introduceert een set lettertypeschaalhulpprogramma's waarmee u snel de grootte van uw tekst kunt aanpassen op basis van vooraf gedefinieerde schalen, zonder kies zelf specifieke lettertypewaarden.

U kunt deze hulpprogramma's gebruiken in combinatie met andere Bootstrap-typografieklassen om schaalbare en consistente typografie op uw website of applicatie te realiseren.

Hier zijn een paar voorbeelden van hoe u de lettertypeschaalhulpprogramma's kunt gebruiken:

<Pklas="fs-1">Dit is de grootste lettergrootteP>
<Pklas="fs-2">Dit is een iets kleinere lettergrootteP>
<Pklas="fs-3">Dit is een middelgrote lettergrootteP>
<Pklas="fs-4">Dit is een kleine lettergrootteP>
<Pklas="fs-5">Dit is de kleinste lettergrootteP>

Goot hulpprogramma's

Een andere nieuwe toevoeging in Bootstrap 5.3.0 is de introductie van goothulpprogramma's. Deze hulpprogramma's maken het gemakkelijk om goten toe te voegen tussen kolommen in uw Bootstrap-rasterlay-out zonder aangepaste CSS te hoeven schrijven.

Hier is een voorbeeld van hoe u de goothulpprogramma's kunt gebruiken:

<divklas="rij gx-3">
<divklas="col">Kolom 1div>
<divklas="col">Kolom 2div>
div>

Dit voorbeeld gebruikt de gx-3 class om een ​​goot van 3 eenheden (of 1,5rem) toe te voegen tussen de twee kolommen.

Formulierbesturing bijgewerkt

De vormen controles in Bootstrap zijn bijgewerkt in versie 5.3.0 om de consistentie en bruikbaarheid te verbeteren. De nieuwe formulierbesturingselementen omvatten bijgewerkte stijlen voor selectievakjes, keuzerondjes en selectievakjes, evenals verbeterde validatiefeedback.

Selectievakjes en keuzerondjes

Bootstrap 5.3.0 introduceert nieuwe stijlen voor selectievakjes en keuzerondjes waardoor ze gebruiksvriendelijker en toegankelijker worden. Het nieuwe ontwerp heeft grotere hitgebieden en verbeterde focusindicatoren, waardoor u gemakkelijker met deze invoer kunt communiceren.

Hier is een voorbeeld van hoe u de nieuwe stijlen voor selectievakjes kunt gebruiken:

<divklas="formulier-check">
<invoerklas="formulier-controle-invoer"type="vinkje"waarde=""ID kaart="check1">
<etiketklas="formulier-check-label"voor="check1">Standaard selectievakjeetiket>
div>

En hier is een voorbeeld van hoe u de nieuwe radioknopstijlen kunt gebruiken:

<divklas="formulier-check">
<invoerklas="formulier-controle-invoer"type="radio"naam="voorbeeldradio's"ID kaart="radio1"waarde="Optie 1">
<etiketklas="formulier-check-label"voor="radio1"> Optie 1 etiket>
div>

Merk op hoe deze opmaak de .formulier-controle-invoer class om het invoerelement zelf te stylen, en de .form-check-label klasse om het label te stylen.

Selecteer Dozen

Select boxes zijn ook bijgewerkt in Bootstrap 5.3.0 met nieuwe stijlen voor betere consistentie en bruikbaarheid. De nieuwe select box-stijlen hebben grotere hitgebieden en verbeterde focusindicatoren, waardoor het voor u gemakkelijker wordt om met deze invoer om te gaan.

Hier is een voorbeeld van hoe u de nieuwe stijlen voor selectiekaders kunt gebruiken:

<selecterenklas="form-select"aria-label="Standaard selecteer voorbeeld">
<keuzegeselecteerd>Open dit selectiemenukeuze>
<keuzewaarde="1">Eenkeuze>
<keuzewaarde="2">Tweekeuze>
<keuzewaarde="3">Driekeuze>
selecteren>

Let op hoe u de .form-select class om het selectievak zelf op te maken.

Validatie-feedback

Bootstrap 5.3.0 introduceert ook nieuwe validatiefeedbackstijlen voor formulierbesturingselementen. Deze stijlen maken het gemakkelijker om visuele feedback te geven aan uw websitegebruikers wanneer ze een formulier onjuist invullen.

Hier is een voorbeeld van hoe u de nieuwe validatiestijlen kunt gebruiken:

<divklas="form-groep">
<etiketvoor="voorbeeldInvoerWachtwoord1">Wachtwoordetiket>
<invoertype="wachtwoord"klas="form-control is ongeldig"ID kaart="voorbeeldInvoerWachtwoord1"tijdelijke aanduiding="Wachtwoord"vereist>
<divklas="ongeldige feedback"> Geef een geldig wachtwoord op. div>
div>

Merk op hoe de .is ongeldig class geeft aan dat het invoerveld ongeldig is, en de .ongeldige feedback class geeft een bericht weer aan de gebruiker.

Met deze nieuwe stijlen is het eenvoudiger dan ooit om toegankelijke en consistente formulieren voor uw website of applicatie te maken.

Opwindende verbeteringen in Bootstrap 5.3.0

Bootstrap 5.3.0 is een belangrijke update van het populaire CSS-framework dat verschillende nieuwe functies en verbeteringen aan de tabel toevoegt. Van de donkere modus-schakelaar tot de lettertypeschaalhulpprogramma's en gutter-hulpprogramma's, er staan ​​tal van nieuwe tools tot uw beschikking om u te helpen betere websites en applicaties te bouwen.