Bootstrap 5 Giriş Grubu

Giriş Grubu

.input-group Sınıf, giriş alanlarının önüne veya arkasına simgeler, metin veya düğmeler ekleyerek 'yardım metni' olarak adlandırılan bir konteynerdir ve giriş alanlarını güçlendirir.

Belirli yardım metni tarzını ayarlamak için kullanın .input-group-text Sınıf:

Örnek

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Kullanıcı Adı">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Sizin e-postanızı girin">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Kişisel Olarak Deneyin

giriş

giriş grubu boyutunu .input-group-sm Sınıf küçük giriş grubu için kullanılır, .input-group-lg Büyük giriş grubu için kullanılır:

Örnek

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Küçük</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Varsayılan</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Büyük</span>
  <input type="text" class="form-control">
</div>

Kişisel Olarak Deneyin

Çoklu giriş ve yardımcı

Çoklu giriş kontrolü veya eklenti ekleyin:

Örnek

<!-- Çoklu giriş kontrolü -->
<div class="input-group mb-3">
  <span class="input-group-text">İsim</span>
  <input type="text" class="form-control" placeholder="Soyisim">
  <input type="text" class="form-control" placeholder="İsim">
</div>
<!-- Çoklu eklenti/yardım metni -->
<div class="input-group mb-3">
  <span class="input-group-text">Bir</span>
  <span class="input-group-text">İki</span>
  <span class="input-group-text">Üç</span>
  <input type="text" class="form-control">
</div>

Kişisel Olarak Deneyin

Çift seçim kutusu ve tek seçim düğmeli giriş grubu

Ayrıca metin yerine çift seçim kutusu veya tek seçim düğmesini kullanabilirsiniz:

Örnek

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Biraz Metin">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Biraz Metin">
</div>

Kişisel Olarak Deneyin

Giriş Grubu Düğmesi

Örnek

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Temel Düğme</button>
  <input type="text" class="form-control" placeholder="Biraz Metin">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Ara">
  <button class="btn btn-success" type="submit">Git</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Biraz Metin">
  <button class="btn btn-primary" type="button">Tamam</button>
  <button class="btn btn-danger" type="button">İptal</button>
</div>

Kişisel Olarak Deneyin

Aşağı Çıkma Düğmesi İçeren Girdi Grubu

Girdi Grubuna Aşağı Çıkma Düğmesi Ekle. Lütfen genel .dropdown kaplama konteyneri gibi gerekli değil. Dikkat edin.

Örnek

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Aşağı Çıkma Düğmesi
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Bağlantı 1</a></li>
    <li><a class="dropdown-item" href="#">Bağlantı 2</a></li>
    <li><a class="dropdown-item" href="#">Bağlantı 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Kullanıcı Adı">
</div>

Kişisel Olarak Deneyin