Grupy wejściowe Bootstrap 5

Grupa wejściowa

.input-group Klasa jest kontenerem, który wzmocnia pole wejściowe, dodając do niego ikonę, tekst lub przycisk jako "tekst pomocy".

Aby ustawić styl specyficznego tekstu pomocy, użyj .input-group-text Klasa:

Przykład

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nazwa użytkownika">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Państwa e-mail">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Spróbuj sam

Rozmiar grupy wejściowej

Proszę umieścić .input-group-sm Klasa używana do małych grup wejściowych, umieszczając .input-group-lg Używany do dużych grup wejściowych:

Przykład

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Mały</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Domyślny</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Duży</span>
  <input type="text" class="form-control">
</div>

Spróbuj sam

Wiele wejść i asystentów

Dodaj wiele kontrolek wejściowych lub wtyczek:

Przykład

<!-- Wiele kontrolek wejściowych -->
<div class="input-group mb-3">
  <span class="input-group-text">Imię i nazwisko</span>
  <input type="text" class="form-control" placeholder="Nazwisko">
  <input type="text" class="form-control" placeholder="Imię">
</div>
<!-- Wiele wtyczek/tekstu pomocy -->
<div class="input-group mb-3">
  <span class="input-group-text">Jedno</span>
  <span class="input-group-text">Dwa</span>
  <span class="input-group-text">Trzy</span>
  <input type="text" class="form-control">
</div>

Spróbuj sam

Grupy wejściowe z polami wyboru i przyciskami radiowymi

Możesz również użyć pól wyboru lub przycisków radiowych zamiast tekstu:

Przykład

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

Spróbuj sam

Przyciski wejściowe

Przykład

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Podstawowy przycisk</button>
  <input type="text" class="form-control" placeholder="Niektkie tekst">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Wyszukiwanie">
  <button class="btn btn-success" type="submit">Idź</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Niektkie tekst">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Anuluj</button>
</div>

Spróbuj sam

Grupa wejściowa z przyciskiem rozwijanym

Dodaj przycisk rozwijany do grupy wejściowej. Pamiętaj, że nie potrzebujesz zwykłego kontenera .dropdown.

Przykład

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Przycisk rozwijany
  </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="Nazwa użytkownika">
</div>

Spróbuj sam