Отметка в Bootstrap - Примери за внедряване на квадратчето за отметка в Bootstrap

• Въведение в полето за отметка в Bootstrap
• Пример за отметка 1
• Пример за отметка 2

Въведение в полето за отметка в Bootstrap

Bootstrap използва много бутони с едно щракване, но понякога трябва да изберем опция. Изборът на опция има два начина: един е бутон за радио, а друг е квадратче за отметка. Радио бутона има само една опция за избор от други. Във всяко състояние трябва да изберем повече от една опция, която да работи с отметка за време. В квадратчето има няколко опции, които можете да избирате от многото опции. Отметката се използва за избор на опции в множество варианти с щракване върху квадратчето. Използването на бутоните за отметка е въпрос с множество възможности за избор в изпита, когато въпросът има множество отговори на един въпрос. Bootstrap има собствен клас бутон за отметка, който ще видите по-долу.

Примери за внедряване на квадратчето за отметка в Bootstrap

Потребителите могат да разберат как да реализират отметка и работата на тези бутони. По-долу са примерите за прилагане на отметка в Boostrap:

1. Вертикална отметка
2. Inline отметка

1. Вертикална отметка

Пример за вертикална отметка е даден в следното.

Код:



Bootstrap Example vertical checkbox





Пример за отметка 1

Кои са седем чудеса в следващия списък?

Тадж Махал

Египетска пирамида

лондонския мост

Айфеловата кула

изход:

Описание:

• Можете да видите горния пример за вертикалното квадратче. Това е отметка по подразбиране и не се нуждае от специален клас или образувание.
• Всички форми образуват вертикално един по един.
• Това се използва най-вече при изпитите с множество възможности за избор, за да се знаят ясно опциите и да не се бърка с квадратчето и етикета. Всеки използва класа за отметка с етикет. За въпрос използва сумата на абзаца

  ,

• Можете да щракнете върху бутона за отметка, след като щракнете върху бутона отметка стане видима.

2. Вградена отметка

Пример за Inline Checkbox е даден в следното.

Код:



Bootstrap Example inline checkbox





Пример за отметка 2

хобита:
живопис

танцуване

четене

изход:

Описание:

• Горният пример е вградено квадратче. Необходимо е да използваме клас-inline клас за други от образуване на образувание, което показва inline във форма.
• За полето за вграждане се изисква класовата отметка за вграждане с всеки етикет.
• Ако искате да използвате квадратчето под каквато и да е форма с други входни данни, също така, че време, вградено квадратче, е полезно.
• Всички квадратчета са в един ред.
• Можете да щракнете върху бутона за отметка, след като щракнете върху бутона отметка стане видима.

Отметка Използване на бутони

Отметката в bootstrap също се справи с бутоните с някои класове, за да изглежда по-стилна и елегантна по форма. Клас бутон-група-превключване, клас бутон трябва да се използва в и съответно. С клавиша за превключване на групата бутони, във формата е необходим и клас-данни = „бутони“. В полето типът трябва да е квадратче за отметка за работа като отметка. Нека да видим няколко примера, за да разберем повече за превключването във квадратчето с bootstrap.

Код:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




изход:

Описание:

• За този пример използвахме основния бутон, но всеки бутон може да се използва за проверка, но „автоматично довършване“ трябва да е изключено, за да не се запишат допълнителни данни.
• Ако потребителят натисне бутона, той автоматично се избира като опция и в бутона за превключване, потребителят може да избере още опции, само като натисне бутони.
• Тук имаме четири възможности за избор на езици, потребителите могат да избират няколко езика.
• class = 'btn-group-toggle' се използва за стил на въвеждане на формата.
• Тъй като това превключване на данни, JavaScript позволява Превключване на бутоните, така че Активен и неактивен режим може да се интерпретира.

Използване на активния бутон за отметка в Bootstrap

Ако потребителският активен клас добави бутон, този бутон автоматично се проверява и потребителите имат други възможности да изберат. Този бутон променя цвета, за да получи активирания знак.

Нека видим следния пример:

Код:


Languages