Vous êtes sur la page 1sur 2

Bootstrap memo

1. Propriétés de la grille :

 container: Définit un conteneur pour organiser le contenu de votre page.


 row: Crée une ligne pour placer des colonnes.
 col-*: Spécifie les colonnes dans une rangée, avec des classes comme col-6
pour une demi-colonne, col-md-4 pour une colonne sur les écrans moyens,
etc.
 offset-*: Décale une colonne de l'espacement défini.

2. Typographie :

 text-*: Contrôle la couleur du texte ( text-primary, text-danger, etc.).


 font-weight-* : Contrôle l'épaisseur de la police ( font-weight-bold pour gras).
 text-center , text-left , text-right: Alignement du texte.
 display-*: Modifie le comportement d'affichage ( display-1, display-2, etc.).

3. Couleurs :

 bg-*: Définit la couleur de l'arrière-plan ( bg-primary, bg-info, etc.).


 text-*: Contrôle la couleur du texte ( text-primary , text-danger , etc.).

4. Marges et espacement :

 m-* et p-*: Ajoute des marges ( m-2, p-4, etc.).


 mt-*, mb-*, ml-*, mr-*: Marges supérieure, inférieure, gauche, droite.
 mx-*, my-*: Marges horizontales et verticales.

5. Bordures :

 border, border-* :
Ajoute des bordures ( border, border-top, border-danger, etc.).
 rounded: Arrondit les coins des éléments.

6. Boutons :

 btn, btn-*: Crée des boutons ( btn-primary, btn-outline-secondary, etc.).


 btn-lg, btn-sm: Taille des boutons.
Bootstrap memo
 btn-block: Bouton occupant toute la largeur du conteneur parent.

7. Barres de navigation :

 navbar, navbar-expand-*: Crée une barre de navigation ( navbar-expand-lg, navbar-


light,etc.).
 nav-item, nav-link: Éléments de navigation dans la barre de navigation.

8. Formulaires :

 form-group: Groupe de contrôles de formulaire.


 form-control : Contrôle de formulaire.
 btn, btn-*: Boutons dans les formulaires.

9. Composants de modal :

 modal, modal-dialog, modal-content: Crée des modales.


 modal-title, modal-body, modal-footer: Parties d'une modal.

10. Responsive Design : - Utilisez des classes telles que d-none, d-md-block, order-*,
etc., pour concevoir des mises en page réactives.

Vous aimerez peut-être aussi