Scribd
Importer
224 vues3 pages

Classes Bootstrap pour formulaires

Le document présente une liste complète des classes Bootstrap pour la création et la gestion des formulaires, organisées par catégories. Il couvre les classes de base, la validation, la mise en page, les champs spécifiques, les boutons, les groupes, les états, et les options avancées pour les cases à cocher et boutons radio. Chaque classe est accompagnée d'une brève description de son utilisation.

Transféré par

Hiab
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
224 vues3 pages

Classes Bootstrap pour formulaires

Le document présente une liste complète des classes Bootstrap pour la création et la gestion des formulaires, organisées par catégories. Il couvre les classes de base, la validation, la mise en page, les champs spécifiques, les boutons, les groupes, les états, et les options avancées pour les cases à cocher et boutons radio. Chaque classe est accompagnée d'une brève description de son utilisation.

Transféré par

Hiab
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Voici une liste complète des classes Bootstrap pour la création et la gestion des

formulaires, classées par catégories pour mieux comprendre leur usage :

1. Classes de base pour les formulaires

Classe Description

form-control Style les champs de formulaire (input, textarea, select).

form-label Applique un style cohérent aux étiquettes (<label>).

form-text Ajoute un texte d'aide sous les champs de formulaire.

form-check Groupe pour les cases à cocher (checkbox) et boutons radio.

form-check-label Style les étiquettes des cases à cocher ou boutons radio.

form-check-input Style les cases à cocher ou boutons radio.

form-switch Transforme une case à cocher en interrupteur (toggle switch).

form-select Style les listes déroulantes (<select>).

form-control- Rend un champ de formulaire en lecture seule, sans bordure.


plaintext

2. Validation des formulaires

Classe Description

was-validated Applique des styles de validation sur un formulaire.

is-valid Applique un style de validation réussie à un champ.

is-invalid Applique un style de validation échouée à un champ.

valid-feedback Message de validation positive (affiché si is-valid).

invalid-feedback Message de validation négative (affiché si is-invalid).

valid-tooltip Message de validation positive en infobulle.

invalid-tooltip Message de validation négative en infobulle.

3. Mise en page des formulaires


Classe Description

row Organise les champs dans une grille (avec col-*).

col-form- Utilisé pour aligner les étiquettes dans les formulaires horizontaux.
label

form-floating Crée des champs flottants avec des étiquettes dynamiques.

Exemple :

<div class="form-floating">

<input type="email" class="form-control" id="email"


placeholder="name@[Link]">

<label for="email">Adresse e-mail</label>

</div>

4. Champs spécifiques

Classe Description

form-range Style les champs de type range (curseur).

form-control- Champ de formulaire avec petite taille.


sm

form-control-lg Champ de formulaire avec grande taille.

5. Boutons et interactions

Classe Description

btn Applique un style de bouton de base.

btn-primary, btn-secondary, Différentes couleurs de boutons.


etc.

form-check-inline Aligne les cases à cocher ou boutons radio sur une seule
ligne.

6. Groupes et Textes d'aide


Classe Description

input-group Groupe plusieurs champs ou éléments dans une seule ligne.

input-group-text Ajoute un texte ou icône dans un groupe de champs.

form-text Ajoute une petite description sous un champ.

Exemple :

<div class="input-group">

<span class="input-group-text">@</span>

<input type="text" class="form-control" placeholder="Nom d'utilisateur">

</div>

7. États et propriétés

Classe Description

disabled Désactive un champ ou un bouton.

readonl Rend un champ en lecture seule.


y

8. Checkbox et Radio avancés

Classe Description

form-check-inline Aligne les cases à cocher ou boutons radio horizontalement.

form-check- Inverse l'ordre de la case à cocher et son label.


reverse

Vous aimerez peut-être aussi