Bootstrap 5 inputgruppe

Inputgruppe

.input-group Klasse er en beholder, der styrker inputfeltet ved at tilføje ikoner, tekst eller knapper som "hjælpetekst" foran eller bagved inputfeltet.

Hvis du vil indstille en specifik hjælpetekst stil, brug .input-group-text Klasse:

Eksempel

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Brugernavn">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Din e-mail">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Prøv det selv

Indtastningsgruppe størrelse

Placer .input-group-sm Klassen bruges til små input grupper, og den vil .input-group-lg Brugt til store input grupper:

Eksempel

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Lille</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Standard</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Stor</span>
  <input type="text" class="form-control">
</div>

Prøv det selv

Flere input og assistenter

Tilføj flere input kontroller eller plugins:

Eksempel

<!-- Flere input kontroller -->
<div class="input-group mb-3">
  <span class="input-group-text">Navn</span>
  <input type="text" class="form-control" placeholder="Efternavn">
  <input type="text" class="form-control" placeholder="Navn">
</div>
<!-- Flere plugins/hjælpetekst -->
<div class="input-group mb-3">
  <span class="input-group-text">En</span>
  <span class="input-group-text">To</span>
  <span class="input-group-text">Tre</span>
  <input type="text" class="form-control">
</div>

Prøv det selv

Indtastningsgruppe med flugt- og radioknapper

Du kan også bruge flugt- eller radioknapper i stedet for tekst:

Eksempel

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

Prøv det selv

Indtastningsgruppe knap

Eksempel

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Grundlæggende knap</button>
  <input type="text" class="form-control" placeholder="Nogle tekst">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Søg">
  <button class="btn btn-success" type="submit">Gå</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Nogle tekst">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Annuller</button>
</div>

Prøv det selv

Inputgruppe med rul ned-knap

Tilføj en rul ned-knap til inputgruppen. Bemærk, at du ikke nødvendigvis skal bruge en .dropdown-emnebeholder som normalt.

Eksempel

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Rul ned-knap
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Brugernavn">
</div>

Prøv det selv