Scribd
Importer
66 vues2 pages

Guide des classes Bootstrap essentielles

Ce document décrit les principales propriétés et composants de Bootstrap pour la mise en page, la typographie, les couleurs, les marges, les bordures, les boutons, les barres de navigation, les formulaires et les modales.

Transféré par

lamrabtiomaima5
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
66 vues2 pages

Guide des classes Bootstrap essentielles

Ce document décrit les principales propriétés et composants de Bootstrap pour la mise en page, la typographie, les couleurs, les marges, les bordures, les boutons, les barres de navigation, les formulaires et les modales.

Transféré par

lamrabtiomaima5
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

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