Jelölőnégyzet a Bootstrap-ban Példák a jelölőnégyzet bevezetésére a Bootstrap alkalmazásban

• Bevezetés a Bootstrap jelölőnégyzetébe
• 1. jelölőnégyzet
• Jelölőnégyzet 2. példa

Bevezetés a Bootstrap jelölőnégyzetébe

A Bootstrap sok gombot használt egyetlen kattintással, de néha ki kell választanunk egy lehetőséget. Az opció választásának kétféle módja van: az egyik a választógomb, a másik pedig a jelölőnégyzet. A Rádió gombnak csak egy lehetősége van a többiek közül választani. Bármilyen körülmények között egynél több lehetőséget kell választanunk, azaz az idő jelölőnégyzet működését. A jelölőnégyzetnek több lehetőség közül választhat a sok lehetőség közül. A jelölőnégyzet segítségével több választási lehetőség közül választhat, ha rákattint a jelölőnégyzetre. A jelölőnégyzet gombjainak feleletválasztós kérdése van a vizsga során, amikor a kérdésre egy kérdésre több válasz van. A Bootstrapnek megvan a saját jelölőnégyzetének osztálya, alább láthatja.

Példák a jelölőnégyzet bevezetésére a Bootstrap alkalmazásban

A felhasználók megérthetik a jelölőnégyzet bevezetését és a gombok működését. Az alábbiakban bemutatjuk a jelölőnégyzet beépítésének példáit a Boostrap-ban:

1. Függőleges jelölőnégyzet
2. Inline jelölőnégyzet

1. Függőleges jelölőnégyzet

A függőleges jelölőnégyzet példája az alábbiakban található.

Kód:



Bootstrap Example vertical checkbox





1. jelölőnégyzet

Melyek a csodák a következő listában?

Taj Mahal

Egyiptomi piramis

London-híd

Eiffel-torony

Kimenet:

Leírás:

• Láthatja a függőleges jelölőnégyzet fenti példáját. Ez egy alapértelmezett jelölőnégyzet, és nincs szüksége külön osztályra vagy entitásra.
• Minden forma entitás függőlegesen jön be egyenként.
• Ezt leginkább a feleletválasztós kérdővizsgákban használják, hogy a lehetőségeket egyértelműen megismerjék, és nem szabad összekeverni a jelölőnégyzettel és a címkével. Mindenki használja a jelölőnégyzet osztályát. A kérdéshez használja a bekezdés entitást

  .

• Kattintson a jelölőnégyzet gombjára, miután rákattint a jelölőnégyzetre, láthatóvá válik.

2. Inline jelölőnégyzet

Az inline jelölőnégyzet példája az alábbiakban található.

Kód:



Bootstrap Example inline checkbox





Jelölőnégyzet 2. példa

hobbi:
festmény

tánc

olvasás

Kimenet:

Leírás:

• A fenti példa egy beépített jelölőnégyzet. Használnunk kell az in-inline osztályt mások számára olyan entitás létrehozásához, amely formában inline-et mutat.
• Az inline jelölőnégyzethez minden jelölésnél kötelező az osztály jelölőnégyzet-inline használata.
• Ha bármilyen formában szeretné használni a jelölőnégyzetet más bemenetekkel, akkor is hasznos lehet a beépített jelölőnégyzet.
• Az összes jelölőnégyzet egy sorban van.
• Kattintson a jelölőnégyzet gombjára, miután rákattint a jelölőnégyzetre, láthatóvá válik.

Jelölőnégyzet gombokkal

A bootstrap jelölőnégyzete néhány osztályhoz tartozó gombokkal is kidolgozott, hogy formájuk stílusosabb és elegánsabb legyen. Osztály gomb-csoport-váltás, gomb osztály kell használni, illetve, illetve. A gomb-csoport-váltás osztály mellett az adat-váltás = „gombok” osztályra is szükség van az űrlapban. A mezőben a típusnak jelölőnégyzetnek kell lennie, ha a jelölőnégyzetet szeretné használni. Nézzünk meg néhány példát, hogy jobban megértsük a jelölőnégyzet bekapcsolását a bootstrap használatával.

Kód:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Kimenet:

Leírás:

• Ebben a példában az elsődleges gombot használtuk, de bármelyik gomb felhasználható a pénztárhoz, de az 'automatikus kiegészítés' funkciónak ki kell kapcsolva, hogy ne mentsenek további adatokat.
• Ha a felhasználó megnyomja a gombot, akkor automatikusan opcióvá válik, és a váltógombban a felhasználó további lehetőségeket választhat, csak a gombokra kattintva.
• Itt négy lehetőségünk van a nyelvek kiválasztására, a felhasználók több nyelvet választhatnak.
• class = 'btn-group-toggle' az űrlap bevitelének stílusához használható.
• Mivel ez az adatváltás lehetővé teszi a Java váltást a gombokra, így az Aktív és nem aktív mód értelmezhető.

A jelölőnégyzet aktív gombjának használata a Bootstrap alkalmazásban

Ha a felhasználói aktív osztály hozzáadja a gombot, akkor ezt a gombot automatikusan ellenőrzi, és a felhasználóknak lehetősége van még választani. Ez a gomb megváltoztatja a színét az aktivált jel eléréséhez.

Lássuk a következő példát:

Kód:


Languages