Ugotovite, kako lahko uporabljate najnovejše funkcije Bootstrapa, vključno s podrobnostmi o velikih spremembah kontrolnikov obrazcev.
Bootstrap je priljubljeno front-end ogrodje, ki je revolucioniralo spletni razvoj. S svojo najnovejšo izdajo, Bootstrap 5.3.0, je ogrodje uvedlo veliko razburljivih novih funkcij in izboljšave, ki vam omogočajo ustvarjanje osupljivih, odzivnih spletnih mest in aplikacij, bogatih s funkcijami.
Preklop temnega načina
Eden izmed omembe vrednih Dodatki Bootstrap 5.3.0 je preklop za temni način. Ta preklop uporabnikom vašega spletnega mesta omogoča preprosto preklapljanje med svetlimi in temnimi načini, kar omogoča nemoteno uporabo vašega spletnega mesta ali aplikacije v različnih svetlobnih pogojih.
Če želite uporabiti to funkcijo, preprosto dodajte data-bs-toggle="temni način" atribut kateremu koli gumbu ali elementu povezave.
Tukaj je primer:
<gumbvrsta="gumb"razred="btn btn-primarni"podatki-bs-preklop="temni način">
Preklopi temni način
gumb>Pripomočki za merjenje pisave
Bootstrap 5.3.0 uvaja nabor pripomočkov za velikost pisave, ki vam omogočajo hitro prilagajanje velikosti vašega besedila na podlagi vnaprej določenih lestvic, ne da bi morali sami izberite določene vrednosti pisave.
Te pripomočke lahko uporabite v kombinaciji z drugimi tipografskimi razredi Bootstrap, da dosežete razširljivo in dosledno tipografijo na svojem spletnem mestu ali aplikaciji.
Tukaj je nekaj primerov, kako lahko uporabite pripomočke za merjenje pisave:
<strrazred="fs-1">To je največja velikost pisavestr>
<strrazred="fs-2">To je nekoliko manjša velikost pisavestr>
<strrazred="fs-3">To je srednje velika pisavastr>
<strrazred="fs-4">To je majhna velikost pisavestr>
<strrazred="fs-5">To je najmanjša velikost pisavestr>Gutter Utilities
Še en nov dodatek v Bootstrap 5.3.0 je uvedba pripomočkov žlebov. Ti pripomočki olajšajo dodajanje žlebov med stolpce v vaši postavitvi mreže Bootstrap, ne da bi morali pisati CSS po meri.
Tukaj je primer, kako lahko uporabite pripomočke za žleb:
<divrazred="vrstica gx-3">
<divrazred="col">1. stolpecdiv>
<divrazred="col">2. stolpecdiv>
div>Ta primer uporablja gx-3 razreda, da dodate žleb 3 enot (ali 1,5 rem) med oba stolpca.
Posodobljeni kontrolniki obrazcev
The kontrolniki obrazcev v programu Bootstrap so bili posodobljeni v različici 5.3.0 za izboljšanje doslednosti in uporabnosti. Novi kontrolniki obrazcev vključujejo posodobljene sloge za potrditvena polja, izbirne gumbe in izbirna polja ter izboljšane povratne informacije o preverjanju.
Potrditvena polja in radijski gumbi
Bootstrap 5.3.0 uvaja nove sloge za potrditvena polja in izbirne gumbe, ki olajšajo uporabo in postanejo bolj dostopni. Nova zasnova vključuje večja območja zadetkov in izboljšane indikatorje izostritve, kar vam olajša interakcijo s temi vnosi.
Tukaj je primer, kako lahko uporabite nove sloge potrditvenih polj:
<divrazred="preverjanje obrazca">
<vnosrazred="preverjanje obrazca-vnos"vrsta="potrditveno polje"vrednost=""id="ček1">
<oznakarazred="obrazec-preveri-oznaka"za="ček1">Privzeto potrditveno poljeoznaka>
div>In tukaj je primer, kako lahko uporabite nove sloge izbirnih gumbov:
<divrazred="preverjanje obrazca">
<vnosrazred="preverjanje obrazca-vnos"vrsta="radio"ime="exampleRadios"id="radio1"vrednost="možnost1">
<oznakarazred="obrazec-preveri-oznaka"za="radio1"> Možnost 1 oznaka>
div>Opazite, kako ta oznaka uporablja .form-check-input razred za stil samega vhodnega elementa in .obrazec-ček-oznaka razred za oblikovanje oznake.
Izberite Škatle
Izbirna polja so bila posodobljena tudi v Bootstrap 5.3.0 z novimi slogi za boljšo doslednost in uporabnost. Novi slogi izbirnega polja imajo večja območja zadetkov in izboljšane indikatorje izostritve, kar vam olajša interakcijo s temi vnosi.
Tukaj je primer, kako lahko uporabite nove sloge izbirnega polja:
<izberiterazred="form-izberi"arija-oznaka="Privzeti primer izbire">
<možnostizbrano>Odprite ta izbrani menimožnost>
<možnostvrednost="1">enamožnost>
<možnostvrednost="2">Dvamožnost>
<možnostvrednost="3">trimožnost>
izberite>Upoštevajte, kako lahko uporabite .form-izberi razred za oblikovanje samega izbirnega polja.
Povratne informacije o validaciji
Bootstrap 5.3.0 uvaja tudi nove sloge povratnih informacij o preverjanju za kontrolnike obrazcev. Ti slogi olajšajo zagotavljanje vizualnih povratnih informacij uporabnikom vašega spletnega mesta, ko nepravilno izpolnijo obrazec.
Tu je primer, kako lahko uporabite nove sloge preverjanja:
<divrazred="skupina obrazcev">
<oznakaza="exampleInputPassword1">Geslooznaka>
<vnosvrsta="geslo"razred="nadzor obrazca je neveljaven"id="exampleInputPassword1"rezervirano mesto="Geslo"potrebno>
<divrazred="neveljavna povratna informacija"> Vnesite veljavno geslo. div>
div>Opazite, kako .is-neveljaven razred označuje, da je vnosno polje neveljavno, in .invalid-feedback razred prikaže sporočilo uporabniku.
S temi novimi slogi je lažje kot kdaj koli prej ustvariti dostopne in dosledne obrazce za vaše spletno mesto ali aplikacijo.
Razburljive izboljšave v Bootstrap 5.3.0
Bootstrap 5.3.0 je pomembna posodobitev priljubljenega ogrodja CSS, ki v tabelo prinaša več novih funkcij in izboljšav. Na voljo vam je veliko novih orodij, ki vam bodo pomagala pri izdelavi boljših spletnih mest in aplikacij, od preklopa temnega načina do pripomočkov za velikost pisave in pripomočkov za žleb.
