Saznajte kako možete koristiti najnovije značajke Bootstrapa, uključujući pojedinosti o velikim promjenama u kontrolama obrazaca.
Bootstrap je popularan front-end okvir koji je napravio revoluciju u web razvoju. Sa svojim najnovijim izdanjem, Bootstrap 5.3.0, okvir je uveo mnoštvo uzbudljivih novih značajki i poboljšanja koja vam omogućuju stvaranje zadivljujućih, responzivnih web stranica i aplikacija bogatih značajkama.
Prebacivanje tamnog načina rada
Jedan od vrijednih pažnje Bootstrap 5.3.0 dodaci je prekidač za tamni način rada. Ovaj prekidač omogućuje korisnicima vaše web stranice da se bez napora prebacuju između svijetlih i tamnih načina rada, olakšavajući besprijekornu upotrebu vaše web stranice ili aplikacije u različitim uvjetima osvjetljenja.
Za korištenje ove značajke jednostavno dodajte data-bs-toggle="tamni način rada" atribut bilo kojem gumbu ili elementu veze.
Evo primjera:
<dugmetip="dugme"razreda="btn btn-primarni"podaci-bs-prebacivanje="tamni način">
Uključi tamni način rada
dugme>Pomoćni programi za skaliranje fonta
Bootstrap 5.3.0 uvodi skup uslužnih programa za veličinu fonta koji vam omogućuju da brzo prilagodite veličinu teksta na temelju unaprijed definiranih mjerila, bez potrebe sami odaberite određene vrijednosti fonta.
Možete koristiti ove uslužne programe u kombinaciji s drugim Bootstrap tipografskim klasama kako biste postigli skalabilnu i dosljednu tipografiju na svom web-mjestu ili aplikaciji.
Evo nekoliko primjera kako možete koristiti pomoćne programe za skaliranje fonta:
<strrazreda="fs-1">Ovo je najveća veličina fontastr>
<strrazreda="fs-2">Ovo je nešto manja veličina slovastr>
<strrazreda="fs-3">Ovo je srednja veličina slovastr>
<strrazreda="fs-4">Ovo je mala veličina slovastr>
<strrazreda="fs-5">Ovo je najmanja veličina slovastr>Oluk Utilities
Još jedan novi dodatak u Bootstrap 5.3.0 je uvođenje uslužnih programa za oluke. Ovi uslužni programi olakšavaju dodavanje oluka između stupaca u vašem Bootstrap rasporedu mreže bez potrebe za pisanjem prilagođenog CSS-a.
Evo primjera kako možete koristiti pomoćne programe oluka:
<divrazreda="red gx-3">
<divrazreda="col">Stupac 1div>
<divrazreda="col">Stupac 2div>
div>Ovaj primjer koristi gx-3 klase za dodavanje oluka od 3 jedinice (ili 1,5 rema) između dva stupca.
Ažurirane kontrole obrazaca
The kontrole obrasca u Bootstrapu su ažurirani u verziji 5.3.0 radi poboljšanja dosljednosti i upotrebljivosti. Nove kontrole obrasca uključuju ažurirane stilove za potvrdne okvire, radio gumbe i okvire za odabir, kao i poboljšane povratne informacije o provjeri valjanosti.
Potvrdni okviri i radio gumbi
Bootstrap 5.3.0 uvodi nove stilove za potvrdne okvire i radio gumbe koji ih čine lakšim za korištenje i pristupačnijim. Novi dizajn ima veća pogođena područja i poboljšane indikatore fokusa, što vam olakšava interakciju s tim unosima.
Evo primjera kako možete koristiti nove stilove potvrdnih okvira:
<divrazreda="provjera obrasca">
<ulaznirazreda="provjera-unosa obrasca"tip="potvrdni okvir"vrijednost=""iskaznica="ček1">
<označitirazreda="obrazac-provjera-oznaka"za="ček1">Zadani potvrdni okviroznačiti>
div>Evo primjera kako možete koristiti nove stilove radio gumba:
<divrazreda="provjera obrasca">
<ulaznirazreda="provjera-unosa obrasca"tip="radio"Ime="primjer radija"iskaznica="radio1"vrijednost="opcija 1">
<označitirazreda="obrazac-provjera-oznaka"za="radio1"> opcija 1 označiti>
div>Primijetite kako ovo označavanje koristi .forma-provjera-unos za stiliziranje samog ulaznog elementa i .obrazac-ček-naljepnica klase za stiliziranje oznake.
Odaberite Kutije
Okviri za odabir također su ažurirani u Bootstrapu 5.3.0 s novim stilovima za bolju dosljednost i upotrebljivost. Novi stilovi okvira za odabir imaju veća pogođena područja i poboljšane indikatore fokusa, što vam olakšava interakciju s ovim unosima.
Evo primjera kako možete koristiti nove stilove okvira za odabir:
<Izaberirazreda="odaberi obrazac"arija-oznaka="Primjer zadanog odabira">
<opcijaodabran>Otvorite ovaj izbornik za odabiropcija>
<opcijavrijednost="1">Jedanopcija>
<opcijavrijednost="2">Dvaopcija>
<opcijavrijednost="3">Triopcija>
Izaberi>Primijetite kako možete koristiti .forma-odaberi klasa za stiliziranje samog okvira za odabir.
Povratne informacije o potvrdi
Bootstrap 5.3.0 također uvodi nove stilove povratnih informacija za provjeru valjanosti za kontrole obrazaca. Ovi stilovi olakšavaju pružanje vizualnih povratnih informacija korisnicima vaše web stranice kada netočno ispune obrazac.
Evo primjera kako možete koristiti nove stilove provjere valjanosti:
<divrazreda="grupa-forma">
<označitiza="exampleInputPassword1">Lozinkaoznačiti>
<ulaznitip="lozinka"razreda="kontrola obrasca je nevažeća"iskaznica="exampleInputPassword1"rezerviranog mjesta="Lozinka"potreban>
<divrazreda="nevažeća povratna informacija"> Unesite valjanu lozinku. div>
div>Primijetite kako .netočno je klasa označava da je polje za unos nevažeće, a .nevažeća povratna informacija klasa prikazuje poruku korisniku.
S ovim novim stilovima, lakše je nego ikad stvoriti pristupačne i dosljedne obrasce za vaše web mjesto ili aplikaciju.
Uzbudljiva poboljšanja u Bootstrapu 5.3.0
Bootstrap 5.3.0 značajno je ažuriranje popularnog CSS okvira koje donosi nekoliko novih značajki i poboljšanja. Od preklopnika za tamni način rada do uslužnih programa za skaliranje fonta i uslužnih programa za oluke, na raspolaganju vam je mnogo novih alata koji će vam pomoći u izradi boljih web stranica i aplikacija.
