Bootstrap 5.3.0: Deblocarea noilor sale caracteristici interesante

Bootstrap este un cadru front-end popular care a revoluționat dezvoltarea web. Cu cea mai recentă versiune, Bootstrap 5.3.0, cadrul a introdus o mulțime de noi funcții interesante și îmbunătățiri care vă permit să creați site-uri web și aplicații uimitoare, receptive și bogate în funcții.

Comutare în modul întunecat

Una dintre cele de remarcat Adăugări Bootstrap 5.3.0 este un comutator pentru modul întunecat. Această comutare permite utilizatorilor site-ului dvs. să comute fără efort între modurile de lumină și întuneric, facilitând utilizarea fără întreruperi a site-ului sau a aplicației dvs. în diferite condiții de iluminare.

Pentru a utiliza această caracteristică, adăugați pur și simplu data-bs-toggle="mod întunecat" atribute oricărui buton sau element de legătură.

Iată un exemplu:

<butontip="buton"clasă=„btn btn-primar”date-bs-toggle=„mod întunecat”>
 Comutați în modul întunecat
buton>

Utilitare pentru scară de fonturi

Bootstrap 5.3.0 introduce un set de utilitare pentru scara fonturilor care vă permit să ajustați rapid dimensiunea textului pe baza unor scale predefinite, fără a fi nevoie să alegeți singuri anumite valori ale fontului.

Puteți utiliza aceste utilitare în combinație cu alte clase de tipografie Bootstrap pentru a obține o tipografie scalabilă și consecventă pe site-ul sau aplicația dvs.

Iată câteva exemple despre cum puteți utiliza utilitarele de scară a fonturilor:

<pclasă="fs-1">Aceasta este cea mai mare dimensiune de fontp>
<pclasă="fs-2">Aceasta este o dimensiune de font puțin mai micăp>
<pclasă="fs-3">Aceasta este o dimensiune medie a fontuluip>
<pclasă="fs-4">Aceasta este o dimensiune mică a fontuluip>
<pclasă="fs-5">Aceasta este cea mai mică dimensiune de fontp>

Utilități pentru jgheab

O altă nouă adăugare în Bootstrap 5.3.0 este introducerea utilităților gutter. Aceste utilitare facilitează adăugarea jgheaburilor între coloane în aspectul grilei Bootstrap, fără a fi nevoie să scrieți CSS personalizat.

Iată un exemplu despre cum puteți utiliza utilitățile pentru jgheab:

<divclasă="rând gx-3">
<divclasă="col">Coloana 1div>
<divclasă="col">Coloana 2div>
div>

Acest exemplu folosește gx-3 clasa pentru a adăuga un jgheab de 3 unități (sau 1,5 rem) între cele două coloane.

Controale de formulare actualizate

The controale de formular în Bootstrap au fost actualizate în versiunea 5.3.0 pentru a îmbunătăți consistența și gradul de utilizare. Noile comenzi de formular includ stiluri actualizate pentru casete de selectare, butoane radio și casete de selectare, precum și feedback îmbunătățit de validare.

Casete de selectare și butoane radio

Bootstrap 5.3.0 introduce noi stiluri pentru casete de selectare și butoane radio care le fac mai ușor de utilizat și mai accesibile. Noul design prezintă zone de lovituri mai mari și indicatori de focalizare îmbunătățiți, facilitând interacțiunea cu aceste intrări.

Iată un exemplu despre cum puteți utiliza noile stiluri de casete de selectare:

<divclasă="verificare formular">
<intrareclasă="formular-verificare-intrare"tip="Caseta de bifat"valoare=""id="verificare 1">
<etichetaclasă=„form-verificare-etichetă”pentru="verificare 1">Caseta de selectare implicităeticheta>
div>

Și iată un exemplu despre cum puteți utiliza noile stiluri de butoane radio:

<divclasă="verificare formular">
<intrareclasă="formular-verificare-intrare"tip="radio"Nume=„ExempleRadios”id="radio1"valoare="Opțiunea 1">
<etichetaclasă=„form-verificare-etichetă”pentru="radio1"> Opțiunea 1 eticheta>
div>

Observați cum acest marcaj folosește .formular-verificare-intrare clasa pentru a stila elementul de intrare în sine și .formular-verificare-etichetă clasă pentru a modela eticheta.

Selectați casete

Casetele de selectare au fost, de asemenea, actualizate în Bootstrap 5.3.0 cu noi stiluri pentru o mai bună consistență și utilizare. Noile stiluri de casete de selectare prezintă zone de acces mai mari și indicatori de focalizare îmbunătățiți, facilitând interacțiunea cu aceste intrări.

Iată un exemplu despre cum puteți utiliza noile stiluri de casete de selectare:

<Selectațiclasă="selectare formular"aria-etichetă=„Exemplu de selectare implicită”>
<opțiuneselectat>Deschideți acest meniu de selectareopțiune>
<opțiunevaloare="1">unuopțiune>
<opțiunevaloare="2">Douăopțiune>
<opțiunevaloare="3">Treiopțiune>
Selectați>

Observați cum puteți utiliza .form-select clasa pentru a stila caseta de selectare în sine.

Feedback de validare

Bootstrap 5.3.0 introduce, de asemenea, noi stiluri de feedback de validare pentru controalele formularelor. Aceste stiluri facilitează furnizarea de feedback vizual utilizatorilor site-ului dvs. atunci când completează incorect un formular.

Iată un exemplu despre cum puteți utiliza noile stiluri de validare:

<divclasă="grup-form">
<etichetapentru=„exampleInputPassword1”>Parolaeticheta>
<intraretip="parola"clasă=„controlul formularului este nevalid”id=„exampleInputPassword1”substituent="Parola"necesar>
<divclasă="feedback invalid"> Vă rugăm să furnizați o parolă validă. div>
div>

Observați cum .este-invalid clasa indică faptul că câmpul de intrare este invalid, iar .invalid-feedback clasa afișează un mesaj utilizatorului.

Cu aceste noi stiluri, este mai ușor ca niciodată să creați formulare accesibile și coerente pentru site-ul sau aplicația dvs.

Îmbunătățiri interesante în Bootstrap 5.3.0

Bootstrap 5.3.0 este o actualizare semnificativă a cadrului CSS popular, care aduce câteva funcții noi și îmbunătățiri. De la comutarea în modul întunecat la utilitarele pentru scară de fonturi și utilitățile pentru jgheab, există o mulțime de instrumente noi la dispoziția dumneavoastră pentru a vă ajuta să construiți site-uri web și aplicații mai bune.