Bootstrap4 Tutoriel de base

Bootstrap4 Contrôles de formulaires Bootstrap4 Navigation de fil d'Ariane

Bootstrap4 Formulaire

Les formulaires HTML font partie intégrante des pages web et des applications, mais créer manuellement les mises en page des formulaires ou les styles des contrôles de formulaire à l'aide de CSS peut être ennuyeux. Bootstrap simplifie grandement le processus de style et d'alignement des contrôles de formulaire (comme les étiquettes, les champs d'entrée, les listes déroulantes, les zones de texte, les boutons, etc.) grâce à un ensemble prédéfini de classes.

Dans ce chapitre, nous allons apprendre à créer des formulaires en utilisant Bootstrap. Bootstrap permet de créer des formulaires de différentes styles à l'aide de simples balises HTML et de classes étendues.

Éléments de formulaire <input>, <textarea>, et éléments <select> Lorsque vous utilisez .form-dans le cas de la classe .form 100%.

Bootstrap4 Mise en page du formulaire

Formulaire empilé (largeur d'écran complète) : orientation verticale
Formulaire en ligne : orientation horizontale

Bootstrap propose deux types de mise en page de formulaires :

Formulaire empilé

Les exemples suivants utilisent deux champs de saisie, une case à cocher, un bouton de soumission pour créer un formulaire empilé :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Formulaire empilé</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">E-mail :</label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Entrer l'email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Mot de passe :</label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Entrer le mot de passe">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Se souvenir de moi
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Soumettre</button>
　　</form>
</div>
</body>
</html>

Voyons un test ‹/›

Voici le résultat après l'exécution :

Formulaire en ligne

Tous les éléments des formulaires en ligne sont alignés à gauche.

Remarque : Lorsque la largeur de l'écran est inférieure à 576px, ils s'afficheront en empilement vertical. Si la largeur de l'écran est supérieure ou égale à576px, les éléments du formulaire s'afficheront sur une même ligne horizontale.

Un formulaire en ligne doit avoir la classe .form-classe inline.

Les exemples suivants utilisent deux champs de saisie, une case à cocher, un bouton de soumission pour créer un formulaire en ligne :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Formulaire en ligne</h2>
　　<p>La largeur de l'écran est supérieure ou égale à　576px, ils s'afficheront horizontalement. Si inférieur à　576px alors les formulaires s'empileront.</p>
　　<form class="form-inline">
　　　　<label for="email">E-mail :</label>
　　　　<input type="email" class="form-control" id="email" placeholder="Entrer l'email">
　　　　<label for="pwd">Entrer le mot de passe :/label>
　　　　<input type="password" class="form-control" id="pwd" placeholder="Entrer le mot de passe">
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> Se souvenir de moi
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Soumettre</button>
　　</form>
</div>
</body>
</html>

Voyons un test ‹/›

Voici le résultat après l'exécution :

Bootstrap4 Contrôles de formulaires Bootstrap4 Navigation de fil d'Ariane