Bootstrap - Groupes d'entrée
Ce chapitre explique une autre fonctionnalité prise en charge par Bootstrap, les groupes d'entrée. Les groupes d'entrée sont des contrôles de formulaire étendus . En utilisant des groupes de saisie, vous pouvez facilement ajouter du texte ou des boutons aux entrées textuelles.
En ajoutant du contenu ajouté et ajouté à un champ de saisie, vous pouvez ajouter des éléments communs à l'entrée de l'utilisateur. Par exemple, vous pouvez ajouter le symbole dollar, le @ pour un nom d'utilisateur Twitter ou tout autre élément qui pourrait être commun à l'interface de votre application.
Pour ajouter ou ajouter des éléments à un .form-control-
Enveloppez-le dans un <div> avec classe .input-group
Comme étape suivante, dans ce même <div>, placez votre contenu supplémentaire dans un <span> avec classe .input-group-addon.
Placez maintenant ce <span> avant ou après l'élément <input>.
Pour la compatibilité entre navigateurs, évitez d'utiliser les éléments <select> ici car ils ne peuvent pas être entièrement stylisés dans les navigateurs WebKit. N'appliquez pas non plus les classes de groupe d'entrée directement pour former des groupes. Un groupe d'entrée est un composant isolé.
Groupe d'entrée de base
L'exemple suivant illustre le groupe d'entrée de base -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>Dimensionnement du groupe d'entrée
Vous pouvez modifier la taille des groupes d'entrée, en ajoutant les classes de dimensionnement de formulaire relatives comme .input-group-lg, input-group-sm, input-group-xs à la .input-grouplui-même. Le contenu à l'intérieur sera automatiquement redimensionné.
Les exemples suivants le démontrent -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>Cases à cocher et modules complémentaires radio
Vous pouvez pré-ajouter ou ajouter des boutons radio et des cases à cocher au lieu du texte comme illustré dans l'exemple suivant -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Addons de bouton
Vous pouvez même pré-ajouter ou ajouter des boutons dans des groupes d'entrée. Au lieu de.input-group-addon classe, vous devrez utiliser la classe .input-group-btnpour envelopper les boutons. Cela est nécessaire en raison des styles de navigateur par défaut qui ne peuvent pas être remplacés. Les exemples suivants le démontrent -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Boutons avec listes déroulantes
L'ajout de boutons avec des menus déroulants dans des groupes d'entrée peut être fait en enveloppant simplement le bouton et le menu déroulant dans un .input-group-btn classe comme illustré dans l'exemple suivant -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Boutons segmentés
Pour segmenter les listes déroulantes de boutons dans des groupes d'entrée, utilisez le même style général que le bouton déroulant, mais ajoutez une action principale avec la liste déroulante comme le montre l'exemple suivant -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>