TP1 Plateforme de formation web en ligne TP2 Gestion d’une boulangerie-pâtisserie TP3 Création d’un site de formation en ligne TP4 Les Oasis de Tunisie TP5 Gestion d’un cabinet médical TP6 Développement d’un site web de formation en ligne TP7 Vente de cours et de vidéos TP8 Gestion d’un clinique TP9 : Plateforme de Location de Salles en Ligne TP7 Vente …
TP1 Plateforme de formation web en ligne TP2 Gestion d’une boulangerie-pâtisserie TP3 Création d’un site de formation en ligne TP4 Les Oasis de Tunisie TP5 Création d’un projet Bootstrap TP6 Création d’un projet Bootstrap TP7 Création d’un projet Bootstrap TP8 Création d’un projet Bootstrap TP8 Gestion d’un clinique Objectifs Télécharger et personnaliser une Template Bootstrap 5 pour créer un site …
Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , CSS et Bootstrap Consignes Durée : 2h00 Tous documents sont autorisés Téléphones portables (et autres périphériques connectés) interdits Le sujet …
Le composant media Bootstrap Les images en Bootstrap TP media Bootstrap Correction TP media Bootstrap Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Rappels
TP05 Bootstrap TP06 Bootstrap TP6 Bootstrap Objectif Connaitre comment Bootstrap traite les tableaux et les boutons. Exercice 01 Énoncé 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 document html. Utiliser le framework bootstrap pour réaliser la page …
Les composants Bootstrap Créer un Jumbotron Bootstrap Le composant Card Bootstrap Le composant Carousel Bootstrap TP les cards Bootstrap TP les carousels Bootstrap Correction TP les cards Bootstrap Ex05 Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Exercice 05 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html> <head> <meta charset= »utf-8″> <title>Grid Example</title> …
TP05 Bootstrap Correction TP5 Bootstrap Ex01 Objectifs Etre capable de mettre les carrousels dans les grilles en Bootstrap 4 Exercice 02 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html lang= »fr »> <head> <meta charset= »utf-8″> <meta name= »viewport » content= »width=device-width, initial-scale=1, shrink-to-fit=no »> <link rel= »stylesheet » href= »https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css »> <link rel= »stylesheet » href= »https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css »> <style> h2,h3 {text-align: center;} p{text-align: center;} .card {border: none;} </style> </head> <body> <div …
TP05 Bootstrap Correction TP5 Bootstrap Ex02 Objectifs Etre capable de mettre les carrousels dans les grilles en Bootstrap 4 Exercice 02 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!Doctype html> <html> <head> <meta charset= »utf-8″ > <title>Mon Site avec Bootstrap</title> <link rel= »stylesheet » href= »https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css »> <link rel= »stylesheet » href= »https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css »> </head> <body> <header> <div class= »container »> <div class= »row »> <div class= »col-md-7″> <h1> <span class= »fa fa-user text-primary »></span> …
TP05 Bootstrap TP5 Bootstrap Objectif Connaitre comment Bootstrap traite les tableaux et les boutons. Exercice 01 Énoncé Écrivez le code nécessaire pour que votre page ressemble à celle-ci: Solution Essayez de faire l’exercice de votre côté avant de regarder la solution ! Exercice 02 Énoncé Utilisez le Framework Bootstrap 4 pour réaliser la page suivante : Solution Essayez de faire …
Les spinners dans Bootstrap Progress Bar Bootstrap Effet accordéon Bootstrap Les Spinners Bootstrap Objectifs Être capable de travailler avec les spinners Bootstrap 4 Présentation Les "spinners" Bootstrap peuvent être utilisés pour afficher l’état de chargement dans vos projets. Bootstrap Spinner est utilisé pour afficher l’état de chargement (loading state) d’une application ou de tout autre processus. Les "spinners" Bootstrap sont …
Les composants Bootstrap Créer un Jumbotron Bootstrap Le composant Card Bootstrap Le composant Carousel Bootstrap TP les cards Bootstrap TP les carousels Bootstrap Correction TP les carrousels Bootstrap Ex02 Objectifs Etre capable de mettre les carrousels dans les grilles en Bootstrap 4 Exercice 02 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html lang= »en »> <head> <title>Bootstrap Example</title> <meta …
Les composants Bootstrap Créer un Jumbotron Bootstrap Le composant Card Bootstrap Le composant Carousel Bootstrap TP les cards Bootstrap TP les carousels Bootstrap Correction TP les cards Bootstrap Ex03 Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Exercice 02 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html> <head> <meta charset= »utf-8″> <title>Grid Example</title> …
Le composant media Bootstrap Les images en Bootstrap TP media Bootstrap TP media Bootstrap Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Rappels
Le composant media Bootstrap Les images en Bootstrap TP media Bootstrap Les images en Bootstrap Objectifs Etre capable de travailler avec les images Bootstrap 4 Présentation Bootstrap va nous permettre de centrer des images, d’ajouter des cadres de différentes formes ou encore de faire en sorte que la taille de nos images s’adapte en fonction de celle de leur élément …
Le composant media Bootstrap Les images en Bootstrap TP media Bootstrap Le composant media Bootstrap Objectifs Etre capable de travailler avec les spinners Bootstrap 4 Présentation Les médias sont des vidéos, des fichiers audio ou des informations sensibles similaires. L’ objet multimédia vous aide à créer des composants répétitifs où certains médias sont positionnés à côté de contenu qui ne …
Les composants Bootstrap Créer un Jumbotron Bootstrap Le composant Card Bootstrap Le composant Carousel Bootstrap TP les cards Bootstrap TP les carousels Bootstrap Correction TP les cards Bootstrap Ex04 Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Exercice 04 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html> <head> <meta charset= »utf-8″> <title>Grid Example</title> …
Les composants Bootstrap Créer un Jumbotron Bootstrap Le composant Card Bootstrap Le composant Carousel Bootstrap TP les cards Bootstrap TP les carousels Bootstrap Correction TP les cards Bootstrap Ex02 Objectifs Etre capable de mettre les cards dans les grilles en Bootstrap 4 Exercice 02 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution <!DOCTYPE html> <html> <head> <meta charset= »utf-8″> <title>Grid Example</title> …
Les tableaux dans Bootstrap Les boutons standards Bootstrap Groupe de boutons Bootstrap TP4 Bootstrap Les boutons Bootstrap 4 Objectifs Connaitre les boutons Bootstrap 4 Etre capable de travailler avec les boutons Bootstrap 4 Présentation Le groupe de boutons ou boutons groupés comme son nom l’indique est simplement un groupe de boutons alignés ensemble pour les présenter comme un seul élément. …
Les tableaux dans Bootstrap Les boutons standards Bootstrap Groupe de boutons Bootstrap TP4 Bootstrap TP4 Bootstrap Objectif Connaitre comment Bootstrap traite les tableaux et les boutons. Exercice 01 Énoncé Reprenez le tableau suivant en utilisant le framework Bootstrap 4 Utilisez la classe : class= »table table-bordered table-striped table-sm » pour faire la mise en forme de ce tableau Utilisez la balise caption …
Le système de grille Bootstrap La grille de Bootstrap en pratique Alignement avec Bootstrap Les classes pull et push TP la grille Bootstrap Exercices positionnement sur Grille Bootstrap Correction TP la grille Bootstrap Ex01 Objectifs Créer rapidement une mise en page flexible et responsive avec le système de grille. Exercice 01 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution Fichier …