Bootstrap Bootcamp (pour Bootstrap 5)

1. À propos du cours: Hé, ce qui se passe lundi, c'est hé, des chiffres avec un designer qui code. Merci beaucoup d'avoir regardé mon cours Bootstrap bootcamp. Je voulais vraiment créer un cours où vous vous sentez confiant en utilisant Bootstrap 5, fois comprendre les informations à l'intérieur des docks et comprendre comment tout fonctionne ensemble. Nous allons créer un site Web de portefeuille simple. Nous allons tout d'abord concevoir la navigation, et surtout en veillant à ce qu'elle devienne également une navigation réactive. bas, nous allons nous concentrer sur le flex en utilisant les informations de Bootstrap Five pour déplacer le texte au centre de la page et parler également de la façon dont vous pouvez décomposer différentes pièces en fonction d'un XL, d' un L, d'un moyen, d'un petit , et un design mobile. Tout dans notre conception sera toujours mobile en premier, car c'est ce que Bootstrap 5 est. suivant cette page d'accueil, nous nous concentrerons également sur la conception du pied de page pour apporter les icônes Bootstrap des médias sociaux. Si vous souhaitez introduire Facebook ou d'autres icônes sur lesquelles vous êtes les bienvenus. Pour ce projet, nous allons nous concentrer sur Twitter et Instagram. En abordant ce design sur notre page à propos, je vais vous montrer comment utiliser les flotteurs à l'intérieur de Bootstrap pour positionner une image à droite. Et puis, quand il atteint le framework Mobile, passe directement au milieu de la page. Après cela, nous accéderons à la page du portefeuille. Et sur la page du portefeuille, nous nous concentrerons sur la grille. Ainsi, j'ai une grille à trois colonnes, puis à l'intérieur d'un design mobile, j'ai une grille à deux colonnes, puis j'ai une grille à une colonne. Nous allons nous concentrer sur la grille et sur le fonctionnement de ces cartes. En plus du fonctionnement de ces boutons, il s'agit d'une très bonne page détaillée qui est vraiment mise en évidence avec Bootstrap 5. Finalement, nous allons accéder à la page de contact. Et non seulement un organe pour créer un formulaire de contact, mais je vais créer un formulaire de contact auquel je peux soumettre des informations. Ce formulaire fonctionne. Et en utilisant la puissance de Netlify, je peux cliquer sur Soumettre et créer une page de succès de contact qui dit merci pour votre soumission. Vous en sortirez en connaissant tous les détails importants sur le fonctionnement de Bootstrap 5 dans ce cours, le cours bootstrap bootcamp. 2. Modèle de démarrage de Bootstrap: Hé, que se passe-t-il quand il dit, Hé, datums, et merci beaucoup d'avoir suivi mon cours de bootcamp Bootstrap. J'ai deux écrans juste ici en haut ma petite zone Chrome pourrait voir sur mon site Web sa largeur et tester mes projets avec. Et en bas, je vais utiliser Visual Studio Code. C'est l'un de mes outils préférés pour l'édition de code. Il est fabriqué par Microsoft. Je ne peux pas le laisser dire ça, mais Visual Studio Code est le genou de l'abeille. Quand il s'agit de co-édition, vous pouvez utiliser n'importe quelle couleur que vous souhaitez utiliser. Mais pour moi, je vais utiliser le code Visual Studio tout au long de ce cours. Encore une fois, vous pouvez choisir la couleur que vous souhaitez utiliser Sublime Coda. Vous pouvez utiliser Microsoft Word si cela vous intéresse, mais dans l'ensemble, je dois m'en tenir au code VS dans ce projet. Donc, pour commencer, je vais me rendre sur getbootstrap.com. Je vais descendre et dire « commencer », juste pour commencer. Et ici, à mi-chemin de la page, si je le cherche, le modèle de démarrage, je vais copier ceci parce que c'est tout ce que j'ai à utiliser pour que Bootstrap fonctionne réellement. Je vais copier. Je vais entrer dans le code Visual Studio, créer un nouveau fichier et le coller. Et puis je vais le faire, je vais me diriger vers mon nouveau dossier, qui est nouveau projet, et appeler ce point d'index HTML. Et ce qui est cool avec VS Code, c'est qu'il s'agit de coordonnées couleur automatiques. Tous les fichiers sont tous les fichiers, tous les noms de fichiers et autres mots qui se coordonnent le code HTML ou n'importe quel document sur lequel vous travaillez. Donc, si vous parcourez cela rapidement, pour que Bootstrap fonctionne, il faut quelques composants et le modèle me fournit déjà tout cela. En haut, vous devez fournir une sorte de langue comme s'il s'agissait d'un arabe. Cela va changer et nous montrerons dans ce projet qu'il n'y a plus de gauche et de droite, mais un début et une fin lorsque l'arabe va de droite à gauche et que l'anglais va de gauche à droite. C'est juste, de gauche à droite. Je le dis bien. Oui, je l'ai bien dit. Après cela, nous examinons l'UTF ou le jeu de caractères à l'intérieur du code. Cela nous dira essentiellement que nous voulons utiliser les caractères anglais de l'UTF-8. Nous avons également besoin de la fenêtre d'affichage. Cela est nécessaire car au fur et à mesure que nous évoluons et que nous montons et descendons sur notre projet, la fenêtre permet au projet de croître et de se rétrécir, la largeur étant l'appareil avec le périphérique de largeur XYZ avec une échelle initiale disant à 100%, la magie vraiment se produit lorsque nous incluons le CSS Bootstrap. Il est livré sur un CDN ou un réseau de diffusion de contenu, ce qui est pratiquement génial. Et c'est une feuille de style. Et l'autre partie ci-dessous est ce script qui permet au JavaScript de s'exécuter, qui allait s'exécuter en particulier dans notre navigation. Et quelques autres choses en arrière-plan. Ces trois éléments, les balises Meta requises, le Bootstrap, CSS et le script, sont vraiment ce qu'il faut pour que Bootstrap fonctionne. Il s'agit de Popper et Bootstrap JS séparés. Tout est mis en évidence parce qu'il est commenté. Que faut-il s'inquiéter à ce sujet. Donc, la seule chose que je veux faire est bien sur cette page d'index, donc vous venez d'entendre que je veux créer un fichier CSS personnalisé. 3. Ajouter un fichier css personnalisé: Ce que je fais ici, c'est que je vais ajouter un fichier CSS, et je veux ajouter le CSS après le fichier minifié Bootstrap parce que je veux remplacer ou changer bonjour ici. Je veux éventuellement modifier certains paramètres par défaut pour bootstrap, pas beaucoup, juste quelques choses. Je vais donc dire que d'abord, c'est relier un piège. Je vais d'abord ajouter le fichier CSS, puis créer le fichier CSS ensuite, je vais dire, je vais dire que les points slash CSS slash personnalisé. Css. Et RHEL va être une feuille de style. Déposez-le et nous fermerons, non pas avec un X, avec un point d'interrogation, mais un symbole supérieur à. Si je l'enregistre et que je vais créer un nouveau fichier. Je vais donc entrer dans le fichier ou la commande N pour un nouveau fichier. Et je vais enregistrer ce fichier. Et aussi à propos de Visual Studio Code, il se souvient de l'endroit où vous avez enregistré votre dernier fichier pour la dernière fois. Il sait donc qu'il faut le déposer ici. Je vais dire CSS pour un nom de dossier. Et je vais donner à cela un nom CSS personnalisé. Quand j'ai dû faire beaucoup de fois, c'est pour m'assurer que ça marche. Je vais ajouter un corps et ajoutons une couleur d'arrière-plan de 0 qui n'est pas apparue depuis un moment. aigue-marine vous donne une couleur vive pour voir que cela va fonctionner car si nous pouvons voir cette couleur d'arrière-plan, nous savons que le CSS et le HTML sont liés entre eux. Lorsque je l'enregistre, je vais revenir dans mon dossier et faire glisser mon fichier d'index. Et bonjour tout le monde. C'est Hello World. Avec cette aigue-marine vraiment horrible. C'est bon. Je vais venir au fichier CSS, me débarrasser de ce corps, sauver. Et si je rafraîchis la page sur Chrome, cette aigue-marine disparaît et maintenant notre CSS est lié avec succès. 4. Le récipient: Maintenant que nous avons le fichier CSS, nous pouvons le mettre sur le côté juste pour l'instant. Je veux commencer à travailler sur la navigation, quelqu'un conçu de haut en bas dans ce projet. Dans le fichier d'index, si je fais défiler vers le bas, il est écrit Hello World, juste après que le corps soit là où je vais commencer à travailler. Je vais dire div et ensuite dire conteneur de classe. Et ce conteneur est probablement l'outil le plus puissant que vous allez utiliser dans Bootstrap. Et je vais vous montrer pourquoi. Ajoutons le conteneur et introduisons la balise H1 dans le conteneur. Je vais donc le déposer. Donc, si je l'enregistre et que je rafraîchis Chrome, regardez, que se passe-t-il ? Bonjour le monde passe à la, de la gauche vers le milieu de la page. Pourquoi est-ce que c'est ? C'est parce que si je déplace mon design, regardez Hello World, alors qu'il se rapproche du bord, il saute. En effet, le conteneur contient des points d'arrêt. Il y a cinq points d'arrêt principaux sur lesquels se concentrer. Nous retournons chercher bootstrap et je vais faire défiler vers le haut. Je cherche le docteur pour m'assurer d'être au bon endroit. Ce que je veux vous montrer, c'est à l'intérieur de la mise en page que vous allez trouver la grille. Et la grille comporte différents points d'arrêt. En fait, c'est dans le conteneur, qui se concentre sur la grille. J'ai sauté devant deux pas. Le conteneur a plusieurs zones différentes. Il y a petit, moyen, grand, XL. Où sont-ils liés à notre point d'arrêt. Donc, moins de 576 est votre très petit ou essentiellement votre taille mobile. Votre petit à 576 est plutôt un téléphone horizontal à barre oblique verticale. Votre médium. Plus de la tablette horizontale coupe la tablette plus grande. Et les grands et très grands et doubles XL se dirigent vers la taille de l'écran du bureau. Et vous pouvez dire qu'ils ont différents points d'arrêt. Nous utilisons donc simplement le mot conteneur ici. Sur le mobile, il a une largeur de 100 %, mais il devient ensuite 540 pixels, 720 pixels, 960, 1140, 1320. Donc, si nous revenons ici, nous pouvons voir comment il va se briser à différents points d'arrêt de cette conception. Il est également important de noter ces acronymes, ce sont ces petites abréviations qui sont SM, MMD, LG, XL, double XL et fluide. Fluide que nous pouvons presque ignorer parce qu'il dit essentiellement que tout est 100 % sur l'ensemble du spectre. Je l'utilise rarement uniquement parce que je préfère utiliser un conteneur avec tous les points d'arrêt pertinents. Mais SM se rapporte aux petits, moyens, grands XL et doubles XL. Vous verrez que nous allons utiliser ces différentes pièces tout au long de notre voyage. Et si nous voulons faire de notre conteneur une certaine taille, nous pouvons dire un tiret de conteneur d'une certaine taille. Pour l'instant, j'aime simplement garder le conteneur tel qu'il est. Mais faites attention aux SM, MMD, LG, exil et double XL. Remarquez une autre pièce et si vous venez de Bootstrap 4, c'est une différence. Remarquez que le très petit n'a pas l'excédent. Par le passé, SM puis le dash X S. Bootstrap cinq ont changé la donne. Désormais, c'est mobile d'abord, ou très petit par défaut. Et puis, si je veux le changer, il faut ajouter le SM, le MMD, le LG XL et le double XL. Pour aller de l'avant dans ce projet, tout est mobile d'abord, supposant qu'il va descendre, pas monter, ce qui signifie qu'il va passer du mobile, tout le reste. Et si nous voulons le changer, nous devons mettre quelque chose de petit et descendre de cette façon, je vais descendre ce que je veux dire par là, mais il semblait être conscient que tout est mobile d'abord et qu'il n'y a pas d'autre. langage pour délimiter réellement les très petits. 5. Configurer la navigation: Bienvenue dans le conteneur plus tard. Mais la prochaine chose que je veux faire après les conteneurs, je veux ajouter une navigation à ce monde bonjour. Je vais donc déplacer Hello World en dehors du conteneur pour le moment. Nous les déposerons à l'arrière, et à l'intérieur du conteneur, je veux ajouter ma navigation. Écrivons ce qui suit et veillons à ce qu'il soit correctement balisé. Parfait. Je vais dire moins que signe et je vais dire que la classe de navigation est égale à navbar, navbar expand. Je vais dire LG et je vais vous montrer pourquoi c'est le cas. Et un peu après le LG, faut dire qu'il est clair ou sombre ? navigation, barre de navigation, barre de navigation. Je vais dire que c'est léger. Cela signifie qu'il s'agit d'un fond clair. Si nous avons dit sombre, c'est plutôt pour le mode sombre. Je vais donc dire fermer, ouvrir et fermer ma navigation et je vais ajouter autre chose. Je vais ajouter un conteneur une fois de plus pour contenir le conteneur de classe Space Div. Et ici, ce que je vais faire, c'est que je vais ajouter ma navigation actuelle. Mon premier art, c'est que je dois me concentrer sur le logo. Je dirai donc que le logo va ici en le sauvegardant. Bonjour, logos ici. Nous allons créer un espace pour le logo n'était que du texte. Ensuite, nous ajouterons le logo avec le fichier fourni pour le déposer en haut à gauche et placer le texte en haut à droite. Donc, là où le logo va ici et Hello Worlds à l'extérieur du conteneur, car il se trouve à l'extrême gauche de la page où il est indiqué que le logo va ici. Quand je vais le faire, c'est dire une classe égale marque navbar. Et ici, je vais dire H ref, et je dirai index.html. Pour revenir à l'index, je vais le fermer. Et juste à l'intérieur, je vais dire que John Smith conçoit. Je l'ai sauvegardé. C'est là. Notez qu'il n'y a pas de survol lorsque je roule ma souris dessus. En tant que logo ou motif en haut à gauche, vous devez rester aussi statique que possible. Et par conséquent, il n'y a pas de survol car nous avons ajouté la classe de marque Navbar à ce tag, une balise. Très bien. Ce que je voulais faire, c'est au bon endroit. Maintenant que j'ai de la place pour mon logo, je vais continuer et construire ma navigation sur le côté droit, puis revenir et déposer le logo. Donc après le a, je veux ajouter un enfant en bas âge, ce qui signifie que je veux ajouter une petite icône de hamburger. Donc, quand cela atteint une certaine taille, disons en dessous du grand, parce que j'ai dit agrandir en grand, ce qui signifie que quand il atteint le moyen, je veux voir un hamburger ou une icône de menu mobile. Donc ce que je vais faire, c'est après le a, je vais dire bouton et ensuite dire que la classe est égale à navbar, tout-petit. Et pour plus d'espace, je vais faire quelques choses pour plus de lisibilité. Je vais déposer ça. Et ce que je vais faire, c'est que je n'oublie pas de le fermer. Je fermerai le bouton comme ça. Et donc ici, je vais ajouter une autre chose, bien sûr, quelques autres choses. Et après le cours, dab bar tout-petit, je vais dire taper le bouton égal. Et puis je vais dire données BS pour Bootstrap. Et nous dirons que Toggle est égal à l'effondrement. Et après le basculement de données BS, je dirai des données BAS, cible et égale. Et je vais mettre une pièce d'identité ici et nous pourrons connecter les deux et un peu. Je vais dire « nav bar », Nav. Je vais capitaliser la fin. Assurez-vous de suivre la délimitation exacte. J'ai également utilisé un N majuscule ici. Comme majuscules et minuscules sont deux choses différentes. Les contrôles de l'air vont être de la barre de navigation, de la navigation. Aria expanded va être fausse car elle ne va pas se développer par défaut. Et je vais dire aria, étiquette égale à bascule navigation. Beaucoup d'entre eux, je sais beaucoup de choses juste pour un bouton, c'est tout à fait logique. Donc, après ce bouton, je vais mettre une étiquette de span, des étiquettes de span LF. Ils sont les super-héros d'Internet car ils ne font absolument rien. Span, je vais dire que la classe est égale, je dirai Navbar, tout-petit, icône, drop in the span tag. Laissez-le ouvrir et fermer. Donc, beaucoup de travail juste pour un bouton. Et si je garde ça, rien ne va apparaître parce que nous n'avons pas encore inclus la navigation ici. n'y a rien à ouvrir et à fermer. En termes de navigation. La moitié de l'étiquette de span. Je vais dire que div class est égal à l'effondrement, à l'effondrement de la barre de navigation. Et puis ID que j'ai tapé ci-dessus à la navigation de la barre de navigation. Je vais le remettre ici. Je vais dire une carte d'identité et prendre cette navigation de barre de navigation, la déposer. C'est en quelque sorte un copier-coller pour m'assurer de ne pas tout gâcher, ce que je suis très doué pour le faire. Et ouvrir et fermer la div à l'intérieur cette classe div est l'endroit où nous allons ajouter notre navigation. Donc je vais le faire, je vais dire UL. Et ici, je vais ajouter une classe UL égale, je vais dire barre de navigation. Je connais beaucoup de mots pour navbar, navbar, nav. Et puis je vais dire MS auto. Et je vais vous montrer un peu ce que cela fait. C'est alors que vous ne verrez pas tout de suite, mais je vais vous montrer un peu comment ça fonctionne, MS auto et centre de texte. Donc, à l'intérieur de cette URL, je vais ajouter un LI. Et dans le LI, je vais ajouter une référence H. Et nous allons mettre un panneau de livre pour l'instant. Et nous devrions dire, oups, j'ai oublié la classe H ref class égale nav link. Et aussi dans le LI que j'ai également ignoré, nous devons dire classe puis dire article de navigation. Je pensais trop vite sur le lien de navigation et j'ai oublié de sauter dans l'objet de la navigation. À l'intérieur de ce a, nous dirons le lien numéro un. Et quand je l'enregistre et que je le dépose et que je rafraîchis la page, rien ne se passe. Je me suis rendu compte que lorsque je tapais le bouton, il ne me donnait pas le bouton de fermeture. Je vais donc revenir ici. Lorsque je tape moins que le bouton Fermer, je veux encercler la classe span avec le bouton. Je vais couper ça, le déposer et ajouter l'étiquette span à l'intérieur du bouton et nous le déposerons juste là. Une raison pour laquelle je n'ai pas l'espacement correct tout d'un coup, mais il devrait s'aligner juste là. Et la classe de span, quand j'ai aussi remarqué que j'avais mal orthographié l'effondrement, j'ai dit collage. C'est COLS LAP désordonné. Quand je fais ces deux choses. Et je l'enregistre dans le lien pops numéro un. Redimensionnons le navigateur et voyons si le menu mobile apparaît également. Je vais donc m'emparer de mon navigateur. Et une fois qu'il sera en dessous du grand, ce qui se passera, c'est qu'il va toucher ce support et se transformer en menu mobile. Notez également que le type se trouve au milieu de la page et que la navigation se déroule sur le côté droit. C'est parce que pour quelques choses, ce MS Auto indique la marge gauche, mais dans les nouvelles façons d'écrire du code dans Bootstrap, S représente la gauche et l'anglais et la barre oblique de début en arabe, ce MS auto. Si je le retire pendant 1 seconde, ma navigation se termine sur le côté gauche, juste à côté des dessins de John Smith. Je le voulais sur le côté droit. Par conséquent, MS Auto le déplace essentiellement de gauche à droite. Et si vous êtes un arabe, cela passera de droite à gauche ou du début vers l'autre direction. Ce que fait le centre de texte, si je le retire et que je l'enregistre, et que je le dépose. Remarquez comment les mots et vous voudrez peut-être cela dans votre conception. Le lien numéro 1 apparaîtra juste en dessous des dessins de John Smith. Je le préfère au centre pour mon design. Et gardez à l'esprit quand il s'agit d'une conception mobile, inspectez à l'intérieur de Chrome. C'est vraiment petit. Encore une fois, je préfère le faire au milieu de la page, mais c'est à vous de décider. Pour mon design. Je vais continuer à dire « centre technique ». Maintenant, le centre de texte dit essentiellement tout, de l'envoi de l'application mobile au serré. Mais comme si nous sortons de la conception mobile, ce lien se trouve dans sa propre petite cellule. centre technique reste donc sans objet car tout se déplace tout seul vers la droite. Quoi qu'il en soit, je vais enregistrer ça pour m'assurer que c'est correct. Ce que je fais ensuite, c'est d'ajouter trois éléments de navigation. Donc, cet objet de navigation que je vais dupliquer, je vais dire objet de navigation. Pour une raison quelconque, mes onglets ne s'alignent pas parfaitement. Je ne sais pas ce qui se passe. Non, je veux y retourner. Quoi qu'il en soit, pour une raison quelconque, je n'ai pas d'onglets parfaits pour une raison bizarre. Tout est mal aligné de toute façon, pas grave. Je vais tout à fait bien de cette façon. Alors, dans ce domaine, laissez-moi le copier et le déposer. Et maintenant, j'ai le lien 1. Et si je dis lien numéro 2, lien numéro trois. Maintenant, j'ai le lien 1, le lien deux et le lien trois. Je vais changer cela pour parler de portefeuille et de contact. Donc, ici, je vais parler de portefeuille. Et je dirai contact. Si je peux épeler correctement le contact. Et après cela, je vais économiser pour m'assurer qu'il apparaîtra. Et je vais ajouter le href car je vais tout de même copier et coller ce fichier d'index. Je vais donc changer cette référence H et parler de HTML, de portfolio, de point HTML et de contact HTML. Si je l'enregistre, je ne cliquerai pas. Mais j'ai eu la souris Rahway dessus. Vous pouvez voir en bas dans Chrome, il est dit sur le portefeuille et le contact. Celles-ci seront également à l'avenir. Lorsque je duplique cette page pour la page À propos, la page du portefeuille et la page Contact. 6. Ajouter le logo SVG: Pour finir, je dois ajouter le logo aux dessins de John Smith. J'ai inclus la photo si vous souhaitez utiliser ma version ou si vous pouvez utiliser le logo que vous voulez dans votre projet. Je vais créer un nouveau dossier et dire des images. Et là, je vais passer dans mon autre dossier et aller chercher mon dossier d' images et trouver le titre de John Smith, SVG. J'utilise des SVG car ils sont des listes de pixels. Il s'agit essentiellement de fichiers vectoriels en ligne. Et j'inclue également le fichier AI au cas où je voudrais changer quelque chose à cela dans mon projet Web. Je vais faire venir John Smith. C'est là. John Smith conçoit. Et ici, je vais le faire, c'est revenir au sommet. Et allons trouver l'endroit où il est dit qu'une marque de bar de navigation de classe John Smith conçoit. Je vais apporter la photo. Je vais donc dire que je vais couper ça, je vais le ramener dans une seconde. Je vais dire IMG SRC et dire des images obliques. Et je veux un titre de John Smith. Maintenant, pour mon design, je vais aussi dire avec 225 et la hauteur sera de 76. Si vous créez votre propre logo de conception, faites attention à votre largeur et à votre hauteur proportionnellement à votre design. Et puis je vais dire alt, et je dirai logo pour John Smith, design, design pluriel, ou j'ai eu le S juste là à la fin. Et après cette image, je vais la fermer parce que les images se ferment. Et ce que je veux aussi faire là-dedans, une balise est que j'aime avoir des informations à dire, quel est ce lien ? Je vais donc dire « Span class ». Et ici, le D dans Bootstrap est destiné à être affiché. Je vais dire n'afficher aucune. Et je vais coller dans les dessins de John Smith. J'aime avoir du texte réel à l'intérieur de mon code, mais pas visuellement à l'écran pour délimiter l'image. Donc, si je sauvegarde ça et que je reviens ici, j'ai maintenant des dessins de John Smith. Et puis j'aime aussi Bootstrap, c' est que si vous le regardez, le texte n'est pas assis à droite ou en bas, excusez-moi, ou en haut. Mais c'est plutôt un point de départ au milieu. Pour une esthétique de design plutôt cool. Génial. Nous avons maintenant terminé notre navigation, et maintenant je veux faire ensuite que je veux construire ce graphique de héros à l'intérieur de ma page d'accueil. 7. Configurer le graphique de héros: Sucré. Maintenant que notre navigation est terminée, il est temps de concevoir davantage l'intérieur de cette page d'index. Je vais passer devant la navigation et juste entre HelloWorld dans la div, je vais dire le mot principal, car c'est le contenu principal de notre page. À l'intérieur d'ici, je vais dire en-tête. Et à l'intérieur d'ici, je vais ajouter quelques choses. Je vais ajouter une div et fermer cette div. Et puis à l'intérieur de cette div, je vais l'ajouter. Ce que je veux faire, laissez-moi déposer celui-ci ici. Est-ce que cela délimite deux ou trois choses. Premièrement, le principal est le contenu principal de notre page. L'en-tête délimite également le titre de notre page. L'un que je vais aussi faire, c'est que je vais construire un tableau d'ensemble ici, littéralement une grande photographie. Je vais ajouter une superposition de couleur, qui va être cette div ici. Et le texte n'est pas à l'intérieur. Ce que je peux faire, c'est que je vais commencer par une photo. Donc, si je reviens dans mon Finder et avec les photos fournies, je vais prendre cette image de mon autre écran. Ce que je vais faire, c'est que je vais faire glisser cette image d'index, comme ça. Je vais mettre cette photo sur la page en haut de la page. Donc je veux le faire à l'intérieur de cet en-tête, je vais dire que le style est égal à l'arrière-plan, tiret, à l'image, aux deux-points et à l'URL. Et c'est là que je vais placer la photo. Je vais dire URL, guillemets simples, points, images obliques et image d'index. Maintenant, par défaut, ça ne va pas faire grand-chose, juste ressembler à ça. Il va remplir son parent, ce qui est très bien parce que le texte remplit l'espace pour l'instant, ce que je veux faire, c'est que je veux agrandir un peu la page. Alors, au CSS, on y va, ce que je vais faire ici, c'est que je vais ajouter un en-tête. Je vais dire en-tête, HA DR. Et puis à l'intérieur de l'en-tête, je dirai deux-points d'arrière-plan. Pas de répétition. Et puis centre et centre pour s'assurer qu'il se trouve à l'intérieur de ce design. Après cela, ce que je vais faire, c'est que je vais dire la taille de fond. Et je vais dire couverture. La raison pour laquelle j'aime utiliser la couverture est qu'elle contient l'espace quelle que soit la taille du navigateur. Et comme je sais que cet en-tête va nécessiter un changement de couleur du texte, je vais dire que la couleur est blanche. Enregistrer, rafraîchir. Et c'est là. Vous pouvez donc dire qu'il correspond à l'espace de ce texte. Si je voulais être un peu plus bas à l'écran, je vais ajouter une superposition de couleur qui va dicter la taille à l'intérieur de ce design. Ce que je vais faire, c'est dans cet index, dans cette div, je vais dire classe. Je peux épeler correctement la classe. Je vais dire superposition de couleur. Pour votre design. Il se peut que vous souhaitiez ou non une couleur qui dépend de la façon dont vous souhaitez y parvenir. Dans la superposition de couleurs. Je vais revenir au CSS. Et je vais dire période de superposition de couleurs avec un nom de classe. Et je vais faire défiler vers le haut. Et cette superposition de couleurs va dire quelques choses. Tout d'abord, je voulais dicter la couleur de fond. Je vais donc dire couleur d'arrière-plan, et je veux lui donner un RVB a. La raison pour laquelle j'utilise le a est pour Alpha. Je vais donc dire RGBA. Et ce dessin, je vais dire 0 virgule 0 0 virgule 0.4. Et quand je l'enregistre, remarquez comment cela assombrit un peu l'image. plutôt cool, mais ça ne baisse toujours pas un peu plus bas. Donc ce que je veux faire, c'est dans cette superposition de couleurs, je vais dire Min height. La raison pour laquelle j'utilise min-height, c'est dans le cas où j'ai mis beaucoup de contenu ici. Cela peut dépasser la hauteur minimale de 60 hauteur verticale. Quand je l'enregistre, je reçois maintenant le design qui s'adapte à l'espace. Gardez maintenant à l'esprit si j'avais le navigateur un peu plus grand. Notez que l'image augmente progressivement en fonction de la taille du navigateur. La seule chose que je veux résoudre, est qu'elle est un peu trop grande pour un design mobile. Je vais donc écrire une requête immédiate pour résoudre ce problème. Donc ce que je veux faire, c'est que si je ramène ça là où il devrait être après la superposition de couleur, je vais dire sur les médias et utiliser les points d'arrêt trouvés dans Bootstrap 5, je vais dire largeur maximale, deux-points 767,98 px. Ouvrez et fermez les crochets. Et maintenant, cela va changer dès qu'il sera inférieur à 767,98 pixels, soit 766 ou 767. Quoi qu'il en soit, je vais dire superposition de couleur ici. Et je vais changer la hauteur minimale de 60 à 30. Je dirai donc min-hauteur, je dirai 30, hauteur verticale. Ce que cela fait, et je peux avoir un peu plus d'espace. C'est juste qu'il respire un peu sur la page est maintenant et je rafraîchis cette page quand je passe dessous d'une taille de 767,98 pixels, elle va baisser comme ça. De toute évidence, nous n'aurons jamais la conception d'un site mobile de ce genre rectangulaire. Donc, en réalité, à quoi ça ressemblera si j'apporte ça un peu plus gros et que je vais à Inspecter et le déposer ici. Maintenant, ce design s'intègre beaucoup mieux dans cet espace, donc il n'est pas super grand. Si j'en avais 60 ici quand je l'ai cartographié il y a quelques jours, juste senti que sur un site mobile, c'était trop grand. C'est là. Pour moi, cela prenait trop de place et je voulais plus de ce design rectangulaire. C'est ainsi passé de 60 à 30. Et il rentre maintenant dans cet espace. Parfait, presque parfait. Bonjour tout le monde assis en haut à gauche. Mais ce que je veux faire, c'est que je veux le déplacer au milieu de la page Q flex dans Bootstrap 5. 8. Centrer le texte de héros avec Flex: Bootstrap 5 a une boîte flex et flex intégrée directement dans le framework. Si je retourne à Bootstrap 5, et si je tape Flex, c'est là. Le flux nous permettra donc de fléchir notre muscle de conception. C'est vraiment cool et j'adore le flex de plus en plus. Quand je peux le faire, c'est que je peux dire , je suis un conteneur Flexbox. C'est génial. Et en utilisant la flexbox, ce que je veux faire, c'est que si je fais défiler la page vers le bas, ce que je cherche, c'est justifier le contenu non pas à gauche, pas à droite. Mais je veux bien le mettre au milieu. Je veux déplacer Hello World au centre. Les milieux veulent le déplacer au milieu, mais aussi le centrer verticalement. Et la raison pour laquelle nous pouvons le faire est que nous fixons une hauteur ou, dans ce cas, une hauteur minimale. Donc, quand je cherche à faire, c'est faire deux choses. Je vais le déplacer au milieu. Et l'outil puissant ou fléchis, je peux aligner les objets au centre juste ici. Tout cela est décrit dans Bootstrap 5 et vous pouvez choisir ce que vous souhaitez utiliser. Et si vous le regardez ici, remarquez qu'ils ont le petit, le moyen, le grand et le XL. Lorsque vous écrivez n'importe quel code dans Bootstrap 5, vous pouvez écrire le SM entre les deux, justifier le démarrage du contenu et centré entre un format XL égal et moyen, grand. Cela signifie que vous pouvez définir des points d'arrêt pour le faire. Vous voulez faire soit tout le long de l'ensemble, soit tout simplement partiellement à travers le tableau. Laissez-moi dire par là. Eh bien, je vais faire ici, c'est revenir à l'index et à un HelloWorld. Ramenons-le. Nous pouvons voir à la fois notre code et Chrome. Et à l'intérieur de cette couleur Overlay, je vais dire d flex pour le configurer en tant que flexbox. Et je vais dire justifier le centre de contenu. Ce que ça va faire, c'est envoyer un ensemble de Phi, va centrer le contenu sur tout. En commençant par la conception mobile, je rafraîchis la page Hello World. Disons donc que je ne veux pas que cela se produise, sauf à un certain point d'arrêt. Si nous revenons à Flex qui justifie le centre de contenu, remarquez comment nous pouvons dire : Vous savez quoi, je n'en veux pas. Où si je veux juste de nouveau ce côté gauche, ça va commencer par le début. Disons donc, je dis, que vous savez quoi, justifiez que nous regardions ici. Je vais prendre le départ des médiums justifier. Ce qui va se passer, c'est que si j'ajoute cela, le centre de justify-content se dirigera vers le centre sur le mobile et le petit acteur à des fins de conception. Allons faire grand. Ainsi, le mobile, le petit et le support seront tous centrés et le grand, nous reviendrons à la barre oblique de départ à gauche. Donc, si je jette un coup d'oeil à ça juste ici, remarquez comment c'est sur le côté gauche parce qu'au plus grand ou au plus grand, il est retourné à la barre oblique gauche. Si je redimensionne mon navigateur, nous allons toucher un grand nombre, nous allons bientôt atteindre le XML. Et le grand, j'oublie toujours qu'il y a un double XL dans Bootstrap 5. Et maintenant, quand je descends en dessous d'un grand ici, le médium va lancer dans ce design mobile réactif. Et ça va donner un coup de fouet au centre parce que nous avons dit que tout, de l'application mobile, être centré jusqu'à ce que vous touchiez le grand, puis revenez à gauche. Donc, si je sors ça ici, rafraîchis la page et que je tombe sur, elle va se centrer sur la page, quel que soit le point d'arrêt, car c'est mobile d'abord. Maintenant que nous avons un centre de justify-content, ce que je cherche, si je fais défiler ici, c'est un élément de ligne. Et cela me donne des options, je veux aligner les éléments au centre également. Donc ce que je vais faire, c'est aligner les éléments au centre, verticalement, rafraîchir la page, la déposer vers le bas. C'est exactement ce que je veux avoir. Maintenant, il ne s'agira évidemment pas d'une taille normale du navigateur. C'est ce que je voulais faire. Bonjour tout le monde au milieu de la page. Il est maintenant parfaitement centré, haut et bas, gauche et droite. Merci d'aligner le centre des éléments et de justifier le centre de contenu. Et encore une fois avec Bootstrap 5, si je reviens ici, il y a tous les points d'arrêt dans Start, Fin, Center, Baseline et Stretch. Vous pouvez voir les cinq options ici. Et il y a un petit, moyen, grand XL, n double XL. C'est le pouvoir qui dit que je n'en veux peut-être pas au milieu. Une fois que j'aurai atteint une certaine taille, je pourrais avoir besoin de la référence. Donc, vous savez quoi, disons que les grandes entreprises vont avoir une base de référence. Je vais le copier. Et maintenant, la ligne de base atteint jusqu'à ce que je descende en dessous du grand. Et maintenant, il revient au milieu car aligner le centre des éléments est mobile en premier. Pour ce projet, les amines alignent les éléments juste au centre de toutes les tailles. Donc, je vais le retirer, appuyer sur Save. Et maintenant, quelle que soit la taille avec laquelle je travaille, il sera toujours au milieu de ce design très beau. Continuons. 9. x Axes et y: Pour cette prochaine zone de contenu, je souhaite créer une section au milieu de cette page qui n'est pas trop large. C'est donc l'une des rares choses que je construis en dehors du cadre de Bootstrap 5, mais je l'utilise beaucoup. Et ce que c'est, je l'appelle le seul appel. Et l'appel unique se trouve à l'intérieur du conteneur et ne s'étend qu'à une largeur maximale. À l'intérieur de mon espace personnalisé. Ce que je veux faire, c'est qu'après la superposition de couleurs, je vais ajouter un seul appel et dire un seul appel. Ce que cela va faire, c'est que je vais dire dans le seul appel, faire de la largeur maximale. Et ici, 750 pixels. La raison pour laquelle utiliser la règle des 750 pixels est que je veux qu'elle soit assez large pour être lisible, mais pas trop large pour créer une fatigue oculaire sur la page. Ce conteneur est fantastique, mais il est presque trop large pour une seule colonne. Cela étant dit, je veux toujours utiliser les points d'arrêt lorsqu'il entrera en jeu. Je veux donc m'assurer qu'il s'écoule le mieux possible. Donc, ce que je veux faire ensuite, c'est appliquer l'appel unique et ensuite apporter le conteneur dans la conception. Ce que je vais faire, c'est que je vais dire dans mon fichier d'index dans cette section principale, mais après l'en-tête, je vais dire div class single call. Maintenant, notez que j'ai capitalisé la mer et j'ai appelé à délimiter le mot appel. Après un seul appel. Je vais dire M x auto. Et parlons de l'espacement. Si nous regardons le rechargement ici, nous utilisons le M, S Auto. C'est pour le début ou le côté gauche. Dans un design écrit en anglais, le x auto signifie les deux côtés, marge X comme dans l'axe X du début et de la fin ou de la gauche et de la droite. L'auto, en mettant essentiellement cela au milieu de la page. Si je ferme ça et que je frappe le test, faisons-le tomber. Et maintenant, le test de mots se trouve approximativement au milieu de la page sur cette taille de 750 pixels. Si nous entrons dans notre conception, ajoutons simplement une couleur d'arrière-plan. Et nous allons juste apporter du jaune, du vert. Cela devrait être vraiment intéressant. Remarquez maintenant que c'est loin pourquoi ai-je voulu lire ? C'est tout ce que je voulais faire, c'est au milieu de la page. Et si nous revenons et que nous retirons l'Emax auto et économisez, ça va simplement rester sur le côté gauche. Je ne veux pas ça. Je veux ramener l'auto MX dans cette conception et autre chose. C'est très proche de ce design, presque trop près. Je veux donc ajouter un peu d'espacement à ce design. Nous avons donc déjà utilisé les m x, x pour la gauche et la droite. Mais maintenant, je veux me concentrer sur la zone supérieure et la partie inférieure. Si l'axe des X passe en travers, l'axe Y monte et descend. Puisque je veux qu'il soit même de tous les côtés en haut et en bas. Je suppose que pas tous les côtés, mais les deux côtés, haut et bas. Je vais dire, y, et JE peux dire MON à 51 étant un petit espace supplémentaire, qui est trop petit, un peu plus loin, trois peu plus loin encore pour sauter un peu plus loin, N5, sauter le plus éloigné de la page, il est respectif de son parent en termes d'espacement, il y a une marge inférieure. Donc, si nous exécutons l'éditeur d'inspection, remarquez que la div a des marges supérieure et inférieure juste là. C'est comme ça que je veux avoir, c'est en cours de route. Je veux un espacement uniforme en haut et en bas de ce design. Ce que nous obtenons, c'est que nous obtenons que l'axe des X soit automatique ou le même à gauche et à droite. Et nous recevons également le MY 5. Maintenant, voici le truc. Cela a fière allure sur cette page. Mais comme nous le voyons dans la conception mobile, ce mot test se heurte jusqu'au bord de la page Q, le conteneur pour l'espacement automatique dans la conception. Donc, si nous ajoutons le conteneur de classe div de conteneur, et que nous le fermons et que nous y avons déposé le mot test. J'ai promis que la couleur verte allait disparaître dans quelques minutes. Donc, si je laisse tomber le test de mots là-dedans et que je pense que ça va. Regardez maintenant ce qui se passe. Remarquez que le bord du design a été lancé. Le conteneur contient une marge naturelle et un rembourrage qui se trouvent partout. Partout où je mets le mot conteneur. Ainsi, utilisé le conteneur de mots pour contenir le test de mots. C'est plutôt génial. Je peux tirer parti de la puissance du conteneur. Elle n'est donc pas vraiment affectée par cette pièce tant qu'elle n'atteint une taille plus petite et qu'elle atteigne la taille. Notez que le test de mots n'est pas près du bord de la page. Ce conteneur se trouve à l'intérieur de cette boîte verte. Donc, si nous sortons le vert jaune, heureusement, le mot test est juste avec lui, et les points d'arrêt se situent en dessous de 750 pixels. C'est plutôt cool. Maintenant, je veux ajouter le texte à l'intérieur de la zone réelle. 10. Centre de texte: Donc, le test de mots ne me fait pas grand-chose. Je veux vraiment écrire un texte ici. Et comme il s'agit plutôt d'une entreprise de décoration et de design d'intérieur, je vais faire une sorte de titre à l'intérieur du test de mots. Puisque nous avons déjà utilisé le H1, il s'agit plutôt d'un H2. Je devrais le faire est H2. J'utilise la phrase, tout une apparence incroyable à votre chambre. Et si je le dépose et que je l'enregistre, c'est là. Maintenant, pour le H2 dans ce cas, je veux qu'il soit au centre de la page. Si je voulais que chaque H2 soit centré, je me dirigerais vers la coutume et je dirais centre H2. Dans ce cas, je vais dire H en classe, et nous dirons centre de texte. Encore une fois, c'est la puissance de la partie centrage technologique, est-ce que j'ai la capacité de dire centre technique, ou je pourrais dire du texte M ou je vais aller au centre LG. Et ce qui va se passer, c'est si on y va, oups. Je voulais dire « début ». On y va. début est égal à gauche. Il le ramène donc sur le côté gauche. Tout ce qui est au-dessus et le grand, puis en dessous du grand coup de pied au mobile d'abord ou au centrage. Donc, si je reviens ici, si je reviens et que je reviens, c'est là. Maintenant, le texte revient au centre, au moyen ou au plus petit. Et nous savons que le moyen se lance dans l'engrenage parce que la partie mobile entre en jeu. Tout a l'air fantastique. Maintenant, pour moi, je veux le garder Tech Center, donc je vais supprimer le texte LG start. Dans ce cas. Une fois que j'ai enregistré, il revient au milieu de la page. Après le H2, je vais ajouter une piste. La piste est l'endroit où vous pouvez avoir un paragraphe d'ouverture dans votre conception. Puisque je n'ai pas de texte, je suis un lorem ipsum dans ce design. Je vais donc dire la tête de classe p dans ce paragraphe. Et j'ai une extension intégrée dans VS Code. Ou si je commence à taper lorem, je peux dire les baisser et simplement les dire Laura. 25, appuyez sur la touche de retour. Et il y a 25 mots. Si je garde ça, c'est là. Il y a mon texte Lorem Ipsum juste là. Ainsi, la laisse agrandit le type et ajoute un poids plus fin par défaut. Jetons un coup d'œil à cela par rapport à la conception de paragraphe par défaut. Et je peux taper Lorem, le déposer, sauver. Et remarquez à quel point la piste est un peu différente du paragraphe honorable à l'intérieur de Bootstrap. À des fins de conception, j'aime en avoir trois, donc je vais déposer un paragraphe de plus. Et nous pouvons simplement voir les différences. Je vais appuyer sur la touche de retour juste pour séparer les trois pièces. Et maintenant, j'ai trois morceaux de texte. Et notez également que l'espacement au-dessus de ce H2 et au-dessous de ce H2 est exactement le même. J'aime utiliser le mot plomb, qui se trouve à l'intérieur de Bootstrap 5 pour simplement tirer peu de poids pour que votre œil se dise : Hé, H2 d'abord, leed deuxième, puis le paragraphe normal, troisième, quatrième, et ainsi de suite et ainsi de suite. 11. Les icônes de pied et de bootstrap: Nous avons donc le haut du design fait navigation et le héros. Nous avons également ajouté du texte dans notre section principale. Et la dernière étape consiste à ajouter le pied de page au design tout en bas. Donc je veux le faire après le principal, je vais ajouter un pied de page. Je vais dire pied de page. Déposez-le. Il suffit d'écrire le test de mots pour le moment pour nous assurer qu'il se trouve au bas de la page. Et c'est là. Ce que je voulais faire avec ce design pour m' assurer d'avoir un espacement à l'intérieur de ce pied de page. Et je veux également ajouter un peu de coloration au design. Je vais donc ajouter une couleur d'arrière-plan au pied de page. À l'intérieur de ma coutume, j'ai rejoint, mis le pied de page après tout mon code et avant la requête média. Je vais donc dire pied de page. Et ici, pas pied de page, p, juste pied de page. Et ouvrez et fermez les supports bouclés. Et je vais dire la couleur de fond. Et quelle couleur je vais utiliser, je vais décider que c'est juste un gris foncé. Donc je dirai la couleur de fond et je dirai le hashtag 333 de signe barre oblique. Cela me donne une barre oblique marron foncé, en fait gris foncé, pas marron. J'ai juste regardé un peu brun sur l'écran pendant 1 seconde. Parfait. J'ai le mot test, c'est brun. Nous avons ajouté quelques marges dans le passé dans notre conception, mais je souhaite maintenant ajouter du rembourrage pour mon espacement. Donc, si nous revenons à l'index, nous utilisons l'Emax dans ce design et en haut. Nous utilisons le MS M est pour la marge, S est pour le démarrage et l'auto. Ce que je voulais ensuite, c'est que je ne veux pas utiliser de marge, je veux utiliser le rembourrage. Donc, avec ce design à l'intérieur de mon pied de page, ce que je vais faire, c'est que je veux dire classe. Ici, nous allons dire rembourrage y, mais le haut et le bas et lui donner un maximum de cinq. Et quand je l'enregistre et que je me rafraîchis, j'ai maintenant beaucoup plus d'espacement dans ce design. Ce que je veux faire ensuite, c'est que je veux déplacer le mot test au milieu de l'écran. Et je vais modifier le test et ajouter des icônes pour les réseaux sociaux au bas de ma page. Ce que je vais faire, c'est que je vais dire des boucles de div. Au lieu de le faire, je me débarrasse de tout ça. Je dirai cours de div. Et comme je vais ajouter des icônes sur cette page ci-dessous, je vais changer le flex des colonnes simples comme nous l'avons utilisé ici, deux lignes en bas pour une rangée d'icônes dans Bootstrap 5 flex. Je vais donc dire que la classe div est égale à d flex, flex row. Et comme je veux qu'il se trouve au milieu de la page, je vais dire justifier le centre de contenu. Et quand je ferme ça, chaque enfant. Donc si je dis div et que nous dirons test, et si je copie ceci, ils vont devenir des lignes. Donc, si je dis test, test2 et test3. Maintenant, ce qui est plus facile également, faisons également de la couleur de la police pour qu'elle soit lisible. J'allais ajouter cela plus tard, mais comme nous sommes là de toute façon, nous allons dire couleur blanche. On y va. Ainsi, test, test2 et test3 peuvent tous aller dans la ligne Flex. Allons également chercher l'icône de flux. Je vais donc faire une recherche Google et ne dire pas les icônes flexibles. Que diriez-vous des icônes Bootstrap ? Donc, si nous recherchons les icônes Bootstrap, cela apparaîtra sous forme d'icônes point getbootstrap.com. Et cela a été remonté à son inversion 1.4. Il y a plus de 60 icônes météo. Génial. Mais je suis à la recherche d'icônes de médias sociaux et je vais commencer par l'icône Twitter. Ce que je veux faire, c'est que je veux faire défiler ces icônes vers le bas et les parcourir toutes. Ou je peux simplement commencer à taper pour filtrer. Et je vais taper Twitter, et c'est là. Donc, l'icône Twitter, je peux copier ce fichier HTML, le copier. Et ce que je veux faire, c'est revenir à Visual Studio Code. Et dans l'index, je vais sortir ces trois divs et je vais les avoir, faisons en sorte que les développeurs soient les rangées. Je vais ajouter la balise a comme ligne. Donc, un HREF, c'est ici que vous ajouterez votre URL Twitter si vous en avez une. Ou dans ce cas, je dirai simplement Twitter.com. Et à l'intérieur de cette étiquette, devrait, s'aligner jusqu'à là. Son intérieur d'ici, je vais laisser tomber ce SVG. Svg est également livré avec une largeur et une hauteur. Et comme nous savons qu'il s'agit d'une icône carrée, je peux la changer à la taille que je veux. Pour ce design. Je vais dire 25 et 25, 25, 25, 25, économisez. Jetons un coup d'œil. Hé, oh, c'est parce que le SVG prend en compte la couleur du lien. Et par défaut, la couleur du lien dans Bootstrap 5 est bleu et bleu foncé. Changeons ça en blanc puis en blanc cassé à l'intérieur de cette coutume, je vais dire pied de page. Puis a, puis modifiez la couleur du lien en couleur. Nous allons juste dire blanc au début, en le sauvant. Maintenant, c'est blanc, mais il va encore jusqu'à ce bleu foncé. Donc je veux le faire est à l'intérieur du pied de page a, je vais le déposer et dire le pied un survol et le changer en signe de livre de couleur. Ce n'est pas d'habitude pour moi. Eh bien, de toute façon, voyons si je peux avoir une couleur pour apparaître. Très bien. dehors du Photoshop, on y va habituellement pour me donner la couleur. Essayons ça. Photoshop va apparaître un écran différent. Laissez-moi essayer un blanc pendant une seconde. Essayons une fumée blanche. On y va. Voyez si cela fonctionne. Donnez-moi juste du code Visual Studio en couleur. Sauvegardons, rafraîchissons. Et je n'aime pas cette fumée blanche. J'ai donc dû faire à l'intérieur d'un Photoshop ou l'un de vos éditeurs préférés est que si j'apporte Photoshop ici, je l'utilise juste pour choisir une couleur. Donc, dans Photoshop ou quel que soit le logiciel que vous souhaitez utiliser pour notre sélecteur de couleurs, je peux choisir une sorte de couleur blanche cassée. Je ne prendrai jamais un gris. Et juste pour qu'il apporte une sorte de ton, celui-ci est DF, DF et DF. Si je minimise le passage de la fumée blanche à la chute de cette couleur grise. Maintenant, c'est un peu mieux. Nous avons des couleurs changeantes pour que vous puissiez voir quand vous le renversez. Parfait, nous avons le A et le vol stationnaire. Je veux revenir et l'apporter un peu plus. Nous avons fait Twitter, donc je peux basculer, cliquer sur Twitter et sur Twitter. Et si je reviens maintenant, je peux aller sur Instagram ou ce que j'ai appelé, je veux. Dans ce cas, je vais apporter deux icônes. Je l'ai d'abord apporté sur Twitter. Maintenant, je vais apporter Instagram, Instagram loin. Chercher Instagram, le trouver, copier le SVG. Donc ce que je vais faire, c'est revenir après ça une étiquette, je dirai un HREF. Allez, HREF. Et nous dirons la barre oblique de deux-points https Instagram.com. Encore une fois, vous pouvez ajouter votre pseudo Instagram ici. Je ferme l'étiquette a, je la dépose, j'ai mis en retrait et j'ignore tous les chemins. quoi je me concentre, c'est la largeur de 16 et 16. Je vais m'en tenir à la même chose à 25, 25 ans, Save. Et maintenant, ce sont deux icônes et elles sont très proches les unes des autres. Je veux donc ajouter un peu de rembourrage. Maintenant, je peux utiliser l'une des deux manières suivantes. Je peux taper Instagram et pousser par la gauche ou pousser vers la gauche. Ou je peux éloigner l'icône Twitter ou de droite vers Instagram. Je vais donc regarder Twitter. Et en haut de Twitter, ce que je cherche, c'est le A, et j'aime ajouter plus d'espacement. Donc, dans la zone Twitter, je vais dire un HREF. Et après ça, je vais dire que la classe est égale à la fin du rembourrage, et je dirai quatre. Il aura une zone cliquable. Donc, si vous ne voulez pas qu'il soit cliquable, vous pouvez toujours le changer en m pour marge. Donc, l'IME, il restera le même. Mais maintenant, je n'aurai plus de zone cliquable, donc c'est à vous de décider si vous voulez avoir un espace cliquable là-dedans pour rembourrage ou le m pour la marge et 4. La marge le repousse donc et grâce au flex, il le maintient désormais au milieu de la page. Maintenant que cette page est terminée, nous allons continuer à passer à la page À propos. 12. Configurer la page d'environ: Je vais y aller et cacher Chrome. Et ce que je veux faire, c'est que je vais passer à l'index HTML et dupliquer et dire à propos du code HTML. Je vais l'intégrer dans mon design et je commence à sortir des pièces dont je n'ai pas besoin. Je vais revenir dans Chrome, alors ne gâchez pas ça. Et oui, ils se ressemblent à première vue. Je vais donc tout retirer, sauf pour la navigation et les dessins de John Smith et le pied de page en bas. Donc à l'intérieur de mon sujet, je vais cacher l'index et je garderai le client au cas où les AUD et le fichier CSS optimisé. Je vais faire défiler vers le bas, chercher la section principale. C'est aussi pourquoi j'aime utiliser le mot principal car ils peuvent dire ce qu'il faut enlever et ce qu'il ne faut pas sortir. Je vais retirer tout le reste, sauf pour le test et le test principal et correct. C'est là. J'ai l'air bien. Maintenant que nous sommes sur la page À propos, je veux que la navigation reste active. Et je peux le faire en me dirigeant vers la navigation et où il est dit lien de navigation de classe. Je vais dire le mot actif. Ce que ça va faire, c'est que ça va tourner le mot sur une couleur sombre pour délimiter le mot sur les sommes sur la page à propos. Et pendant que nous y sommes, ajoutons également le mot à propos de notre titre de page. Donc, si je fais défiler la ligne 13 de la mienne, la recherche du mot titre, je vais dire le mot sur la ligne verticale et puis bonjour le monde changera cela une fois que nous aurons tous fini. Mais pour l'instant, nous garderons les choses simples. Et je vais parler de HelloWorld. Cool. Nous avons notre titre et nous avons l'intention d'être actif et de naviguer. Il est maintenant temps d'apporter du contenu. Dans cette page À propos. 13. À propos de pages avec des floats et trop-: Il est maintenant temps d'ajouter du contenu à cette page À propos. Et en plus du texte pour cela sur les personnes, imaginaire John Smith, personne, je veux apporter une photo de John Smith. J'ai une photo ici. Je vais faire venir, je vais faire venir celui-là. Je vais copier à partir de l'écran avant et apporter le portrait de John Smith. Notez que ce design est un design carré. Je voulais m'en servir. Je vais donc apporter le carré à la fois en tant que design mobile et comme ordinateur de bureau conçu pour être redimensionné. J'ai donc senti que le carré était le plus approprié pour le design. C'est à vous de déterminer comment vous voulez y parvenir. Mais pour ma conception, nous utilisons l'icône carrée pour que le portrait de John Smith soit éventuellement utilisé. Ce que je veux faire ici, c'est à l'intérieur de cette section principale, où est-ce ? Je vais faire venir cet appel unique, Saul, disons que la classe div équivaut à un seul appel. Et quelques choses que je veux lire, apporter l'auto MX et apporter quelques choses différentes. Je veux le faire descendre sur la page. Je vais donc dire MON pour la marge supérieure et inférieure. Je vais en dire deux parce que nous n'avons plus ce graphique de héros. Et j'ai senti que lorsque je l'ai conçu pour quelque chose de plus grand, JE veux dire MON M D Pour ce que je veux dire par là, et nous vous le montrerons à nouveau. Si je dis le test de mots, remarquez comment le test de mots se trouve sur cette page. C'est parce qu'il est assis à quatre sur l'espacement. Cependant, quand j'arrive sur un site mobile, je me suis rendu compte qu'il était un peu trop loin, donc ça va aller un peu plus haut sur la tablette mobile, petite et moyenne ou petite, excusez-moi et dites T2. C'est pourquoi j'ai dit deux Vs pour. Il finit par tomber un peu plus bas. Et ensuite, nous sommes tous prêts à partir. Parfait. La prochaine chose que je veux faire, c'est que je veux ajouter une classe div égale à conteneur, pas contact. Et s'assurer que la div se ferme. Et je veux ajouter un morceau de plus car je vais ajouter un flotteur à cette photo. Et les flotteurs doivent être cachés pour ne pas flotter hors de la page. Donc, dans ce cas, Bootstrap 5 a quelque chose appelé overflow caché. Je peux donc changer mon débordement en masqué, ce qui permet de s'assurer que l'image reste sur la page. Il ne passe pas au-dessus de la div. L'image va flotter autour du texte, puis s'arrêter et ne pas flotter une fois que nous aurons atteint un design mobile. Donc dans ce cas, à l'intérieur de ce débordement de conteneur de classe div caché, je vais dire H1, parler de John Smith. Et ici, je dirai H1. Je vais ajouter une piste. Alors p Class menez et faites venir notre célèbre Lorem Ipsum en tapant lorem. Et on dira 25, il va y avoir une longue introduction. C'est là. Et si je sauve ça, il s'agit de John Smith. Et si nous montons et descendons la page, vous pouvez dire qu'elle se rapproche un peu , puis nous nous éloignerons en fonction du design. C'est plutôt cool. Après cette zone, sous cette section P, je vais ajouter un autre paragraphe de type. Et nous ajouterons Lorem Ipsum. Et nous ajouterons un autre paragraphe de type pour indiquer qui va bien avoir, vous savez quoi, veillons à ce qu'il ait trois paragraphes. Nous le sauvegardons donc. Et c'est là. Je veux faire ensuite une photo en haut à droite. Cependant, si le texte ne va pas aussi loin dans la page, je voulais m'assurer que l'image ne perd pas dans le pied de page parce que nous allons utiliser quelque chose appelé float, n'est-ce pas ? Donc ce que je vais faire, c'est après la tête, je vais dire « ouverture de près ». Et si nous disons simplement source d'image par lui-même, nous disons images et portrait de John Smith, et nous disons alt ou trip de John Smith. Et si je ferme ça, regardez ce qui se passe pour soulager le géant ? C'est génial. Mais si vous y pensez, je ne veux pas que ce soit aussi gros parce que je veux qu'il soit assez petit pour tenir de ce côté droit. Je dois donc m'assurer que cette image refoule également, qu'elle fait, mais je veux une plus petite quand elle coule vraiment. Je vais donc faire deux ou trois choses. abord, je veux que cette image soit d'une hauteur maximale de 300 sur 300. Je vais dire que la largeur est égale à 300. Et une hauteur de 300. Et ça a l'air plutôt bien. Il y a une énorme friandise juste dans cette taille ici. Ce que je veux faire ensuite, c'est que je veux le positionner au centre quand je ne flotte pas. Donc ce que je vais faire, c'est que je vais dire centre de texte de classe p. Parfait. L'idée est donc que lorsqu'il ne flotte pas ici sur le côté droit, il est fixé au design. C'est plutôt ce que je veux faire lorsque je suis sur le site mobile. Et comme Bootstrap est d'abord mobile, c'est pourquoi je voulais ressembler à quand je les frappe, Mobile Framework semble vraiment bon. Nous avons des conceptions de John Smith de haut en bas pour notre navigation sur John Smith, une piste. Et nous avons ce petit visage souriant dans un champ de blé et toute la photo et le soleil derrière. Il a l'air bien ici, mais je ne veux pas qu'ils soient au centre. Je veux que le texte circule autour de lui sur un design non mobile. Voici donc ce que nous allons faire. Nous allons ajouter quelques éléments différents à cette photo. À l'intérieur de cette image, je vais déposer la source juste pour plus de lisibilité. Je vais baisser la largeur vers le bas, baisser la hauteur et laisser tomber l'Alt. Et nous allons également laisser tomber cela juste pour que nous soyons dans l'alignement. Ce que je veux faire ensuite, c'est d'ajouter un cours. Je vais donc ajouter un cours et je vais dire float, MD Fin. Mais je m'assure également qu'il ne flotte pas lorsque je frappe le petit ou le plus petit. Donc je dirai que je ne flotte pas, puis je flotte MD fin. Ce qui va se passer, c'est que la fin est comme la droite contre la gauche. Donc, ces années que nous avons tapées avant représentent une barre oblique droite. Donc, si je l'enregistre, ce qui se passe c'est de noter comment le texte se trouve à gauche de cette image. Et si le débordement n'était pas caché, c'est là que le problème se pose. Cependant. Il flotte juste un peu et puis ce pied de page apparaît dans votre conception quand vous écrivez votre section à propos, vous n'avez peut-être pas ce problème. Vous avez peut-être assez de texte, mais je l'ai défini au cas où j'aurais un problème. Bootstrap 5 fournit un débordement masqué par défaut dans sa conception. De cette façon, il attrape le fond. Et ce M Y2 ou MY pour, attrape le haut et le bas avec succès dans notre conception. Tout comme ça, nous avons terminé notre page à propos et elle a l'air plutôt bien. Et nous pouvons tester pour s'assurer qu'il fonctionne en actualisant la page. Et puis je peux appuyer sur ce bouton. Et il est toujours assis au milieu du design sans s'inquiéter qu'il flotte à droite parce que nous l'avons empêché de flotter à une certaine taille. n'y en a donc pas pour le flotteur plus petit ou plus grand. C'est pourquoi j'ai mis le SSM là-dedans pour l'attraper. Et comme la valeur par défaut n'est pas flottante, je pourrais dire ne flotter aucun et cela fonctionnerait toujours. Mais juste parce que pour moi, la valeur par défaut et le mobile ne sont déjà pas. J'ai donc écrit à DSM pour m'assurer qu'il attrape une certaine taille. Par défaut, sous le MD, il sera mis en cache pour surveiller ce que j'aimerais simplement dire SM parce que je sais qu'il passe de moyen à petit à cet égard, à cet instant. 14. La grille: Génial. Nous avons terminé la page À propos. Ensuite, je veux passer à la section Portefeuille. Je vais fermer ces deux HelloWorld juste pour l'instant. Je vais proposer un nouveau projet. Je vais dupliquer la question. Nous passons donc de la copie deux portefeuilles. Et si je peux taper correctement le portfolio, le ramener à mon code, je vais me débarrasser de tout le contenu supplémentaire que j'avais pour ma page à propos. Donc là où il est dit principal, je vais me débarrasser de la div à div et dire simplement le mot test, sauver. Revenons et faisons glisser le portefeuille. Parfait. Maintenant, j'ai un portefeuille, donc je vais changer le mot « top » d'environ deux portefeuilles. Et ici, j'arrive au sommet, je vais changer le mot sur deux portefeuilles. Maintenant, pour ce projet, ce que je veux faire dans cette section, oups, je dois aussi créer l'actif sur le portefeuille à partir de la page. Donc, ici, je vais faire défiler vers le bas, retirer le mot actif du mot « actif » et mettre le mot actif dans le portefeuille. J'actualise la page, nous sommes sur la page Portfolio et sur la page portfolio. Donc, si nous regardons en arrière, si nous revenons à notre page d'accueil, nous avions une conception d'une seule colonne sur cette page. Et nous avions une conception d'une colonne sur la page à propos du portfolio. Je ne veux pas concevoir à trois colonnes quand il s'agit du bureau. Je veux un design à deux colonnes quand il s'agit de la conception de la tablette. Et je veux, bien sûr, 100% ou une largeur de colonne complète quand il s'agit du mobile. La puissance de Bootstrap, qui est sans doute l'un des outils les plus puissants de son arsenal, est le réseau. Si nous nous dirigeons vers Instagram, passons à getbootstrap. Et ici, je vais commencer. Et ce que je cherche, c'est la grille, car c'est l'outil le plus puissant que nous puissions utiliser dans Bootstrap. Et la grille se déroule comme ça. La grille fonctionne avec une ligne et une série de colonnes. Donc, si nous tapons trois fois en rangée et en col, nous aurons une grille à trois colonnes. Donc, si je viens ici dans ma section principale, je vais taper div class égal rangée. Et il aurait dû attraper la div de près. C'est là. Et après ça, je vais taper div class. Et nous dirons appeler, comme c'est le cas ici. Donc, si je vais appeler, je dirai la colonne 1, et je dupliquerai ça. Deux, colonne deux. Et puis la troisième colonne. Si je sauvegarde cela et que je reviens au portefeuille bonjour monde, j'ai la colonne 1, la colonne 2, la colonne 3. Une chose que je dois également ajouter, c'est que je dois aussi ajouter un conteneur car cela va ajouter tous nos points d'arrêt. En ce moment, sans conteneur, il se déplace simplement dans une direction libre. Donc, dans ce domaine, je vais couper la rangée, non ? Non, pas si loin. Revenez. On y va. Et je vais ajouter un conteneur à ce design. Donc je dirai que div class est égal à conteneur et dépose dans mes rangées. Ce que je veux faire est parfait, cela s'aligne et cette alliance colonne 1, 2, 3. Le problème, si nous tapons simplement les colonnes, c' est qu'il ne fonctionne pas dans les points d'arrêt du conteneur. Remarquez encore une fois que nous avons notre menu déroulant pour notre menu mobile. Par défaut, si vous venez de commencer à taper des colonnes, vous allez ajouter des colonnes jusqu'à ce que vous manquiez d'espace. En ce qui concerne le nombre de colonnes que vous pouvez placer sur la page. La grille fonctionne sur un système à 12 colonnes. Donc, pour moi, il n'y a pas de points d'arrêt pour dire où il veut aller. Donc, en termes de grille, je vais écrire juste pour montrer quelque chose. Je vais dire Col 12. Appelez le 12, terminez le col 12. Regardez ce qui se passe lorsque je tape 12, 12 et 12 à côté des appels. Il descend jusqu'à une ligne verticale. C'est parce qu'imaginez que nous ayons 12 colonnes sur cette page. Je dis que pour cette première colonne, remplissez 12 de ces 12 colonnes. 12 divisés par 12 équivaut à 100 %. Essayons quelque chose de différent. Ajoutons un nouveau point d'arrêt car maintenant dans Bootstrap 5, il s'agit de notre taille mobile. Ainsi, lorsqu'il atteint le framework Mobile, il y aura toujours 12 appels sur 12 ou 100 %. Supposons que nous ayons atteint la taille moyenne que nous voulions du cosinus 50 %, 50 %. Ce que je vais faire, c'est que je vais dire appel. Dash AMD et 50 % vont être de 6 ou 6 divisés par 12, soit 50 pour cent. Donc, si je dis col MD six, col md six, et col md six sans double espacement. Laissez-moi sauver ça. Permettez-moi de commencer par le menu mobile. Permettez-moi de rafraîchir cette page et maintenant de regarder ce qui se passe. Si je frappe le petit, maintenant je touche le médium. Remarquez comment c'est 666. Ainsi, la colonne 1, la deuxième colonne, la troisième colonne tombe en dessous parce qu'elle dépasse les 12 colonnes. C'est tout à fait très bien. Et quand je vais plus loin, il reste dans une capacité de 50 %. Eh bien, quand je prends un grand XL et un double XL, je veux un design à trois colonnes. Donc, ce que je vais faire, c'est que je vais dire appeler LG. Et si je veux trois colonnes, 12 divisées par 3, c'est 4. Je vais donc dire, oups, revenez au sommet aussi. Je vais copier celui-ci. J'ai donc le mobile à 12 ans, moyen, à six ans et plus et plus à quatre ans. N'oublions pas le dernier. On y va. Regardez maintenant ce qui se passe. Maintenant, j'ai la première colonne, la deuxième colonne, la troisième colonne en quatre colonnes. Cependant, j'ai chuté et je suis descendu au médium. Maintenant, je frappe 50 pour cent et maintenant je frappe 100% ou je frappe un menu mobile. La grille a beaucoup d'outils puissants, mais 12 Je n'utilise presque pas du tout c'est que je l' appelle les colonnes DOM où elles sont simplement assis là seules. Il crée trois colonnes égales, mais aucun point d'arrêt n'y est attaché. Je peux donc utiliser toute une combinaison d'outils différents. Mais j'utilise le pouvoir de l'excès qui a disparu. Mais j'utilise les SM, MMD, LG XL et Double XL pour définir essentiellement les points d'arrêt de ma colonne. Et c'est comme ça que j'utilise le Col Dash, l'appel SM. J'utilise le col md, ou nous avons la colonne D tiret nombre de colonnes. Et puis j'utilise le col dash LG pour dire au-dessus de ce numéro, les mettre tous dans ce design. Et c'est votre choix lorsqu'il s'agit d'une grille, vous pouvez utiliser n'importe quelle combinaison. La raison pour laquelle j'aime quand ils utilisent 12 comme 12 colonnes, c'est que vous pouvez diviser cela par 2, trois ou six. Et bien sûr 12, ce qui vous donne une grande flexibilité. Maintenant, vous n'avez pas besoin d'utiliser uniquement ces chiffres si vous souhaitez réaliser des designs un peu différents. Disons que nous voulons que la colonne du milieu soit vraiment, vraiment grande et que les deux autres soient vraiment, vraiment petites. Tant que j'arrive à 12 ans, je suis en forme. Disons donc que nous voulons faire le 110 au milieu. Et ensuite, nous ferons le top 11. Et ce 1110 plus un, plus un équivaut à 12. Quand j'économise ça et que je reviens, si je reviens à ce design moyen. Maintenant, nous allons voir, et le texte est si petit. Reprenons ça. C'est une colonne si petite qu'on ne peut pas lire la première colonne. Disons juste deux. Nous en ferons huit. Et puis encore deux. On y va. Notez à quel point la colonne une est plus petite. La deuxième colonne est tellement plus large. Et la colonne 3 est à nouveau aussi petite que la première colonne. Tant que mes chiffres s'élèvent à 12. Je peux traverser ce design. Bien sûr, je les veux tous les mêmes pour mon design. Je vais donc revenir à 666, mais c'est la puissance du réseau Bootstrap. La raison pour laquelle j'utilise une grille, c'est que je veux la réparer en place. Le Flex visait plutôt à positionner des éléments qui se positionnent à l'intérieur d'un espace. Et la grille est conçue pour organiser les choses manière uniforme ou pour créer une barre latérale au contenu principal. J'ai vraiment commencé au tout début avec une grille pour la plupart de mes projets. Et ce projet ne fait pas exception ici. Maintenant que notre réseau est en place. Colonne un, deuxième colonne, troisième colonne, allons-y, apportons quelques cartes et ajoutons du contenu à ce portfolio. 15. Bootstrap 5: Ce que je veux faire ensuite, c'est que je veux apporter des cartes. Et ce à quoi ressemblent les cartes, c'est que si nous passons au contenu ou dans la section des composants, je cherche la carte de mot. Et tout ce qu'un panier est qu'il fournit essentiellement un conteneur de contenu flexible et extensible avec plusieurs variantes et options. Qui c'est une définition vraiment, vraiment vague. quoi ressemble une carte, c'est cette image en haut, le titre de la carte, du texte et un bouton. Allons de l'avant et construisons ça. Et la meilleure partie des cartes, c'est qu'elles remplissent l'espace de ses parents. Cela signifie que les cartes seront ajustées en fonction de la taille. La grille. Il y a un exemple dans getboostrap est bon, mais ils définissent un style en ligne sur une largeur de 18 RAM. Et c'est très bien, mais je veux faire quelque chose de différent. Je vais prendre les cartes et y aller, d'accord, construisons ça remplit l'espace du parent. Alors, comment allons-nous écrire la carte ? Donc, si nous venons ici à la colonne 1, je vais retirer la première colonne. Et ce que je vais faire, c'est que je vais dire div class égale carte. Ouvrez et fermez ce chariot. Permettez-moi aussi de faire bonjour tout simplement en regardant la carte en carte deux fois. Et la première partie de la carte, c'est que je veux apporter une photo. Donc je vais le faire, c'est que je vais venir dans ce dossier. J'ai déjà un dossier d'images existant ici. Je vais prendre une salle à manger plus petite et la faire glisser dans mon dossier d'images. Je vais également attraper le bureau plus petit et le faire glisser dans mon dossier d'images. Et aussi un coin salon, une photo plus petite. Nous allons faire glisser ça. J'ai donc ces trois photos parce que les cartes sur les photos vont en premier. Je dois apporter la photo au tout début. Ce que je vais faire, c'est que je vais dire IMG, SRC. Et nous apporterons des images et nous prendrons les salles à manger plus petit Dot JPG. N'oubliez pas de lui donner des balises alt. Nous dirons Alt et nous dirons salle à manger. Et après cela, je dois ajouter un cours parce que je veux que la voiture soit conforme ou que je veux que la photo soit conforme à la carte. Dans ce cas, je dirai que la classe est égale à la carte, IMG top. Et si nous fermons notre carte, ce qui est également utile, ce sont les codes VS comme si quelque chose ne va pas. Vous avez cette div rouge vif ici. Je vais fermer la carte. Et voici la photo. Notez comment la carte s'incurve autour de ces coins arrondis. Et comme nous n'avons pas d'autre contenu, la courbure sera également en bas. Mais je souhaite ajouter du contenu ou ajouter des informations dans le corps de la carte. Donc après le sommet de la carte, ce que je vais faire, c'est div class équivaut au corps de la carte pour établir la partie corps du chariot. Maintenant, Bootstrap recommande le h5, donc je vais m'en tenir au h5. classe H5 est égale au titre de la carte. Et ici, je dirai la salle à manger. Notez que vous pouvez utiliser n'importe quel hg18 ou un paragraphe si vous le souhaitez. C'est juste que je vais bien. Règles recommandées par Bootstrap pour utiliser le H5 dans la section de la carte. Après celui-ci, je vais ajouter une classe p égale au texte de la carte. Et notre ancien fan, M. Lorem Ipsum, nous allons donc dire lorem 20 et apporter un paragraphe de 20 mots. Et si je garde ça, ce que je reçois, c'est la salle à manger avec le texte Lorem Ipsum. Maintenant, ce que je veux durer, c'est que je dois avoir un appel à l'action ou un endroit où la personne peut cliquer sur un bouton pour voir plus de cette salle à manger. Et quand nous le ferons, je vais utiliser le bouton Bootstrap. 16. Boutons de bootstrap: Je veux m'arrêter et jeter un coup d'œil au Bootstrap, mais je vais revenir à la section getbootstrap. Et si nous venons à la zone des composants dans getbootstrap, je vais passer aux boutons. Je veux vous montrer toutes les combinaisons de boutons que vous pouvez utiliser. Et celui que je veux utiliser pour ce projet. Les boutons sont donc excellents car ils créent une façon uniforme d'attirer l'attention. Il a déjà des coins arrondis et il a une série de couleurs. Par défaut, vous devez ajouter à la fois le btn pour identifier le bouton, puis le choix des couleurs. Après ça. Les couleurs sont uniformes dans getbootstrap. Le primaire est bleu, le secondaire est gris, les succès sont verts. Le danger est bien sûr rouge, l'avertissement est jaune. Info est ce type de couleur turquoise. Et vous devenez clair, sombre et bien sûr, rien d'autre qu'un lien si c'est le cas que vous voulez avoir. Je n'utilise presque jamais le lien parce qu'un lien n'est vraiment qu'un lien. J'en utilise vraiment trois, principalement le principal pour le bleu parce que le bleu indique qu'il s'agit d'une couleur de lien quand il s'agit du Web. Et ensuite, si je n'utilise pas primaire, j'utilise généralement la lumière ou l'obscurité pour remplir mon design. Puisque j'ai davantage de décoration intérieure en noir et blanc dans ce projet, je vais aller avec la lumière et l'obscurité. Mais voici la partie cool. Pour moi. J'aime le noir, mais j'ai senti que le bouton serait trop fort sur cette page. Si je fais défiler vers le bas, vous obtenez non seulement vos boutons normaux, mais vous êtes lié, mais un oui important, c'est pour un formulaire. Mais vous obtenez également les boutons de contour. J'adore celle-ci parce que celle-ci est puissante, pas trop puissante. Ce que j'entends par un puissant, comme vous pouvez le voir, mais ceux-ci sont presque tellement forts avec des couleurs qui se déroulent. Je souhaite donc que l'utilisateur sache où cliquer. 17. Gutters: Pour voir tout l'effet du fonctionnement des gouttières, nous allons apporter deux autres colonnes d'informations. Ce que je vais faire, c'est que je vais copier cette carte d'une carte à l'autre. Je n'ai pas besoin de copier les colonnes car elles sont déjà là. Et je vais le déposer dans la troisième colonne. n'ai pas eu la capitale C. Alors maintenant ce que j'ai ou la salle à manger, salle à manger et la salle à manger. Changeons cela pour inclure également le bureau. Je vais donc changer la salle du milieu par des salles à manger plus petites, mais un bureau plus petit. Et tout le monde dit « bureau ». Maintenant, quand j'aurai le bureau et le corps de la carte, je vais passer au bureau. Et ça a changé. Et je vais changer le dernier par le coin salon. Je vais donc copier cette URL ou plutôt le nom du fichier. Et je vais changer de coin salon plus petit que le coin salon et je retirerai la salle de mots. Et bien sûr, je vais dupliquer le coin salon sur le coin salon du H5. Maintenant, quand j'ai trois colonnes. Notez donc les gouttières à l'intérieur du design. Et c'est aussi important parce que lorsque je retourne cela sur mobile, mais il arrive aussi de remarquer à quel point cet espace est encombré entre les différentes cartes et la grille appropriée. Voici comment on va faire ça. Si nous revenons à la rangée, ce que je cherche, c'est la ligne de classe div. Je vais d'abord dire que je veux un peu plus de marge. Je veux donc un peu plus d'espace entre cette zone ici. Donc je vais dire Row, oh, vous savez, et j'ai aussi oublié, j'ai oublié notre H1. Tirez. J'étais tellement excité par le portefeuille. J'ai complètement oublié de mettre le titre de cette page, disons un. Et mon portefeuille. C'est ce que c'était pour moi. C'était un peu bondé quand j'ai eu le H1. Donc c'est ce que j'allais faire est vide pour la première marge. On y va. Il y a juste un peu plus d'espace. Donc, après la ligne avec la marge supérieure, je vais ajouter une lettre g et dire m, D3. Donc ici, je dirai G pour gouttière de taille moyenne, je veux qu'il en ait un trois. Quand il s'agit d'espacement. Juste un peu plus de place ici. Mais remarquez maintenant que l'espacement est égal et même sur les quatre côtés. Pour moi, quand je vais au mobile, je n'ai pas besoin de beaucoup d'espace pour l' instant , bien sûr, il n'y a pas d'espace car il ne touche que les moyens et les plus grands. Donc, si je disais G3, ça deviendrait mobile. Et pour moi, il y a de l'espace. Mais quand il s'agit d'un design mobile, je réfléchis toujours à la façon de compresser ou de rapprocher les choses. Et donc pour moi, ce que je veux faire, c'est que je veux garder M D3, mais je veux dire, Gee, T2. Et j'apporterai le g2 de l'autre côté. Je préfère passer au mobile d'abord, puis MMD, LG XL, double XL au fur et à mesure que je monte, c'est à vous de choisir. Peu importe la façon dont vous les placez, car cela fonctionnera quoi qu'il arrive. Mais je veux que le mobile soit deux, puis petit à B2, puis MD soit trois. Si je rafraîchis cette page, elle la rapproche un peu plus près. Je réfléchis à la façon dont je peux compresser ou mettre les choses le plus près possible du côté mobile. Quand je frapperai le petit, ça restera aussi. Mais quand j'atteindrai le médium, il va tomber à trois pour un peu plus de gouttière à l'intérieur de ce design. Maintenant, bien sûr, la partie inférieure n'est pas des gouttières. C'est la zone médiane, c'est la gouttière. Je dois donc ajouter un peu plus d'espace à mon design. Donc ce que je vais faire, c'est à l'intérieur du conteneur, je vais fixer une marge. Pourquoi pour le haut et le bas à deux. Et quand je veux aussi le faire, c'est que je vais dire rembourrage. Pourquoi ? Je veux un peu de rembourrage supplémentaire quand il s'agit de taille moyenne et plus grande. Je vais donc dire ajouter un support pour. Et cela me donne plus d'espace de respiration quand il s'agit de portefeuille dans ce design. Et ça fait tomber un peu ici. Mon portfolio est donc un peu hors du titre. Et maintenant, tout bouge et fonctionne avec succès. Pour votre design. Vous voudrez peut-être augmenter ou diminuer les gouttières. Vous pouvez bien sûr passer de un à cinq et le retirer complètement. Donc, si je dis, je ne veux pas de gouttières, je peux dire 0 et ils vont s'écraser ensemble. C'est tout à fait très bien. Si vous souhaitez que les photos soient juste à côté des autres, utilisez 0. Si vous voulez qu'ils soient plus éloignés, dites cinq. Et maintenant, ils se séparent. Pour moi, le numéro trois était juste au milieu où il m' a donné assez d'espace dans K moi assez d'espace entre eux. Où est le numéro six ? C'est là. Et tout au long de ce voyage, tout est réactif. Chaque fois que j'utilise MDL, GSM XL et Double XL, tout devient réactif. Et je joue d'abord avec le mobile, mobile d'abord et je monte deux supports, dans ce cas, le mobile d'abord, le moyen, le grand. C'est la puissance des gouttières et le design réactif de Bootstrap. En général. 18. Configurer la page de contact: Nous avons accompli beaucoup de choses. Nous avons notre page d'accueil, nous avons terminé notre page à propos, nous avons une configuration de page de portefeuille. Et si vous voulez aller plus loin, vous pouvez créer ces sections En savoir plus. La dernière page sur laquelle nous voulons travailler est la page de contact. Je ne cliquerai pas encore dessus parce que ça va planter. Allons donc ici et dupliquons notre page de portfolio. Et nous allons dire contact. Et nous allons afficher la page de contact ci-dessous. Et nous allons modifier notre portefeuille de formulaires de navigation actif. Pour contacter actif. Je vais retirer tout ce dont je n'ai pas besoin, y compris cette plongée en bas. Je vais donc commencer par la div et sortir la deuxième div hélas. On y va. Je garderai le conteneur dans mon portefeuille, je dirais me contacter. Je vais donc dire contact. Contactez-moi. Maintenant, je peux cliquer sur Contact, et maintenant ça va fonctionner. Ça a l'air bien. Et si votre design est trop bas, je pourrais revenir au m Y2 pour l'instant. Là, ça va, amène un peu plus loin. Si pour vous, vous êtes comme, Vous savez quoi, cela semble un peu trop bas, alors ramenez-le. Donc pour mon design, puisque les portefeuilles sont un peu plus occupés, j'ai décidé d'en faire tomber un. Et pour ce design, il ne s'agit donc que d'un contact. Je vais le rapporter. Nous sommes maintenant prêts à travailler sur la page de contact. Oh, encore une chose. Portfolio a presque manqué ça. Une dernière section. allais presque trop vite présider, disons me contacter. Et maintenant, notre titre dit « contactez-moi ». Contactez-moi et nous avons l'actif en place dans notre design. Nous allons maintenant construire une grille à deux colonnes. Nous ajouterons des fonctionnalités de contact et créerons un formulaire à l'intérieur de cette page de contact. 19. Ajouter des détails de contact: Après cela, je dois créer une rangée et ajouter quelques gouttières. Donc en bas, nous redescendons à la recherche de notre contact avec moi. Je vais mettre en place une rangée. Donc je vais dire que la classe div est égale à la ligne et lui donner un G5 sur un, compte tenu de beaucoup d'espace dans cette conception. Et juste pour que nous ayons une solution appropriée, je vais dire 66 et je vais utiliser le médium pour identifier celui-ci. Je vais donc dire div class col md six. Et je dirai la colonne 1. Et je vais dupliquer ça pour la deuxième colonne. Et nous dirons colonne pour enregistrer la colonne de rafraîchissement 1, la deuxième colonne. Génial. Cette colonne du côté gauche, ou le début de Bootstrap 5, c'est que nous nous débarrassons de la gauche et de la droite et maintenant nous entrons davantage dans le début et la fin. Donc, cette première colonne ici, je vais dire paragraphe. Oh, comment faire ça ? C'est intéressant. Paragraphe et apportez-leur un Lorem Ipsum, disons le bras inférieur de 25, un peu comme contactez-moi. Économisez. Il y a un petit peu d'informations sur la personne et sur la façon de la contacter. Ensuite, j'ajouterai à la fois un numéro de téléphone et un e-mail. Je dirai donc que le téléphone sera indicatif régional. J'utiliserai mon numéro de San Francisco pour 15 par 55. 55. 55. Parfait. On y va. Et puis, en bas, je vais ajouter une adresse e-mail. Je dirai que vous êtes le bienvenu. Envoyez-moi un e-mail. Et nous dirons que John Smith est conçu par John Smith. Veuillez ne pas envoyer cet e-mail car, en théorie, quelqu'un pourrait avoir cette adresse e-mail. Assurez-vous donc qu'il ne s'agit que d'un e-mail fictif. Donc, si je l'enregistre par défaut, il apparaît, mais je veux lier cet e-mail. Je vais donc couper ça une seconde. Je vais laisser tomber un HREF égal. Et si vous êtes tout nouveau dans la rédaction de courriels, nous devons dire mâle 2, nous devons dire mâle 2, deux-points, déposer l'e-mail et le remettre à l'intérieur de la balise a. Et ce qui se passe, c'est que ça devient maintenant un lien sur lequel je peux cliquer pour ensuite envoyer un e-mail à John Smith. John Smith conçoit. Totalement cool, look et beau. Il est maintenant temps d'ajouter le formulaire à droite. 20. Configurer la forme: Très bien. Nous avons donc les informations relatives au téléphone et au courrier électronique. Et du côté suivant, à droite, je vais ajouter un formulaire à ce design. Donc, dans la colonne 2, je vais le retirer et dire forme. Eh bien, c'est plus de détails plus tard, mais pour l'instant, nous nous en tiendrons à la conception de base du formulaire. Toutes les formes commencent et se terminent par la forme ouverte et la forme fermée. Et cette conception, je vais créer deux colonnes pour le FirstName, LastName, créer une colonne pour l'e-mail, puis juste une zone de texte pour certains commentaires. Donc, rien de trop fou à propos de ce formulaire. Je vais donc commencer par créer des lignes et des colonnes pour que cela fonctionne. Je dirai donc la ligne de classe div. Et gardez à l'esprit que c'est 100 % parce qu'il s'agit d'une grille flambant nouvelle. À l'intérieur d'une grille, les parents 50%, mais à l'intérieur, nous sommes toujours à 100 pour cent. Donc, dans ce cas, je vais dire ligne de classe div. Et à l'intérieur, je vais ajouter une classe div de grille de six colonnes. Et il est dit que nous nous en tenons avec le format moyen. Je vais dire Cool, moi six. Et maintenant, je vais dire la colonne 1 juste pour m'assurer que ça fonctionne. Et je vais dupliquer ça. Et j'ai des boucles de colonne 1 et de la colonne 2. On y va. J'ai donc une conception à deux colonnes pour mon formulaire. Donc, dans la première colonne, ce que je vais faire, c'est que je vais dire label. J'oublie toujours que je fais ça. Les vêtements ne sont pas accompagnés. On y va. Donc, cette étiquette sera 4 prénom. Et vous verrez pourquoi il est important de connecter l'étiquette au champ de saisie et au second. Et puis la classe va être, c'est de bootstrap, étiquette de formulaire. Et à l'intérieur de l'étiquette, je dirai le prénom. Après ça. Je veux ensuite apporter une contribution. J'ai donc besoin de mettre des informations d'entrée dans ce formulaire. Le type ne sera que du texte. Le nom, nous allons dire, c'est le prénom. Et la classe que nous allons dire est la forme, le contrôle du tiret. Et un IED va correspondre au mot quatre. Je dirai donc que l'identité est égale au prénom. J'utilise donc le N majuscule pour le deuxième mot afin d'identifier également l'ID. Gardez à l'esprit que vous ne pouvez pas avoir le même identifiant deux fois sur une page. Nous y sommes donc bons. Et maintenant, quand je sauve ça, ce que je reçois c'est FirstName, cool. Et je peux taper mon nom juste là-dedans. La deuxième colonne que je vais dire est LastName. Donc, ce que je vais faire, c'est dupliquer ce même style et le faire glisser ou le copier et coller et dire nom, nom de famille en nom de famille, nom. Je vais vous montrer un peu pourquoi nous allons utiliser cela. Nous dirons LastName et nous dirons le nom de famille. Maintenant, ce que je reçois, c'est FirstName, LastName. Étant donné que les adresses e-mail sont plus longues que les prénoms et noms de famille habituellement des personnes. Je vais écrire l'e-mail sur tout le terrain. Comme nous n'avons pas besoin d'utiliser 66, nous devons utiliser 12 ou appeler le 12. Donc, après cette section de cette div à cette div, je vais dire cours de div et nous dirons col 12. Donc, quel que soit le point d'arrêt avec lequel vous travaillez, ce sera toujours 100 % de cette partie de la colonne. Et juste un test. Je vais dire le mot test, déposer et maintenant regarder ce qui se passe. Notez donc que tout se déplace. Si cela est trop proche de votre conception, vous voudrez peut-être dire petit aller 12. Je voudrais donc dire que dans ce cas, appelez le SM 12, ou simplement dire col 12 dans ce cas. Et maintenant, ce qui va se passer, c'est je dois dire appeler SM 12. Et nous allons laisser tomber ça. Et nous allons laisser tomber ça. Eh bien, c'est moyen. Vous savez quoi, peut-être devrions-nous aller gros. Je le reprendrais. Je le regarde. Nous devrons peut-être réaliser un grand design dans ce cas. Donc, tu sais quoi ? Disons en fait pas M d2, je pense que nous devrions dire grand 12e parce que celui-ci est un peu bondé sur le médium. Je le reprends donc. Faisons ça. J'ai pensé que j'avais fait ce pré-conçu, puis un deuxième regard sur moi a changé d'avis. Je vais donc le dire. Lg va aller à six ans, et LG va aller à six. Et maintenant, ce qui se passe, c'est que cela semble beaucoup mieux dans ce cas. Bien sûr, il y a un peu de monde avec ce nom de famille et le prénom car, comme nous l'avons vu précédemment, quand il s'agit de la section portefeuille, nous devons ajouter quelques couteaux. Donc, dans la conception du formulaire, je vais ajouter une ligne. Donc, dans la section des rangs, je vais dire « rho g dash trois ». Et cela donne maintenant un peu de place dans ce design. Je peux cependant aller plus loin, car j'ai la forme assise seule et la classe de div. Et si nous combinons simplement ces deux-là ensemble ? Je vais sortir cette div. Je vais amener la classe à la forme. Le formulaire lui-même devient donc une ligne. Et je dis toujours moins de code, mieux c'est. Je vais donc descendre et juste après la forme. Je vais ensuite déplacer les divs juste un crochet gauche de commande à l'intérieur du code VS Studio m'aidera à le faire. Un peu de nettoyage. Sur IL-3. Si je me rafraîchis, c'est toujours le même. Et encore une fois, c'est aussi lorsque je travaille avec une grille que j'ai peut-être besoin de déplacer les choses. Md a travaillé quand j'ai fait ça pour la première fois. Et puis, au deuxième coup d'œil, je pense que le plus grand est le mieux. Il faut donc aller un peu plus loin pour remplir l'espace. Maintenant, nous sommes de retour sur la bonne voie. Maintenant, l'e-mail est un peu différent de FirstName et LastName. Donc, là où nous avons eu le col 12, cela va aller sur l'ensemble du design. Je vais passer le test de mot et j'utiliserai l'étiquette pour. Et je peux dire par courriel dans ce cas, classe va être forme. étiquette. On y va. Et nous allons dire e-mail. C'est vrai. Adresse e-mail dans ce cas. Et nous terminerons avec l'étiquette. Après ça. Nous ajouterons l'entrée. Et l'entrée ne sera pas de type texte, mais de type email. Nous allons donc dire taper email, nom. Nous allons dire e-mail. Et puis on dira que la classe est égale à forme. Le contrôle l'attrape. Et l'ID doit correspondre à Wu ce que j'ai frappé sur la touche Retour. La carte d'identité doit correspondre au mot quatre. L'identifiant est donc l'e-mail et nous le fermerons à l'utilisateur principal. Ils pensent juste que l'e-mail ressemble à celui-ci. Ce qui est également génial avec Bootstrap 5, c'est qu'il utilise la pseudo-classe focus. Quelle est la pseudo-classe focus ? Lorsque je clique dessus, il fait briller ce dégradé bleu autour du FirstName, LastName. Cela aide l'utilisateur à identifier quel champ se trouve dans cette pièce supplémentaire que j'aime propos de Bootstrap car cela aide vraiment à donner un peu d'expérience utilisateur au domaine dans lequel je travaille. Parfait, très bien. Ensuite, nous allons le faire, je vais me diriger vers le bas, je veux créer une zone de texte après l'adresse e-mail. Je suis sûr que tout est sauvé. Ce que c'est. Donc, celui-ci va être après l'appel 12. Je veux le refaire pleine largeur. Je vais dire div, classe Col 12. Ouverture fermée. Et nous dirons une étiquette pour les commentaires. En classe, c'est un formulaire. étiquette. L'étiquette. Et nous allons dire des commentaires. Et celui-ci ne sera pas une contribution. Ce sera ce qu'on appelle une zone de texte. Je vais donc dire zone de texte, classe, contrôle de formulaire. Et après cela, nous allons lui donner un nom et cela vous montrera plus tard pourquoi le nom est réellement important dans ce cas, nom, commentaires. Id est identique au mot quatre. Nous allons donc dire des commentaires. Et des rangées. Nous allons dire que c'est trois. Voici quelques éléments importants. Ne déposez pas cela après sa fermeture. Ne placer aucun espace entre la zone de texte et un espace ici sera un espace ici. Donc, si je l'enregistre, ce que je veux dire par cet espace, c'est que je veux ce petit curseur. Ce qui est aussi sympa, c'est de remarquer le joli rembourrage que nous avons ici. Et je ne sais pas pourquoi il me montre le formulaire. Donc je vais le faire, c'est que je vais faire ça juste pour me débarrasser de la suppression de mes courriels. On y va. C'est-à-dire que je vais arranger un peu plus tard. Quoi qu'il en soit, dans cette section de commentaires, j'aime beaucoup cela, c'est qu'il crée vraiment ce très beau rembourrage à l'intérieur de ma section commune. Mais si je devais déposer cette zone de texte comme ça, ce qui se passe, c'est qu'il y a vraiment tout cet espace supplémentaire. Cela fait partie de la section des commentaires car je l'ai laissé tomber. Il le considère donc comme un espace supplémentaire dans mon design. Même si je devais créer trois espaces ici. Il y a trois espaces ici. Assurez-vous que la zone de texte est fermée juste à côté de la zone de texte ouvert. C'est un I C et beaucoup de designs, les gens ne se rendent pas compte que cet espace supplémentaire ne fait que conduire. Ils sont excités. Ils ont cette quantité d'espace supplémentaire et ils doivent essentiellement le supprimer pour travailler avec elle. Parfait. Ne disons pas cette page. Enregistrons cette page, actualisons, et maintenant nous revenons à la bonne zone de texte. Et bien sûr, pour qu'un formulaire fonctionne vraiment, nous devons créer un bouton pour soumettre les informations. Donc je vais le faire, je dirai cours de div et on dira le col 12 pour en faire une colonne. Et je dirai que dans ce cas, le type de bouton est une classe de bouton de soumission, nous allons dire que c'est btn. Et ensuite btn-primaire. Je vais utiliser le bleu typique. Et nous dirons soumettre. Maintenant, ce que j'ai, c'est un formulaire. Mais en théorie, si j'avais un sommet, je pourrais soumettre le formulaire. Eh bien, en prime à ce cours, je veux créer un formulaire de travail que vous pouvez utiliser. 21. Netlify et méthode de glissement: Pour que ce projet fonctionne vraiment, nous devons le mettre en ligne jusqu'à présent, nous avons passé du temps sur le bureau. Donc je vais faire que je vais venir chercher Netlify. On y va. Netlify, c'est le cas. Netlify rend les applications Web modernes expédiées plus rapidement, entreprises de commerce électronique, toutes ces bonnes choses. Mais ce qu'il fait aussi, il me permet de faire glisser et déposer des sites Web directement sur le Web. Je vais me connecter. Et si vous n'avez pas utilisé Netlify auparavant, accédez à l'inscription. Et dans mon identifiant sous ce mot site, mien ne l'a pas vraiment ici, donc j'ai beaucoup d'autres sites Web. Je vais cliquer sur les sites. Tout en bas. Le vôtre sera probablement vide par rapport à tous mes sites. Je veux déployer un nouveau site sans me connecter pour être sûr de le faire, je veux juste faire glisser et déposer mon dossier de sortie de site ici. Si je prends ce dossier et que j'ai attrapé le nouveau dossier de mon projet, si je le fais glisser ici, remarquez comment il devient blanc par rapport au contour. Si je le fais glisser directement, ce qui va se passer, c'est que ça va me construire un tout nouveau site Web. À quel point c'est génial ? En 30 secondes environ, je viens de lancer mon site Web en une série de mots aléatoires. Donc, si je dis Paramètres du domaine, je vais passer à Modifier le nom du site. Et j'appellerai ça John Smith, temporaire pour le moment. Ce que j'obtiens, c'est une URL qui fonctionne. Et je reçois la page À propos, je reçois la page portfolio, je reçois la page de contact. C'est génial puant. Mais ce que j'ai vraiment obtenu, pour quoi j'ai vraiment adoré Netlify, c'est que si je retourne à Netlify, ils ont formé une section. Et vous pouvez créer un formulaire à l'aide Netlify et envoyer automatiquement des informations à l'aide de leur système. Allons de l'avant et mettons les informations nécessaires pour que les formulaires Netlify fonctionnent dans ce projet. 22. Façons Netlify: Je vais donc déplacer ce couloir pour l'instant. Et ce que je veux faire, c'est revenir à mon code et ajouter des informations supplémentaires au formulaire. Donc, si je reviens, je cherche le formulaire. C'est là. Et le premier est là où je commence. Le cours est tout à fait très bien. Mais ce que je veux ajouter, c'est un nom. Et ce nom sera le formulaire de contact ou simplement le contact. Maintenant, il y a deux méthodes que je dois mettre en place. Ceux qui obtiennent ou un post. Et GET, c'est si vous obtenez des informations à partir d'un formulaire comme par exemple Google. Un message est si je souhaite publier des informations sur un formulaire tel qu'un formulaire de contact. Dans ce cas, je vais dire Post. Je dois ajouter quelques choses supplémentaires. Et pour plus de lisibilité, je vais perdre de la place. Je vais juste déposer ça et le déposer juste pour que nous ayons un peu plus de lisibilité. Poste de méthode. Et le formulaire va s'ouvrir et se fermer. Après la publication de la méthode, je veux dire data Netlify, vrai pour dire à Netlify, Hé, c'est un formulaire. Regardez-moi. Après cette section. Je veux dire action et ce truc vraiment cool. Parce que l'action, je voulais dire, eh bien, lorsque vous soumettez le formulaire, redonnez une réponse à l'utilisateur. Je vais donc dire action. Je vais dire dans ce cas, réduire le contact, le tiret, le succès. Nous n'avons pas encore configuré cette page, mais nous le ferons avant que vous ne l'utilisiez trop loin. Nous dirons donc le succès du contact. Mais HTML, c'est conçu pour dire à l'utilisateur lorsque je soumets cette information, ça va fonctionner. La raison pour laquelle j'avais aussi les mots nom, FirstName, LastName, email et commentaires est que cela va apparaître dans la section de formulaire Netlify is. Donc, quand j' aurai enregistré cela, je reviendrai sur mon compte safari. Et laissez-moi remonter ça ici. Donc, ce que je veux faire, c'est revenir pour citer, survol et lire le glisser-déposer. Je vais revenir sur les déploiements de production, disons que la réduction se déploie. Et dans ce cas, vous devez mettre à jour votre site. Oui, je le sais. Et j'ai sauvé du tout. Et encore une fois, je ne vois pas vraiment le changement ici parce qu'il s'agit davantage du fonctionnement intérieur de la forme. Je vais donc revenir sur Project New, ouvrir ma version de Safari et faire glisser le projet nouveau. Là-haut. Le téléchargement du projet ne devrait pas être trop long. Et je n'ai pas remarqué que le téléchargement ne change pas toujours, donc je dois généralement rafraîchir la page et tout est prêt à aller juste là. Essayons ça. Oh, encore une chose que je dois faire. J'ai dit que j'allais devenir une page de réussite. Je ne l'ai pas fait. Je dois donc m'assurer de réussir un contact. Je vais donc dupliquer la page de contact et dire Duplicate ou Command D sur Mac, contrôler D sur le PC et dire succès du contact. Et tout ce que je vais faire, c'est que je vais retirer le formulaire et dire merci pour l'information. Je cherche donc le formulaire, commente et j'ai formé un formulaire. Et je dirai simplement dans une balise de paragraphe simple, je vous remercie de votre soumission. Et nous ne pouvons pas le voir avant d'avoir réellement exécuté le formulaire. Alors, gardons ça. Il a sauvé. Parfait. Maintenant, nous sommes bien allés. Permettez-moi de le télécharger encore une fois. Il a sauté le pistolet, donc il va nous envoyer un message d'erreur. Je vais faire glisser et déposer ça. Et encore une fois, il utilise cela ne change pas par défaut, donc je dois aller rafraîchir la page et maintenant elle est publiée. Et maintenant, nous devrions voir dans notre section formulaire , voir comment nous avons un formulaire. Nous disposons d'un formulaire actif appelé contact. Et il n'y a pas encore de soumission sur ce formulaire de contact. Je l'ai dit, eh bien, maintenant, si je gère mon site Web, donc si je gère le design et le contact John Smith, je mettrai mon nom et il choisira simplement quelque chose sur something.com. Voyons si ce formulaire fonctionne. Et correctement, il devrait s'agir d'apostrophe. Je vais soumettre les informations. Et je vous remercie de votre soumission. Cool. Jusqu'à présent, on dirait que ça va marcher. Donc, si je reviens à Netlify et que je passe aux formulaires, hé, contact manque de soumission à 10 h 38. Et Hayden, Hey, voyons si ça marche. Notez que le prénom correspond au nom, au prénom. Notez que le nom correspond au nom de famille, l'adresse e-mail et aux commentaires. C'est plutôt raide. Si vous voulez aller plus loin, ce que vous pouvez également faire est dans l'aperçu de votre site Si je vais dans Paramètres du site, cela devient un peu déroutant car il y a un bouton Formulaires ici et il y a un formulaire bouton bas en bas à gauche. Mais si vous souhaitez recevoir un e-mail à votre formulaire, vous pouvez configurer les notifications de formulaire pour utiliser un certain crochet Web, une notification par e-mail ou une intégration Slack. Dans ce cas, je voudrais dire notification par e-mail. Et je peux dire, Hé, je peux être averti par e-mail quand quelqu'un utilise ce formulaire, quel point c'est génial ? Comme les rochers Netlify. Mais je peux aller encore plus loin. Parce que si je reviens à cette conception de formulaire, et si j'entre dans le contact, il existe également un moyen de prévenir le spam. Toutes les missions de formulaires sont donc filtrées pour détecter le spam à l'aide d'un Kismet. Mais je peux également ajouter un champ de pot de miel pour attraper des spams supplémentaires dans mon design. Et c'est probablement l'outil le plus puissant des formulaires Netlify qui n'est pas détecté. Construisons un champ de pot de miel supplémentaire à partir de ma conception qui aidera le spam à l'intérieur de Netlify. 23. Ajouter le pot de miel à la forme: Revenons à notre formulaire. Et ce que je cherche, c'est 0 sur la page de succès des contacts, cela ne va pas arriver. On y va. Pour notre page de contact, je souhaite ajouter une autre pièce sous l'action. Je vais dire des données, Netlify un pot de miel pour m'assurer qu'il identifie un nouveau champ ici. Je vais dire que j'ai acheté Dash Field d'ici. Je vais ajouter un tout nouveau domaine à ce design. Donc en dessous de ces données, Netlify un pot de miel, mais au-dessus de la classe div 12, je vais créer une entrée et dire que le type va être masqué. Il s'agit d'un nouveau type de champ qui ne sera pas affiché, mais seulement lorsque les deux essaient de passer par toutes les entrées, ils peuvent le voir via le côté code. Et le nom va être acheté champ, disant essentiellement si quelqu'un, il remplit ce champ caché qu'une personne normale ne verrait jamais, puis identifie cela comme du spam. Et d'habitude, je fais aussi une note et je dis pour les bots juste au cas où je reviendrais et comprendrais pourquoi j'ai fait ça. Alors pourquoi avez-vous mis une note qui dit pour les bots, puis pour les deux, juste pour que je puisse avoir une identification comme un champ caché. Encore une fois, si je l'enregistre, vous ne devriez pas pouvoir le voir sur votre page de contact. présent, ça va bien. Chargeons ce projet et voyons si Netlify identifie ce champ mais également. Je vais le ramener là. Présentation de mes formulaires et de mon site, la production se déploie. Je vais retourner voir les parents. Et si je fais défiler la page vers le bas, permettez-moi d'apporter un nouveau projet dans ce nouveau téléchargement. Et encore une fois, il ne change pas du téléchargement à la publication. Ce que je dois faire, c'est rafraîchir la page et elle est publiée. Maintenant, ce que je devrais voir dans ma section formulaire, si j'entre en contact, prévention supplémentaire parfaite du spam activée via un champ de pot de miel. Il ajoute donc déjà une couche supplémentaire de prévention du spam à l'intérieur de Netlify. 24. Un petit nettoyage supplémentaire: Donc, si nous regardons notre page, je vais cacher Safari à nouveau, que tout va bien. Mais la seule chose qui m'irrasse un peu que j'ai vue à travers mon design, c'est que designs de John Smith sont un peu en retrait par rapport à me contacter, pas vraiment perceptibles sur la première page ou sur la page à propos, mais nous allons accédez au Portfolio et au Contact. C'est perceptible. Je vais donc faire que je voulais un peu plus de nettoyage. Et c'est ainsi que je vais ouvrir tous mes fichiers et aller dans Project New. Et sur le succès des contacts, l'indice de contact et le portefeuille. Je veux juste retirer le rembourrage sur les côtés gauche et droit de mon design. Je cherche donc dans le conteneur de la barre de navigation. Ce que je veux faire, c'est que je vais dire Px 0. Et je suis sur la page « À propos ». Rejetez un coup d'œil à celui-là. Donc, si je garde l'endroit, il suffit de prendre l'espace sur les côtés gauche et droit. Je le duplique sur toutes les pages. Je reviendrai donc pour réussir le contact. Tout en haut. Ajoutez le px 0. Sur mon contact. Ce que je cherche, c'est un conteneur et un PXE sur l'index. Revenez en haut. Ne soyez pas étourdi, ou presque là. Px et portfolio au sommet aussi. Nous recherchons le conteneur et P 0. Maintenant, lorsque je parcourt page par page, tout est aligné de cette façon. Aussi, j'ai gardé bonjour le monde et ils devraient dire des dessins de John Smith. Ce que je vais faire, c'est que je vais changer Helloworld en dessins John Smith. Dans la conception Web, il est important de placer le nom réel, le portefeuille ou le nom de la page en premier et le titre global en deuxième position. Je dois donc reproduire ça une fois de plus. Mais comme nous sommes juste à côté, l'indice 0 a toujours Hello World. Je n'ai pas résolu ça. Oh non. Alors, prenons tout ça. Saisissons ce dessin dans l'index. Et nous dirons, tout est design et rend votre maison incroyable. Juste pour que nous ajoutions quelque chose en haut. Ou nous pourrions aussi dire, dans ce cas, le design d'intérieur. Design et décoration d'intérieur. Parfait. Et nous pouvons aussi changer helloworld en un rangé qui a été assortie au design d' intérieur et à la décoration sur ma page d'index. Allons ici. Chaîne vers le monde bas. Juste pour qu'il soit un peu plus fort. On y va au fond. Donc, pour continuer tout au long de ces titres, il y a un dernier nettoyage à faire. Je vais prendre les dessins de John Smith et aller directement au contact. Changez le succès de ce contact. Nous pouvons dire que, au lieu de me contacter, nous pouvons dire que la soumission est réussie. Et la page à propos va prendre le HelloWorld. Et John Smith conçoit. Téléchargeons cette nouvelle fois et jetons un coup d'œil et veillons à ce que tout fonctionne correctement. Sous formulaires, aperçu du site, la production se déploie. Faites défiler la page et projetez un nouveau projet. Déposez-le. Encore une fois, attendez environ 510 secondes pour mon InDesign, ce n'est pas si gros qu'un fichier. 3,4 mégaoctets, actualisez la page et elle est publiée. Si je clique sur ce lien ou dans ce cas, j'actualiserai la page. Ce que j'ai maintenant, c'est que le rembourrage retiré, design d' intérieur et la décoration, les designs de John Smith. Et à propos de nous n'avons pas l'air très bien. Il devrait s'écouler. C'est super. Ça a l'air vraiment bien. Je pense. Revenez à notre portefeuille. Nous avons notre conception de trois colonnes à deux colonnes, 21 colonnes semble assez solide. Et nous avons une page de contact. Je peux dire John Smith, quelque chose chez John Smith Designs. ne s'agit d'un test que si j'estime l'information. Whoa, on y va. Merci de votre soumission. Et voici, si je reviens aux formulaires, dernière soumission a eu lieu à 10 h 50. Et John, ce n'est qu'un test et ça marche. Nous avons tout qui fonctionne et il est configuré et conçu à l'aide de Bootstrap 5. 25. Un pied de pied de colline: Alors que je regardais tout ce site Web, il avait l'air plutôt bien, sauf un petit détail dans la section À propos. Nous ne le remarquons pas parce que nous faisons défiler vers le haut et vers le bas. Mais lorsque nous accédons à la page de contact, notez que le pied de page monte et touche presque le haut du formulaire. Ce que je veux faire, c'est que je veux que ce pied de page reste coincé tout en bas pour créer un pied de page collant. Nous pouvons le faire avec Flex. Nous devons entrer dans notre CSS pour y parvenir. À l'intérieur de mon CSS personnalisé tout en haut, nous allons mettre cela juste après. On nous dit avant l'en-tête, en pensant avant et après, je dois ajouter quelques choses. Je vais dire corps de virgule HTML. Et après cela, je veux dire que la hauteur est égale à 100 %. Nous devons dédier cette information pour dire, faisons de cette hauteur 100 pour cent, ce qu'il faut déjà apporter au flex. Quand je vais le faire, je vais dire affichage du corps, puis fléchir pour faire circuler le corps. Je veux transformer les enfants du corps ou des divs, du secteur et des pieds de page en colonnes. Je vais donc dire « direction flexible ». Et nous allons dire colonne. Après cela, je peux ensuite transformer la principale en flux. Donc je vais dire flex principal 1, 0, puis automatiquement faire en sorte que ce soit 100 pour cent autant qu'il peut pousser le pied de page vers le bas. Maintenant, l'astuce est après le principal, je vais dire pied de page. Ensuite, tournez le pied de page sur Flex, réduisez à 0. Et ce que cela va faire, c'est que cela va activer cette partie centrale, si nous pensons qu'il y a trois colonnes, l'en-tête et le pied de page, cela va s'étendre à pleine largeur moins le pied de page en bas. Je rafraîchis la page. Oh, je suis sur le vrai nom de domaine. Revenons à Project New. Et nous allons extraire le fichier d'index et la page de contact. Maintenant, ce que vous voyez, c'est ce pied de page inférieur qui colle tout en bas. Et enfin, nous devons ouvrir Netlify. On y va. Et je retournerai sur mon site. Vue d'ensemble. Production déploie et télécharge cette fois de plus pour s'assurer qu'elle fonctionne. Permettez-moi de trouver le glisser-déposer et d'attendre qu'il soit téléchargé. Donnez-lui environ cinq secondes. Je vais rafraîchir la page et elle est publiée. Maintenant, lorsque je reviendrai sur la page de contact qui se trouve sur Netlify Temp John Smith, actualisez la page. Maintenant, le pied de page reste en bas. Si vous avez une petite page de contact, je vous recommande de le faire. Vous maintenez donc l'espace pour le pied de page collant tout en bas. 26. En conclusion: Merci beaucoup d'avoir pris le temps de regarder ce cours sur Bootstrap 5, je voulais vraiment réaliser un projet concret. Nous pourrions utiliser la majorité des outils de Bootstrap 5. Pour plus d'informations sur Bootstrap, vous pouvez retourner dans les documents et les trouver tous. Et Firmin, qui a acheté le cours avancé, vous pouvez utiliser ces outils supplémentaires comme code source pour vous fier et vérifier également votre travail. Comme toujours, je suis frappé par UPS et je pense beaucoup à l'achat du cours bootstrap bootcamp.