Поставити прапорець у Bootstrap - Приклади для встановлення прапорця в Bootstrap

• Введення в прапорець у Bootstrap
• Приклад 1
• Приклад 2 Приклад 2

Введення в прапорець у Bootstrap

Bootstrap використовував багато кнопок одним клацанням, але іноді нам потрібно вибрати варіант. Вибір варіанту має два способи: один - це перемикач, а інший - прапорець. Перемикач має лише один варіант вибору серед інших. У будь-яких умовах нам потрібно вибрати більше, ніж один варіант, який працює прапором часу. У прапорці є кілька варіантів, які можна вибрати з багатьох варіантів. Прапорець використовується для вибору варіантів у кількох варіантах натисканням на прапорець. Використання кнопок прапорець - це запитання з численним вибором на іспиті, коли на запитання є кілька відповідей на одне питання. Bootstrap має власний клас кнопки прапорців, ви побачите нижче.

Приклади для встановлення прапорця в Bootstrap

Користувачі можуть зрозуміти, як реалізувати прапорець та роботу цих кнопок. Нижче наведено приклади впровадження прапорця в Boostrap:

1. Вертикальний прапорець
2. Вбудований прапорець

1. Вертикальний прапорець

Приклад вертикальної прапорці наведено нижче.

Код:



Bootstrap Example vertical checkbox





Приклад 1

Які сім чудес у наступному списку?

Тадж-Махал

Єгипетська піраміда

лондонський міст

Ейфелева вежа

Вихід:

Опис:

• Ви можете побачити наведений вище приклад вертикальної прапорці. Це прапорець за замовчуванням і йому не потрібен спеціальний клас чи сутність.
• Усі сукупності форм надходять вертикально по черзі.
• Це здебільшого використовується в екзаменах з множинним вибором, щоб чітко знати варіанти, а не плутати їх з прапорцями та етикетками. Кожен використовує клас прапорця з міткою. Для запитання використовується сутність абзацу

  .

• Ви можете натиснути кнопку прапорця, після натискання кнопки галочка стане видимою.

2. Вбудований прапорець

Приклад Inline Checkbox наведено нижче.

Код:



Bootstrap Example inline checkbox





Приклад 2 Приклад 2

захоплення:
живопис

танці

читання

Вихід:

Опис:

• Наведений вище приклад - вбудований прапорець. Нам потрібно використовувати клас вбудованої форми для інших, щоб створити сутність, яка показує inline у ​​формі.
• Для вбудованого прапорець потрібний прапорець клавіші-вставки з кожною міткою.
• Якщо ви хочете використовувати прапорець у будь-якій формі разом з іншими входами, також цей час корисний вбудований прапорець.
• Усі прапорці поставляються в один рядок.
• Ви можете натиснути кнопку прапорця, після натискання кнопки галочка стане видимою.

Поставте прапорець за допомогою кнопок

Поставити прапорець у завантажувальній програмі також розроблено кнопки з деякими класами, щоб виглядати більш стильно та елегантно за формою. Клас кнопка-група-перемикач, клас кнопок має використовуватися в і відповідно. З класом-кнопка-перемикання класів, у формі також необхідний клас даних-toggle = "кнопки". У полі "Тип" повинен бути прапорець для роботи як прапорець. Давайте подивимось кілька прикладів, щоб зрозуміти докладніше про перемикання в прапорець за допомогою bootstrap.

Код:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Вихід:

Опис:

• У цьому прикладі ми використовували основну кнопку, але будь-яку кнопку можна використовувати для оформлення замовлення, але "автозаповнення" має бути вимкнено, щоб не зберігати зайві дані.
• Якщо користувач натискає кнопку, то вона автоматично вибирається як опція, а в кнопці перемикання користувач може вибрати більше варіантів, просто натиснувши на кнопки.
• Тут у нас є чотири варіанти вибору мов, користувачі можуть вибирати кілька мов.
• class = 'btn-group-toggle' використовується для стилю введення форми.
• Оскільки це перемикання даних, JavaScript дозволяє перемикатися на кнопки, так що активний та неактивний режим можна інтерпретувати.

Використання активної кнопки прапорець у завантажувальній системі

Якщо активний користувач класу додає кнопку, то ця кнопка автоматично перевіряється, і користувачі мають інші варіанти вибору. Ця кнопка змінює колір, щоб отримати активований знак.

Давайте подивимось наступний приклад:

Код:


Languages