Scribd
Importer
16 vues3 pages

Cours complet sur Bootstrap 5 PDF

Bootstrap est un framework front-end open-source qui facilite la création de sites web modernes et responsives grâce à des classes CSS et des composants préconstruits. Il peut être installé via un CDN ou NPM, et inclut un système de grille basé sur 12 colonnes ainsi que de nombreux composants et classes utilitaires. Conçu pour être entièrement responsive, Bootstrap 5 peut également être intégré avec des frameworks comme React, Angular ou Vue.js.

Transféré par

brunelolory2
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
16 vues3 pages

Cours complet sur Bootstrap 5 PDF

Bootstrap est un framework front-end open-source qui facilite la création de sites web modernes et responsives grâce à des classes CSS et des composants préconstruits. Il peut être installé via un CDN ou NPM, et inclut un système de grille basé sur 12 colonnes ainsi que de nombreux composants et classes utilitaires. Conçu pour être entièrement responsive, Bootstrap 5 peut également être intégré avec des frameworks comme React, Angular ou Vue.js.

Transféré par

brunelolory2
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

Par Brunel Olory


Introduction à Bootstrap
Bootstrap est un framework front-end open-source développé par Twitter. Il permet de
créer des sites web modernes, responsives et cohérents plus rapidement grâce à une
collection de classes CSS et de composants préconstruits.

1. Installation de Bootstrap
Il existe deux principales façons d’utiliser Bootstrap :

- Via un CDN :
Ajoutez simplement les liens suivants dans la section <head> de votre fichier HTML :
<link href="[Link]
rel="stylesheet">
<script src="[Link]
</script>

- Via NPM :
Installez avec la commande : npm install bootstrap

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


Le système de grille de Bootstrap est basé sur 12 colonnes. Il permet de créer des mises
en page responsives avec des classes comme :
.container, .row, .col, .col-md-6, .col-lg-4.

Exemple :
<div class="container">
<div class="row">
<div class="col-md-6">Colonne 1</div>
<div class="col-md-6">Colonne 2</div>
</div>
</div>

3. Les composants Bootstrap


Bootstrap propose de nombreux composants prêts à l’emploi, comme :
- Boutons (.btn, .btn-primary)
- Cartes (.card)
- Barres de navigation (.navbar)
- Modales (.modal)
- Alertes (.alert)

Exemple d’un bouton :


<button class="btn btn-success">Valider</button>

4. Les classes utilitaires


Bootstrap inclut des centaines de classes utilitaires pour gérer :
- Les espacements (.m-3, .p-2)
- Les couleurs (.text-primary, .bg-danger)
- L’alignement (.text-center, .d-flex, .justify-content-between)

Ces classes facilitent la personnalisation sans écrire de CSS supplémentaire.

5. Le design responsive
Bootstrap 5 est conçu pour être entièrement responsive. Les classes comme .col-sm-,
.col-md-, .col-lg- permettent d’adapter les éléments selon la taille de l’écran.

Exemple :
<div class="col-sm-12 col-md-6 col-lg-4"></div>

Conclusion
Bootstrap 5 est un outil puissant pour accélérer le développement web tout en
garantissant un rendu moderne et adaptable. Il peut être combiné avec des frameworks
comme React, Angular ou [Link] pour des projets plus dynamiques.

Vous aimerez peut-être aussi