Bootstrap 5.3.0: selle põnevate uute funktsioonide avamine

Bootstrap on populaarne esiotsa raamistik, mis on teinud veebiarenduses revolutsiooni. Oma uusima versiooniga Bootstrap 5.3.0 on raamistik kasutusele võtnud hulgaliselt põnevaid uusi funktsioone ja täiustused, mis võimaldavad teil luua suurepäraseid, tundlike ja funktsiooniderikkaid veebisaite ja rakendusi.

Tumeda režiimi lüliti

Üks tähelepanuväärsetest Bootstrap 5.3.0 täiendused on lüliti jaoks tume režiim. See lüliti võimaldab teie veebisaidi kasutajatel hõlpsalt heleda ja tumeda režiimi vahel lülituda, hõlbustades teie veebisaidi või rakenduse sujuvat kasutamist erinevates valgustingimustes.

Selle funktsiooni kasutamiseks lisage lihtsalt data-bs-toggle="tume-režiim" atribuut mis tahes nupule või lingielemendile.

Siin on näide:

<nupputüüp="nupp"klass="btn btn-primary"data-bs-toggle="tume režiim">
 Lülitage tume režiim sisse
nuppu>

Font Scale Utilities

Bootstrap 5.3.0 tutvustab fondiskaala utiliitide komplekti, mis võimaldavad teil kiiresti kohandada teksti suurust eelnevalt määratletud skaalade alusel, ilma et peaksite seda tegema

vali ise konkreetsed fondiväärtused.

Saate kasutada neid utiliite koos teiste Bootstrapi tüpograafiaklassidega, et saavutada oma veebisaidil või rakenduses skaleeritav ja järjepidev tüpograafia.

Siin on mõned näited fondi skaala utiliitide kasutamisest.

<lkklass="fs-1">See on suurim fondi suuruslk>
<lkklass="fs-2">See on veidi väiksem kirjasuuruslk>
<lkklass="fs-3">See on keskmise suurusega kirjasuuruslk>
<lkklass="fs-4">See on väike kirjasuuruslk>
<lkklass="fs-5">See on väikseim fondi suuruslk>

Vihmaveerennide kommunaalteenused

Veel üks Bootstrap 5.3.0 uus lisand on vihmaveerennide utiliitide kasutuselevõtt. Need utiliidid muudavad teie Bootstrapi ruudustiku paigutuse veergude vahele rennide lisamise lihtsaks, ilma et peaksite kirjutama kohandatud CSS-i.

Siin on näide vihmaveerennide kasutamisest:

<divklass="rida gx-3">
<divklass="kolm">1. veergdiv>
<divklass="kolm">2. veergdiv>
div>

See näide kasutab gx-3 klassis, et lisada kahe samba vahele 3 ühiku (või 1,5remi) renn.

Värskendatud vormi juhtelemendid

The vormi juhtelemendid Bootstrapis järjepidevuse ja kasutatavuse parandamiseks on versioonis 5.3.0 värskendatud. Uued vormi juhtelemendid hõlmavad märkeruutude, raadionuppude ja valikukastide värskendatud stiile ning täiustatud valideerimise tagasisidet.

Märkeruudud ja raadionupud

Bootstrap 5.3.0 tutvustab uusi märkeruutude ja raadionuppude stiile, mis muudavad nende kasutamise lihtsamaks ja juurdepääsetavamaks. Uuel disainil on suuremad löögialad ja täiustatud fookusnäidikud, mis muudavad nende sisenditega suhtlemise lihtsamaks.

Siin on näide uute märkeruutude stiilide kasutamisest.

<divklass="vormikontroll">
<sisendklass="vorm-kontroll-sisend"tüüp="märkeruut"väärtus=""id="kontroll1">
<siltklass="vorm-kontroll-silt"jaoks="kontroll1">Vaikimisi märkeruutsilt>
div>

Ja siin on näide uute raadionuppude stiilide kasutamisest.

<divklass="vormikontroll">
<sisendklass="vorm-kontroll-sisend"tüüp="raadio"nimi="exampleRadios"id="raadio1"väärtus="valik 1">
<siltklass="vorm-kontroll-silt"jaoks="raadio1"> valik 1 silt>
div>

Pange tähele, kuidas see märgistus kasutab .form-check-input klass sisendelemendi enda stiilimiseks ja .form-check-label klassi sildi kujundamiseks.

Valige Kastid

Bootstrap 5.3.0-s on valitud kaste värskendatud ka uute stiilidega, et tagada parem järjepidevus ja kasutatavus. Uutel valikukasti stiilidel on suuremad löögialad ja täiustatud fookusnäidikud, mis muudavad nende sisenditega suhtlemise lihtsamaks.

Siin on näide uute valikukastide stiilide kasutamisest.

<valiklass="vorm-vali"aaria-silt="Vaikimisi valiku näide">
<valikvalitud>Avage see valikumenüüvalik>
<valikväärtus="1">Üksvalik>
<valikväärtus="2">Kaksvalik>
<valikväärtus="3">Kolmvalik>
vali>

Pange tähele, kuidas saate kasutada .vorm-select klassi valikukasti enda stiiliks.

Valideerimise tagasiside

Bootstrap 5.3.0 tutvustab ka uusi vormi juhtelementide valideerimise tagasiside stiile. Need stiilid muudavad teie veebisaidi kasutajatele visuaalse tagasiside andmise lihtsamaks, kui nad vormi valesti täidavad.

Siin on näide uute valideerimisstiilide kasutamisest.

<divklass="vorm-rühm">
<siltjaoks="exampleInputPassword1">Paroolsilt>
<sisendtüüp="parool"klass="vormi juhtelement on kehtetu"id="exampleInputPassword1"kohatäide="Parool"nõutud>
<divklass="kehtetu tagasiside"> Sisestage kehtiv parool. div>
div>

Pange tähele, kuidas .on kehtetu klass näitab, et sisestusväli on kehtetu, ja .invalid-feedback klass kuvab kasutajale sõnumi.

Nende uute stiilide abil on veebisaidi või rakenduse jaoks juurdepääsetavate ja ühtsete vormide loomine lihtsam kui kunagi varem.

Bootstrapi 5.3.0 põnevad täiustused

Bootstrap 5.3.0 on populaarse CSS-i raamistiku oluline uuendus, mis toob tabelisse mitmeid uusi funktsioone ja täiustusi. Alates pimeda režiimi lülitist kuni fondiskaala utiliitideni ja vihmaveetorude utiliitideni on teie käsutuses palju uusi tööriistu, mis aitavad teil luua paremaid veebisaite ja rakendusi.