Objectif
- Etre capable d'utiliser les listes Bootstrap.
Exercice 01
Énoncé
- Afficher la liste suivante en seule ligne à l'aide de Bootstrap.
- L'image ci-contre représente le résultat souhaité
Code de départ<ul> <li> HTML5</li> <li> CSS</li> <li> Bootstrap</li> <li> JQuery</li> <li> SCSS</li> <li> PHP</li> </ul>Résultat souhaité
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la solution !
Exercice 02
Rappel
- Dans la liste de définitions, chaque élément de la liste peut être composé à la fois des éléments
<dt>et<dd> <dt>signifie terme de définition, et comme un dictionnaire, c'est le terme (ou la phrase) qui est défini.
- Dans la liste de définitions, chaque élément de la liste peut être composé à la fois des éléments
Énoncé
- utiliser les classes des
listes de définitions horizontales bootstrap, pour représenter les lignes suivantes:
- utiliser les classes des
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la solution !
Exercice 03
Énoncé
- Reprener la liste de l'exercice 01 pour gérer la taille (ou bien la largeur) de cette list-group, puis insérer le dans le système de grilles de Bootstrap.
- La liste doit occuper 4 colonnes sur l’écran d’un ordinateur de bureau, 6 sur une tablette et 12 sur un smartphone.
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la solution !