Auteur Auteur

Les formulaires horizontal

  1. Objectifs

    • Connaitre les formulaires horizontal en Bootstrap 4
    • Etre capable de travailler avec les formulaires horizontal en Bootstrap 4

  2. Présentation

    • Formulaire de mise en forme Bootstrap fournit les types de mise en page suivants:
      • Formulaire vertical (par défaut)
      • Formulaire en ligne
      • Formulaire horizontal

  3. ِCréer un formulaire horizontal

    • Les formes horizontales se distinguent des autres non seulement par la quantité de marge, mais aussi par la présentation de la forme.
    • Pour créer un formulaire utilisant la disposition horizontale, procédez comme suit:
      1. Ajoutez une classe de .form-horizontal à l’élément parent <form>.
      2. Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group.
      3. Ajoutez une classe de .control-label aux étiquettes.
      <form class="form-horizontal" role="form">
            <div class="form-group">
               <label for="prenom"
               class="col-sm-2 control-label">Prénom</label>
               <div class="col-sm-8">
                  <input type="text" 
                  class="form-control" id="prenom" 
                  placeholder="Entrez votre prénom">
               </div>
            </div>
            <div class="form-group">
               <label for="nom" 
               class="col-sm-2 control-label">Nom</label>
               <div class="col-sm-8">
                  <input type="text" class="form-control" 
                  id="nom" placeholder="Entrez votre nom">
               </div>
            </div>
         <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                   <div class="checkbox">
                     <label> <input type="checkbox">Souviens-toi de moi</label>
                   </div>
                </div>
         </div>
         <div class="form-group">
              <div class="col-sm-offset-2 col-sm-8">
                  <button type="submit" 
                  class="btn btn-default">se connecter</button>
              </div>
          </div>
</form>
    • Ce qui nous donne la figure suivante.

  4. ِComparaison Bootstrap 4 et Bootstrap 3

    • Il existe quelques différences mineures entre Bootstrap 4 et Bootstrap 3 en ce qui concerne les formes horizontales.
    • Des grilles
      • Bootstrap 4 nécessite la .row classe si vous utilisez des grilles pour la présentation de formulaire . Cette classe n’est pas obligatoire sur les formulaires Bootstrap 3 (bien qu’elle soit toujours obligatoire sur les grilles Bootstrap 3 en général).
    • Étiquettes de contrôle
      • Bootstrap 4 utilise .col-form-label lors de l’utilisation de grilles pour la présentation de formulaire, alors que Bootstrap 3 utilise .control-label.
    • La .form-horizontalclasse
      • Bootstrap 4 ne nécessite pas de .form-horizontalcours. Bootstrap 3 en a besoin.
Précédent
Suivant