Чекбоксы и радиокнопки
Создавайте кросс-браузерные и кросс-платформенные чекбоксы и радиокнопки с нашим полностью переписанными компонентами.
Подход
Чекбоксы и радиокнопки в браузере по умолчанию теперь заменяются с помощью .form-check , цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а радиокнопки — одного.
Структурно наши и являются одноуровневыми элементами, в отличие от внутри . Это немного более сложно, так как вы должны указать id и for , чтобы связать и . Мы используем родственный селектор ( ~ ) для всех наших состояний , например: :checked или :disabled . В сочетании с классом .form-check-label мы можем легко стилизовать текст для каждого элемента на основе состояния .
В наших проверках используются пользовательские значки Bootstrap для обозначения отмеченных или неопределенных состояний.
Чекбокс
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 , заданный вручную через 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 в и стандартный индикатор и лейбл-описание автоматически соответственно стилизуются.
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>Радиокнопки
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 и для связанных тегов будет автоматически применен стиль, соответствующий более светлому цвету, чтобы обозначить соответствующее состояние ввода.
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>Выключатели
Выключатель имеет разметку пользовательского флажка, но использует класс .custom-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 inputlabel> 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 inputlabel> 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 inputlabel> 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 inputlabel> div>По умолчанию (расположенные по вертикали)
По умолчанию, любое количество идущих один за другим чекбоксов и радиокнопок будет располагаться сверху вниз, а класс .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>Строчные
Группируйте чекбоксы или радиокнопки по одной горизонтальной линии, добавив класс .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">1label> 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">2label> 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">1label> 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">2label> 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>Без ярлыков
Не используйте обертку .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>Кнопки переключения
Создавайте чекбоксы и радиокнопки, используя стили .btn вместо .form-check-label для элементов . При необходимости эти кнопки-переключатели можно сгруппировать в группу кнопок.
Кнопки переключения чекбоксов
input type="checkbox" class="btn-check" id="btn-check" autocomplete="off"> label class="btn btn-primary" for="btn-check">Single togglelabel>input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off"> label class="btn btn-primary" for="btn-check-2">Checkedlabel>input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled> label class="btn btn-primary" for="btn-check-3">Disabledlabel>Визуально эти кнопки переключения идентичны кнопкам переключения плагинов кнопок. Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмеченные» / «не отмеченные» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как кнопки переключения плагинов кнопок будут объявляется как «кнопка» / «кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя и от того, будет ли этот переключатель иметь смысл для пользователей, когда он объявлен как чекбокс или как фактическая кнопка.
Кнопки переключения радиокнопок
input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked> label class="btn btn-secondary" for="option1">Checkedlabel> input type="radio" class="btn-check" name="options" id="option2" autocomplete="off"> label class="btn btn-secondary" for="option2">Radiolabel> input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled> label class="btn btn-secondary" for="option3">Disabledlabel> input type="radio" class="btn-check" name="options" id="option4" autocomplete="off"> label class="btn btn-secondary" for="option4">Radiolabel>Стиль контура (рамки)
Поддерживаются различные варианты .btn , как например, в различных выделенных стилях.
input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off"> label class="btn btn-outline-primary" for="btn-check-outlined">Single togglelabel>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">Checkedlabel>br> 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 radiolabel> input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off"> label class="btn btn-outline-danger" for="danger-outlined">Danger radiolabel>Sass
Переменные
$form-check-input-width: 1em; $form-check-min-height: $font-size-base * $line-height-base; $form-check-padding-start: $form-check-input-width + .5em; $form-check-margin-bottom: .125rem; $form-check-label-color: null; $form-check-label-cursor: null; $form-check-transition: null; $form-check-input-active-filter: brightness(90%); $form-check-input-bg: $input-bg; $form-check-input-border: 1px solid rgba($black, .25); $form-check-input-border-radius: .25em; $form-check-radio-border-radius: 50%; $form-check-input-focus-border: $input-focus-border-color; $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow; $form-check-input-checked-color: $component-active-color; $form-check-input-checked-bg-color: $component-active-bg; $form-check-input-checked-border-color: $form-check-input-checked-bg-color; $form-check-input-checked-bg-image: url("data:image/svg+xml,"); $form-check-radio-checked-bg-image: url("data:image/svg+xml,"); $form-check-input-indeterminate-color: $component-active-color; $form-check-input-indeterminate-bg-color: $component-active-bg; $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color; $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,"); $form-check-input-disabled-opacity: .5; $form-check-label-disabled-opacity: $form-check-input-disabled-opacity; $form-check-btn-check-disabled-opacity: $btn-disabled-opacity; $form-check-inline-margin-end: 1rem;