Kumpulan Input Bootstrap 5

Kumpulan Input

.input-group Kelas adalah wadah yang memungkinkan untuk meningkatkan input dengan menambah ikon, teks atau tombol di depan atau belakang bidang input sebagai "teks bantuan".

Untuk menetapkan gaya teks bantuan khusus, gunakan .input-group-text Kelas:

Contoh

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nama Pengguna">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Anda e-mel">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Cuba Sendiri

Saiz kumpulan input

Sila pindahkan .input-group-sm Kelas untuk kumpulan input kecil, akan .input-group-lg Dipergunakan untuk kumpulan input besar:

Contoh

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Kecil</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Lalun</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Besar</span>
  <input type="text" class="form-control">
</div>

Cuba Sendiri

Banyak input dan bantuan

Tambah banyak kontrol input atau plugin:

Contoh

<!-- Banyak kontrol input -->
<div class="input-group mb-3">
  <span class="input-group-text">Nama orang</span>
  <input type="text" class="form-control" placeholder="Gelar">
  <input type="text" class="form-control" placeholder="Nama">
</div>
<!-- Banyak plugin/teks bantuan -->
<div class="input-group mb-3">
  <span class="input-group-text">Satu</span>
  <span class="input-group-text">Dua</span>
  <span class="input-group-text">Tiga</span>
  <input type="text" class="form-control">
</div>

Cuba Sendiri

Kumpulan input dengan kotak centang dan pilihan

Anda boleh menggunakan kotak centang atau butang pilihan untuk menggantikan teks:

Contoh

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

Cuba Sendiri

Kumpulan butang input

Contoh

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Butang asas</button>
  <input type="text" class="form-control" placeholder="Beberapa teks">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Cari">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Beberapa teks">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Batal</button>
</div>

Cuba Sendiri

Grup Input Dengan Butang Tarik Turun

Tambahkan butang tarik turun ke dalam grup input. Perhatikan, anda tidak perlu seperti biasa .dropdown wrapper kontainer.

Contoh

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Butang Tarik Turun
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Pautan 1</a></li>
    <li><a class="dropdown-item" href="#">Pautan 2</a></li>
    <li><a class="dropdown-item" href="#">Pautan 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Nama Pengguna">
</div>

Cuba Sendiri