Back

Exercices positionnement sur Grille Bootstrap

Exercices positionnement sur Grille Bootstrap

  1. Objectifs

    • Etre capable de positionner des éléments sur une page Web
    • Utiliser les classes des couleurs de Bootstrap
    • Utiliser les classes d’alignement de Bootstrap






  2. Exercice 01

    1. Énoncé
      • Regardez la page web suivante et la manière dont elle se transforme sur smartphones, tablettes et pc. Essayez de reproduire la même chose en utilisant le positionnement sur la grille de Bootstrap.

      • Vous devrez ajouter fichier css qui contient les lignes de CSS suivant pour voir vos éléments HTML et leur mettre de la couleur. N’oubliez pas également d’utiliser les balises sémantiques.
      • body {
          padding-top: 10px;
        }
        [class*="col-"]{
          background-color: #90e3ee;
          border: 2px solid #2b09ee;
          border-radius: 6px;
          line-height: 40px;
          text-align: center;
        }

        Smartphones

        Tablette

        Desktop

    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  3. Exercice 02

    1. Énoncé
      • Reprenez l’exercice numéro 01 avec le schéma suivant:
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  4. Exercice 03

    1. Énoncé
      • Créer un système de colonne responsive
        1. 4 colonnes (dans un conteneur)
        2. 3 colonnes (dans un conteneur)
        3. 2 colonnes (sur toute la largeur de l’écran)
      • Créer des colonnes avec des décalages
        1. 5 – (2) – 5 (sur toute la largeur de l’écran)
        2. (1) – 11 (dans un container)
      • Modifier la police d’écriture des colonnes, et utiliser les classes de couleur Bootstrap dans la liste suivante:
      • Modifier la couleur d’arrière-plan des des colonnes, et utiliser les classes de couleur Bootstrap dans la liste suivante:
      • Class Description
        .bg-primary La cellule de tableau est stylée avec la classe "bg-primary"
        .bg-success La cellule de tableau est stylée avec la classe "bg-success"
        .bg-info La cellule de tableau est stylée avec la classe "bg-info"
        .bg-warning La cellule de tableau est stylée avec la classe "bg-warning"
        .bg-danger La cellule de tableau est stylée avec la classe "bg-danger"
      • Le schémas suivant représente l’objectif à atteindre
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement