Potrditveno polje v Bootstrapu - Primeri za uveljavitev potrditvenega polja v začetnem okolju

• Uvod v potrditveno polje v programu Bootstrap
• Primer 1
• Primer 2

Uvod v potrditveno polje v programu Bootstrap

Bootstrap je z enim klikom uporabil veliko gumbov, včasih pa moramo izbrati možnost. Izbira možnosti ima dva načina, eden je izbirni gumb, drugi pa potrditveno polje. Radijski gumb ima med drugimi samo eno možnost. V vsakem primeru moramo izbrati več možnosti, ki deluje kot časovna potrditev. Potrditveno polje ima več možnosti, med katerimi lahko izbirate med številnimi možnostmi. Kvačica se uporablja za izbiro možnosti v več možnostih s klikom na potrditveno polje. Uporaba gumbov v poljih je vprašanja z več izbire na izpitu, kadar ima vprašanje več odgovorov na eno vprašanje. Bootstrap ima svoj razred gumba za potrditveno polje, ki ga boste videli spodaj.

Primeri za uveljavitev potrditvenega polja v začetnem okolju

Uporabniki lahko razumejo, kako implementirati potrditveno polje in delovanje teh gumbov. Spodaj so primeri za implementacijo potrditvenega polja v Boostrapu:

1. Navpično polje
2. Vključeno polje

1. Vertikalno potrditveno polje

Primer navpičnega polja je naveden v nadaljevanju.

Koda:



Bootstrap Example vertical checkbox





Primer 1

Katerih je sedem čudes na naslednjem seznamu?

Tadž Mahal

Egipčanska piramida

londonski most

Eifflov stolp

Izhod:

Opis:

• Ogledate si lahko zgornji primer navpičnega polja. To je privzeto potrditveno polje in ne potrebuje nobenega posebnega razreda ali entitete.
• Vse enote obrazca so navpično ena za drugo.
• To se večinoma uporablja pri izpitih z večkratnimi vprašanji, da se jasno poznajo možnosti in ne zamenjajo s potrditvenim poljem in nalepko. Vsak uporablja razred potrditvenega polja z nalepko. Za vprašanja uporablja entiteto odstavka

  .

• Če kliknete na gumb, kliknete gumb, da postane vidna.

2. Vključeno potrditveno polje

Primer vdelanega potrditvenega polja je naveden v nadaljevanju.

Koda:



Bootstrap Example inline checkbox





Primer 2

hobiji:
slika

ples

branje

Izhod:

Opis:

• Zgornji primer je vmesno potrditveno polje. Razred vdelanega obrazca moramo uporabiti za druge, ki tvorijo entiteto, ki prikazuje inline v obliki.
• Za vdelano potrditveno polje je za vsako nalepko potrebno vpisno polje v razredu.
• Če želite uporabiti potrditveno polje v kakršni koli obliki z drugimi vnosi, tudi takrat, če je uporabno vmesno polje.
• Vsa potrditvena polja so v eni vrstici.
• Če kliknete na gumb, kliknete gumb, da postane vidna.

Potrditveno polje Uporaba gumbov

Checkbox v prtljažniku se je prav tako lotil gumbov z nekaterimi razredi, da so videti bolj stilsko in elegantno. Preklopi na gumb gumba-skupina, razred gumbov se mora uporabljati v oz. Pri razredu preklop-skupina gumbov je v obrazcu potreben tudi razred podatkov-toggle = 'gumbi'. V polju mora biti vrsta potrditvenega polja, če želite delovati kot potrditveno polje. Oglejmo si nekaj primerov, če želite razumeti več o preklopu v potrditvenem polju z uporabo zagonske strani.

Koda:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Izhod:

Opis:

• V tem primeru smo uporabili primarni gumb, vendar se lahko za preklic uporabi kateri koli gumb, vendar mora biti »samodejno dokončanje« izključeno, da ne shranite dodatnih podatkov.
• Če uporabnik pritisne na gumb, se samodejno izbere kot možnost in v preklopnem gumbu lahko uporabnik izbere več možnosti samo s klikom na gumbe.
• Tu imamo štiri možnosti izbire jezikov, uporabniki lahko izbirajo več jezikov.
• class = 'btn-group-toggle' se uporablja za slog vnosa obrazca.
• Ker ta preklop podatkov omogoča JavaScript, da preklopi na gumbe, tako da je mogoče razlagati aktivni in neaktivni način.

Uporaba gumba Aktivno polje v potrditvenem programu Bootstrap

Če uporabniški aktivni razred doda gumb, potem se ta gumb samodejno preveri in uporabniki lahko izberejo še druge možnosti. Ta gumb spremeni barvo, da dobi aktiviran znak.

Poglejmo naslednji primer:

Koda:


Languages