Zaškrtávací políčko v Bootstrapu - Příklady implementace zaškrtávacího políčka v Bootstrapu

Úvod do zaškrtávacího políčka v Bootstrapu

Bootstrap používal mnoho tlačítek jedním kliknutím, ale někdy musíme vybrat možnost. Výběr možnosti má dva způsoby, jedním je přepínač a druhým je zaškrtávací políčko. Přepínač má pouze jednu možnost, kterou si můžete vybrat od ostatních. V každém případě musíme vybrat více než jednu možnost, která je zaškrtávací políčko času funkční. Zaškrtávací políčko má několik možností na výběr z mnoha možností. Zaškrtávací políčko se používá k výběru možností ve více možnostech kliknutím na zaškrtávací políčko. Použití tlačítek zaškrtávacího políčka je při zkoušce otázkou s možností výběru, pokud má otázka na jednu otázku více odpovědí. Bootstrap má vlastní tlačítko zaškrtávacího políčka, uvidíte níže.

Příklady implementace zaškrtávacího políčka v Bootstrapu

Uživatelé mohou pochopit, jak implementovat zaškrtávací políčko a fungování těchto tlačítek. Níže uvádíme příklady implementace zaškrtávacího políčka v Boostrap:

1. Vertikální zaškrtávací políčko
2. Zaškrtávací políčko Inline

1. Vertikální zaškrtávací políčko

Příklad vertikálního zaškrtávacího políčka je uveden v následujícím textu.

Kód:



Bootstrap Example vertical checkbox





Zaškrtávací políčko Příklad 1

Které sedm divů je v následujícím seznamu?

Taj Mahal

Egyptská pyramida

londýnský most

Eiffelova věž

Výstup:

Popis:

• Můžete vidět výše uvedený příklad svislého zaškrtávacího políčka. Toto je výchozí zaškrtávací políčko a nevyžaduje žádnou speciální třídu nebo entitu.
• Všechny entity entity přicházejí vertikálně jeden po druhém.
• To se většinou používá při zkouškách otázek s výběrem odpovědí, aby byly možnosti jasně zřetelné a nebyly zaměněny se zaškrtávacím políčkem a štítkem. Každý používá třídu zaškrtávacího políčka se štítkem. Pro otázku se používá odstavec entity

  .

• Klepnutím na tlačítko zaškrtávacího políčka se po kliknutí na tlačítko zaškrtnutí zaškrtnutí zobrazí.

2. Zaškrtávací políčko Inline

Příklad zaškrtávacího políčka Inline je uveden v následujícím textu.

Kód:



Bootstrap Example inline checkbox





Zaškrtávací políčko Příklad 2

koníčky:
malování

taneční

čtení

Výstup:

Popis:

• Výše uvedený příklad je vložené zaškrtávací políčko. Potřebujeme použít třídu form-inline k tomu, aby ostatní vytvořili entitu, která ukazuje vloženou formu.
• U zaškrtávacího políčka inline je u všech štítků vyžadováno zaškrtávací políčko inline.
• Pokud chcete použít zaškrtávací políčko v jakékoli formě spolu s dalšími vstupy, je užitečné použít také vložené zaškrtávací políčko.
• Všechna zaškrtávací políčka jsou v jednom řádku.
• Klepnutím na tlačítko zaškrtávacího políčka se po kliknutí na tlačítko zaškrtnutí zaškrtnutí zobrazí.

Zaškrtávací políčko pomocí tlačítek

Zaškrtávací políčko v bootstrapu také s tlačítky s některými třídami vypadalo stylověji a elegantněji. Třída button-group-toggle, button button musí být použita v resp. U třídy button-group-toggle je ve formuláři také nutná třída data-toggle = 'buttons'. V poli musí být zaškrtávací políčko pro práci jako zaškrtávací políčko. Podívejme se na několik příkladů, abychom pochopili více o přepínání v zaškrtávacím políčku pomocí bootstrapu.

Kód:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Výstup:

Popis:

• V tomto příkladu jsme použili primární tlačítko, ale k pokladně lze použít kterékoli tlačítko, ale „autocomplete“ musí být vypnuto, aby se neuložila další data.
• Pokud uživatel stiskne tlačítko, je automaticky vybrána jako možnost a v přepínacím tlačítku si uživatel může vybrat více možností pouhým kliknutím na tlačítka.
• Zde máme čtyři možnosti výběru jazyků, uživatelé si mohou vybrat více jazyků.
• class = 'btn-group-toggle' se používá pro styl zadávání formuláře.
• Protože toto přepínání dat umožňuje JavaScript, přepíná se na tlačítka, takže lze interpretovat aktivní i neaktivní režim.

Použití aktivního tlačítka zaškrtávacího pole v Bootstrapu

Pokud uživatel aktivní třídu přidá do tlačítka, je toto tlačítko automaticky zaškrtnuto a uživatelé mají zbývající možnosti na výběr. Toto tlačítko mění barvu tak, aby získalo aktivovanou značku.

Uvidíme následující příklad:

Kód:


Languages