Флажок в Bootstrap - Примеры реализации флажка в Bootstrap

• Введение в флажок в Bootstrap
• Флажок Пример 1
• Флажок Пример 2

Введение в флажок в Bootstrap

Bootstrap использовал много кнопок одним щелчком мыши, но иногда нам нужно выбрать опцию. Выбор опции имеет два способа: один - переключатель, а другой - флажок. Радиокнопка имеет только один вариант выбора из других. В любом случае нам нужно выбрать более одной опции, которая работает по времени. Флажок имеет несколько вариантов выбора из множества вариантов. Флажок используется для выбора параметров в нескольких вариантах с помощью щелчка на флажок. Использование кнопок-флажков - это вопросы с несколькими вариантами ответов на экзамене, когда у вопроса есть несколько ответов на один вопрос. Bootstrap имеет собственный класс кнопки-флажка, вы увидите ниже.

Примеры реализации флажка в Bootstrap

Пользователи могут понять, как установить флажок и как работают эти кнопки. Ниже приведены примеры реализации флажка в Boostrap:

1. Вертикальный флажок
2. Встроенный флажок

1. Вертикальный флажок

Пример вертикального флажка приведен ниже.

Код:



Bootstrap Example vertical checkbox





Флажок Пример 1

Какие семь чудес в следующем списке?

Тадж Махал

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

Лондонский мост

Эйфелева башня

Выход:

Описание:

• Вы можете увидеть приведенный выше пример вертикального флажка. Это флажок по умолчанию и не требует никакого специального класса или объекта.
• Вся сущность формы входит вертикально один за другим.
• Это главным образом используется в экзаменах с несколькими вариантами ответов, чтобы четко знать варианты и не путать с флажком и меткой Каждый использует класс флажок с меткой. Для вопроса используется параграф сущности

  ,

• Вы можете нажать на кнопку-флажок, после нажатия на кнопку флажок станет видимым.

2. Встроенный флажок

Пример встроенного флажка приведен ниже.

Код:



Bootstrap Example inline checkbox





Флажок Пример 2

хобби:
картина

танцы

чтение

Выход:

Описание:

• Приведенный выше пример является встроенным флажком. Нам нужно использовать класс form-inline, чтобы другие формировали сущность, которая показывает inline в форме.
• Для встроенного флажка класс checkbox-inline требуется с каждой меткой.
• Если вы хотите использовать флажок в любой форме с другими входными данными, также в этот раз полезен встроенный флажок.
• Все флажки поставлены в одну строку.
• Вы можете нажать на кнопку-флажок, после нажатия на кнопку флажок станет видимым.

Флажок с помощью кнопок

Флажок в начальной загрузке также работает с кнопками с некоторыми классами, чтобы выглядеть более стильно и элегантно по форме. Класс button-group-toggle, класс кнопок должен использоваться в и соответственно. С классом button-group-toggle класс data-toggle = 'buttons' также необходим в форме. В, тип должен быть флажок для работы в качестве флажка. Давайте посмотрим несколько примеров, чтобы понять больше о переключении в чекбокс с использованием начальной загрузки.

Код:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Выход:

Описание:

• В этом примере мы использовали основную кнопку, но любую кнопку можно использовать для извлечения, но «автозаполнение» должно быть отключено, чтобы не сохранять дополнительные данные.
• Если пользователь нажимает на кнопку, то она автоматически выбирается в качестве параметра, а в переключателе пользователь может выбрать дополнительные параметры, просто нажимая кнопки.
• Здесь у нас есть четыре варианта выбора языков, пользователи могут выбрать несколько языков.
• class = 'btn-group-toggle' используется для стиля ввода формы.
• Поскольку это переключение данных, JavaScript позволяет переключаться между кнопками, чтобы можно было интерпретировать активный и не активный режим.

Использование активной кнопки флажка в Bootstrap

Если пользовательский активный класс добавляет кнопку, то эта кнопка автоматически проверяется, и у пользователей есть оставшиеся варианты выбора. Эта кнопка меняет цвет, чтобы получить активированный знак.

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

Код:


Languages