Group ya Muhtasari ya Input ya Bootstrap 5

Kikundi cha input

.input-group Kundi ni kina kuu, kwa kufanya ikoni, matukio au mbili kwenye eneo la input field kwa kumekua kama 'msaada wa mifano'.

Ili kufanya mifano ya uwanja wa msaada, tumia .input-group-text Kundi:

Mfano

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Jina la mtumiaji">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Una huzuni ya barua pepe">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Jifunze tena

Kikabisa cha kikabisa

Tunapokea .input-group-sm Kikabisa kwa kikisikio kina, kumekua .input-group-lg Inaitwa kwa kikabisa kikubwa:

Mfano

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">kisikio</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">kwa kawaida</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">kubwa</span>
  <input type="text" class="form-control">
</div>

Jifunze tena

Zaidi ya ingia na msaada

Ongeza zaidi kikabisa au plugin kwenye kifungu:

Mfano

<!-- zaidi ya kikabisa kwenye kifungu -->
<div class="input-group mb-3">
  <span class="input-group-text">jina lake</span>
  <input type="text" class="form-control" placeholder="kina">
  <input type="text" class="form-control" placeholder="jina">
</div>
<!-- zaidi ya plugin au matukio ya msaada -->
<div class="input-group mb-3">
  <span class="input-group-text">moja</span>
  <span class="input-group-text">mbili</span>
  <span class="input-group-text">taatu</span>
  <input type="text" class="form-control">
</div>

Jifunze tena

Kikabisa na msahara ya kichwada

Inaweza kutumia msahara au kikabisa kama ujumbe:

Mfano

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Mafaa ya kusoma">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Mafaa ya kusoma">
</div>

Jifunze tena

ingia kikabisa

Mfano

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">msahara msingi</button>
  <input type="text" class="form-control" placeholder="Mafaa ya kusoma">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Tafuta">
  <button class="btn btn-success" type="submit">Tumia</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Mafaa ya kusoma">
  <button class="btn btn-primary" type="button">Sawa</button>
  <button class="btn btn-danger" type="button">Tumia</button>
</div>

Jifunze tena

Kikundi cha kuingilia na kudzuka

Wingilisha mwingiliano wa kudzuka kwenye kikundi cha kuingilia. Tukio, hataraji kwamba hufuata kama kila wakati kwa kifungu cha .dropdown cha kufungua.

Mfano

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Mwafiri wa kudzuka
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Mwongozo 1</a></li>
    <li><a class="dropdown-item" href="#">Mwongozo 2</a></li>
    <li><a class="dropdown-item" href="#">Mwongozo 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Jina la mtumiaji">
</div>

Jifunze tena