Scribd
Importer
12 vues2 pages

Guide Complet Bootstrap 5 Hors-Ligne

Le document présente un guide complet sur Bootstrap 5, un framework CSS pour créer des sites web responsives. Il couvre l'installation hors-ligne, le système de grille, les classes utilitaires, les composants utiles, ainsi que des exercices pratiques pour appliquer les concepts. Les utilisateurs apprendront à construire des éléments comme des colonnes, une navbar, des cards et un formulaire.

Transféré par

colamarley911
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 PDF, TXT ou lisez en ligne sur Scribd
12 vues2 pages

Guide Complet Bootstrap 5 Hors-Ligne

Le document présente un guide complet sur Bootstrap 5, un framework CSS pour créer des sites web responsives. Il couvre l'installation hors-ligne, le système de grille, les classes utilitaires, les composants utiles, ainsi que des exercices pratiques pour appliquer les concepts. Les utilisateurs apprendront à construire des éléments comme des colonnes, une navbar, des cards et un formulaire.

Transféré par

colamarley911
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 PDF, TXT ou lisez en ligne sur Scribd

Cours Bootstrap 5 — Guide Complet Hors-Ligne

1. Introduction

Bootstrap est un framework CSS permettant de créer rapidement des sites web responsives et
modernes.

2. Installation

- Installation hors-ligne : Télécharge Bootstrap et lie les fichiers [Link] et


[Link] dans ton projet.

3. Le système de grille (Grid System)

La grille repose sur 12 colonnes :

container, row, col.

Ex :

3 colonnes : col-4 col-4 col-4

4. Classes utilitaires principales :

- Marges : m-1, m-2, m-auto

- Padding : p-1, p-2, p-5

- Couleurs : text-primary, bg-dark

- Flexbox : d-flex, justify-content-center

- Bordures : border, rounded

5. Composants utiles :

- Boutons : btn, btn-primary

- Alertes : alert alert-success

- Cards : card, card-body

- Navbar : navbar, navbar-expand-lg

6. Responsive

Tailles d'écran :

sm, md, lg, xl, xxl


Ex : col-12 col-md-6 col-lg-4

7. Exercices pratiques :

1. Créer une page avec 3 colonnes responsive.

2. Construire une navbar responsive.

3. Faire une card avec image + texte.

4. Construire un formulaire complet Bootstrap.

5. Faire une section Hero centrée.

Fin du cours.

Vous aimerez peut-être aussi