Bootstrap 4 gruppi di input
Bootstrap 4 gruppi di input
La .input-groupclasse è un contenitore per migliorare un input aggiungendo un'icona, un testo o un pulsante davanti o dietro al campo di input come "testo di aiuto".
Utilizzare .input-group-prependper aggiungere il testo della guida davanti all'input e .input-group-appendper aggiungerlo dietro l'input.
Infine, aggiungi la .input-group-textclasse per definire lo stile del testo della guida specificato.
Esempio
<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>
Suggerimento: utilizziamo la .mb-3classe di utilità per garantire che il gruppo di input ottenga un margine inferiore adeguato. Maggiori informazioni sulle classi di utilità nel nostro capitolo BS4 Utilities .
Dimensionamento del gruppo di input
Usa la .input-group-smclasse per piccoli gruppi di input e .input-group-lgper grandi gruppi di input:
Esempio
<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>
Input multipli e aiutanti
Aggiungi più input o componenti aggiuntivi:
Esempio
<!-- 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>
Gruppo di input con caselle di controllo e radio
Puoi anche utilizzare caselle di controllo o pulsanti di opzione al posto del testo:
Esempio
<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>
Pulsanti del gruppo di input
Esempio
<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>
Gruppo di input con pulsante a discesa
Aggiungi un pulsante a discesa nel gruppo di input. Nota che non hai bisogno del wrapper .dropdown, come faresti normalmente.
Esempio
<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>
Etichette di gruppo di input
Metti le etichette al di fuori del gruppo di input e ricorda che il valore dell'attributo for deve corrispondere all'id dell'input.
Fare clic sull'etichetta e si metterà a fuoco l'input:
Esempio
<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>