====== Bootstrap 5 ====== * Doc de Bootstrap 5 : [[https://getbootstrap.com/docs/5.0/getting-started/introduction/]] * Doc sur W3Schools : [[https://www.w3schools.com/bootstrap5/]] * YouTube: * [[https://www.youtube.com/watch?v=uc5Vt6-jeCg|Découverte de Bootstrap 5]] * [[html_css:bootstrap5:compilation_vscode]] * [[html_css:bootstrap5:data_tables]] * [[html_css:bootstrap5:popovers]] ^ Liste des Classes ^^ | ''g-*'' | Gutters [[https://getbootstrap.com/docs/5.3/layout/gutters/]] | ^ Breakpoints ^^ | xs | <=576px | | sm | >=576px | | md | >=768px | | lg | >=992px | | xl | >=1200px | | xxl | >=1400px | ^ Couleurs de texte ^ | text-primary, text-secondary, text-muted | | text-success, text-info, text-warning, text-danger | | text-body, text-white, text-dark, text-light | ^ Couleurs de fond ^ | bg-primary, bg-secondary | | bg-success, bg-info, bg-warning, bg-danger | | bg-dark, bg-light | ^ Couleurs de fond + texte assorties ^ | text-bg-primary, text-bg-secondary | | text-bg-success, text-bg-info, text-bg-warning, text-bg-danger | | text-bg-dark, text-bg-light | ^ Margin et Padding ^^^ | {property}{sides}-{size} || pour xs | | {property}{sides}-{breakpoint}-{size} || pour sm, md, lg, xl, xxl | | m/p | (all) | 0 (0) | | m/p | t (top) | 1 (.25rem) | | m/p | b (bottom) | 2 (.5rem) | | m/p | s (left/start) | 3 (1rem) | | m/p | e (right/end) | 4 (1.5rem) | | m/p | x (all horiz.) | 5 (3rem) | | m/p | y (all vert.) | auto | ^ Bordures ^^ | border | Ajout d'une bordure sur les 4 bords | | border-top, border-bottom | ou en haut, en bas | | border-start, border-end | ou à gauche, à droite | ^ Largeur de bordure ^^ | border-0, -1, -2, -3, -4, -5 || | À combiner avec border-xxx pour spécifier une largeur || ^ Couleur de bordure ^^ | border-primary, -secondary, - success, -danger, -warning, -info, -light, - dark, -white || | À combiner avec border-xxx pour spécifier une couleur || ^ Coins arrondis ^^ | rounded | Ajout d'un arrondi aux 4 coins | | rounded-top, rounded-bottom | ou en haut, en bas | | rounded-start, rounded-end | ou à gauche, à droite | | rounded-circle, rounded-pill || | rounded-0, -1, -2, -3, -4, -5 ||