Les mises en page des formulaires FORMULAIRES:Mise en page MISE EN PAGE:Formulaire

1. La mise en page standard FORMULAIRES:Mise en page standard

Nous l’avons déjà utilisé de nombreuses fois, c’est la classe .form-group qui permet de mettre en page de manière standard les formulaires Bootstrap. Cette classe s’insère dans chaque boîte <div> contenant un élément de formulaire.

Le dossier à télécharger pour cet exemple est nommé 07-Formulaires-06.

Voici un exemple vide d’éléments de formulaire :

<form role="form"> 
        <div class="form-group"> 
                ... 
        </div> 
<div class="form-group"> 
        ... 
</div> 
</form> 

Les éléments de formulaire apparaissent les uns sous les autres dans cette mise en page standard.

2. Utiliser une grille standard FORMULAIRES:Grille standard

Pour avoir des formulaires plus attractifs, vous pouvez placer les éléments dans une grille Bootstrap, elle-même placée dans le formulaire.

Voici l’exemple d’un formulaire comportant deux champs de saisie et un bouton d’envoi.

<div class="container"> 
        <div class="row"> 
                <div class="col"> ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les cases à cocher et les boutons radio
Suivant
Des éléments de mise en forme