Bootstrap Groupes de saisie
Ce chapitre explique une autre fonctionnalité prise en charge par Bootstrap, les groupes de saisie. Les groupes de saisie étendent lescontrôles de formulaire. Avec les groupes de saisie, vous pouvez facilement ajouter du texte ou des boutons comme préfixes ou suffixes aux champs de saisie textuels.
En ajoutant du contenu de préfixe et de suffixe aux champs de saisie, vous pouvez ajouter des éléments courants à la saisie de l'utilisateur. Par exemple, vous pouvez ajouter un signe dollar, ou un @ avant un nom d'utilisateur Twitter, ou d'autres éléments courants requis par une interface d'application.
vers.form-controlLes étapes pour ajouter des éléments de préfixe ou de suffixe sont les suivantes :
- Placez l'élément de préfixe ou de suffixe dans un <div> avec la classe.input-groupà l'intérieur du <div>.
- Ensuite, à l'intérieur du même <div>, dans un <span> avec la classe.input-group-addonplacez le contenu supplémentaire à l'intérieur du <span>.
- Placez le <span> avant ou après l'élément <input>.
Pour une compatibilité entre navigateurs, évitez d'utiliser les éléments <select>, car ils ne sont pas entièrement rendus dans les navigateurs WebKit. De plus, n'appliquez pas la classe input group directement à des groupes de formulaire ; un groupe de saisie est un composant isolé.
Groupe de saisie de base
L'exemple suivant illustre un groupe de saisie de base :
Exemple
<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>
Essayez-le »
Le résultat est affiché ci-dessous :
Taille du groupe de saisie
Vous pouvez modifier la taille d’un groupe de saisie en ajoutant à celui-ci.input-groupdes classes de dimensionnement relatives au formulaire (telles que.input-group-lg、input-group-sm). Le contenu à l’intérieur du champ de saisie s’ajuste automatiquement en taille.
L'exemple suivant le démontre :
Exemple
<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>
Essayez-le »
Le résultat est affiché ci-dessous :
Compléments pour cases à cocher et boutons radio
Vous pouvez utiliser des cases à cocher et des modules complémentaires de type bouton radio comme éléments de préfixe ou de suffixe d’un groupe de saisie, comme illustré dans l’exemple ci-dessous :
Exemple
<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>
</div>
<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>
</div>
</div>
</form>
</div>
Essayez-le »
Le résultat est affiché ci-dessous :
Boutons additionnels
Vous pouvez également utiliser des boutons comme éléments de préfixe ou de suffixe d'un groupe de saisie. Dans ce cas, vous n'ajoutez pas.input-group-addoncomme classe ; vous devez utiliser la classe.input-group-btnpour envelopper le bouton. Cela est nécessaire car les styles par défaut du navigateur ne seront pas remplacés. L'exemple suivant le démontre :
Exemple
<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">Allez !</button>
</span>
<input type="text" class="form-control">
</div>
</div>
<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">Allons-y !</button>
</span>
</div>
</div>
</div>
</form>
</div>
Essayez-le »
Le résultat est affiché ci-dessous :
Boutons avec des menus déroulants
Pour ajouter des boutons avec des menus déroulants à un groupe de saisie, il suffit de.input-group-btnenvelopper le bouton et le menu déroulant dans une classe, comme le montre l'exemple ci-dessous :
Exemple
<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">Menu déroulant<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Une autre action</a>
</li>
<li>
<a href="#">Quelque chose d'autre ici</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Lien séparé</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<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">Menu déroulant<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Une autre action</a>
</li>
<li>
<a href="#">Quelque chose d'autre ici</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Lien séparé</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
Essayez-le »
Le résultat est affiché ci-dessous :
Boutons fractionnés de menu déroulant
Pour ajouter des boutons fractionnés avec des menus déroulants à un groupe de saisie, utilisez un style similaire aux boutons de menu déroulant, mais ajoutez une action principale au menu déroulant, comme illustré dans l'exemple ci-dessous :
Exemple
<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">Menu déroulant</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Basculer le menu déroulant</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Une autre action</a>
</li>
<li>
<a href="#">Autre chose ici</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Lien séparé</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<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">Menu déroulant</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Basculer le menu déroulant</span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Une autre action</a>
</li>
<li>
<a href="#">Autre chose ici</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Lien séparé</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
Essayez-le »
Le résultat est affiché ci-dessous :
Autres extensions
