Séc và đài
Tạo hộp kiểm và radio trên nhiều trình duyệt và thiết bị chéo nhất quán với thành phần kiểm tra được viết lại hoàn toàn của chúng tôi.
Cách tiếp cận
Hộp kiểm và radio mặc định của trình duyệt được thay thế với sự trợ giúp của .form-check, một loạt các lớp cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các phần tử HTML của chúng, cung cấp khả năng tùy chỉnh cao hơn và tính nhất quán giữa các trình duyệt. Hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio để chọn một tùy chọn trong số nhiều tùy chọn.
Về mặt cấu trúc, các <input>s và <label>s của chúng ta là các phần tử anh em, trái ngược với một <input>bên trong a <label>. Điều này hơi dài dòng hơn vì bạn phải chỉ định idvà forcác thuộc tính để liên quan đến <input>và <label>. Chúng tôi sử dụng bộ chọn anh chị em ( ~) cho tất cả các <input>trạng thái của chúng tôi, như :checkedhoặc :disabled. Khi kết hợp với .form-check-labellớp, chúng ta có thể dễ dàng tạo kiểu văn bản cho từng mục dựa trên <input>trạng thái của '.
Kiểm tra của chúng tôi sử dụng các biểu tượng Bootstrap tùy chỉnh để chỉ ra trạng thái đã kiểm tra hoặc không xác định.
Séc
<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>Không xác định
Hộp kiểm có thể sử dụng :indeterminatelớp giả khi được đặt thủ công qua JavaScript (không có thuộc tính HTML khả dụng để chỉ định nó).
<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>Vô hiệu hóa
Thêm disabledthuộc tính và các thuộc tính liên quan <label>được tự động tạo kiểu để khớp với màu sáng hơn để giúp chỉ ra trạng thái của đầu vào.
<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>Rađiô
<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>Vô hiệu hóa
Thêm disabledthuộc tính và các thuộc tính liên quan <label>được tự động tạo kiểu để khớp với màu sáng hơn để giúp chỉ ra trạng thái của đầu vào.
<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>Công tắc
Một công tắc có đánh dấu của một hộp kiểm tùy chỉnh nhưng sử dụng .form-switchlớp để hiển thị một công tắc bật tắt. Cân nhắc sử dụng role="switch"để chuyển tải chính xác hơn bản chất của kiểm soát tới các công nghệ hỗ trợ hỗ trợ vai trò này. Trong các công nghệ hỗ trợ cũ hơn, nó sẽ đơn giản được thông báo như một hộp kiểm thông thường như một dự phòng. Công tắc cũng hỗ trợ disabledthuộc tính.
<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>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" 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" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>Mặc định (xếp chồng lên nhau)
Theo mặc định, bất kỳ số hộp kiểm và radio nào là anh em ngay lập tức sẽ được xếp chồng lên nhau theo chiều dọc và có khoảng cách thích hợp .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>Nội tuyến
Nhóm các hộp kiểm hoặc đài trên cùng một hàng ngang bằng cách thêm .form-check-inlinevào bất kỳ .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>Không có nhãn
Bỏ qua gói .form-checkđối với các hộp kiểm và radio không có văn bản nhãn. Hãy nhớ vẫn cung cấp một số dạng tên có thể truy cập cho các công nghệ hỗ trợ (ví dụ: sử dụng aria-label). Xem phần trợ năng tổng quan về biểu mẫu để biết chi tiết.
<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>Nút chuyển đổi
Tạo các hộp kiểm và nút radio giống như nút bằng cách sử dụng .btnkiểu thay vì sử dụng .form-check-labelcác <label>phần tử. Các nút bật tắt này có thể được nhóm lại trong một nhóm nút nếu cần.
Các nút chuyển đổi hộp kiểm
<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><input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>Các nút bật tắt radio
<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" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>Các kiểu phác thảo
Các biến thể khác nhau của .btn, chẳng hạn như ở các kiểu phác thảo khác nhau, được hỗ trợ.
<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>
<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>Sass
Biến
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
$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;