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

Hộp kiểm mặc định

Hộp kiểm đã chọn

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

Hộp kiểm không xác định

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.

Đã tắt hộp kiểm không xác định

Hộp kiểm bị vô hiệu hóa

Đã vô hiệu hóa hộp kiểm đã chọn

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ô

Đài phát thanh mặc định

Đài được kiểm tra mặc định

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.

Vô hiệu hóa đài

Đã vô hiệu hóa đài đã kiểm tra

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.

Đầu vào hộp kiểm chuyển đổi mặc định

Đã kiểm tra đầu vào hộp kiểm chuyển đổi

Đã tắt đầu vào hộp kiểm chuyển đổi

Đã vô hiệu hóa đầu vào hộp kiểm chuyển đổi đã chọn

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.

Hộp kiểm mặc định

Hộp kiểm bị vô hiệu hóa

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>

Đài phát thanh mặc định

Đài phát thanh mặc định thứ hai

Vô hiệu hóa đài

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.

3 (bị vô hiệu hóa)

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>

3 (bị vô hiệu hóa)

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

Đảo ngược hộp kiểm

Đã tắt hộp kiểm đảo ngược

Đầu vào hộp kiểm chuyển đổi đảo ngược

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

Chuyển đổi đơn

html

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

Đã kiểm tra

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>

Vô hiệu hóa

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

Đã kiểm tra Đài Vô hiệu hóa Đài

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

Chuyển đổi đơn
Đã kiểm tra
Đài phát thanh thành công đã kiểm tra Đài báo nguy hiểm

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;