Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Bootstrap

TP3 Bootstrap

Un cours complet pour maîtriser TP3 Bootstrap.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Dans cet article
Objectif
Exercice 01
Exercice 02
Exercice 03
04- Mise en forme des éléments
Typographie
Les listes Bootstrap
Travaux dirigés
TP3 Bootstrap
Sommaire du cours
historique de bootstrap
Présentation de bootstrap
Installation de Bootstrap
La Syntaxe de base de Bootstrap
Les bases de Bootstrap et template de démarrage
Le système de grille Bootstrap
La grille de Bootstrap en pratique
Exercices positionnement sur Grille Bootstrap
Alignement avec Bootstrap
TP la grille Bootstrap
Les classes pull et push
Typographie de Bootstrap
Les tableaux dans Bootstrap
Menus de navigation (Navbar)
Les barres d'outils standard Bootstrap
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectif

    • Etre capable d'utiliser les listes Bootstrap.

  2. 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é

        TP3 Bootstrap

    • Solution
      • Essayez de faire l'exercice de votre côté avant de regarder la solution !

  3. 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.
    • Énoncé
      • utiliser les classes des listes de définitions horizontales bootstrap, pour représenter les lignes suivantes:

  4. Solution
    • Essayez de faire l'exercice de votre côté avant de regarder la solution !

  5. 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 !