Aller au contenu

Laboratoire semaine 8

Consignes

Ce laboratoire vous permet de vous familiariser avec la librairie Bootstrap et :
- son approche mobile first
- l'utilisation de plusieurs classes et la spécificité - son système de grille
- Ses classes flex

Il n'y a aucun travail à remettre à l'enseignant à la fin de ce laboratoire, mais il est toujours conseillé de le faire valider.

Durée: 3h, finir l'énoncé avant la prochaine période de laboratoire

Introduction à Bootstrap

Attention

L'exercice suivant se veut être une introduction à Bootstrap.

À plusieurs reprises, vous aurez à appliquer plusieurs classes sur une même balise.

Pour appliquer plusieurs classes sur une balise HTML, il faut les appeler une à la suite de l'autre avec un espace entre chaque.

Exemple :

<div class="container w-75 bg-dark text-center">

Pour ce laboratoire, vous aurez besoin de :

  1. Notes de cours de la semaine 8
  2. Documentation Bootstrap v5.3

Autres ressources intéressantes

Bootstrap Cheat Sheet avec exemples

Premiers pas avec Bootstrap

  1. Créer un nouveau dossier de projet (laboratoire8) et y créer :

    • page index.html
    • sous-dossier pour les images
    • sous-dossier pour le CSS personnalisé (il y en aura très peu)

    Lab8

  2. Ajouter les styles Bootstrap CDN

    Dans le head de index.html, ajouter la feuille de styles Bootstrap :

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

  3. Insérer le HTML du header suivant :

    <header>     
    <h1>Ma première page Bootstrap</h1>     
    <p>Cette page est 100% réactive et mobile-first !</p>
</header>

  4. Ajouter les classes Bootstrap suivantes :

    Résultat :

    Lab8

  5. Sous l'en-tête, ajouter la section de navigation suivante :

    <nav>     
    <div>         
        <ul>             
            <li>
                <a href="">Notes de cours</a>             
            </li>             
            <li>                 
                <a href="">Documentation Officielle</a>             
            </li>             
            <li>
                <a href="">Cheat Sheet</a>             
            </li>         
        </ul>     
    </div> 
</nav>
    • Dans les href, ajouter les liens qui se retrouvent plus haut dans cet énoncé.

    Pour créer une barre de navigation réactive de base :

    • Sur la balise <nav>:

      • créer la barre de navigation avec navbar
      • indiquer que la barre doit s'étendre horizontalement à partir d'écrans moyens avec navbar-expand-md
      • appliquer une couleur de fond foncée couleurs de fond
      • indiquer que la barre de menu est foncée avec navbar-dark pour que la couleur de texte s'ajuste automatiquement
      • rendre la barre collante au haut de l'écran Rendre collant avec Bootstrap

    • Sur la balise <div>, créer un contenant fluide

    • Sur la balise <ul>:

    • Sur chaque <li>:

      • indiquer que c'est un item de navigation avec nav-item
      • centrer le texte (comme dans le header)

    • Sur chaque <a>:

      • indiquer que c'est un lien de navigation avec nav-link

    Résultat :

    Lab8

  6. Ajouter le bloc <main> suivant :

    <main>         
    <div>             
        <div>                 
            <h3>Contenu colonne 1</h3>                 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>                 
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>             
        </div>             
        <div>                 
            <h3>Contenu colonne 2</h3>                 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut placerat augue. Donec pharetra eleifend ex, et tincidunt sem accumsan ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nibh turpis. Quisque lorem lacus, egestas eget cursus nec, dapibus id purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec volutpat, leo a pharetra tempus, urna metus hendrerit metus, ut tempus ex est id justo.
            </p>                 
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>                 
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>             
        </div>             
        <div>                 
            <h3>Contenu colonne 3</h3>                 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>             
        </div>         
    </div>     
</main>

    • Sur la balise <main> :

      • Créer un contenant (container) qui prend 100% jusqu'aux écrans moyens, puis prend une largeur fixe sur écrans médium et plus
      • Ajouter une marge en Y (haut et bas) de niveau 5 avec my-5
      • Retirer le padding par défaut avec p-0

    • Sur la première <div>:

    • Sur la deuxième <div> (colonne 1) :

      • créer une colonne du système de grille qui prend 100% jusqu'aux écrans moyens, puis 3 fragments sur écrans médium et plus
      • appliquer la couleur de fond danger

    • Sur la troisième <div> (colonne 2) :

      • créer une colonne du système de grille qui prend 100% jusqu'aux écrans moyens, sans nombre de fragment maximum par la suite
      • appliquer une bordure de couleur primary (voir la documentation sur les bordures: https://getbootstrap.com/docs/5.3/utilities/borders/)

    • Sur la quatrième <div>(colonne 3) :

    Résultat sur écrans moyens :

    Lab8

    Résultat sur petits écrans:

    Lab8

  7. Toujours dans le main, copier-coller la ligne et les 3 colonnes (toutes les <div>).

    Modifier les classes Bootstrap des colonnes pour obtenir le résultat suivant :

    Cliquer sur l'image pour la voir plus grande au besoin.

    Lab8

    ⚠️ Assurez-vous que lorsque l'écran est petit, les 6 colonnes apparaissent une au-dessus de l'autre en prenant 100% de la largeur.

  8. Télécharger une image d'au moins 1920px de large sur Pexels ou Pixabay

  9. Dans le <main>, ajouter l'image

    Exemple : <img src="img/paysage.jpg" alt="paysage">

    ⚠️" Attention : Pour que l'image soit exactement de la même largeur que la grille créée plus haut, il faut enlever les marges en x des row de la grille...

    Résultat :

    Lab8

  10. Ajouter le footer :

    <footer>     
    <p>Réussi !</p> 
</footer>

    • Ajouter un icône Fontawesome après le paragraphe

    • Sur le footer, utiliser les classes Bootstrap pour :

      • indiquer que c'est un contenant fluide
      • appliquer une couleur de fond
      • centrer le texte
      • padding de niveau 5

    • Sur le paragraphe :

    Résultat :

    Lab8

    ⚠️ La taille de l'icône Fontawesome importe peu pour le moment (ici elle a été téléchargée en petite taille) - il n'y a pas de styles appliqués sur l'image pour le moment.

Ajouts Bootstrap

Maintenant que vous avez fait vos premiers pas avec Bootstrap, essayez les ajouts suivants :

  1. Sur le nav, ajouter :

    • Positionner les items de menu à droite de la barre lorsqu'on est sur un écran large et + (sinon, aligné à gauche en colonne)

      La navigation a donc 3 positions :

      • en colonne sur petit écran
      • espacé égal sur écrans médium
      • positionné à droite sur grands écrans

  2. Après l'image dans le <main>, ajouter un ensemble de 3 cartes à l'aide d'un card-group

    Voir notes de cours sur les card-group

    Résultat :

    Lab8

  3. Créer une superposition de cartes sur l'image du main :

    Résultat :

    Lab8

Ajout de CSS personnalisé

Bootstrap ne peut pas tout faire, surtout si on désire personnaliser notre site.

Nous allons donc personnaliser un peu notre site :

  1. Créer un fichier CSS dans le bon dossier

  2. Pour rester uniforme, nous allons uniquement utiliser des classes dans notre CSS :

    • Créer une classe à appliquer au <header> qui contient :

      • Une image de fond

      • Du padding haut et bas de 9rem (ou plus si nécessaire) pour l'agrandir

        ⚠️ Attention de ne pas avoir de conflit : appliquer la classe personnalisée en dernier dans la liste de classes du header.

      Lab8

    • Créer une classe pour les items de menu lorsque la souris passe au-dessus :

      • Changer la couleur de fond
      • Appliquer une légère transformation pour les agrandir

      Lab8

      • Ajouter la classe Bootstrap sur les éléments de menu pour :
        • arrondir les coins des éléments de menu (lorsque la couleur de fond change, nous verrons des coins arrondis)

  3. Créer une classe pour donner une largeur à l'icône utilisé dans le footer

    Les largeurs en Bootstrap sont des multiples de 25%, ce qui serait trop gros.

    On doit donc créer notre propre largeur dans notre CSS.

    ¸lab8

Validation du code

Ne pas oublier de valider votre code HTML

➡️ https://validator.w3.org/#validate_by_input

Questionnaire

Ce questionnaire compte pour 2% de la note finale de la session.

Remplir le questionnaire

👏 Bravo! Vous avez terminé votre premier exercice Bootstrap !