Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

MMI1 – M2206 – Intégration web 1 TP4 – Mise en œuvre du framework Bootstrap Obj

MMI1 – M2206 – Intégration web 1 TP4 – Mise en œuvre du framework Bootstrap Objectif : Vous devez réaliser la première page d’un site web en exploitant le framework Bootsrap. Ressources : Site officiel Présentation du cours Préparation du projet Bootstrap. l Créez un dossier « projet » l télécharger l'ensemble des fichiers bootstrap nécessaires l créer un fichier style.css (pour l'instant fichier vide) dans le dossier css. l télécharger 4 photos d'illustration (1600x1000) et les placer dans un dossier images. l créer le fichier index.html de départ avec tous les liens nécessaires (style.css, bootstrap...) Version grand écran (> 768 px) Version mobile (< Version mobile (< 768 px) MMI1 – M2206 – Intégration web 2 Définir les différentes zones importantes et leurs largeurs sur une grille de « 12col ». en vous servant de ce « brief », déterminer les différentes zones et leur largeur en unité de colonnes (sachant qu'une largeur total fait 12 colonnes) Développement des différents éléments bootstrap l mise en œuvre du menu (nav)  voir http://getbootstrap.com/components/#navbar  (et pages12,13,14,15 sur le diapo du cours) l mise en œuvre du paragraphe notre philosophie  voir http://getbootstrap.com/css/#grid  (et pages 10,11 sur le diapo du cours) l mise en œuvre du carrousel  voir http://getbootstrap.com/javascript/#carousel  (et pages 25 sur le diapo du cours) l mise en œuvre des onglets  voir http://getbootstrap.com/components/#nav  (et pages 18 sur le diapo du cours) l mise en œuvre du tableau  voir http://getbootstrap.com/css/#tables  (et pages 22 sur le diapo du cours) MMI1 – M2206 – Intégration web 3 l mise en œuvre de la photo « thumbnail »  voir http://getbootstrap.com/css/#images  (et pages 16 sur le diapo du cours) l mise en œuvre du formulaire de recherche  voir http://getbootstrap.com/css/#forms  (et pages 19 sur le diapo du cours) l mise en œuvre du « panel »  voir http://getbootstrap.com/components/#panels-heading  (et pages 20 sur le diapo du cours) l mise en œuvre de la liste (nav ) dans le panel  ( pages 21 sur le diapo du cours) l mise en œuvre des badges  voir http://getbootstrap.com/components/#badges  (et pages 23 sur le diapo du cours) l mise en œuvre du pied de page l reprendre le menu pour le rendre responsive (<768px)  ( pages 13,14 sur le diapo du cours) uploads/s3/ m2206p-tp-bootstrap.pdf