Uključnica u Bootstrap - Primjeri za implementaciju potvrdnog okvira u sustavu Bootstrap

• Uvod u potvrdni okvir u programu za pokretanje računala
• Primjer potvrdnog okvira 1
• Primjer potvrdnog okvira 2

Uvod u potvrdni okvir u programu za pokretanje računala

Bootstrap je koristio mnoge tipke jednim klikom, ali ponekad moramo odabrati opciju. Opcija odabira ima dva načina: jedan je gumb s gumbom, a drugi za potvrdni okvir. Radio gumb ima samo jednu mogućnost biranja od drugih. U bilo kojem stanju trebamo odabrati više opcija koja djeluje na vrijeme. Uključnica ima više opcija koje možete odabrati između mnogih opcija. Kvačica za odabir koristi se za odabir opcija u više izbora klikom na potvrdni okvir. Upotreba gumba s potvrdnim okvirima je pitanja s više izbora u ispitu kada pitanje ima više odgovora na jedno pitanje. Bootstrap ima vlastitu klasu gumba za potvrdu, vidjet ćete u nastavku.

Primjeri za implementaciju potvrdnog okvira u sustavu Bootstrap

Korisnici mogu razumjeti kako implementirati potvrdni okvir i rad ovih gumba. Ispod su primjeri za implementaciju potvrdnog okvira u Boostrapu:

1. Okomiti potvrdni okvir
2. Inline potvrdni okvir

1. Vertikalni potvrdni okvir

Primjer vertikalne potvrdne potvrde dat je u sljedećem.

Kodirati:



Bootstrap Example vertical checkbox





Primjer potvrdnog okvira 1

Kojih je sedam čuda na sljedećem popisu?

Taj Mahal

Egipatska piramida

Londonski most

Eiffelov toranj

Izlaz:

Opis:

• Možete vidjeti gornji primjer vertikalnog potvrdnog okvira. Ovo je zadani potvrdni okvir i ne treba nikakva posebna klasa ili entitet.
• Sva cjelina oblika dolazi vertikalno jedan po jedan.
• To se uglavnom koristi u ispitima sa višestrukim izborom kako bi se jasno znale opcije i nisu brkale potvrdne okvire i oznake. Svi koriste klasu potvrdnog okvira s naljepnicom. Za pitanje koristi entitet stavka

  ,

• Možete kliknuti na potvrdni okvir, nakon što kliknete na gumb potvrdni gumb postane vidljiv.

2. Inline potvrdni okvir

Primjer Inline potvrdnog okvira dat je u sljedećem.

Kodirati:



Bootstrap Example inline checkbox





Primjer potvrdnog okvira 2

Hobiji:
slikarstvo

ples

čitanje

Izlaz:

Opis:

• Gornji primjer je ugrađeni potvrdni okvir. Moramo upotrijebiti klasu forme-inline-a za druge osobe koje čine entitet koji prikazuje inline u obliku.
• Za inline okvir za potvrdu potreban je klasni potvrdni okvir sa svim oznakama.
• Ako želite koristiti potvrdni okvir u bilo kojem obliku s drugim ulazima, također je to korisno ako je ugrađeni potvrdni okvir koristan.
• Svi potvrdni okvir dolazi u jednom retku.
• Možete kliknuti na potvrdni okvir, nakon što kliknete na gumb potvrdni gumb postane vidljiv.

Kvačica pomoću gumba

Checkbox u prtljažniku također je radio s gumbima nekih razreda kako bi izgledali više stilski i elegantno. Klasa gumba-skupina-prebacivanje, klasa gumba mora se koristiti u, odnosno. Uz klasu prebacivanja skupina gumba, data-toggle = klasa "gumbi" također je potrebna u obrascu. U vrsti mora biti potvrdni okvir za rad kao potvrdni okvir. Pogledajmo nekoliko primjera kako bismo razumjeli više o prebacivanju u potvrdni okvir pomoću bootstrapa.

Kodirati:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Izlaz:

Opis:

• Za ovaj primjer, koristili smo primarni gumb, ali bilo koji se gumb može upotrijebiti za naplatu, ali "automatsko dovršavanje" mora biti isključeno da ne bi spremili dodatne podatke.
• Ako korisnik pritisne gumb, tada se automatski bira kao opcija, a u preklopnom gumbu korisnik može odabrati više opcija samo klikom na gumbe.
• Ovdje imamo četiri mogućnosti izbora jezika, korisnici mogu birati više jezika.
• class = 'btn-group-toggle' koristi se za stil unosa obrasca.
• Budući da ovo prebacivanje podataka, JavaScript omogućuje prebacivanje tipki na način tako da se može protumačiti aktivni i neaktivni način rada.

Upotreba aktivne tipke potvrdnog okvira u programu za pokretanje računala

Ako se aktivna klasa korisnika doda na gumb, ovaj gumb se automatski provjerava i korisnici imaju preostale mogućnosti izbora. Ovim gumbom se mijenja boja kako bi se dobio aktivirani znak.

Pogledajmo sljedeći primjer:

Kodirati:


Languages