Tutoriel de base Bootstrap

Extension Bootstrap

Éléments de navigation Bootstrap Menu déroulant de boutons Bootstrap

Groupes de champs d'entrée Bootstrap

Ce chapitre explique une autre fonctionnalité prise en charge par Bootstrap, le groupe de champs d'entrée. Le groupe de champs d'entrée s'étend de Contrôle de formulaireVous pouvez facilement ajouter du texte ou des boutons en préfixe et en suffixe aux champs d'entrée basés sur le texte en utilisant le groupe de champs d'entrée.

En ajoutant du contenu préfixe et suffixe à la zone de saisie, vous pouvez ajouter des éléments communs à l'entrée de l'utilisateur. Par exemple, vous pouvez ajouter le symbole dollar, ou ajouter @ avant le nom d'utilisateur Twitter, ou d'autres éléments communs nécessaires à l'API de l'application.

Ajoutez du contenu à .form-control Les étapes pour ajouter des éléments préfixe ou suffixe sont les suivantes :

Placez l'élément préfixe ou suffixe dans un élément avec la classe .input-group Dans le <div>.
Dans le même <div>, dans la classe .input-group-addon Ajoutez du contenu supplémentaire à l'intérieur du <span>.
Placez ce <span> avant ou après l'élément <input>.

Pour maintenir la compatibilité entre les navigateurs, évitez d'utiliser l'élément <select>, car ils ne sont pas complètement rendus dans les navigateurs WebKit. Ne pas appliquer directement la classe du groupe de zones de saisie au groupe de formulaires, le groupe de zones de saisie est un composant isolé.

Groupe de zones de saisie de base

L'exemple suivant démontre le groupe de zones de saisie de base :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Exemple Bootstrap<　-　Groupe de zones de saisie de base</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-form" role="form">
		<div class="input-groupe">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-groupe">
			<input type="text" class="form-contrôle">
			<span　class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-groupe">
			<span　class="input-group-addon">$</span>
			<input type="text" class="form-contrôle">
			<span　class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

La taille du groupe de zones de saisie

Vous pouvez modifier la taille du groupe de zones de saisie en ajoutant .input-group Ajoutez une classe relative à la taille du formulaire (par exemple .input-group-lg、input-group-sm）pour changer la taille du groupe de zones de saisie. Le contenu de la zone de saisie s'ajuste automatiquement.

L'exemple suivant démontre cela :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Exemple Bootstrap<　-　La taille du groupe de zones de saisie</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-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-groupe">
			<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>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

Extensions de case à cocher et de bouton radio

Vous pouvez utiliser les extensions de case à cocher et de bouton radio comme éléments préfixe ou suffixe du groupe de zones de saisie, comme dans l'exemple suivant :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemple Bootstrap<　-　Les extensions de case à cocher et de bouton radio du groupe de zones de saisie</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-groupe">
					<span　class="input-group-addon">
						<input　type="checkbox">
					</span>
					<input type="text" class="form-contrôle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-groupe">
					<span　class="input-group-addon">
						<input　type="radio">
					</span>
					<input type="text" class="form-contrôle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

extension de bouton

Vous pouvez également utiliser le bouton comme élément préfixe ou suffixe du groupe de zones de saisie, dans ce cas, vous n'ajoutez pas .input-group-addon class, vous devez utiliser class .input-group-btn pour englober le bouton. C'est nécessaire car les styles par défaut du navigateur ne seront pas écrasés. L'exemple suivant démontre cela :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemple Bootstrap<　-　L'extension de bouton de groupe de zones de saisie</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-groupe">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</bouton>
					</span>
					<input type="text" class="form-contrôle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-groupe">
					<input type="text" class="form-contrôle">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</bouton>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

bouton avec menu déroulant

Ajoutez un bouton avec un menu déroulant dans le groupe de zones de saisie, il suffit de simplement insérer dans un .input-group-btn Classer le bouton et le menu déroulant dans la classe, comme dans les exemples suivants :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemple Bootstrap<　-　Bouton du menu déroulant du groupe de zones de saisie</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-groupe">
					<div class="input-group-btn">
						<button type="button" class="btn btn-par défaut déroulement-toggle" data-toggle="dropdown">
							Menu déroulant　
							<span class="caret"></span>
						</bouton>
						<ul class="dropdown<-menu">
							<li><a href="#">Fonction</a></li>
							<li><a href="#">Une autre fonction</a></li>
							<li><a href="#">Autre</a></li>
							<li class="divider"></li>
							<li><a href="#">Lien séparé</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-contrôle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-groupe">
					<input type="text" class="form-contrôle">
					<div class="input-group-btn">
						<button type="button" class="btn btn-par défaut déroulement-toggle" data-toggle="dropdown">
							Menu déroulant　
							<span class="caret"></span>
						</bouton>
						<ul class="dropdown<-menu de déroulement<-droite">
							<li><a href="#">Fonction</a></li>
							<li><a href="#">Une autre fonction</a></li>
							<li><a href="#">Autre</a></li>
							<li class="divider"></li>
							<li><a href="#">Lien séparé</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

Bouton divisé du menu déroulant

Ajoutez un bouton divisé avec un menu déroulant dans le groupe de zones de saisie, utilisez un style approximativement similaire au bouton du menu déroulant, mais ajoutez les fonctionnalités principales du menu déroulant, comme dans les exemples suivants :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Exemple Bootstrap<　-　Bouton de menu déroulant divisé dans le groupe de zones de saisie</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:　100px　100px　10px;">
	<form class="bs-exemple bs-exemple-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-groupe">
					<div class="input-group-btn">
						<button type="button" class="btn btn-par défaut" tabindex="-1">Menu déroulant<
						</bouton>
						<button type="button" class="btn btn-par défaut déroulement-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-uniquement">Basculer le menu déroulant</span>
						</bouton>
						<ul class="dropdown<-menu">
							<li><a href="#">Fonction</a></li>
							<li><a href="#">Une autre fonction</a></li>
							<li><a href="#">Autre</a></li>
							<li class="divider"></li>
							<li><a href="#">Lien séparé</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-contrôle">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-groupe">
					<input type="text" class="form-contrôle">
					<div class="input-group-btn">
						<button type="button" class="btn btn-par défaut" tabindex="-1">Menu déroulant<
						</bouton>
						<button type="button" class="btn btn-par défaut déroulement-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-uniquement">Basculer le menu déroulant</span>
						</bouton>
						<ul class="dropdown<-menu de déroulement<-droite">
							<li><a href="#">Fonction</a></li>
							<li><a href="#">Une autre fonction</a></li>
							<li><a href="#">Autre</a></li>
							<li class="divider"></li>
							<li><a href="#">Lien séparé</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Voyons si ça fonctionne ‹/›

Les résultats sont indiqués comme suit :

Éléments de navigation Bootstrap Menu déroulant de boutons Bootstrap