Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

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.

Trên trang này

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

html 
<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ó).

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>

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.

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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ô

html 
<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.

html 
<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.

html 
<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.

html 
<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>
html 
<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.

html 
<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>
html 
<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>

Đảo ngược

Đặt hộp kiểm, radio và công tắc của bạn ở phía đối diện với .form-check-reverselớp bổ trợ.

html 
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</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.

html 
<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

html 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
html 
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
html 
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Về mặt trực quan, các nút chuyển đổi hộp kiểm này giống hệt với các nút chuyển đổi plugin của nút . Tuy nhiên, chúng được chuyển tải theo cách khác nhau bằng các công nghệ hỗ trợ: hộp kiểm chuyển đổi sẽ được trình đọc màn hình thông báo là “đã chọn” / “không được chọn” (vì mặc dù xuất hiện, chúng về cơ bản vẫn là hộp kiểm), trong khi các nút chuyển đổi plugin của nút sẽ là được thông báo là “nút” / “nút được nhấn”. Sự lựa chọn giữa hai cách tiếp cận này sẽ phụ thuộc vào loại chuyển đổi bạn đang tạo và việc chuyển đổi có phù hợp với người dùng hay không khi được thông báo dưới dạng hộp kiểm hoặc dưới dạng nút thực tế.

Các nút bật tắt radio

html 
<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ợ.



html 
<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 10 3 3 6-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;