Bootstrap 5 Çekme Çubuğu ve Seçim Düğmeleri

Onay kutusu

Kullanıcıların önceden tanımlanmış seçenek listesinden herhangi bir sayıda seçenek seçmesini istiyorsanız, onay kutusunu kullanın.

Örnek

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Seçenek 1</label>
</div>

Kişisel olarak deneyin

örnek açıklama

Onay kutusu tarzını ayarlamak için class="form-check" çevreleyen elemanını

daha sonra, etiket ve onay kutusunun uygun dış kenar boşluklarını sağlamak için .form-check-label class eklenerek etiket elemanına ve .form-check-input ekle .form-check içerisinde, çektirici tarzını doğru şekilde ayarlamak için.}

Eğer çektiriciyi varsayılan olarak seçili olarak ayarlamak istiyorsanız, checked Özellikleri.

Tek seçenek düğmesi

Eğer kullanıcıların yalnızca önceden tanımlanmış seçenek listesinden birini seçmesini sınırlamak istiyorsanız, tek seçenek düğmesini kullanın.

Örnek

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Seçenek 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Seçenek 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Seçenek 3
  <label class="form-check-label"></label>
</div>

Kişisel olarak deneyin

anahtarı çevirin

Eğer çektiriciyi seçim anahtarının tarzına ayarlamak istiyorsanız, .form-switch Klaslar ve .form-check Birlikte kullanılan konteyner:

Örnek

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Karanlık mod</label>
</div>

Kişisel olarak deneyin