Пример перекидного переключателя в Bootstrap 5

В сегодняшнем уроке мы создадим тумблерный переключатель с помощью bootstrap 5. Компонент тумблера используется для выбора булевого значения on/off, или активного & неактивного значения. Для переключения мы не будем использовать никаких пользовательских классов css или других библиотек css. Мы создадим переключатель включения/выключения разных цветов. Сначала вам нужно настроить проект bootstrap 5. Вы можете использовать cdn или прочитать статью ниже.

посмотреть

Как установить и настроить bootstrap 5

Пример тумблера на Bootstrap 5

1) Простой тумблер Bootstrap 5.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

2) Многоцветный тумблер Bootstrap 5.

<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-warning border border-warning" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Yellow switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-success border border-success" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Green switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-danger border border-danger" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Red switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-dark border border-dark" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Drak switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Blue switch checkbox input</label>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

3) Тумблер отключения Bootstrap 5.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Читайте также

Пример темного режима Bootstrap 5
Bootstrap 5 Пример загрузки файлов
Bootstrap 5 Пример разделительной линии
Bootstrap 5 Пример страницы с формой входа
Bootstrap 5 Градиентная кнопка Пример
Bootstrap 5 Слайдер карточек с Splide JS Пример
Bootstrap 5 Отзывчивая секция нижнего колонтитула Пример

Оцените статью
Procodings.ru
Добавить комментарий