2804/2028 18:08 “TP06 Bootstrap - ancpedagogio BOOTSTRAP Home > Blog > Les cours deprogrammation > Bootstrap > TP06 Bootstrap TPO6 Bootstrap Posté par Catégories Date RIADH HAJJ! BOOTSTRAP 26 FEVRIER 2020 Contenu du chapitre TPOS Bootstrap TP6 Bootstrap 1P06 Bootstrap 1 Objectif © Connaitre comment Bootstrap traite les tableaux et les boutons. 2 Exercice 01 Enoncé = Préparez votre espace de travail en créant un dossier "exercice_bootstrap’ dans lequel vous allez créer un sous-dossier "tp06" = Prenez un éditeur de texte (textEdit, bloc note, notePad..) et créez votre propre ‘Avez-vous une question? «J (216) 97 656 803 &% hajiriadh@gmail.comn 5 PC hitps:tapepedagogie.comto0s-bootstrap! 1162804/2028 18:09 “TP06 Bootstrap - ancpedagosio | = Tapez le code html en respectant bien I'écriture des balis) GERER LE CONSEN\ votre navigateur Web (Chrome,internet Explorer, Firefox...) = Lazone deen-téte de la page doit contenir deux barres de navigation a deux niveaux = Ecrivez le code nécessaire pour que lentéte (head) de la page ressemble a celle-ci: apcpedagogie Accueil iste des apprenants Chercherapprenant Ajout apprenant = Ecrivez le code nécessaire pour que le corps (body) de la page ressemble & celle-ci Enregistrer un nouvel apprenant Homme © Femme ® hajriadh@gmailcom Bh iyenmaasa @ | tise dirovame besdesurle ## | ‘sais votre addresse aagaean Tete drone baste ur © soi groupe a & Mot D mote passe = Laliste gouvernorat sera remplie avec les gouvernorats de la répulique = Laliste groupe sera remplie avec la liste des groupes du centre = Empécher ce formulaire d’étre envoyé s'il est mal rempli notant que tous les champs sont obligatoires * Utiliser Javascript pour créer les contraintes suivants « Le JavaScript va nous étre un bon moyen d’effectuer une validation puissante des données utilisateurs cété client. * Ce langage posséde des propriétés spécialement créées pour la validation d'éléments de formulaire et va nous permettre également d'utiliser nos regex avec nos champs de formulaire. * une fonction pour vérifier le nom (on vérifie la longueur : entre 2 et 25 caractéres) et ne contient pas des caractéres spéciaux ‘Avez-vous une question? «J (216) 97 656 803 &% hajriadh@gm hitps:fapcpedagogie.comtp0s-bootstrapl 2162804/2028 18:08 “TP06 Bootstrap - ancpedagogio = Un texte de non conformité sera affiché en rouge sous la zone de texte re de passe en cas d’erreur = Le bouton denvoi sera inactive en cas d’erreur et vice vers sa = Dans le dossier “exercice_bootstrap’, En vous basant sur les données en haut, vous créerez quatre pages html que vous nommerez «index.html: Essayez les différents composants Bootstrap que nous avons vues pour créer cette page * modificationApprenant html = affichageApprenant.html = chercherApprenant.html = contact.html: Sur cette page, vous devez présenter les informations de contact telles que le numéro de téléphone, ‘adresse e-mail, adresse postale, etc. Vous incluez également la carte Google qui aide certainement le demandeur de formation & trouver ‘emplacement exact de votre centre . Ily a aussi une partie qui dit «Contactez-nous», ce qui donne l'occasion a un apprenant de contacter a tout moment et d'avoir une communication rapide avec vous. = Pour chacune des pages, vous organiserez le contenu comme il est montré dans les schémas suivants Modifier les donées d'un apprenant — code erepprensnt B (Votre identitiant & Votre prénom votre nom © hajriadh@gmail com | iynomjanne 9 © Homme © Femme Liste dérouloesbasde url Scisir votre addresse table gowernorat ate dérouane base sr © tae sroupe % Mot de passe D | Retaper le mot de pas Rechercher les donées d'un apprenant coss-'oosw ‘Avez-vous une question? «J (216) 97 656 803 &% hajiriadh@gmail.com hitps:lapepedagogie.comto0s-bootsrap!2804/2028 18:09 pages du site. Solution “TP06 Boolstrap - apcpedagogio = Pour chacune des pages, modifiez le menu pour quill puisse se pointer vers c = Attachez un pied de page au bas de la fenétre pour toute les pages «= Validez vos pages: http://validator.w3.org/ = Corrigez les erreurs éventuelles en vous aidant des recommandations du validateur. = Essayez de faire l'exercice de votre cété avant de regarder la Solution ! Sommaire du cours Bootstrap Article précédent Le routage avec Angular 26 février 2020 Article suivant Les expressions réguliéres en php ‘1 mars 2020 CES ARTICLES POURRAIENT AUSSI VOUS INTERESSER TP8 Création d'un projet Bootstrap 22 mars, 2023 TP1 Plateforme de formation web en ligne TP2 Gestion d'une boulangerie-patisserie TP3 Création d'un site de formation en ligne TP4 Les Oasis de Tunisie TPS Création d'un projet Bootstrap TP6 ‘Avez-vous une question? «J (216) 97 656803 &% haji hitps:fapepedagogie.comtp0s-bootstrapl Examen 5 en HTML, CSS et Bootstrap 19 mai, 2022 Examen en HTML et CSS Examen 2 en HTML e Examen 3 en HTML , CSS et JS Examen 4 en H’ CSS et JS Examen 5 en HTML , CSS et Bootstra Examen 5 en HTML, CSS et Bootstrap Consign @gmail.corr 4162804/2028 18:08 “TP06 Bootstrap - ancpedagogio personnaliser une Template Bootstrap 5 pour créer un site Rechercher... Q (#) &) (in) @) APCPEDAGOGIE propos de nous Articles Contact Become a Teacher Politique de cookies (UE) LINKS Events Gallery FAQs SUPPORT Documentation Forums Language Packs Release Status ‘Avez-vous une question? «J (216) 97 656 803 &% hajiriadh@gmail.comn hitpstapepedagogie.comto0s-bootsrap!2804/2028 18:00 “TP06 Bootstrap - ancpedagosio LearnPress WooCommerce bbPress apcpedagogie © 2016 - 2022. Tous droits réservés. COURS INFORMATIQUE A DOMICILE ET A DISTANCE NOUS SOMMES LA POUR VOUS AIDER Vous cherchez des cours particuliers en ligne, encadrement de Projets de Fin d'Etudes des soutiens en informatique, création des sites web ... ECRIVEZ-NOUS hitps:tapepedagogie.comto0s-bootsrap! 66