Installation et Structure

Bootstrap peut être installé de plusieurs façons : via un CDN, un téléchargement ou npm.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Grille et Conteneurs

Bootstrap utilise un système de grille flexible à 12 colonnes qui permet de structurer les éléments pour créer des mises en page réactives. Ce système est composé de conteneurs, de rangées (row) et de colonnes (col). La grille s'adapte aux différents écrans grâce aux classes de points de rupture : .col-, .col-sm-, .col-md-, .col-lg-, et .col-xl-.

Conteneurs

Les conteneurs limitent la largeur du contenu et créent une marge intérieure, centrant ainsi les éléments sur la page. Bootstrap propose trois types de conteneurs : container (largeur fixe), container-fluid (pleine largeur) et container-{breakpoint} pour adapter la largeur au point de rupture.

<div class="container">...contenu ici...</div>
<div class="container-fluid">...contenu pleine largeur...</div>

Grille Simple (Deux Colonnes)

La grille de Bootstrap utilise des rangées (row) pour aligner les colonnes (col) en lignes horizontales. Dans cet exemple, chaque colonne occupe 6 colonnes sur les écrans de taille moyenne (col-md-6).

<div class="container">
    <div class="row">
        <div class="col-md-6">Contenu 1</div>
        <div class="col-md-6">Contenu 2</div>
    </div>
</div>

Colonnes de Largeur Variable

Il est possible de créer des colonnes de largeur variable en attribuant une fraction des 12 colonnes à chaque élément. Voici un exemple avec une colonne de 4/12 et une autre de 8/12 :

<div class="container">
    <div class="row">
        <div class="col-md-4">Colonne de 4/12</div>
        <div class="col-md-8">Colonne de 8/12</div>
    </div>
</div>

Colonnes Automatiques (Auto-layout)

Utilisez col sans spécifier de taille pour des colonnes qui se répartissent équitablement la largeur disponible. Voici un exemple :

<div class="container">
    <div class="row">
        <div class="col">Colonne 1</div>
        <div class="col">Colonne 2</div>
        <div class="col">Colonne 3</div>
    </div>
</div>

Grille Réactive avec Points de Rupture

Pour créer des grilles adaptatives, spécifiez différentes tailles de colonnes pour chaque point de rupture (.col-sm-, .col-md-, etc.). L'exemple suivant utilise une disposition différente pour les petits et grands écrans :

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-4">1ère colonne</div>
        <div class="col-sm-6 col-md-4">2ème colonne</div>
        <div class="col-sm-6 col-md-4">3ème colonne</div>
    </div>
</div>

Alignement Vertical et Horizontal

Bootstrap permet également d'aligner les colonnes de manière horizontale et verticale. Par exemple, pour centrer verticalement une colonne dans une ligne, utilisez align-items-center :

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-4">Centré verticalement</div>
        <div class="col-md-4">Colonne 2</div>
        <div class="col-md-4">Colonne 3</div>
    </div>
</div>

Composants

Bootstrap offre une vaste collection de composants UI préconstruits et personnalisables pour accélérer le développement web. Ces composants incluent boutons, cartes, alertes, formulaires, et bien plus, permettant ainsi de créer rapidement une interface utilisateur harmonieuse et réactive.

<button class="btn btn-primary">Bouton Principal</button>
<button class="btn btn-success">Bouton Succès</button>
<button class="btn btn-danger">Bouton Danger</button>

Cartes

Les cartes de Bootstrap sont des conteneurs flexibles qui peuvent inclure des titres, du texte, des images, et des boutons. Elles permettent de structurer des éléments visuels de manière attrayante.

<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image de carte">
    <div class="card-body">
        <h5 class="card-title">Titre de la carte</h5>
        <p class="card-text">Voici un exemple de texte dans une carte Bootstrap.</p>
        <a href="#" class="btn btn-primary">Voir Plus</a>
    </div>
</div>

Titre de la carte

Voici un exemple de texte dans une carte Bootstrap.

Voir Plus

Alertes

Les alertes sont des messages d’information stylisés pour attirer l’attention des utilisateurs. Elles utilisent des classes comme .alert-success, .alert-warning, et .alert-danger pour changer de couleur selon le contexte.

<div class="alert alert-success" role="alert">
    Ceci est une alerte de succès!
</div>
<div class="alert alert-warning" role="alert">
    Ceci est une alerte d’avertissement!
</div>
<div class="alert alert-danger" role="alert">
    Ceci est une alerte de danger!
</div>

Formulaires

Bootstrap offre des classes de style pour les formulaires, rendant les champs, boutons, et étiquettes uniformes et attrayants. Utilisez les classes comme .form-control pour les champs et .form-label pour les étiquettes.

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Adresse Email</label>
        <input type="email" class="form-control" id="email" placeholder="Entrez votre email">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Mot de Passe</label>
        <input type="password" class="form-control" id="password" placeholder="Entrez votre mot de passe">
    </div>
    <button type="submit" class="btn btn-primary">Connexion</button>
</form>

Modals

Les modals sont des fenêtres contextuelles qui apparaissent au-dessus du contenu principal. Elles sont souvent utilisées pour les notifications, formulaires ou confirmations.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Ouvrir le modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Titre du Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Contenu du modal.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>