Перейти к основному содержанию

Сhecks

Создавайте согласованные кроссбраузерные и кросс-платформенные флажки и радио с помощью нашего полностью переписанного компонента проверки.

Содержание

Approach

Флажки и радио в браузере по умолчанию заменяются с помощью .form-check ряда классов для обоих типов ввода, которые улучшают макет и поведение их HTML-элементов, что обеспечивает большую настройку и согласованность между браузерами. Флажки предназначены для выбора одного или нескольких вариантов в списке, а радиостанции - для выбора одного варианта из многих.

Структурно наши <input> и <label> являются родственными элементами в отличие от элемента <input>внутри a <label>. Это немного более многословным , как вы должны указать id и for атрибуты соотносить <input> и <label>. Мы используем родственный селектор ( ~) для всех наших <input> состояний, например :checked или :disabled. В сочетании с .form-check-label классом мы можем легко стилизовать текст для каждого элемента на основе <input> состояния.

В наших проверках используются пользовательские значки Bootstrap для обозначения отмеченных или неопределенных состояний.

Checks

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Indeterminate (неопределенный)

Чекбоксы могут использовать :indeterminate псевдокласс при ручной установке через JavaScript (нет доступного атрибута HTML для его указания).

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Disabled

Добавьте disabledатрибут, и для связанных <label> автоматически будет установлен стиль, соответствующий более светлому цвету, чтобы помочь указать состояние ввода.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Radios

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Disabled

Добавьте disabled атрибут, и для связанных <label> автоматически будет установлен стиль, соответствующий более светлому цвету, чтобы помочь указать состояние ввода.

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Switches (переключатели)

Переключатель имеет разметку настраиваемого флажка, но использует .form-switch класс для визуализации переключателя. Коммутаторы также поддерживают disabled атрибут.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<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>

По умолчанию (stacked)

По умолчанию любое количество флажков и радиомодулей, которые являются ближайшими родственниками, будут располагаться вертикально друг над другом и соответствующим образом разнесены .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline (в линию)

Сгруппируйте флажки или радиомодули в одном горизонтальном ряду, добавив .form-check-inline к любому .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Without labels

Не используйте перенос .form-checkдля флажков и радиомодулей, на которых нет текста метки. Не забудьте по-прежнему обозначать вспомогательные технологии (например, использование aria-label) в какой-то форме .

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Toggle buttons (кнопки переключения)

Кнопки переключения флажков

Стили .btn могут быть применены к <label>, чтобы обеспечить переключение кнопки стиля флажка. Добавьте вход с .btn-check классом в качестве предыдущего брата, чтобы переключить состояние ввода.

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Радио кнопки переключения

При необходимости кнопки переключения могут быть сгруппированы в группу кнопок .

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-secondary" for="option1">Checked</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-secondary" for="option2">Radio</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
  <label class="btn btn-secondary" for="option3">Radio</label>
</div>

Outlined styles (обрисованные стили)



<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
  <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

  <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
  <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
</div>