Bootstrap 4 Grupy wejściowe
Bootstrap 4 Grupy wejściowe
Klasa .input-groupjest kontenerem, który wzbogaca dane wejściowe, dodając ikonę, tekst lub przycisk przed lub za polem wejściowym jako „tekst pomocy”.
Użyj .input-group-prepend, aby dodać tekst pomocy przed wejściem i .input-group-appenddodać go za wejściem.
Na koniec dodaj .input-group-textklasę, aby wystylizować określony tekst pomocy.
Przykład
<form>
<div class="input-group mb-3">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<input type="text"
class="form-control" placeholder="Your Email">
<div
class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
</form>
Wskazówka: używamy .mb-3klasy narzędziowej, aby upewnić się, że grupa wejściowa otrzyma odpowiedni margines dolny. Przeczytaj więcej o klasach użytkowych w naszym rozdziale o narzędziach BS4 .
Rozmiar grupy wejściowej
Użyj .input-group-smklasy dla małych grup wejść i .input-group-lgdla dużych grup wejść:
Przykład
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3">
<div
class="input-group-prepend">
<span
class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div
class="input-group mb-3 input-group-lg">
<div
class="input-group-prepend">
<span
class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>
</form>
Wiele wejść i pomocników
Dodaj wiele wejść lub dodatków:
Przykład
<!-- Multiple inputs -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text">Person</span>
</div>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</form>
<!-- Multiple addons / help text -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text">One</span>
<span
class="input-group-text">Two</span>
<span
class="input-group-text">Three</span>
</div>
<input type="text" class="form-control">
</div>
</form>
Grupa wejść z polami wyboru i radiami
Możesz także użyć pól wyboru lub przycisków radiowych zamiast tekstu:
Przykład
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input
type="checkbox">
</div>
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input
type="radio">
</div>
</div>
<input
type="text" class="form-control" placeholder="Some text">
</div>
Przyciski grup wejściowych
Przykład
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
</div>
<input type="text" class="form-control"
placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div
class="input-group-append">
<button class="btn btn-success"
type="submit">Go</button>
</div>
</div>
<div
class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Something clever..">
<div class="input-group-append">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
</div>
Grupa wejściowa z przyciskiem rozwijanym
Dodaj przycisk rozwijany w grupie wejściowej. Zauważ, że nie potrzebujesz otoki .dropdown, jak zwykle.
Przykład
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button
type="button" class="btn btn-outline-secondary dropdown-toggle"
data-toggle="dropdown">
Dropdown
button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
Etykiety grup wejściowych
Umieść etykiety poza grupą danych wejściowych i pamiętaj, że wartość atrybutu for powinna odpowiadać identyfikatorowi danych wejściowych.
Kliknij etykietę, aby skupić się na danych wejściowych:
Przykład
<label for="demo">Write your email here:</label>
<div class="input-group
mb-3">
<input type="text" class="form-control" placeholder="Email"
id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>