M3206 — Exos TD

TD 1/3

Exercice 1

Dans cet exercice nous allons faire une première mise en page avec Bootstrap. Pour cela, faites une grille avec trois lignes :

La ligne 1 contient trois colonnes de largeur 4, 5 et 3 respectivement.
La ligne 2 contient deux colonnes de largeur 2 et 10.
La ligne 3 contient cinq colonnes de largeur pareille, sauf pour la colonne centrale, qui s'adapte à son contenu.

Pour voir correctement votre mise en page, ajoutez du texte dans chaque colonne. Aussi, utilisez la règle CSS

div {
  border: 1px solid black;
}

pour bien distinguer les colonnes.

Exercice 2

Dans cet exercice nous faisons une mise en page responsive, qui s'adapte à la largeur de l'écran. Nous avons deux lignes, avec deux colonnes chacune. Les instructions pour chaque colonnes sont :

Ligne 1, colonne 1 : largeur 6 par défaut, et 4 pour un écran xl
Ligne 1, colonne 2 : largeur 6 par défaut, et 8 pour un écran xl
Ligne 2, colonne 1 : largeur 4 par défaut, 7 pour les écrans lg et 6 pour les écrans xl
Ligne 2, colonne 2 : largeur 8 par défaut, 5 pour les écrans lg et 6 pour les écrans xl

Exercice 3

Modifiez l'exercice 1 pour avoir une ligne normale, une ligne incomplète et une ligne débordante.

Exercice 4

Nous allons pratiquer comment faire une mise en page avec différents alignements horizontaux et verticaux. Pour cela, faites une grille (statique) qui utilise au moins deux types différents d'alignements horizontaux et verticaux.

Vous pouvez utiliser le modèle suivant, qui contient des colonnes avec des hauteurs différentes :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <style>
    div { border: 1px solid black; }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tortor nisi. Proin eget consectetur neque, at tristique lorem.
      </div>
      <div class="col-4">
        Sed ut volutpat felis, eget accumsan lorem
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Suspendisse sollicitudin tellus urna, nec facilisis dolor consequat vitae. Praesent ultrices mi fermentum, vehicula enim sit amet, maximus magna. Nunc eleifend augue tortor, quis porta mauris sagittis vitae.
      </div>
      <div class="col-4">
        Quisque et augue finibus, pulvinar metus id, lobortis purus. Cras vulputate tortor a risus interdum feugiat.
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Maecenas et dolor felis.Suspendisse vitae efficitur dolor.
      </div>
      <div class="col-4">
        Integer dolor tellus, lobortis id erat a, venenatis posuere enim. Quisque porttitor tristique lectus nec pulvinar. Fusce commodo tortor sed vulputate bibendum.
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Nullam sed neque consectetur, ultricies tellus sed, imperdiet risus.
      </div>
      <div class="col-4">
        Nam iaculis justo ac nibh gravida pretium. Aenean tristique consectetur justo, nec tincidunt neque eleifend vel.
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Exercice 5

Nous allons mettre en pratique les classes de Bootstrap pour ajouter des espaces horizontaux entre les colonnes d'une même ligne. Dans cet exercice, faites une mise en page responsive qui utilise au moins les classes offset-3, offset-5, offset-lg-3 et offset-lg-5.