index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="./assets/index.css" rel="stylesheet">
        <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
              integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
              rel="stylesheet">
        <script crossorigin="anonymous"
                integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body class="bg-dark">
        <div class="p-5 container">
            <div class="h-100 rounded-5 p-1 bg-dark">
                <h2 class="h1 text-white fw-bold mb-4  border-bottom border-warning p-1">Qu’est-ce que Bootstrap</h2>
                <p class="text-darker-grey mb-4">
                    Bootstrap est un <span class="text-warning fw-bold cursor-pointer"
                                           title="Un framework est un ensemble de librairies qui facilitent le travail des développeurs informatiques et améliorent leur productivité.">framework</span>
                    front-end contenant une collection d’outils utiles à la création
                    et au design de sites et d’applications web en front end. <br> Il contient des codes HTML et CSS
                    ainsi que des extensions JavaScript en option,
                    permettant la création de formulaires, de boutons, d’outils de navigations et d’autres éléments
                    interactifs à intégrer dans une application.
                </p>
                <div class="d-flex flex-wrap text-darker-grey mb-4 ">
                    <div class="w-50">
                        <h3 class="text-white">Les plus <span class="fw-bold text-warning">+</span></h3>
                        <ul class="">
                            <li>facile de prise en main</li>
                            <li>fournie une charte graphique clé en main</li>
                            <li>améliore la productivité</li>
                            <li>fournie un système de grille plus simple que flexbox</li>
                            <li>stable</li>
                            <li>responsive</li>
                            <li>cross-navigateurs</li>
                        </ul>
                    </div>
                    <div class="w-50">
                        <h3 class="text-white">Les moins <span class="fw-bold text-warning">-</span></h3>
                        <ul class="">
                            <li>lourd</li>
                            <li>peu personnalisable</li>
                            <li>il y a un temps de montée en compétences</li>
                            <li>Votre site risque de ne pas de dénoter des autres qui utilisent le même framework</li>
                            <li>Vous êtes dépendant d’une organisation qui n’est pas forcément pérenne</li>
                        </ul>
                    </div>
                </div>
                <h2 class="h1 text-white fw-bold mb-4 border-bottom border-warning p-1">Installer bootstrap</h2>
                <h3 class="h3 text-white fw-bold mb-4">via CDN</h3>
                <p class="text-darker-grey">Ces deux balises doivent être importé dans votre balise head.</p>
                <h5 class="text-warning h5 fw-semibold">CSS :</h5>
                <pre class="text-white p-4 border rounded darker-grey">&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"&gt;</pre>
                <h5 class="text-warning h5 fw-semibold">JS :</h5>
                <pre class="text-white p-4 border rounded darker-grey">&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
                <h3 class="h3 text-white fw-bold mb-4">via NPM</h3>
                <pre class="text-white p-4 border rounded darker-grey">npm i bootstrap</pre>
                <h2 class="h1 text-white fw-bold mb-4 border-bottom border-warning p-1">Les bases de Bootstrap</h2>
                <h3 class="h3 text-white fw-bold my-5">Les couleurs</h3>
                <p class="text-darker-grey">Bootstrap utilise une palette de couleurs basée sur le système de
                    conception de Google Material Design. Chaque couleur a un nom et une valeur hexadécimale. Par
                    exemple, le nom de la couleur primaire est <span class="text-primary fw-bold">primary</span> et sa
                    valeur hexadécimale est <span class="text-primary fw-bold">#0d6efd</span>. Nous utilisons ces
                    noms et valeurs de couleurs pour les classes de couleur.</p>
                <p class="text-darker-grey">Il existe 6 couleurs de base :</p>
                <ul class="text-darker-grey">
                    <li class="text-primary fw-bold">#0d6efd (primary)</li>
                    <li class="text-secondary fw-bold">#6c757d (secondary)</li>
                    <li class="text-success fw-bold">#198754 (success)</li>
                    <li class="text-danger fw-bold">#dc3545 (danger)</li>
                    <li class="text-warning fw-bold">#ffc107 (warning)</li>
                    <li class="text-info fw-bold">#0dcaf0 (info)</li>
                </ul>
                <p class="text-darker-grey">Les couleurs peuvent être utilisées pour les classes de texte, les
                    arrière-plans et les bordures.</p>
                <h3 class="h3 text-white fw-bold my-5">1. Les conteneurs</h3>
                <p class="text-darker-grey">Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap
                    et sont nécessaires lors de l'utilisation de notre système de grille par défaut. Les conteneurs sont
                    utilisés pour contenir, espacer et (parfois) centrer le contenu à l'intérieur d'eux. Bien que les
                    conteneurs puissent être imbriqués, la plupart des mises en page n'exigent pas un conteneur
                    imbriqué.</p>
                <p class="text-darker-grey">
                    <span class="text-warning fw-bold ">Note :</span> Les conteneurs ne peuvent pas être placés à
                    l'intérieur d'un élément de grille.
                </p>
                <p class="text-darker-grey">
                    <span class="text-warning fw-bold ">Note :</span> Les conteneurs appliquent une marge horizontale
                    qui se réduit en fonction de la taille de l'écran.
                </p>
                <p class="text-darker-grey">Bootstrap propose trois types de conteneurs :</p>
                <ul class="text-darker-grey">
                    <li>Les conteneurs fixes (fixed) : ils ont une largeur fixe qui ne change pas avec la taille de
                        l'écran.
                    </li>
                    <li>Les conteneurs fluides (fluid) : ils ont une largeur de 100% et s'adaptent à la taille de
                        l'écran.
                    </li>
                    <li>Les conteneurs responsives : ils ont une largeur fixe jusqu'à un certain point de rupture
                        (breakpoint) et ensuite ils deviennent fluides.
                    </li>
                </ul>
                <pre class="text-white p-4 border rounded darker-grey">.container, qui définit une largeur maximale à chaque point de rupture responsive <br>.container-{point de rupture}, qui a une largeur de 100% jusqu'au point de rupture spécifié <br>.container-fluid, qui a une largeur de 100% à tous les points de rupture</pre>
                <h3 class="h3 text-white fw-bold my-5">2. Les grilles</h3>
                <p class="text-darker-grey">Le système de grille de Bootstrap utilise une série de conteneurs, de
                    lignes et de colonnes pour agencer et aligner le contenu. Il est construit avec flexbox et est
                    entièrement responsive. Ci-dessous se trouve un exemple et une explication approfondie de la
                    manière dont le système de grille s'assemble.</p>
                <p class="text-darker-grey">Les grilles Bootstrap sont composées de <span class="text-warning fw-bold">12 colonnes</span>.
                    Elles peuvent être
                    utilisées pour créer des mises en page de toutes formes et tailles.</p>
                <p class="text-darker-grey">Les colonnes sont entourées de <span
                        class="text-warning fw-bold">gutters</span> (marges) négatives de
                    moitié. Cela signifie que toutes les colonnes comportent des marges à leur gauche et à leur droite,
                    qui sont <span class="text-warning fw-bold">alignées</span> avec les marges des colonnes adjacentes.
                    Cela permet de
                    créer facilement des mises en page contenant des colonnes de largeurs différentes.</p>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 background">
                            Une colonne sur une ligne
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 background">
                            Une colonne sur deux
                        </div>
                        <div class="col-sm-6 background">
                            Une colonne sur deux
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 background">
                            Une colonne sur trois
                        </div>
                        <div class="col-sm-4 background">
                            Une colonne sur trois
                        </div>
                        <div class="col-sm-4 background">
                            Une colonne sur trois
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3 background">
                            Une colonne sur quatre
                        </div>
                        <div class="col-sm-3 background">
                            Une colonne sur quatre
                        </div>
                        <div class="col-sm-3 background">
                            Une colonne sur quatre
                        </div>
                        <div class="col-sm-3 background">
                            Une colonne sur quatre
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                        <div class="col-sm-2 background">
                            Une colonne sur six
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                        <div class="col-sm-1 background">
                            Une colonne sur douze
                        </div>
                    </div>
                    <h3 class="h3 text-white fw-bold my-5">3. Les breakpoints</h3>
                    <p class="text-darker-grey">Les <span class="text-warning fw-bold">breakpoints</span> Bootstrap sont
                        les points de rupture de la grille
                        responsive. Ils déterminent à quel moment la grille passe d'une disposition à une autre.</p>
                    <p class="text-darker-grey">Les points de rupture Bootstrap sont les suivants :</p>
                    <ul class="text-darker-grey">
                        <li>xs : extra small (téléphones portables)</li>
                        <li>sm : small (tablettes)</li>
                        <li>md : medium (ordinateurs portables)</li>
                        <li>lg : large (ordinateurs de bureau)</li>
                    </ul>
                    <p class="text-darker-grey">Les points de rupture servent à définir la largeur minimale à partir de
                        laquelle la grille
                        change de disposition. Par exemple, si vous utilisez le point de rupture <span
                                class="text-warning fw-bold">sm</span>, les colonnes
                        seront horizontales à partir de 576px de largeur.</p>
                    <p class="text-darker-grey">Les points de rupture Bootstrap sont définis dans le fichier <span
                            class="text-warning fw-bold">bootstrap-grid.css</span>.</p>
                    <p class="text-darker-grey">Vous pouvez également définir vos propres points de rupture en modifiant
                        les variables
                        <span class="text-warning fw-bold">$grid-breakpoints</span> dans le fichier <span
                                class="text-warning fw-bold">bootstrap-grid.css</span>.</p>
                    <h3 class="h3 text-white fw-bold my-5">4. La personnalisation de bootstrap</h3>
                    <p class="text-darker-grey">Vous pouvez personnaliser Bootstrap en modifiant les variables css, cela
                        vous permet de
                        modifier les couleurs, les polices, les tailles, etc.</p>
                    <p class="text-darker-grey">Pour personnaliser Bootstrap, vous devez modifier les variables dans le
                        fichier <span class="text-warning fw-bold">bootstrap.css</span>.</p>
                    <p>Pour modifier les variables, vous devez :</p>
                    <ul class="text-darker-grey">
                        <li>Créer un fichier <span class="text-warning fw-bold">bootstrap-custom.css</span></li>
                        <li>Importer le fichier <span class="text-warning fw-bold">bootstrap.css</span> dans votre
                            fichier <span class="text-warning fw-bold">bootstrap-custom.css</span></li>
                        <li>Importer le fichier <span class="text-warning fw-bold">bootstrap-custom.css</span> dans
                            votre html
                        </li>
                        <li>Modifier les variables dans le fichier <span class="text-warning fw-bold">bootstrap-custom.css</span>
                        </li>
                    </ul>
                    <p class="text-darker-grey">Vous pouvez également personnaliser Bootstrap en modifiant les variables
                        sass, cela vous
                        permet de modifier les couleurs, les polices, les tailles, etc.</p>
                    <h3 class="h3 text-white fw-bold my-5">5. Les composants</h3>
                    <p class="text-darker-grey">Bootstrap propose de nombreux composants prêts à l'emploi. Vous pouvez
                        les utiliser en
                        copiant-collant le code html dans votre page.</p>
                    <p class="text-darker-grey">
                        <span class="text-warning fw-bold ">Note :</span> les composants Bootstrap utilisent du
                        javascript. Pour que les composants
                        fonctionnent, vous devez importer le fichier <span
                            class="text-warning fw-bold">bootstrap.js</span> dans votre html.
                    </p>
                    <p class="text-darker-grey">Voici quelques exemples de composants Bootstrap :</p>
                    <h4 class="h4 text-white fw-bold mt-3">Les boutons</h4>
                    <a class="btn btn-primary" href="">Bouton primaire</a>
                    <a class="btn btn-secondary" href="">Bouton secondaire</a>
                    <a class="btn btn-success" href="">Bouton succès</a>
                    <a class="btn btn-danger" href="">Bouton danger</a>
                    <a class="btn btn-warning" href="">Bouton warning</a>
                    <a class="btn btn-info" href="">Bouton info</a>
                    <h4 class="h4 text-white fw-bold mt-3">Les accordéons</h4>
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button aria-controls="collapseOne" aria-expanded="true" class="accordion-button"
                                        data-bs-target="#collapseOne" data-bs-toggle="collapse" type="button">
                                    Accordion Item #1
                                </button>
                            </h2>
                            <div class="accordion-collapse collapse show" data-bs-parent="#accordionExample"
                                 id="collapseOne">
                                <div class="accordion-body">
                                    <strong>This is the first item's accordion body.</strong> It is shown by default,
                                    until the collapse plugin adds the appropriate classes that we use to style each
                                    element. These classes control the overall appearance, as well as the showing and
                                    hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                                    our default variables. It's also worth noting that just about any HTML can go within
                                    the <code>.accordion-body</code>, though the transition does limit overflow.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button aria-controls="collapseTwo" aria-expanded="false"
                                        class="accordion-button collapsed"
                                        data-bs-target="#collapseTwo" data-bs-toggle="collapse" type="button">
                                    Accordion Item #2
                                </button>
                            </h2>
                            <div class="accordion-collapse collapse" data-bs-parent="#accordionExample"
                                 id="collapseTwo">
                                <div class="accordion-body">
                                    <strong>This is the second item's accordion body.</strong> It is hidden by default,
                                    until the collapse plugin adds the appropriate classes that we use to style each
                                    element. These classes control the overall appearance, as well as the showing and
                                    hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                                    our default variables. It's also worth noting that just about any HTML can go within
                                    the <code>.accordion-body</code>, though the transition does limit overflow.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button aria-controls="collapseThree" aria-expanded="false"
                                        class="accordion-button collapsed"
                                        data-bs-target="#collapseThree" data-bs-toggle="collapse"
                                        type="button">
                                    Accordion Item #3
                                </button>
                            </h2>
                            <div class="accordion-collapse collapse" data-bs-parent="#accordionExample"
                                 id="collapseThree">
                                <div class="accordion-body">
                                    <strong>This is the third item's accordion body.</strong> It is hidden by default,
                                    until the collapse plugin adds the appropriate classes that we use to style each
                                    element. These classes control the overall appearance, as well as the showing and
                                    hiding via CSS transitions. You can modify any of this with custom CSS or overriding
                                    our default variables. It's also worth noting that just about any HTML can go within
                                    the <code>.accordion-body</code>, though the transition does limit overflow.
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="h4 text-white fw-bold mt-3">Les alertes</h4>
                    <div class="alert alert-info" role="alert">
                        Une alerte info
                    </div>
                    <div class="alert alert-success" role="alert">
                        Une alerte succès
                    </div>
                    <h4 class="h4 text-white fw-bold mt-3">Les badges</h4>
                    <span class="badge bg-secondary">Secondary</span>
                    <span class="badge bg-success">Success</span>
                    <h4 class="h4 text-white fw-bold mt-3">Les cartes</h4>
                    <div class="card" style="width: 18rem;">
                        <div class="border rounded bg-secondary m-2 d-flex justify-content-center align-items-center"
                             style="height: 10rem;">
                            img
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <a class="btn btn-primary" href="#">Go somewhere</a>
                        </div>
                    </div>
                    <h4 class="h4 text-white fw-bold mt-3">Les formulaires</h4>
                    <form class="text-darker-grey bg-white p-3 border rounded">
                        <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputPassword1" class="form-label">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <h4 class="h4 text-darker-grey fw-bold my-5">Plus d'exemples sur le site de Bootstrap <a class="text-warning" href="https://getbootstrap.com/docs/5.3/components/accordion/" target="_blank">Components</a> & <a href="https://getbootstrap.com/docs/5.3/forms/overview/" target="_blank" class="text-warning">Forms</a></h4>
                    <h2 class="h1 text-white fw-bold my-5 border-bottom border-warning p-1">Conclusion</h2>
                    <p class="text-darker-grey"> Bref, vous avez compris Bootstrap est un framework CSS qui permet de
                        créer des sites web responsive rapidement. Il est très utilisé dans le monde du web et il est
                        très facile de trouver des ressources sur internet pour vous aider à l'utiliser. </p>
                    <p class="text-darker-grey"> Pour aller plus loin, je vous conseille de vous intéresser à
                        <a class="text-warning" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" target="_blank">la documentation officielle</a> de Bootstrap. </p>
                    <h2 class="h1 text-white fw-bold my-5 border-bottom border-warning p-1">Maintenant c'est à vous jouer !</h2>
                    <p class="text-darker-grey "> Maintenant que vous avez vu les bases de Bootstrap, je vous propose de
                        créer votre propre site web en utilisant Bootstrap. Appuyer vous sur la documentation.</p>
                    <p class="text-darker-grey ">Vous devez vous inspirer de  <a class="text-warning" href="https://getbootstrap.com/docs/5.1/examples/checkout/" target="_blank">cette page</a> qui présente un formulaire de commande. </p>
                    <p class="text-darker-grey ">Le lien vers le code source de la page est <a class="text-warning" href="pages/billing.html" target="_blank">ici</a>. (fichier billing.html) </p>

                    <p class="text-darker-grey "> - Créer dans un premier temps la structure HTML de la page. </p>
                    <p class="text-darker-grey "> - Ensuite, vous devez utiliser Bootstrap pour styliser votre page. </p>
                    <p class="text-darker-grey "> - Enfin, vous devez utiliser les <span class="fw-bold text-warning">breakpoints</span> de Bootstrap pour rendre votre page responsive. </p>


                </div>
            </div>
        </div>
    </body>
</html>