Introduction à Bootstrap
Bootstrap utilise HTML, CSS et JavaScript pour offrir une série de composants prêts à
l'emploi, ainsi qu'une grille réactive qui permet de concevoir des mises en page flexibles et
adaptables à différents appareils.
1. Installation de Bootstrap
1.1. Via CDN
La façon la plus simple d'ajouter Bootstrap à votre projet est d'utiliser un CDN (Content
Delivery Network). Ajoutez les lignes suivantes dans la section <head> de votre document
HTML :
html
Copier le code
<!-- CSS de Bootstrap -->
<link rel="stylesheet"
href="[Link]
">
<!-- JavaScript de Bootstrap et jQuery -->
<script
src="[Link]
script>
<script
src="[Link]
.js"></script>
<script
src="[Link]
/script>
1.2. Téléchargement et Installation Locale
Vous pouvez également télécharger Bootstrap depuis le site officiel et l'inclure directement
dans votre projet.
2. Structure de Base
2.1. Le Conteneur
Le conteneur est un élément fondamental dans Bootstrap. Il contient tout le contenu de la
page et s'assure que le contenu est centré et bien espacé. Utilisez .container pour un
conteneur fixe ou .container-fluid pour un conteneur plein écran.
html
Copier le code
<div class="container">
<!-- Votre contenu ici -->
</div>
2.2. Grille
Bootstrap utilise un système de grille réactif basé sur 12 colonnes. Vous pouvez créer des
lignes et des colonnes pour disposer vos éléments. Exemple :
html
Copier le code
<div class="container">
<div class="row">
<div class="col-sm-4">Colonne 1</div>
<div class="col-sm-4">Colonne 2</div>
<div class="col-sm-4">Colonne 3</div>
</div>
</div>
3. Composants Bootstrap
Bootstrap propose divers composants que vous pouvez utiliser pour enrichir vos interfaces.
Voici quelques exemples :
3.1. Boutons
html
Copier le code
<button type="button" class="btn btn-primary">Bouton Principal</button>
<button type="button" class="btn btn-secondary">Bouton Secondaire</button>
3.2. Barre de Navigation
html
Copier le code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MonSite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
3.3. Alertes
html
Copier le code
<div class="alert alert-success" role="alert">
C'est un message de succès !
</div>
<div class="alert alert-danger" role="alert">
C'est un message d'erreur !
</div>
3.4. Modales
html
Copier le code
<!-- Bouton pour ouvrir la modale -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
Ouvrir la Modale
</button>
<!-- Modale -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Titre de la
Modale</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Contenu de la modale.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Sauvegarder les
modifications</button>
</div>
</div>
</div>
</div>
4. Utilisation des Classes Utilitaires
Bootstrap fournit de nombreuses classes utilitaires pour gérer l'espacement, l'alignement, la
couleur, etc. Par exemple :
4.1. Espacement
html
Copier le code
<div class="mt-3 mb-3">Espacement en haut et en bas</div>
<div class="p-3">Padding</div>
4.2. Alignement
html
Copier le code
<div class="text-center">Texte centré</div>
5. Personnalisation
Bootstrap peut être personnalisé en modifiant les variables Sass ou en ajoutant vos propres
styles CSS. Vous pouvez aussi utiliser Bootstrap Customizer pour ajuster les paramètres à vos
besoins.
