Remerciez-le!

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

Tp Gestion d’un restaurat Par : Bouzad Reda But de projet Les raisons pour lesq

Tp Gestion d’un restaurat Par : Bouzad Reda But de projet Les raisons pour lesquelles on a créé le rapport Introduction Definition de Html/Css/Bootstrap 01 02 Code Explication de code source Une version live de site 03 04 Table de Contenu Live Demo But de Projet 1 But de Projet Ce rapport a été créé comme un guide pour les débutants , avec quelques notions de HTML et CSS vous pouvez comprendre rapidement le code Bootstrap utilisé dans ce code . Introduction 2 Rapelle : HTML Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web. Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques. L'HTML offre également la possibilité de créer des documents interopérables avec des équipements très variés et conformément aux exigences de l’accessibilité du web. Rapelle : CSS Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. Rapelle : Bootstrap Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub. Source Code 3 INTRODUCTION Mercury is the closest planet to the Sun and the smallest one in the Solar System—it’s only a bit larger than the Moon Navigation Bar Le premier élément dans notre site est la navigation bar qui porte plusieur classe bootstrap pour obtenire le résultat obtenu les plus important : ● Navbar-expand-lg : pour rendre NavBar responsive ●Navbar-brand: pour ajouter notre logo ● Navbar-dark : la Navbar va prendre une couleur foncée Navigation Bar Puis on a ajouter les éléments de la navigation bar ●Nav-item : pour dire que c’est un élément de la navigation bar ●Nav-link : pour dire que c’est un lien ●btn: c’est un button Bootstrap Section1 : Banner La classe .banner qui prend 100% de largeur et longueur contient un header h1 et deux buttons ●btn-order : définie dans style.css , pour changer la couleur , et pour avoir un hover , focus and active effect ●btn: c’est un button Bootstrap INTRODUCTION Mercury is the closest planet to the Sun and the smallest one in the Solar System—it’s only a bit larger than the Moon Section2 :Available La partie la plus intéressante de cette partie est l’utilisation des cartes de bootstrap , et la carousel . Pour utiliser les cartes il faut utiliser la classe card-body. Card-title: Titre de Cartes Card-text: de Cartes Section 2 :Available Un composant de diaporama pour faire défiler les éléments - images ou diapositives de texte ●Carousel : il faut engendrer tous les éléments par une classe qui porte la classe Carousel. ● carousel-item: element de la carousel. INTRODUCTION Mercury is the closest planet to the Sun and the smallest one in the Solar System—it’s only a bit larger than the Moon Section 3 :CC-menu Pour réaliser cette partie on a utilisé une combinaison des cartes et la classe nav. On note que les liens dans cette page sont internes INTRODUCTION Mercury is the closest planet to the Sun and the smallest one in the Solar System—it’s only a bit larger than the Moon Section 3 :CC-menu Aprés le header <h1> et le paragraphe <p> on a ajouté une carousel ●Carousel-fade : on a ajouté cette classe à notre carrousel pour animer les diapositives avec une transition en fondu au lieu d'une diapositive. ●carousel-caption: pour ajouter de text au dessous du carousel INTRODUCTION Mercury is the closest planet to the Sun and the smallest one in the Solar System—it’s only a bit larger than the Moon Section 4 :order-form On a ajouté des input forms , plusieur classe on été utilisé plusieur casse : ●input-groupe-text: Pour créer une input de text ● form-select pour avoir des choix différents Pour ajouter les icônes on utilisé la librairies de Font-awesome Section 5 : Footer Encore une fois on a utilisé la classe nav mais la seul difference est on a utilisé flex-column pour changer la direction instead of row (ligne) les éléments de navigation bar seront alignés verticalement uploads/S4/ bootstrap-by-reda.pdf