Pole wyboru w Bootstrap - Przykłady implementacji pola wyboru w Bootstrap

• Wprowadzenie do Checkbox w Bootstrap
• Pole wyboru Przykład 1
• Pole wyboru Przykład 2

Wprowadzenie do Checkbox w Bootstrap

Bootstrap używał wielu przycisków jednym kliknięciem, ale czasami musimy wybrać opcję. Wybór opcji ma dwa sposoby: jeden jest przyciskiem opcji, a drugi jest polem wyboru. Przycisk opcji ma tylko jedną opcję do wyboru spośród innych. W każdych warunkach musimy wybrać więcej niż jedną opcję, która działa pole wyboru czasu. Pole wyboru ma wiele opcji do wyboru spośród wielu opcji. Pole wyboru służy do wybierania opcji z wieloma opcjami poprzez kliknięcie pola wyboru. Użycie przycisków wyboru to pytania wielokrotnego wyboru na egzaminie, gdy pytanie ma wiele odpowiedzi na jedno pytanie. Bootstrap ma własną klasę przycisku pola wyboru, zobaczysz poniżej.

Przykłady implementacji pola wyboru w Bootstrap

Użytkownicy mogą zrozumieć, jak zaimplementować pole wyboru i działanie tych przycisków. Poniżej znajdują się przykłady implementacji pola wyboru w Boostrap:

1. Pionowe pole wyboru
2. Wbudowane pole wyboru

1. Pionowe pole wyboru

Przykład pionowego pola wyboru podano poniżej.

Kod:



Bootstrap Example vertical checkbox





Pole wyboru Przykład 1

Jakie są siedem cudów na poniższej liście?

Taj Mahal

Piramida Egipska

most Londyński

Wieża Eiffla

Wynik:

Opis:

• Możesz zobaczyć powyższy przykład pionowego pola wyboru. Jest to domyślne pole wyboru i nie wymaga żadnej specjalnej klasy ani encji.
• Wszystkie elementy formy są umieszczane pionowo jeden po drugim.
• Jest to najczęściej używane w testach wielokrotnego wyboru, aby wyraźnie poznać opcje i nie mylić ich z polem wyboru i etykietą. Każdy korzysta z klasy pola wyboru z etykietą. Do pytania używa encji akapitu

  .

• Możesz kliknąć przycisk pola wyboru, po kliknięciu przycisku znacznik wyboru staje się widoczny.

2. Wbudowane pole wyboru

Przykład wbudowanego pola wyboru podano poniżej.

Kod:



Bootstrap Example inline checkbox





Pole wyboru Przykład 2

Zainteresowania:
obraz

taniec

czytanie

Wynik:

Opis:

• Powyższy przykład to wbudowane pole wyboru. Musimy użyć klasy form-inline, aby inni tworzyli encję, która pokazuje inline w formie.
• W przypadku wbudowanego pola wyboru klasowe pole wyboru wymagane w każdej etykiecie.
• Jeśli chcesz użyć pola wyboru w dowolnej formie z innymi danymi wejściowymi, to również przydatne jest wbudowane pole wyboru.
• Wszystkie pola wyboru znajdują się w jednym wierszu.
• Możesz kliknąć przycisk pola wyboru, po kliknięciu przycisku znacznik wyboru staje się widoczny.

Pole wyboru za pomocą przycisków

Pole wyboru w bootstrap również działało z przyciskami niektórych klas, aby wyglądać bardziej stylowo i elegancko. Klasa przełącznik-grupa-przełączanie, klasa przycisku musi być używana odpowiednio w i. W przypadku klasy button-group-toggle klasa data-toggle = 'buttons' jest również niezbędna w formularzu. W polu typ musi być polem wyboru, aby działał jako pole wyboru. Zobaczmy kilka przykładów, aby dowiedzieć się więcej o przełączaniu w polu wyboru za pomocą bootstrap.

Kod:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Wynik:

Opis:

• W tym przykładzie użyliśmy przycisku głównego, ale do kasy można użyć dowolnego przycisku, ale „autouzupełnianie” musi być wyłączone, aby nie zapisywać dodatkowych danych.
• Jeśli użytkownik naciśnie przycisk, zostanie on automatycznie wybrany jako opcja, aw przycisku przełączania użytkownik może wybrać więcej opcji, klikając przyciski.
• Tutaj mamy cztery opcje wyboru języków, użytkownicy mogą wybrać wiele języków.
• class = 'btn-group-toggle' służy do stylu wprowadzania danych z formularza.
• Ponieważ to przełączanie danych, JavaScript pozwala na przełączanie na przyciski, dzięki czemu można interpretować tryb aktywny i nieaktywny.

Korzystanie z aktywnego przycisku pola wyboru w Bootstrap

Jeśli klasa aktywna użytkownika dodaje przycisk, przycisk ten jest automatycznie sprawdzany, a użytkownicy mają pozostałe opcje do wyboru. Ten przycisk zmienia kolor, aby uzyskać aktywowany znak.

Zobaczmy następujący przykład:

Kod:


Languages