Bootstrap

Les formulaires horizontal

Un cours complet pour maîtriser Les formulaires horizontal.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Objectifs
- Connaitre les formulaires horizontal en Bootstrap 4
- Etre capable de travailler avec les formulaires horizontal en Bootstrap 4
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

ِ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:

Ajoutez une classe de .form-horizontal à l'élément parent <form>.
Enveloppez les étiquettes et les contrôles dans un <div> avec la classe .form-group.
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.

ِ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.

Sommaire du cours Bootstrap

Les formulaires horizontal

Sommaire du cours

Autres catégories

Objectifs

Présentation

ِCréer un formulaire horizontal

ِComparaison Bootstrap 4 et Bootstrap 3

Sommaire du cours Bootstrap