Dans cette séance de TP on va apprendre comment réordonner les colonnes dans une ligne.
À la fin je vous donne des instructions pour faire un projet en binôme.
Avant de commencer, créez un répertoire nommé m3206-tp3 contenant les répertoires exo1 et exo2. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.
À la fin de la séance, vous devez compresser et soumettre le répertoire m3206-tp3 sur AMeTICE.
Dans tous ces exercices il faut ajouter une bordure et un contenu aux colonnes. Pour les bordures, vous pouvez utiliser la règle CSS suivante :
[class*="col"] {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}Pour le contenu, ajoutez au moins deux lignes de texte. Vous pouvez utiliser ce générateur de texte aléatoire.
Dans chaque ligne d'une grille, les colonnes s'affichent (de gauche à droite) dans le même ordre que dans le fichier HTML. Bootstrap permet de changer cet ordre.
Les classes .order-X (c'est-à-dire, .order-1, .order-2, ... .order-12) réordonnent les colonnes en fonction de l'index X.
Évitez de mélanger les colonnes sans et avec classes .order-*. En tout cas, sachez que les colonnes sans classe .order-* vont s'afficher avant (à gauche).
Comme d'habitude, elles ont de versions avec les points de rupture : .order-sm-X, .order-md-X, .order-lg-X et .order-xl-X.
Faire une grille avec 1 ligne et 5 colonnes de manière à ce que les colonnes s'affichent dans l'ordre inverse.
Faire une grille avec 1 ligne et 3 colonnes telle que :
Vous avez 60 minutes pour faire le DS sur la grille Bootstrap.
Toute infraction à ces règles aura comme conséquence l'invalidation de l'examen : vous aurez 0 comme note.
Vous allez réaliser un projet en binôme pour apprendre vous-même une composante (component) de Bootstrap.
Chaque binôme doit choisir une composante différente parmi les suivantes : alerts ⋅ badge ⋅ breadcrumb ⋅ buttons ⋅ carousel ⋅ collapse ⋅ list group ⋅ modal ⋅ navs ⋅ pagination ⋅ popovers ⋅ progress ⋅ scrollspy ⋅ tooltips.
Vous devez préparer une page web pour expliquer votre composante. Vous pouvez reprendre la documentation de Bootstrap, mais vous devez ajouter votre avis : plus d'exemples, où utiliser la composante, ce que vous n'avez pas compris, etc.
Vous aurez 5 minutes lors de la séance de TD n° 3 pour présenter votre travail. Vous devez soumettre votre projet sur AMeTICE avant le 15 novembre 2018. Si vous le soumettez avant le 5 novembre, vous aurez une pseudo-correction gratuite.