Aller au contenu

Exercices Intro à Bootstrap

Rappel : ajouter Bootstrap à une page

  1. S'assurer que la balise de détection du viewport est présente dans le <head>
  2. Ajouter le lien CSS dans le <head>
  3. Ajouter le script à la fin du <body>

Notes de cours "Inclure Bootstrap" : https://interfaces.dinf.ca/semaine8/bootstrap/#inclure-bootstrap

Exercice

  1. Télécharger l'image et la placer dans le dossier images de votre projet

    Image d'avatar à télécharger

  2. Dans le body de votre page, insérer ce HTML :

    <div>
    <img src="images/avatar.jpg" alt="Image d'avatar">

    <div>
        <h1>Alexandra Martin</h1>
        <p>Graphiste 3D</p>
        <p>Passionnée de jeux vidéo, d'art et longues balades en nature.</p>
        <span>Créative</span>
        <span>Curieuse</span>
    </div>
</div>

  3. Suivre les étapes pour appliquer les classes Bootstrap au bon endroit et recréer cet affichage :

    Exercice

  1. Sur la div principale (parent), appliquer les classes suivantes :

  2. Sur l'image, appliquer les classes suivantes :

  3. Sur la div qui contient le texte, appliquer les classes suivantes :

  4. Sur le h1, appliquer fg-accent pour la couleur de texte (autres couleurs de texte : https://getbootstrap.com/docs/6.0/utilities/colors/#colors)

  5. Sur le premier paragraphe, appliquer les classe suivantes :

    • fg-primary pour la couleur de texte
    • fw-bold pour appliquer du gras sur la police
    • fs-lg pour une taille de police large

  6. Appliquer une taille de police large sur le deuxième paragraphe

  7. Sur les deux span, appliquer :

Votre bloc ressemble présentement à ceci :

Exercice 1

Pour positionner les éléments :

  1. On se rappelle qu'un parent ayant un affichage en flex positionne ses enfants côte à côte

    ➡️ Sur la div principale, appliquer la classe d-flex (qui veut dire display: flex)

  2. Pour positionner les enfants, on ajoute au parent les classes justify-content et align-items comme on le ferait en CSS

    ➡️ Ajouter les deux classes justify-content-center et align-items-center

    Résultat :

    Exercice

Pour rendre réactif, on va modifier la disposition des enfants : de colonne sur mobile à rangée sur écran médium et plus.

  1. Sur le parent qui est déjà un flex, ajouter flex-column

    Ceci positionne les enfants en colonne

  2. Toujours sur le parent flex, ajouter md:flex-row

    Ceci indique qu'à partir d'un écran médium (tablette), on afiche les enfants sur une rangée

    Vous obtenez :

    Exercice