Développement Web Full Stack pour les débutants - Partie 2 : Flexbox, CSS Grid et Bootstrap 4

1. Bienvenue dans ce cours !: Bienvenue sur Full Stack Web Development pour les débutants. Ce cours est conçu pour vous emmener du débutant au développeur web capable de construire non seulement des interfaces utilisateur front-end d'un site web, mais aussi de concevoir et de construire le back-end pour interagir avec eux. Alors qui suis-je ? Je m'appelle Chris, et je serai votre instructeur pour ce cours. Je suis développeur web, et aussi producteur de nombreux tutoriels, enseignant à des milliers d'étudiants les compétences dont ils ont besoin pour construire des sites Web et des applications. Il s'agit d'une deuxième partie de la série complète où nous continuerons à développer vos connaissances HTML, CSS et web design réactif, et vous présenterons la CSS Flexbox, la Grid, et aussi le Bootstrap 4 Framework. Ce cours porte sur la création de mises en page flexibles, commençant par la CSS Flexbox, pour nous permettre d'avoir un contrôle incroyable sur la façon dont les éléments sont disposés sur une page. Nous passons ensuite à la grille CSS, qui est l'une des techniques les plus puissantes et modernes à apprendre. La mise en page complète des pages Web, création de presque n'importe quel type de mise en page que vous pouvez imaginer. Nous terminons avec le célèbre Bootstrap 4 Framework, où nous allons construire un site de restaurant de hamburgers. Cela vous donnera la chance d'apprendre, et de mettre en pratique, le système de grille Bootstrap, images et le texte, les barres de navigation, carousels rotatifs, les modèles, les formes, et bien plus encore. Nous regardons également les classes d'utilité Bootstrap fournit un style facile. Avec la façon de remplacer l'un de ces styles et de rendre vos projets complètement personnalisés. J' espère que vous êtes heureux d'apprendre tout sur Bootstrap et la présentation de sites web dans la deuxième partie de ce cours. 2. Qu'est-ce que Flexbox ?: Dans les dernières sections, nous avons beaucoup appris sur la façon de créer et de modifier des mises en page. Beaucoup de façons historiques de créer des mises en page impliquées à l'aide de tables de charges. Nous avons déjà parlé des limites de ces méthodes et pourquoi elles ne sont pas idéales pour la mise en page. Dans cette section, nous allons examiner à la fois la flexbox et la grille. Ces méthodes de couche modernes facilitent la mise en page des pages Web. Nous allons commencer avec la CSS Flexbox. Flexbox a été conçu pour être utilisé pour une mise en page dimensionnelle, ce qui signifie qu'il traite d'un axe à la fois, soit d'une ligne, soit d'une colonne. Comme vous pouvez le voir ici. Non seulement Flexbox contrôle la direction, mais il nous permet également de définir l'alignement sur, comme nous l'avons fait ici. Nous pouvons aligner un élément ou un groupe d'éléments vers la gauche ou la droite, ou même vers le haut ou le bas. Flexbox nous permet également de contrôler la taille des articles individuels. Ici, sur la rangée supérieure, nous avons deux boîtes, prenant une partie, puis un élément en prenant deux parties. Ensuite, pour la deuxième rangée, nous avons deux éléments. Un article a pris trois fois la taille de la commande. Celles-ci aussi flexibles au sens s'il y a plus ou même moins d'espace disponible, ces trois parties seront toujours proportionnelles à la seule partie. Une autre grande caractéristique de flexbox est la possibilité de contrôler l'ordre dans lequel les éléments apparaissent sur la page. Traditionnellement, les éléments apparaissent dans l'ordre d'un les placer dans le fichier HTML. Flexbox nous permet de contrôler cette commande source. Cela peut être particulièrement utile lors de la commutation d'éléments pour différentes mises en page. Nous pourrions avoir certains éléments dans un ordre, pour les écrans plus grands, puis un ordre complètement différent pour les écrans plus petits. Avant de nous lancer dans la construction de quelque chose avec flexbox, il y a un concept important à comprendre d'abord. C' est l'axe principal et transversal. Nous définissons l'axe principal en définissant la direction de flexion. La ligne est par défaut, ce qui place les éléments dans une ligne de gauche à droite sur un navigateur standard de gauche à droite. Comme vous pouvez le voir à droite, ligne inverse est le contraire et cela apparaît de droite à gauche. Ensuite, nous avons colonne qui est le haut en bas, puis aussi colonne-inverse, qui est opposée de bas en haut. Lorsque nous définissons cette direction de flexion, cela sera considéré comme l'axe principal. Ensuite, l'axe transversal s'exécute perpendiculairement à l'axe principal. Donc, si j'avais la direction de flexion définie sur la ligne, colonne sera l'axe transversal. En outre, si nous définissons la direction de flexion sur colonne, alors la ligne deviendrait alors l'axe transversal. Donc, si c'est un peu difficile à comprendre en ce moment, rappelez-vous simplement que l'axe principal est une direction que nous avons définie, puis l'axe transversal est le contraire. Voici un aperçu de base du fonctionnement de la flexbox. Dans la vidéo suivante, nous allons le mettre en place dans notre éditeur de texte et le voir en action. 3. Sens de la flexion: Nous connaissons maintenant quelques notions de base sur flexbox. Les deux inactions visibles nous aideront vraiment à comprendre comment les choses fonctionnent. Pour commencer, je vais créer un nouveau projet appelé flexbox. Cliquez avec le bouton droit sur « Nouveau dossier » et le nom est une boîte flexible. Ensuite, on peut aller de l'avant et l'ouvrir dans notre éditeur de texte. Faites glisser ça dessus. Ensuite, nous pouvons créer notre index.html familier. Ensuite, je vais utiliser le raccourci de la colonne html 5, puis frappe, définir le titre et cela peut être flexbox et obtenir cette sauvegarde. Pour cet exemple, je vais définir certains éléments à l'écran pour travailler avec. Dans la section du corps, continuons et créons un div. Cela va avoir un identifiant de conteneur. À l'intérieur, nous pouvons également ajouter quelques divs. Il peut s'agir de l'article 1, puis d'une classe d'article. Je veux créer cinq autres de ces éléments. Je vais copier cette section ici et ensuite la coller dans cinq fois de plus, nous laissant six articles différents dans notre conteneur. Articles 2, 3, 4, 5 et 6 et ils peuvent également avoir le même nom de classe d'article pour chacun d'entre eux. Alors espérons que nous pourrons ouvrir les tags de style dans la section de tête. Pour commencer, nous allons cibler cet élément avec l'élément point, puis nous allons ajouter quelques couleurs. Les arrière-plans, allons-y pour lightcorail, un peu de rembourrage de 30 pixels, une certaine marge de 10 pixels, et le text-align du centre. Ceci est juste pour vous donner un style de base afin que nous puissions voir les éléments sur la page. Maintenant, si nous ouvrons cela dans le navigateur, allons dans le index.html et ouvrons ceci. Il y a nos six articles à l'écran. Nous voyons juste le comportement par défaut pour le moment. Parce que ce sont des éléments de niveau bloc, donc ils seront tous en ligne. Pour commencer à utiliser flexbox, nous devons ensuite définir le type d'affichage sur le flex. Ceci est fait sur les éléments parents et les éléments parents que nous avons donnés un identifiant de conteneur. Revenons aux balises de style. Ensuite, en haut, utilisez le dur car c'est un identifiant, puis nous pouvons cibler le conteneur, puis définir le type d'affichage pour être flex. Nous donne sauver et puis recharger le navigateur et nous avons maintenant un changement. La raison pour laquelle nous les voyons maintenant dans une rangée comme celle-ci, est parce que, comme nous l'avons vu dans les diapositives de la dernière conférence, la direction flexible par défaut est la ligne. Jetons un coup d'oeil à la ligne inverse. C' est aussi sur les parents et nous avons dit que, avec la direction flexible de la ligne de sauvegarde inverse. Avant que nous ayons l'article 1 à gauche et l'article 6 à droite, actualisez. Maintenant, le premier élément commence sur le côté droit et il se déplace vers la gauche. Nous avons également une direction de colonne, la pile ces éléments les uns sur les autres. Changer la ligne inverse. Ce sera maintenant une colonne et il y a une pile de haut en bas. Encore une fois comme avant, si nous voulons que l'élément 1 soit le contraire et le bas en bas, nous pouvons définir cela pour être colonne inverse, direction flexible dire colonne inverse, et maintenant nos articles passent de bas en haut. Il s'agit d'une quatre options de direction flexible que nous avons à notre disposition. Rappelez-vous quand signe direction flex, ceci est considéré comme l'axe principal. Nous avons la ligne, la ligne inverse, la colonne et la colonne inverse à. C' est maintenant notre premier look notre flexbox et ensuite nous allons jeter un oeil sur la façon dont nous pouvons utiliser flex box et justifier le contenu. 4. Flex envelopper et justifier le contenu: Dans cette vidéo, nous allons regarder le flex-wrap et comment justifier le contenu. abord, nous allons de l'avant et modifions la direction flexible pour être la ligne par défaut, à l'intérieur du conteneur parent. Tous les éléments que nous avons ajoutés sont maintenant sur la même ligne. Nous devrions rafraîchir et ensuite passer de gauche à droite. Si nous continuons à ajouter d'autres éléments, tous apparaîtront toujours sur la même ligne. Allons à nos articles et copions ceci et collez-le. Numéro 6, juste en dessous. Compte tenu de ces 12 éléments, ce comportement peut être modifié à l'aide de la propriété flex-wrap. La valeur par défaut est définie sur No wrap. C' est pourquoi nous voyons tous nos articles sur la même ligne. Cela s'applique également au conteneur. Si nous passons à la section de style et ciblons le conteneur, ajoutons la propriété flex-wrap, puis définissons ceci pour être enveloppé, enregistrez cela, rechargez. Maintenant, les éléments seront enveloppés sur plusieurs lignes. Si nous rendons le navigateur encore plus étroit, chaque fois est moins d'espace, ils vont tous tomber sur deux sauts de ligne. Déplace les éléments sur la ligne directement en dessous. Si vous vouliez les effets opposés, nous pouvons utiliser wrap reverse, donc ajouter inverse à la fin de cela. Donnez cette sauvegarde et rechargez. Maintenant, les éléments supplémentaires qui étaient sur la ligne ci-dessous, apparaissent maintenant sur la ligne ci-dessus, car cela fonctionne maintenant de bas en haut. Tout comme avant, si nous réduisons le navigateur, tous les éléments supplémentaires sautent d'un niveau plutôt qu'en dessous. En fait, il y a aussi un raccourci pour ce flex-wrap et aussi pour la flex-direction à mettre à jour en une seule propriété. C' est ce qu'on appelle flex-flow. Nous pouvons supprimer ces deux lignes ici, puis un flux flexible impair. Il prend deux valeurs. Le premier était notre valeur de ligne pour la flex-direction, puis le second pour la distorsion. Cette première ligne avec flex-direction puis la seconde est pour le flex-wrap. Sauvegardez ça. Maintenant, nous avons fusionné ces deux lignes en une seule. La prochaine chose que je veux vous montrer est comment justifier le contenu. Ceci est utilisé pour contrôler la façon dont nos articles sont espacés sur l'axe principal. Il s'agit également d'une propriété CSS qui est ajoutée au conteneur. Alors ajoutons des contenus justifiés et commençons par flex-start. Si nous actualisons, nous ne voyons aucun changement dans le navigateur. C' est parce que flex-dot est par défaut. Nous pouvons voir comment cela plus efficace si nous essayons flex-end. Plutôt flex-start, ajoutons flex-end. N' oubliez pas que nos articles sont par défaut dans une rangée. travers la page de gauche à droite, c'est pourquoi flex-start aligne tous les éléments sur le côté gauche, puis flex-end aligne tous les éléments sur le côté droit, qui est la fin de l'axe principal. Essayons également de centrer, d'enregistrer et de recharger. Maintenant, tout est aligné au centre de l'axe principal. Nous avons toujours le même comportement si nous voulons réduire le navigateur, tous les éléments tomberaient toujours sur la ligne suivante à partir du centre. Ceci, bien sûr, place les éléments le long de la ligne centrale de l'axe principal, qui est juste par ici. Les options gratuites suivantes sont toutes liées à la façon dont l'espace disponible entre ces éléments est distribué. Si nous commençons par l'espace entre. Plutôt que de centre, nous pouvons ajouter un espace entre et voir à quoi cela ressemble. Maintenant, les éléments toujours sur la même ligne qui serait normalement. Mais maintenant, j'ai la même quantité d'espace réparti entre chaque élément. Si au lieu de cela on voulait que l'espace soit tout autour d'eux. Donc, pour être également à gauche et à droite, nous avons de l'espace autour pour cela. Changez l'espace entre pour être de l'espace autour. Cet espacement est appliqué sur les deux côtés maintenant. Les objets auront deux fois plus d'espace entre eux qu'à la fin. Parce que, par exemple, l'élément 3 a la moitié de l'espace ici, puis l'élément 4 a la moitié de l'espace sur cette idée ici aussi. Si vous vouliez avoir l'espace de chaque côté pour être égal, nous avons également de l'espace uniformément. Donnons un coup d'envoi à ça. Maintenant, il y a même de l'espace entre tous les éléments. C' est maintenant pour cette vidéo, mais vous devriez maintenant être en mesure de voir à quel point la flexbox est puissante pour la mise en page. Même nous ajoutons quelques lignes de CSS. 5. Aligner les éléments: Commençons cette vidéo en revenant à nos six articles originaux dans la page d'index. Supprimons ces six derniers que nous avons ajoutés au début , puis rechargeons et revenons maintenant à nos six éléments d'origine. Tout d'abord, nous voulons commencer par regarder une ligne des éléments. Dans la dernière vidéo, nous avons regardé justifier le contenu, qui aligné ou éléments et également déterminé l'espace entre eux. Tout cela a été fait à travers l'axe principal. Nous avons l'axe principal réglé sur la ligne. Cela signifie que tout l'alignement et l'espacement se trouvaient sur la page de gauche à droite. Aligner les éléments fonctionne également avec ces mêmes éléments, mais cette fois sur l'axe transversal. Actuellement, avec notre configuration actuelle, l'axe transversal serait vertical ou de haut en bas. Pour cette démo, nous pouvons ajouter des hauteurs différentes à ces éléments. Cela nous aidera à mieux voir comment les éléments d'alignement fonctionnent. Passons à nos six éléments, puis ajoutons un peu de style, donc les attributs de style. Ajoutons la hauteur et allons-y 300 pixels, puis copions cette section. Nous pouvons ajouter cela dans quelques fois de plus. Je vais aller pour 250 sur celui-ci, puis 320 à la fin, puis rafraîchir. Maintenant, ça a l'air un peu étrange. Nous n'avons fixé que les hauteurs de trois de ces éléments, mais on dirait qu'ils ont tous changé. En effet, la valeur par défaut pour aligner les éléments est étirement, de sorte que les éléments flexibles s'étirent à la hauteur du plus haut pour remplir les hauteurs du conteneur. Revenons donc à nos styles en haut de la page. Encore une fois, c'est pendant le conteneur parent. Nous pouvons ajouter des éléments d'alignement et comme nous venons de le mentionner, étirement est la valeur par défaut, donc l'ajout d'un signe ne provoquera aucun changement. Commençons par flex-start. flex-start démarre les éléments sur le bord de départ de l'axe transversal. Donc, pour ceux-ci, ce serait le haut de la page et ensuite travailler vers le bas. Maintenant, nous voyons les trois éléments dont la hauteur nous avons changé, et la droite encore, comme à l'origine étaient. Si nous voulons que les changements commencent au bas de la page, nous utiliserons alors flex-end. Rappelez-vous que ces flex-start et flex-end position dépend de l'axe, est notre principal et la croix. Si je suis allé de l'avant et changé l'axe principal pour être colonne, donc plutôt que de ligne, si vous changez cela pour être colonne, actualisez et maintenant cela définit l'axe principal à être vertical, signifie que l'extrémité flexible, qui définit un axe transversal serait maintenant sur le côté droit. Si nous le changeons en ligne et puis réinstaure. En outre, il y a une option pour centrer les éléments aussi. Encore une fois, en utilisant aligner les éléments, nous pouvons changer flex-end pour être centre. Vous pouvez probablement imaginer ce que cela fait. Cela ajoute une ligne juste au milieu du conteneur et tous les articles seront espacés uniformément au-dessus et au-dessous de cette ligne. Ce type de mise en page était beaucoup plus complexe, mais avec flex box, cela nous permet de faire tout cela avec seulement quelques lignes de CSS. Nous pouvons aller encore plus loin en nous alignant sur la ligne de base du texte. Ce texte qui se trouve entre chaque élément. Changer le centre pour être la ligne de base, actualiser. À l'intérieur du navigateur à première vue, il ne semble pas différent de l'option flex-start. Rappelez-vous, bien qu'il s'agisse d'une ligne dans la ligne de base. La ligne de base est la ligne de fond du texte et c'est ce que nous voyons ici. Pour voir une modification, nous devrons déplacer la position extérieure du texte. La ligne horizontale devrait le faire pour nous. Allons à nos articles et à l'intérieur de cette première div, nous pouvons maintenant ajouter une ligne horizontale. Voyons quel effet cela a sur le navigateur. Maintenant, nous avons plus de contenu à l'intérieur ici. Cette poussée vers le bas est l'élément un texte et tous les autres éléments encore alignés au bas de cette. Si nous déplacons également la position extérieure du texte sur un autre élément, il sera également aligné. Cette fois, ajoutez deux lignes horizontales, ceci est à l'intérieur de l'élément trois, puis actualisez. Maintenant, nous pouvons voir que tous les éléments sont toujours alignés, même si j'ai ajouté deux morceaux de contenu supplémentaires. C' est ainsi que nous pouvons utiliser aligner les éléments dans la boîte flexible. Dans la vidéo suivante, nous allons jeter un oeil à une autre méthode d'alignement des axes transversaux appelée aligner le contenu. 6. Aligner le contenu: Ensuite, nous allons jeter un oeil à align-contenu. Je sais qu'on voit beaucoup de termes pour nous donner la tête ici. Bien que vous puissiez penser à align-content comme similaire au justify-content, que nous avons déjà utilisé. Mais cette fois, il s'applique à l'axe transversal plutôt qu'à l'axe principal. Pour cela, nous avons besoin de quelques lignes de contenu supplémentaires. Nous allons donc déplacer ces styles qui ont été ajoutés la dernière fois. Donc la première, la ligne horizontale, ces deux lignes ici et ensuite les deux dernières, les attributs de style. Enlevez ça. Ensuite, je vais copier les six éléments une fois de plus, puis les coller dans. En fait, nous les collons dans deux fois de plus, il va 18 articles différents. Enregistrez cela, puis actualisez. Donc, nous avons maintenant environ trois lignes de contenu à utiliser si nous réduisons un peu le navigateur vers le bas. Il serait également utile pour cette démo si nous définissons une couleur d'arrière-plan pour le conteneur et que nous le définissons comme étant la pleine hauteur de l'écran. Donc, dans ce conteneur, ajoutons du CSS. Tout d'abord, les milieux. Je veux aller au vert clair. Ensuite, définissez la hauteur pour être en plein écran avec 100vh. Rappelez-vous que vh est une taille relative qui doit juste être 100 pour cent de la hauteur du port de vue. Finalement, supprimons ces éléments d'alignement et justify-content des vidéos précédentes. Je vais juste commenter ça. Donc, il est toujours là, puis rafraîchissez. Donc, maintenant, nous pouvons travailler sur align-contenu. Souviens-toi qu'on travaille toujours sur l'axe transversal. Tout cela s'appliquera de haut en bas. Tout comme align-items que nous avons examinés auparavant. Stretch est également la valeur par défaut pour align-content aussi. C' est pourquoi tous nos articles et techniquement pleine hauteur de la vue. Nous avons également un flex-start familier aussi et aussi flex-end. Voyons à quoi ils ressemblent dans align-contenu. Démarrage flexible pour commencer, puis actualisez. Maintenant, nous n'avons pas la valeur d'étirement par défaut et tous les éléments qui sont au début de l'axe transversal, qui est le haut de la page. Comme vous l'imaginez probablement, flex-end pousse cela vers le bas de la page, puis monte vers le haut. Donc, démontrons cela avec un rafraîchissement de fin flexible, et maintenant tout est vers le bas au bas de l'axe transversal. Nous avons aussi du centre. Qui poussera tout au milieu de la hauteur ou au milieu de l'axe transversal dans ce cas. Vous devriez commencer à voir un modèle ici aussi. La plupart des propriétés seront examinées sont à peu près les mêmes, mais juste appliquées à un axe différent. Tout comme justifier le contenu, il y a aussi un espace entre et un espace autour. Commençons par l'espace entre les deux. Cela s'applique à tout l'espace entre les éléments. Comme nous venons de le mentionner, nous avons aussi de l'espace autour et cela nous donnera un espace égal autour de tous les éléments. De haut en bas, moitié de l'espace est au-dessus de l'article et l'autre moitié est au-dessous de l'article. Cela nous donne l'effet d'avoir deux fois plus d'espace entre chaque élément. Si nous changeons l'axe principal est le temps d'être colonne. Ensuite, actualisez le navigateur. Maintenant, la colonne définit l'axe principal à être vertical. Cela signifie qu'un horizontal est maintenant l'axe transversal. Cela provoque l'alignement du contenu et s'applique maintenant sur la page, car il s'agit maintenant de l'axe transversal. Alors, continuons et rechargeons le navigateur en ligne, puis rechargeons le navigateur. C' est une de ces choses qui a juste besoin d'un peu de pratique pour nous faire tourner la tête. Une fois que vous commencez à l'utiliser dans notre CSS, plus régulièrement, les choses deviendront beaucoup plus faciles. C' est tout pour l'instant pour espacer les éléments et je vous verrai dans la prochaine vidéo. 7. Contrôler les éléments de l'enfant : commande: Toutes les propriétés Flexbox que nous avons examinées jusqu'à présent ont été ajoutées au conteneur parent. Cela nous permet de contrôler les éléments en tant que groupe. Tant dans cette vidéo que dans les vidéos Flexbox restantes, les propriétés seront appliquées directement aux éléments flexibles individuels. Cela nous donne un meilleur contrôle sur les articles individuels. abord, nous allons examiner la définition d'une commande, laquelle nos articles apparaîtront. Revenons à notre page d'index et nous pouvons revenir à nos six articles originaux. Supprimons ces 12 derniers, laissant des éléments de 1 à 6 et en fait, nous pouvons également supprimer les hauteurs, que vous avez définies plus tôt. Supprimons cette ligne et nous pouvons également commenter un contenu de ligne de la dernière vidéo. Par défaut, nos six articles apparaîtront à l' écran dans l'ordre d'origine, de sorte que nous voyons l'article 1, jusqu'à l'article 6 sur cet axe principal. La propriété de commande nous permettra de réorganiser l'un de ces articles. Je vais commencer par créer une nouvelle classe de dans le CSS. Je vais appeler ceci la commande et ensuite nous pouvons ajouter la propriété de commande. Commençons par définir ceci pour en être un. La propriété order nous permettra de réorganiser l'un de ces éléments, donc tout ce que nous avons à faire est d'ajouter cette classe de commande à l'un de ces articles. Allons pour l'article 2 et commandez en classe. Sortez du navigateur, puis rechargez. Cela déplace maintenant notre deuxième élément à la toute fin. Cela est dû au fait que tous les éléments ont un ordre par défaut, qui est cette propriété ici de zéro. Cela signifie que notre article deux a maintenant un poids de un, déplaçant jusqu'à la fin. Ce nombre peut être quelque chose comme 10, 15 ou même 30, par exemple et ils apparaîtront toujours dans l'ordre dans lequel nous définissons. Les nombres négatifs sont également autorisés, donc nous le définissons à négatif. Cela va maintenant placer l'article 2, dès le début puisque tous vos articles ont un ordre de zéro. Ceci est particulièrement utile pour modifier les mises en page avec un design réactif. L' ordre peut être modifié dans une requête multimédia. Ils ont des mises en page différentes pour différentes tailles d'écran, donc c'est un outil vraiment utile à avoir. C' est ainsi que nous pouvons réorganiser la commande en utilisant Flexbox. C' est vraiment simple et juste une ligne de code, mais vous pouvez voir à quel point cela peut être efficace. Ensuite, nous allons expliquer comment permettre aux objets de grandir et de se rétrécir avec l'espace disponible. 8. Contrôler les éléments de l'enfant : développer et rétrécir: Nous allons continuer à chercher comment nous pouvons contrôler ces objets enfants. Plus précisément, comment ils se développent et se rétrécissent à l'espace disponible. Pour commencer, je vais descendre, et réduire notre démonstration à quatre produits. Nous pouvons également supprimer cette classe d'ordre. Ensuite, aussi le CSS correspondant juste au-dessus. Pour ce faire, nous pouvons utiliser une propriété appelée flex-grow et aussi flex-shrink. Commençons par jeter un oeil à flex-grow. Cela déterminera comment un élément peut se développer le long de l'axe principal. Au moment où la taille de l'élément est contrôlée par la quantité de contenu au milieu, ainsi que par tout rembourrage. Actuellement, ils ne prennent pas toute la largeur de l'écran, que vous pouvez voir dans le navigateur. Si nous allons de l'avant et ajoutons flex-grow à l'un de ces éléments comme un style en ligne, bien sûr, il n'a pas besoin d'être en ligne. Il peut également être inclus dans le CSS2. Ajoutons le flex-grow, et définissons ceci à une valeur de un. Sauver. Ensuite, notre premier article prend beaucoup plus de place que les trois autres. Fondamentalement, ces trois éléments ici, numéros deux, trois et quatre, resteront toujours de la même taille en fonction du contenu à l'intérieur. Ensuite, celui serait flex-grow, prendra l'espace supplémentaire. Si nous faisons la même chose pour l'article 2, si nous copions cette flex-grow, alors voyons ce que cela fait. Les articles trois et quatre, les deux prennent toujours la même place, ils ont toujours fait. Ensuite, l'espace restant est partagé également entre les éléments un et deux. Parce que les deux ont une valeur de croissance flexible égale de 1. Si nous allons de l'avant et ajouter cela à tous les éléments. 3 et 4 aussi, nous voyons maintenant que les quatre éléments partagent la même quantité d'espace. Cette valeur de croissance flexible de 1, n' est pas une unité de mesure particulière, comme un pixel ou un m. Elle est significative par rapport au reste de ces valeurs. La différence se produit quand ils ne sont pas tous les mêmes. Si nous faisons l'élément 3, une valeur de croissance flexible de deux, du navigateur, et maintenant l'élément 3 va essayer de prendre deux fois la quantité d'espace que le reste si elle est disponible, Il est change à trois. Maintenant devrait être encore plus large. Bien que cette propriété de croissance flexible traite de la façon dont les éléments vont croître sur cet axe principal, si l'espace est disponible. Nous avons également flex-rétrécissement à. Cela traite de la façon dont les articles devraient se rétrécir s'il n'y a pas assez d'espace pour qu'ils puissent s'adapter. abord, supprimons le rap en commentant le flex-flow, qui est cette ligne ici. Commande et barre oblique avant. Si vous utilisez Visual Studio Code, nous pouvons ajouter une largeur fixe de 600 pixels pour le conteneur. Ajoutons ceci en bas. Largeur de 600 pixels. Ensuite, nous pouvons nous assurer que ces éléments ne rentrent pas dans son conteneur en les définissant comme une largeur, disons 160 pixels. Nous pourrions donc le faire comme ça et définir la largeur de l'élément à 160 pixels. C' est une façon de le faire, ou nous pourrions utiliser une nouvelle propriété flex-box, appelée flex-basis. Changons cela pour être des espaces de base flexible, et encore 160 pixels. Cette base flexible définit la taille par défaut d'un élément, avant que tout espace restant ne soit distribué. Ici, les quatre éléments sont trop larges pour tenir dans le conteneur. C' est là que Flex-Shrink intervient. Flex-Shrink déterminera quels éléments rétréciront pour s'adapter à l'espace disponible. Allons vers le bas et changeons le flex développé pour être flex-rétrécir cette fois. Je vais changer pour les quatre articles. Définissons les deux derniers pour être une valeur de 2. Puis actualisez. Nous voyons maintenant que les points 3 et 4 ont diminué. Depuis une valeur plus élevée par rapport aux articles 1 et 2. Si nous passons sur une augmentation, l' un de ces points sera trois à la place. Cela entraînera la réduction la plus importante de l'élément lorsqu'il n'y a pas assez d'espace pour qu'ils puissent tous tenir dans un conteneur. Dans cette vidéo, nous avons examiné la flex-grow, flex-rétrécir et flex-base. Ces trois propriétés peuvent être combinées dans le raccourci flex comme ceci. Jusqu' à l'article, nous pouvons commenter cette base flexible, puis la remplacer par flex. Si nous devions ajouter zéro, un, puis auto. Ce sont les paramètres par défaut. Zéro pour commencer est une flex-grow. L' un est pour tous les flex-shrink, puis auto est pour les espaces de drapeau que vous avez ajoutés juste au-dessus ici. Si nous sauvegardons cela, et puis voyons à quoi il ressemble dans le navigateur, voici comment nous regarderions avec les valeurs par défaut. Nous avons cette largeur fixe de 600 pixels pour le conteneur. Ensuite, nos quatre éléments égaux, car ils sont tous réglés à la valeur de zéro. Nous pouvons jouer avec ces valeurs comme avant aussi. Par exemple, si nous définissons tous les éléments ont une valeur flex-grow de un, donc un et un, puis sur le navigateur. Chacun prendra désormais l'espace disponible également dans un conteneur. Cette propriété flex est beaucoup plus facile et plus propre, que maintenant ces trois propriétés séparément. Nous avons maintenant terminé en regardant comment les objets grandissent et se rétrécit. Ensuite, nous allons finir de regarder la flex-box en apprenant sur une ligne auto. 9. Contrôler les éléments de l'enfant : alignement: Plus tôt dans cette section, nous avons aligné l'ensemble des éléments de différentes manières. Cela fonctionne bien. Mais parfois, vous pouvez souhaiter qu'un élément particulier soit aligné différemment du reste. Mais ce cas, nous avons l'alignement auto propriété. Pour commencer, je vais supprimer les styles en ligne que nous venons d'ajouter auparavant, et ce sont les quatre éléments ci-dessous. Supprimez les styles en ligne, qui est une valeur de rétrécissement flexible. Avant la police 2. Aligner soi-même fonctionne comme aligner les éléments, que nous avons utilisés sur le conteneur. Mais cette fois, nous l'ajoutons à l'élément, nous voulons contrôler la série en action. Je vais mettre le conteneur à pleine hauteur. Faites défiler jusqu'à la section Style, puis définissons la hauteur à 100 vh, qui rappelez-vous, est la hauteur du port de vue. Si nous allons dans le navigateur, comme nous l'avons vu avec les éléments alignés, la valeur par défaut est stretch, c'est pourquoi ils sont placés en haut vers le bas de la page. Pour contrôler l'un de ces éléments individuels, nous pouvons ajouter l'alignement auto et les modifications par défaut. Allons aux produits et ajoutons ceci à l'un de ceux-ci. Réintroduisons le style. Cette fois, nous pouvons ajouter aligner auto, et commençons par le centre, puis rafraîchir. Maintenant, nous contrôlons un élément individuel plutôt que l'ensemble du groupe d'éléments. Nous avons également quelques propriétés familières, telles que flex start, nous devrions savoir ce qui se passe maintenant si nous actualisons. Cela place maintenant cela au début de l'axe. Si nous voulons distribuer placé vers le bas ou l'extrémité opposée, nous avons aussi une extrémité flexible, que nous avons déjà vu auparavant. Cela nous donne un comportement attendu. Nous avons également la deuxième ligne de base que nous avons cherché à trouver des survaleurs. Modifions la fin flex de la ligne de base, actualisons. Ceux-ci seront désormais alignés sur la ligne de base du texte à partir des éléments au-dessus. C' est maintenant pour notre regard sur la CSS flex-box. Vous pouvez voir à quel point cela peut être utile pour la mise en place de sites Web. Ensuite, nous allons couvrir une autre technique de mise en page appelée la grille CSS. Je te verrai bientôt. 10. Il est temps de s'entraîner : intégrez Flexbox dans Tech Store: Avant de commencer à apprendre sur la grille CSS, alors que flexbox est encore frais dans nos têtes, j'aimerais que vous partiez et que vous vous entraîniez maintenant en utilisant cette flexbox. Cette flexbox est un moyen vraiment utile de poser nos sites web. Mais tout comme quand on apprend quelque chose de nouveau, ils peuvent sembler beaucoup à prendre au début Cela devient plus facile avec la pratique cependant. C' est ce que j'aimerais que vous alliez de l'avant et que vous fassiez maintenant. J' aimerais que vous utilisiez certaines des techniques de flexbox que vous avez apprises, puis que vous les appliquez à nos projets textiles. Vous n'avez pas besoin de devenir fou et de réécrire complètement tout le CSS. Mais essayez juste de changer quelques choses pour inclure cette flexbox, quelques idées, qubits pour que les produits remplissent automatiquement le conteneur. Ou vous pouvez aller encore plus loin et utiliser flexbox pour modifier la disposition des appareils de différentes tailles. Allez la tête et donnez ça un coup de pouce, puis revenez pour tout savoir sur la grille CSS. 11. Qu'est-ce que le réseau CSS ?: Nous passons maintenant à une autre technique puissante de mise en page de sites Web appelée la grille CSS. Grid résout à peu près tous les problèmes de mise en page que les développeurs Web ont dû contourner dans le passé. La flexbox, que nous venons d'examiner, aide également à résoudre beaucoup de ces problèmes de mise en page, mais c'est une dimension. Nous ne pouvons travailler que dans des colonnes ou des lignes à la fois. Grid, d'autre part, est vraiment flexible et nous permet de travailler en deux dimensions. Cela signifie qu'il peut être facilement utilisé pour mettre en page un site web complet, alors que flexbox est généralement mieux adapté aux alignements et aux positionnements plus petits. Ils peuvent être utilisés ensemble et fonctionnent en fait très bien ensemble. Ne perdons pas de temps à sauter directement pour en apprendre davantage sur la grille. 12. Premier regard sur la grille CSS: Ok, alors commençons avec la grille. Pour commencer, je vais dupliquer le dossier du projet flexbox, puis renommer ceci la grille. Donc, sur le bureau ou l'emplacement où vous avez enregistré votre projet, je vais dupliquer ce projet, puis une fois que c'est fait, renommons ceci, la grille. Ouvrez ceci dans Visual Studio Code. Ensuite, nous pouvons également ouvrir l'index ou HTML à l'intérieur du navigateur. Cela dira que nous configurons tout le code HTML standard, que nous devons commencer. Passons à l'index ou au HTML. Nous pouvons fermer la barre latérale vers le bas et ensuite apporter quelques modifications pour nettoyer cela. Donc le titre de la grille. Ensuite, nous pouvons supprimer tous les styles du conteneur. Juste en laissant dans cette couleur de fond. Nous pouvons également réutiliser cela. Beaucoup d'éléments réutilisés aussi, sélectionnez supprimer les propriétés flex, en laissant juste une couleur de fond et aussi le motif est bien. Jusqu' à la div, utilisera à nouveau le conteneur div et aussi les éléments individuels donc nous allons simplement supprimer la propriété de style de l'intérieur et ensuite nous sommes bons à y aller. Bien. Tout comme avec la flexbox, nous devons d' abord changer le type d'affichage du conteneur, mais cette fois, plutôt que de le définir pour être flex, nous utilisons la grille. Donc, affichez avec le type de grille et voyons ce qui se passe dans le navigateur. Si nous rechargeons, nous ne voyons pas encore de changements. Lorsque nous définissons la grille, les éléments enfants du conteneur au niveau du bloc, donc faire toute la largeur de la page. Si vous voulez que les éléments soient en ligne, nous pouvons changer le type de grille pour qu'il soit en ligne. Passons à ici et changeons ceci pour être inline-grid, recharger et puis tous les éléments maintenant en ligne plutôt que de bloc. Je vais rester avec des grilles pour l'instant. Supprimons cette ligne et restaure cela à la normale. Ensuite, déclarez comment nous voulons que ces éléments soient disposés. Nous définissons le nombre de colonnes et de lignes que nous voulons utiliser. Je vais commencer par les colonnes et cela se fait à l'intérieur du conteneur principal. Nous faisons cela avec la propriété CSS appelée grid-template-columns, puis je vais définir cela pour être 100 pixels et aussi le navigateur. Pour mieux voir ces éléments, ajoutons une bordure autour de l'extérieur de chacun et cela doit être fait à l'intérieur des éléments. Juste une simple bordure d'un pixel et d'une ligne solide. On y va. Nous n'avons spécifié qu'une seule colonne pour le moment, soit une largeur de 100 pixels. C' est pourquoi nous les voyons tous empilés dans une colonne comme celle-ci. Si nous voulons plus d'une colonne, nous spécifions plus de nombres. Donc, juste après les 100 pixels pour les colonnes grille-modèle, ajoutons une deuxième colonne de 300 pixels, puis une troisième de 80. C' est à quoi cela ressemble dans le navigateur. Nous avons spécifié trois tailles ici. Les trois premiers articles de ces tailles. Nous avons les 100 premiers, puis 300, puis 80. Ensuite, tous les éléments supplémentaires seront répétés comme nous le voyons pour ce quatrième élément ici, qui tombe dans la première colonne de 100 pixels. Cela peut être mieux vu avec plus d'articles. Passons au HTML. Maintenant, nous pouvons dupliquer une de ces divs. Collons ceci dans quelques fois de plus. Donc 5, 6 et puis 7 et il y a nos articles répétés sur la deuxième rangée. Ensuite, nous restons avec un élément supplémentaire qui est par défaut la première colonne. Ces colonnes et aussi les lignes, que nous examinerons ensuite, sont connues sous le nom de pistes. À l'heure actuelle, nous avons une piste de 100 pixels par piste, une piste de 300 pixels de large puis une piste de 80 pixels de large sur la droite. En outre, ils n'ont pas besoin d'être dimensionnés en pixels non plus. On ne peut pas utiliser ce qu'on sait déjà. Donc, cinq pour cent ou même automatique pour prendre automatiquement l'espace restant. Plutôt que de 80 pixels ici, nous pouvons définir cette troisième piste pour être automatique , puis cette troisième piste prendra automatiquement l'espace restant. Maintenant, sur les lignes, pour le moment, la hauteur de chacune des lignes est définie par le contenu, cela inclut une partie en deux. En utilisant Visual Studio Code, nous pouvons ajouter un exemple de texte appelé Lorem Ipsum. Passons à l'un de nos articles. Disons point deux et si nous avons tapé lorem avec une temp, nous obtenons ensuite plus de contenu de texte. Voyons quel effet cela a sur le navigateur. Cette première ligne est maintenant plus grande en raison du contenu supplémentaire. Mais nous ne voulons pas toujours cela, nous voulons souvent avoir le contrôle sur cela nous-mêmes. C' est là que grid-template-rows entre en jeu. Si nous revenons à notre conteneur, nous pouvons également définir les rangées grille-modèle et définissons cela pour être une valeur de 100 pixels. Puis revenez et les trois lignes sont maintenant réglées sur 100 pixels de hauteur. Maintenant, le contenu n'est plus en contrôle de la hauteur parce que nous l'avons défini pour être exactement ce que nous voulons. Tout comme les colonnes, la définition d'une seule valeur n'affectera que la première ligne. Je peux aller de l'avant et ajouter nos valeurs. Allons de l'avant et ajoutons le premier. Disons 250 pixels, 150 pixels, puis 100. D' accord. Bien. Maintenant avoir trois voies routières latérales individuelles. En quelques lignes, nous avons contrôlé la mise en page de notre contenu en deux dimensions, en utilisant à la fois des colonnes et des lignes. Ceci contraste avec la flexbox, qui est conçue pour être utilisée uniquement sur une dimension à la fois, soit sur une ligne, soit sur une colonne. C' est notre premier regard sur les grilles. Il y a tellement d'autres encore à couvrir et continuera dans la prochaine vidéo. 13. Intervalles de la grille: Dans la dernière vidéo, nous avons ajouté une bordure autour de ces éléments de grille. Nous reviendrons voir comment ils sont disposés. Si nous passons au CSS et supprimons cette bordure et revenons au navigateur. Il devient difficile de voir les lignes et les colonnes. Par défaut, il n'y a pas d'espace entre les colonnes et les lignes, mais pour corriger cela, nous pouvons utiliser des grilles. Pour ajouter une grille entre les colonnes, nous avons grille-column-gap. Ceci est également appliqué au conteneur. Alors allons de l'avant et ajoutons grille-colonne-gap. La valeur était à nous. Commençons donc par 10 pixels et cela ajoutera un espace de 10 pixels entre chacune des colonnes. Comme vous l'avez peut-être deviné, il y a aussi grille-range-gap et vous pouvez l'ajouter également au conteneur. Donc grille-range-gap et permet à nouveau de définir ce à 10 pixels, actualiser. Il y a maintenant un espace de 10 pixels entre les lignes et les colonnes. Notez comment ces espaces entre les lignes et les colonnes, pas autour du bord. Cela résout l'un des anciens problèmes que nous avions lors de l'espacement nouveaux éléments en utilisant des méthodes CSS telles que la marge, où l'espace sera tout autour des éléments, même le bord environnant par défaut. En outre, il existe une version abrégée trop appelée grille-gap. Donc, plutôt que d'avoir deux lignes de code ici, nous pouvons les supprimer et utiliser à la place grille-gap. Tout comme lors de l'utilisation de la marge et du remplissage, nous pouvons définir deux valeurs. Le premier est pour les lignes, donc 20 pixels, puis pour les colonnes, 10 pixels, puis actualiser. Ou si nous voulions qu'une valeur s'applique à la fois aux lignes et aux colonnes, nous pouvons simplement laisser une valeur, telle que 10 pixels, puis il laisse des espaces égaux tout autour. Vous pouvez voir combien nous pouvons contrôler avec seulement quelques lignes de CSS. Ce type de mise en page sans la grille serait beaucoup plus complexe et long. C' est maintenant pour les grilles. Ensuite, nous allons regarder comment répéter les pistes et également définir les tailles min et max. 14. Répétition de piste et unité fr: Dans cette vidéo, nous allons examiner quelques façons d'avoir un meilleur contrôle sur nos pistes. Tout d'abord, c'est comment répéter des pistes qui ont les mêmes tailles. Si nous voulions que toutes nos colonnes soient de 200 pixels de large, comme ça. Plutôt que de régler tout libre, si nous avions 200 pixels, nous savons déjà qu'une valeur saine comme celle-ci, ne fera qu'afficher une colonne. Pour aider avec cela, les fournisseurs de grille vont répéter, afin que nous puissions ajouter cela à l'intérieur de nos colonnes. Ajoutons des répétitions, et ensuite nous pouvons ajouter notre valeur à l'intérieur des crochets comme ceci. Nous gardons toujours la taille du camion ici, mais avant cela, nous ajoutons le nombre de fois que nous voulons qu'il se répète. Si voulu quatre colonnes, nous ferions quatre à 200 pixels, et recharger, et des éléments de quatre colonnes avec une largeur égale. Nous sommes toujours libres d'ajouter plus de pistes individuelles avant ou après. Si nous voulions que le premier soit 100 pixels, puis répétez avant ou après, nous ajoutons simplement une nouvelle valeur avant cela. 100 pixels, puis je vais répéter après. Cela nous donne notre première colonne à 100 pixels de large, et quatre colonnes répétées à 200 pixels chacune. Si nous voulions une cinquième piste pour occuper l'espace restant sur le côté droit, nous pourrions aussi le faire. Nous pourrions ajouter une taille fixe ou nous pourrions réutiliser la propriété auto, que nous avons vu auparavant, rafraîchir et maintenant nous avons un élément supplémentaire à la fin. Ou bien, si nous savons combien de colonnes nous voulons utiliser, nous pouvons également définir cette auto sur, sélectionner remove auto de la fin, et la première valeur, et disons que nous voulons des colonnes libres. Nous pourrions également utiliser l'auto à l'intérieur des répétitions. On y va. Il y a nos trois colonnes et maintenant les pistes se redimensionnent automatiquement au contenu. Ensuite, je veux vous montrer une nouvelle unité de mesure appelée l'unité fi, qui est abrégée pour fractionnaire. Cette unité se rapporte à une partie de l'espace disponible. Cela fonctionne comme tôt ce que nous avons regardé, les valeurs flexibles, où une valeur de un est une partie de l'espace disponible et la valeur de trois est trois fois plus grande. Ajoutez-le à nos colonnes et voyons ce qui se passe. Chaque fois que vous créez des colonnes de modèle, au lieu d'auto, nous pouvons ajouter un fi, et actualiser. Maintenant, la largeur de nos colonnes ne dépend pas du contenu. Ils occupent tous le même espace disponible, et bien sûr, ajout d'une nouvelle colonne dans fi prendra deux fois l'espace disponible. Ajoutez une quatrième colonne, actualisez. C' est maintenant deux fois la taille de ces trois, comme vous vous attendiez. répétition peut également être appliquée aux lignes. Juste ci-dessous, nous pouvons également ajouter des répétitions. Encore une fois à l'intérieur du support, nous ajoutons le nombre de lignes que nous voulons, puis la taille, puis retirons notre dernière colonne du haut. Maintenant, pour les rechargements, obtenez trois lignes de taille égale aussi. Encore une fois, nos lignes peuvent également être mélangées avec d'autres pistes de taille, ce qui signifie que c'est vraiment flexible à utiliser. 15. Tailles de piste min et max: La grille CSS nous permet également de définir une plage pour la taille du camion en ajoutant la taille minimale, maximale, qui devrait être. Nous le faisons avec la fonction min-max et nous pouvons le faire à l'intérieur de nos colonnes ou lignes. Si nous allons aux colonnes pour commencer, nous pouvons supprimer ces répétitions et ensuite le remplacer par la fonction min max. À l'intérieur des parenthèses, cela prend également deux valeurs. Le premier est la taille minimale de la colonne. Disons 160 pixels, puis la deuxième valeur est la taille maximale, allons-y pour 200 pixels. Cette section s'appliquera à la première colonne et ajoutons quelques colonnes supplémentaires dans. Le deuxième mode peut être un fr, puis le troisième fera deux fois la taille de 1fr, puis sur le navigateur. Ce premier est celui qui nous intéresse. Il s'agit d'un utilisant min-max et la taille doit être comprise entre 160 et 200 pixels. Pour vérifier que cela fonctionne, nous ouvrons les outils de développement et inspectons la première colonne. Allons voir l'inspecteur. Si nous ouvrons cet article, nous pouvons voir que la taille est réglée à 200 pixels. Ensuite, le second est 1fr, donc nous allons prendre un chemin de l'espace disponible. Le troisième est réglé à 2fr, donc il devrait être deux fois l'espace disponible. C' est 518 et celui-ci est 259, qui est exactement la moitié. Nous pouvons également mieux voir ce min-max en action en réduisant le navigateur à plus petite taille. Ensuite, laissez ouvrir ce premier élément à nouveau et vous pouvez voir même si son navigateur est vraiment petit, nous avons maintenant une valeur minimale de 160 pixels. Cette fonction min-max est vraiment utile lorsque nous voulons avoir un contrôle précis sur la taille de notre affichage de piste et c'est ainsi que nous pouvons l'utiliser. 16. Numéros de ligne de la grille: Chacune des pistes que nous créons, même dans une ligne ou une colonne a ces lignes de grille numérotées entre elles. Ces lignes de grille commencent à un, qui est le début de la piste, puis continuent le long de la direction de la grille jusqu'à la fin de la piste. Ici, nous voyons nous avons nos pistes de colonnes numérotées de 1-5, et les lignes numérotées de 1,2,3,4.Mais pourquoi avons-nous besoin de savoir cela ? Eh bien, nous pouvons utiliser ces numéros de ligne de grille pour positionner un élément, exactement là où nous voulions être sur une grille. Nous utilisons les démarrages de ligne de grille, l'extrémité de ligne de grille, le début colonne de grille et la fin de colonne de grille pour spécifier le départ dans les positions de fin sur chaque axe, où nous voulons placer un élément. Ici, nous avons un élément entre les lignes deux et trois sur la ligne, puis entre les lignes trois et quatre pour les colonnes. Allons à l'éditeur de texte et donnons cela nous-mêmes. Pour commencer, je vais répliquer cette grille à partir des diapositives, ouvrez les colonnes du modèle de grille, ajoutons une répétition, supprimons le min-max, puis cette fois je vais répéter et ajouter simplement quatre colonnes à 1 fr chacun, et puis pour les lignes, nous pouvons répéter trois, à 1 fr aussi et ceux-ci peuvent être tous égaux. En voyant cela en action, nous avons également besoin d'autres éléments. Copions un de ces divs, les éléments, puis collons-le , et allons-y pour 12 éléments. 8, 9,10,11, puis 12, et là comme nos 12 éléments sur l'écran, le positionnement avec ces lignes de grille sera les premières propriétés que nous avons couvertes jusqu'à présent, qui s'appliquent à l'article plutôt qu'à un conteneur. Je vais changer la classe sur l'un de ces articles. Passons aux éléments, et passons à celui-ci, et changeons-le pour être l'élément un, puis changez la couleur d'arrière-plan et le CSS, donc cela se distingue un peu plus. Article un, je vais aller pour la couleur de fond, cela peut être tout sauf le bleu clair est bien et rafraîchir, et maintenant nous avons un élément qui s'avère, génial. Nous allons maintenant commencer à travailler avec cet élément, commencé avec l'exemple des diapositives. Si nous allons à notre élément un CSS, nous pouvons commencer par les démarrages de la ligne de grille, que nous avons vu dans les diapositives, et c'est la position de départ sur la ligne, donc allons-y pour l'opposition deux, et nous devons également ajouter fin de ligne de grille pour la position de fin. Encore une fois, en passant par les diapositives, c'est la position trois, puis la même chose pour les colonnes. Les colonnes de la grille commencent, position trois, extrémité de la colonne de la grille, position quatre, et en face du navigateur. Remarquez comment cet article est déplacé et tous les autres ont été ajustés et sont toujours restés en ordre. Ces lignes de grille peuvent être n'importe quel nombre pour placer son élément n'importe où sur la grille, ou elles peuvent même couvrir plusieurs lignes et colonnes. Si nous voulions que cet élément bleu prenne également la ligne en dessous, nous pourrions aller dans le CSS et changer l'extrémité de la ligne de la grille, cette fois pour être le numéro 4. Recharger et maintenant nous nous étendons sur deux lignes de grille, même avec les colonnes deux. Si nous voulions que les éléments couvrent également la colonne à droite de celle-ci, nous pourrions simplement ajuster les chiffres. La fin de la colonne de la grille, pour être le numéro 5, et là nous allons, et toujours tous les éléments vont couler et aussi garder l'ordre. Il y a aussi une syntaxe abrégée, pour rendre cela encore plus simple. Plutôt que d'avoir quatre lignes dans notre CSS, si nous commentons cela, nous pouvons utiliser la ligne de grille. Encore une fois cette ligne de grille, nous pouvons ajouter nos deux valeurs de ligne de grille, de deux et quatre, séparées par une barre oblique, puis nous avons aussi un raccourci pour la colonne de grille, qui, comme vous l'avez deviné, est une colonne de deux grille tailles de trois, puis cinq, et si nous regardons maintenant cela, après rechargement, tout semble toujours le même, mais au lieu de cela nous avons maintenant sur deux lignes. Enfin, il existe une version encore plus courte trop appelée zone de grille. Commentons également nos deux lignes ici, puis en dessous de cela, nous pouvons et à la zone de grille, mais cette fois nous ajoutons nos quatre valeurs. Nous devons être très prudents car les deux premières valeurs sont nos deux subdivisions de départ. Le premier est le début de la ligne, puis nous avons le début de la colonne, donc les deux premières valeurs sont deux, puis trois. Ensuite, les deux derniers sont nos deux positions de fin, qui est celui-ci, quatre, puis cinq. Encore une fois, nous ne devrions voir aucune différence à l'intérieur du navigateur, mais cette fois le CSS est juste sur une ligne, mais faites attention à l'ordre de laquelle ajouter les quatre valeurs. Grid nous fournit également l'outil de mot-clé span. Cela nous permet de spécifier la ligne sur laquelle nous voulons commencer, puis le nombre de lignes ou de colonnes que nous voulons parcourir. Si vous voulez doubler l'exemple pour prendre également cette deuxième rangée du bas ici, nous pourrions commencer notre position deux, comme nous le faisons déjà. Ensuite, parcourez nos trois rangées, donc un, deux et trois. Retour à notre zone de grille. Au lieu de l'extrémité de ligne à définir sur quatre, nous pouvons alors dire span sur trois lignes. Voyez à quoi ça a l'air, bien. Maintenant, nous commençons à la même position et à la même échelle, un, deux et trois. S' étendant sur plusieurs pistes comme celle-ci est vraiment utile pour la mise en page de nos pages Web. Par exemple, nous pourrions couvrir la rangée supérieure, pour créer une zone de tête, ou couper une zone pour la barre latérale, ainsi que la section principale. C' est maintenant quatre numéros de ligne, et je te vois dans la prochaine vidéo. 17. Noms des lignes de grille: Dans la dernière vidéo, nous avons examiné les lignes de grille et leur numérotation. Grid nous donne également la possibilité de nommer ces lignes de grille à quelque chose de plus approprié. Vous rencontrerez souvent des noms tels que début de ligne ou fin de ligne. Une autre façon utile est de les nommer en relation avec la section de toutes les pages telles qu'un en-tête, pied de page, une barre latérale et ainsi de suite. Nous allons maintenant revenir à l'ajout de propriétés au conteneur. Nous pouvons retourner l'article 1 à juste être l'article. Supprimons celui de la fin d'ici et maintenant si nous faisons défiler vers notre conteneur CSS, nous pouvons aller de l'avant et ajouter nos colonnes. Supprimons cette répétition d'ici et tout ce que nous avons à faire est d'ajouter un nom à l'intérieur des crochets pour chaque colonne, suivi de la taille de la piste. Nous ouvrons et fermons les crochets. Nous pouvons définir notre premier à être appelé en premier, puis la taille de 1FR. Nous pouvons ensuite répéter cela avec les crochets à nouveau et appeler cette seconde et cela peut être 2FR. Si nous voulons la troisième colonne, exactement la même chose. Le nom est troisième, nommé 1FR, puis à la toute fin, nous pouvons nommer ce dernier et définir ceci pour être 2FR. Rappelez-vous ces noms entre crochets, totalement à vous de décider. Voyons à quoi cela ressemble et voyons comment nous sommes quatre colonnes en action. Bonté, nos quatre colonnes avec 1FR, deux, un et puis deux. De plus, plutôt que d'utiliser des noms individuels comme nous venons de le faire, nous pouvons répéter le même nom pour chaque piste, comme col-start puis col-end, col-start 2, col-end 2, start 3, end 3, start 4, puis end 4. Pour y parvenir, tout ce que nous devons faire est d'ajouter col-start et aussi col-end. Ensuite, ces nombres seront ajoutés automatiquement après chacun pour distinguer entre chaque colonne et nous pouvons également faire exactement la même chose pour les lignes 2. Nous pouvons y parvenir en revenant au projet et en utilisant la répétition. Pour commencer à ajouter ce col-start et col-end à chaque colonne, nous pouvons aller de l' avant et utiliser la méthode de répétition et supprimer les quatre noms individuels, puis aller de l'avant et ajouter la répétition. A l'intérieur des parenthèses, je vais ajouter quatre colonnes. Donc, ajoutez quatre séparés par la virgule. Ensuite, nous pouvons aller de l'avant et ajouter nos crochets. La première valeur que nous allons définir comme col-start et c'est le nom du début de chaque colonne individuelle. Ce sera col-start, puis col-start 2, col-start 3, et ainsi de suite. Ensuite, la taille que nous voulons que chaque colonne soit à moins que je veux qu'elle soit 1FR. Ensuite, un deuxième ensemble de crochets pour ajouter le nom à la fin de chaque colonne. Dans notre cas, nous allons utiliser col-end, puis enregistrer cela et faire la même chose pour les lignes ci-dessous. On peut garder trois rangées, c'est bon. Nous pouvons ajouter le nom des démarrages de ligne, la taille de 1FR, puis notre nom de fin de ligne donner cette sauvegarde et ensuite rafraîchir. Ensuite, nous revenons à une norme pour la mise en page de grille quatre par trois. Maintenant, nous pouvons aller de l'avant et ajouter notre article une classe de retour en place et nous pouvons déplacer l'élément à l'endroit où nous voulons utiliser ces noms de grille. Le premier, c'est dans la catégorie de l'article 1. Pour que nous puissions revoir l'article bleu. Pour rendre les choses plus claires, je vais commenter la zone de grille que nous avons utilisée ici pour l'élément 1, puis revenir à l'utilisation ces quatre valeurs individuelles afin qu'il soit un peu plus facile de travailler avec. Pouvez-vous avoir la ligne pour commencer à deux et quatre ? Laissons ça pour l'instant. Au lieu de cela pour les colonnes, passons pour col-start, puis terminez la position pour moi col-end. Rappelez-vous que ce sont les noms que nous avons mis ci-dessus à l'intérieur des crochets. Rechargez le navigateur. Comme prévu, nous avons la ligne de départ à la position deux, c'est un, puis deux, puis il finit par la position quatre que nous commençons avec ces deux valeurs ici. Nous définissons ensuite les colonnes pour être le début de colonne et la fin de colonne. Rappelez-vous que les col-start et col-end sont la position de début et de fin de notre première colonne. C' est pourquoi il n'a repris qu'une seule section ici. Si nous voulions que cela s'étend sur deux colonnes comme sur celle-ci ici, qui change ensuite pour être col-end 2. Maintenant, cela commence au début de la première colonne et se termine à la fin de la colonne 2. Maintenant, nous voulons les lignes. Si nous définissons la première valeur pour être le début de ligne, puis la seconde pour être la ligne 4 du navigateur. Maintenant, cela commence au début de la ligne qui est la première ligne ici et se termine ensuite à la ligne 4 qui est la quatrième ici. Nous ne faisons rien de différent de ce que nous avons déjà appris. La seule différence est que nous référençons ces lignes de grille par un nom plutôt qu'un nombre. Ensuite, nous allons examiner comment nous pouvons utiliser les zones de modèle de grille pour mettre en page un site Web complet. 18. Zone de modèle de grille: En plus de positionner des éléments avec ces lignes de grille, nous pouvons également créer des zones complètes telles que l'en-tête, le contenu, la barre latérale et le pied de page. Grid nous fournit une propriété appelée zones de modèle de grille pour ce faire. Tout d'abord, nous devons réfléchir à la façon dont notre grille sera structurée à l'aide de lignes et de colonnes. En regardant le diagramme ici, nous avons un en-tête sur une ligne, contenu et la barre latérale sur la ligne suivante, et enfin un pied de page sur la troisième ligne. Par conséquent, nous n'avons pas besoin de trois rangées de la grille. Nous avons seulement besoin de deux colonnes pour le contenu et la barre latérale. N' oubliez pas que les zones d'en-tête et de pied de page s'étendent sur ces deux colonnes. Voici à quoi ressemblera nos lignes de grille une fois que nous définissons les lignes libres et les camions à deux colonnes. Revenons à l'éditeur de texte et voyons cela en action. Mettons-nous au travail avec la mise en place de ça. Nous allons commencer par travailler avec ces zones de grille. Nous pouvons commenter tous ces 12 éléments. Supprimons tous ces pour l'instant avec le commentaire. Ensuite, à l'intérieur du conteneur, nous pouvons travailler avec l'ajout de notre en-tête. Ajoutez les sous-éléments d'en-tête et le texte de l'en-tête 2, nous avions également une section principale pour le contenu, puis la barre latérale, avec les éléments latéraux, puis vers le bas, nous avions aussi un pied de page. Nous pouvons mieux voir ces zones, ajoutons une bordure aux quatre. Dans la section Style, passons à l'en-tête, au principal, au côté et au pied de page. Ajoutez la propriété border d'un pixel, puis une ligne pointillée. Plus sur le navigateur, cliquez sur Actualiser et il y a nos quatre zones de contenu que nous venons d'ajouter. Ensuite, revenez à notre modèle de grille lignes et colonnes, et nous pouvons commencer à configurer cela, donc jusqu'au sommet. Rappelez-vous, pour les colonnes, nous avons besoin de deux, une pour la section de contenu et une pour la barre latérale. Retirez les répétitions et la première peut être 3fr, sur la barre latérale peut être plus petite, donc 1fr est bien. Puis sur les rangées. Nous avons besoin de trois lignes, une pour l'en-tête, une pour le contenu et une pour le pied de page. L' en-tête peut être 1fr, 3fr pour le contenu principal, puis 1fr pour le pied de page. Si nous rechargeons maintenant le navigateur, voici à quoi les quatre sections vont maintenant ressembler. Puisque nous avons mis deux colonnes, les quatre éléments sont disposés sur les deux rangées, comme vous le voyez ici. Nous allons travailler avec le changement dans ce domaine avec notre zone Modèles de grille. Ajoutons la propriété CSS dans les zones de modèles de grille. Rappelez-vous le S à la fin. Avec cette propriété, nous configurons les noms de chaque section. Ces noms sont disposés comme une table. Nous avons deux colonnes et trois lignes, donc nos noms sont disposés comme une table trois par deux. Nous ajoutons les devis pour notre première ligne, puis nous pouvons ajouter notre deuxième ligne, puis une troisième rangée juste en dessous. N' oubliez pas d'ajouter le point-virgule à la fin aussi. Nous voulons que la zone d'en-tête s'étend sur ces deux colonnes supérieures. Nous ajoutons l'en-tête dans la première colonne, puis l'en-tête dans la deuxième colonne aussi, pour que cela s'étende à droite sur la ligne. Mais notre deuxième rangée, nous voulons que le contenu soit à gauche, puis une barre latérale à droite. Ensuite, le bas, tout comme l'en-tête, nous voulons que la zone de pied de page couvre les deux colonnes. Si nous sauvegardons cela, nous ne verrons pas encore de différence dans le navigateur, mais nous actualisons. Nous devons d'abord placer nos articles à l'intérieur des sections. Nous le faisons avec les quatre mêmes propriétés que nous avons déjà utilisées. Si nous passons à l'élément 1, nous avons utilisé la ligne de grille, les démarrages , la fin de ligne, les colonnes commencent et la fin de colonne, ou nous pouvons utiliser un raccourci de ligne de grille et de colonne de grille, que nous avons déjà recherché. Mettons ça en place. Tout d'abord, nous pouvons cibler l'en-tête. Nous définissons la taille de cet en-tête en utilisant la ligne de grille et la colonne de grille. Tout d'abord, la ligne de la grille, cela peut être la section d'en-tête que nous avons mis en place en haut, donc ce qui est juste ici et ensuite la même chose pour la colonne de la grille. Juste en dessous de cette colonne ajouter la grille et également définir la zone d'en-tête que nous avons créé. Nous répétons ensuite cela au côté principal et au pied de page. La section principale, nous définissons la ligne de la grille pour être le contenu, puis la colonne de la grille pour être également le contenu aussi. Nous avons également créé une zone pour la barre latérale et nous allons lui donner un nom de barre latérale ici. Vers le bas pour la section de la barre latérale, qui était les éléments de côté. Tout comme avant de faire la ligne de grille et de définir ceci pour être la colonne de grille de la barre latérale. Voici la barre latérale 2. Puis enfin, la zone de pied de page. Ligne de grille, le nom du pied de page et la colonne de grille et c'est aussi le pied de page. Enregistrez cela, puis Oh dans le navigateur et actualisez. Bien juste pour récapituler, nous avons notre en-tête étalé sur le dessus. C' est parce que nous avons défini l'en-tête pour avoir la ligne de grille et la colonne de grille de ce modèle d'en-tête que nous avons défini ci-dessus. Juste ici qui s'étend sur nos deux colonnes de la première ligne, nous définissons ensuite la deuxième ligne pour être divisée entre le contenu, qui va être la section 3fr et ensuite la barre latérale nous serons 1fr. Nous les définissons ci-dessous, encore une fois en utilisant la ligne de grille et la colonne de grille pour la section côté et principale. Ensuite, tout en bas, nous définissons la zone de pied de page et tout comme l'en-tête, cela s'étend également sur les deux colonnes. Définition du pied de page et de l'en-tête pour qu'ils correspondent à toute la largeur de la page. Bien. Cela laisse notre mise en page maintenant complète et la façon dont nous avions l'intention d'utiliser les zones de modèle de grille. Ensuite, nous allons jeter un oeil aux grilles d'imbrication. 19. Grilles imbriquées: Cette mise en page de grille est maintenant comme nous l'avions prévu. Mais que se passe-t-il si vous vouliez imbriquer nos 12 articles dans la section principale en tant que grille aussi ? Allons nous chercher et voir ce qui se passe. Si nous revenons à nos projets et puis réinstaure nos 12 articles. Décommentons cette section ici et supprimez également la classe de l'élément un. Ensuite, nous pouvons aller de l'avant et découper ces objets, puis les placer à l'intérieur de notre section principale. Coupez ces sorties. Ensuite, nous pouvons supprimer les textes du contenu. Je colle ceci dans cette section principale. Nous avons l'en-tête en haut, la section principale avec 12 éléments imbriqués, la barre latérale et le pied de page. Voyons comment cela ressemble initialement à l'intérieur du navigateur. Les articles sont tous là. Mais si nous faisons défiler vers le bas, ils ne sont pas dans une mise en page de grille. Les éléments s'affichent simplement sous forme d'éléments de niveau bloc. L' élément principal est évident pour ces éléments. Nous pouvons changer le type d'affichage pour être grille de NCSS. Allons à la section principale, puis changeons le type d'affichage pour être grille. Aussi, nous pouvons donner à cela un espace de grille aussi, ajoutons cinq pixels pour l'écart. Voyons ce qui se passe maintenant, c'est en place, on doit se rafraîchir. marchandises ont maintenant notre écart de grille ici. Ensuite, nous devons définir le nombre de colonnes et de lignes que nous voulons comme nous le ferions normalement. C' est encore une fois dans la section principale. Ajoutons les colonnes du modèle de grille. Allons faire des répétitions. Nous avons quatre colonnes, une FR. Ensuite, les lignes de modèle de grille juste en dessous. Répétez ça aussi. Ensuite, nous ajoutons simplement un FR pour ajouter autant de lignes que nécessaire et les garder tous même aussi. Vers le navigateur, actualisez. Maintenant, nous avons imbriqué notre grille à l'intérieur de la zone de contenu principale. Tout comme précédemment lorsque nous avons regardé Flexbox, la grille nous permet également d'avoir un contrôle plus précis sur l'alignement des éléments individuels. C' est ce que nous couvrirons ensuite. 20. Alignement: Nous allons maintenant nous éloigner de notre mise en page et nous concentrer sur l'alignement. Beaucoup de ce que nous couvrons dans cette vidéo est similaire à la flexbox, où nous alignons les éléments au début et au centre de l'étirement pour remplir l'espace. Coordonner les éléments a pris tout l'espace disponible. Nous devons rendre les articles un peu plus petits pour les aligner. Commençons d'abord par commenter les pistes et ce sont celles de la section principale. Les colonnes de modèle et les lignes de modèle définissent ensuite une taille pour les éléments. La classe Items, qui aura juste ici, nous allons d'abord enlever le rembourrage, puis ajouter une hauteur aux éléments individuels de 60 pixels. Recharger, nous pouvons voir par défaut les éléments sont définis un étirement sur la ligne. abord, nous allons examiner les éléments justifiés, que nous ajoutons au conteneur pour affecter tous les éléments enfants en tant que groupe sur l'axe des lignes. Beaucoup d'entre eux seront déjà familiers, tels que fin à placer les éléments à la fin de la ligne et aussi commencer. Passez à la section principale, qui est un conteneur pour ces éléments de grille. Juste ici, nous pouvons ajouter, justifier des éléments et les mettre à la fin, rafraîchir. Maintenant, tous les éléments sont poussés à la fin de la ligne. Nous avons aussi commencé et vous pouvez probablement deviner ce que cela fait aussi, cela déplace tout au début. Rappelez-vous le deuxième élément qui est utilisé ici, si nous faisons défiler vers le bas, a plus de texte. Par conséquent, il remplit plus l'espace disponible. Nous pouvons rétablir cela pour tous les articles se déplacent de la même manière. Renommons cet élément deux. Voilà, tous les éléments sont maintenant égaux. La valeur par défaut est stretch, select replace, start by stretch. Combien vous obtenez le même effet que vous avez commencé avec, nous aurons aussi centré. Cela remplacera tous les éléments au centre de la ligne avec la largeur étant déterminée par le contenu à l'intérieur. Nous avons également la possibilité de ligne de base si nous alignons le texte. Ensuite, nous pouvons également utiliser des éléments d'alignement. Cela s'applique également au conteneur parent, affectera les éléments le long de la colonne cette fois plutôt que la ligne. Pour dire cela, nous avons besoin d'un peu plus de hauteur pour travailler. À l'intérieur de la section principale, faisons le principal un peu plus haut. La hauteur de 1200 pixels, puis nous pouvons définir les éléments d'alignement. Commençons par centrer sur le navigateur, actualiser. Maintenant, nous aurons une section principale plus grande et tous les éléments sont alignés au centre. Nous pouvons voir en haut que nous avons un écart égal en haut ici et aussi la section inférieure aussi. Je ne vais pas passer par toutes ces options parce que nous pouvons utiliser les mêmes valeurs que nous venons de regarder et toutes fonctionnent de la même manière, mais cette fois sur l'axe opposé. Les deux propriétés suivantes que nous appliquons aux éléments enfants pour les contrôler individuellement. Réintroduisons notre classe d'article 1. Cela peut être n'importe lequel des éléments. Ajoutons simplement ceci et puis nous pouvons contrôler ces un élément individuel. Ensuite, sauvegardez dans la section principale, allez commenter, justifier les éléments, et aussi aligner les éléments pour qu'ils n'interfèrent pas. Maintenant, nous pouvons revenir à l'élément un et ensuite nous pouvons aligner l'élément individuel, mais cette fois nous utilisons se justifier. Commençons par la fin, puis sur le navigateur, actualisez et parce que cela fonctionne également sur la ligne, cela pousse cet élément bleu à la fin. En fait, je pense que c'est un peu foiré avec ces colonnes de grille. C' est maintenant que nous avons tous ces éléments, définissez l'étirement, puis cet élément individuel à la fin de la ligne. Le centre fera également comme prévu et déplacera cet élément au milieu de la ligne. Changements pour être centre, et n'oubliez pas que nous aurons toutes les mêmes propriétés disponibles que nous venons de chercher. Enregistrer, puis actualiser et c'est notre article maintenant au centre de cette ligne. Si l'un doit être centré sur la colonne plutôt que sur la ligne. Nous avons aussi align-self. Donnons cela un coup d'envoi et définissons également ceci pour être le centre. Maintenant, cela est centré sur la ligne et la colonne. Utiliser à la fois justify-self et align-self ensemble est un moyen vraiment facile de centrer un élément à la fois verticalement et horizontalement. Cela était beaucoup plus complexe avant grille et flexbox. Allons de l'avant et essayons un de plus , alignez-vous, mettez-le à la fin. Jetez un oeil à cela et maintenant l'article est poussé vers le bas. Nous pouvons voir que nous avons beaucoup d'options utiles lors de l'utilisation de la grille, ce qui provoque à peu près tout type de mise en page dont nous aurons besoin. 21. Il est temps de s'entraîner : mise en page de l'outil de recherche de morceaux: Plus tard dans ce cours, nous construisons cette application, où l'utilisateur peut rechercher un artiste ou une chanson et les afficher sous forme de grille. Par exemple, si nous tapons un artiste à l'intérieur ici, juste comme ceci, puis appuyez sur « Rechercher » va alors le présenter avec une liste de chansons. Nous aurions également un lecteur audio pour jouer un aperçu de ceux-ci. Nous allons construire cela plus tard dans la section API. Nous avons l'illustration de l'album, l'artiste, titre de la chanson et ce lecteur de musique en bas, que nous jouerons les 29 premières secondes. Toutes ces informations musicales seront fournies en se connectant à iTunes à l'aide d'une API. Si vous n'êtes pas encore sûr de ce qu'est une API, ne vous inquiétez pas à ce sujet. Nous couvrirons tout ce que vous devez savoir plus tard. Mais nous allons commencer sur cette application en créant le HTML et CSS dont nous avons besoin inclure la mise en page de grille CSS. Ensuite, nous pouvons demander la fonctionnalité dans une section ultérieure. Nous allons le faire un peu différemment des exercices de surpratique. Je vais passer par cette configuration du projet et aussi le code HTML avec [inaudible], c'est ainsi que nous avons le même HTML. Ce qui signifie que nous pouvons faire les mêmes choses quand nous ajoutons le JavaScript plus tard, donc il n'y a pas de confusion. Ensuite, je vous laisserai aller de l'avant et terminer les projets CSS par vous-même pour vous donner une pratique supplémentaire, en appliquant dans les propriétés de la grille. Commençons par créer le dossier du projet. Fermons ceci, puis créons un dossier de projet. Encore une fois, vous pouvez l'ajouter n'importe où. Je veux appeler le mien, le Song Finder ouvre ça dans l'éditeur de texte. Je vais faire glisser ce dossier de projet là-dedans. Ensuite, nous pouvons aller de l'avant et créer un nouveau fichier appelé le index.html. Pour commencer, ajoutons la structure HTML. Je vais utiliser les cinq raccourcis HTML puis appuyez sur « Tab » pour rainurer cette structure. Titre du document, de Song Finder. Puis jusqu'à la section du corps. Commençons par la zone d'en-tête, puis attribuons le titre dans h1 de Song Finder. Ouvrons cela dans le navigateur et vérifions que tout fonctionne bien. On y va, il y a notre titre de chanson dans la page d'index. Ensuite, nous avons besoin d'une zone d'entrée pour taper le nom de la chanson de l'artiste. Commençons par une étiquette, et appelons ceci l'entrée de recherche. Ensuite, le texte de la recherche de votre artiste préféré, puis fermez cette étiquette à la fin. Ici, nous pouvons également ajouter notre entrée, avec le type de texte. Ensuite, l'id qui correspond à cette entrée de recherche. Ensuite, après cela, nous avons besoin d'un bouton. Ce sera le bouton qui va de l'avant et complète notre recherche. Il suffit d'ajouter un simple bouton là-dedans. Ensuite, une ligne horizontale tout en bas juste pour couper ces en-têtes. Rechargez et voyez à quoi cela ressemble. C' est notre étiquette ou la zone de texte et le bouton, défilant en dessous de cette section d'en-tête. Créons la section principale. Ce sera la zone où toutes nos chansons apparaissent. Pour l'instant, donnons à ceci un identifiant de chansons. Ensuite, à l'intérieur ici, nous pouvons ajouter un article. Cet article va être le wrapper pour chacune des chansons individuelles. Chaque chanson a besoin d'une image. Pour l'instant, je vais juste ajouter des données fictives ou des exemples juste pour voir à quoi cela va ressembler à l'écran. Nous pouvons aller de l'avant et styliser cela avec le CSS. Tous ces textes et images seront remplacés plus tard par des données extraites d'iTunes. Nous pouvons voir cette image, je vais ajouter une largeur de 100 pixels, une hauteur de 100 pixels aussi. Ensuite, ajoutez une propriété de style juste pour que nous puissions voir cette image, fond de bleu. Maintenant, nous devrions voir un carré bleu sur l'écran. Ensuite, nous pouvons ajouter les balises p. Ça va être pour notre nom d'artiste. N' importe quel artiste et chanson est bien, alors il suffit d'ajouter n'importe quoi à l'intérieur ici. Ensuite, un deuxième ensemble d'éléments p pour le nom de la chanson. Enfin, nous allons regarder un nouvel élément que nous n'avons pas encore vu, et c'est l'élément audio HTML5. Cela nous permettra de jouer notre musique à l'intérieur du navigateur. Il a besoin d'un attribut source que vous pouvez laisser vide pour l'instant. Aussi le texte des contrôles, qui nous donnera quelques contrôles avec lesquels travailler, comme notre jeu, qui se transforme également en pause, la minuterie, et aussi la barre de progression. Maintenant, copions cet article et collez-le afin que nous ayons six d'entre eux. Donc deux, trois, quatre, cinq et six, puis sauvegardez et rechargez. Maintenant, j'ai six éléments différents à l'écran. Rappelez-vous ce HTML, est juste un texte d'espace réservé dans les images. Toutes ces données seront extraites ultérieurement de notre API. Pour l'instant, je vais vous laisser avec vous pour créer un lien vers une feuille de style externe, appliquer un style et aussi une mise en page de grille aux chansons. n'y a pas de bonne ou mauvaise façon de le faire, juste style comme vous le souhaitez. Mais je recommanderais au moins d'appliquer la grille. Ça n'a pas besoin d'être quelque chose de complexe. Juste une grille simple avec des colonnes libres et un espace de grille ira bien. Bonne chance. Je vous verrai dans la section suivante. 22. Qu'est-ce que Bootstrap ?: Bienvenue dans cette toute nouvelle section. Ici, nous allons jeter un oeil à l'un des frameworks les plus populaires pour la construction de sites Web, qui est appelé Bootstrap. Bootstrap Crony, à la dernière version de la version 4 est open source et libre à utiliser, est une bibliothèque pour HTML, CSS, et aussi JavaScript, que nous n'avons pas encore regardé mais ne vous inquiétez pas pour le moment. Vous pouvez le trouver sur getbootstrap.com. Certains des composants que nous utiliserons dans Bootstrap, comme un carrousel, nécessitent JavaScript pour fonctionner. Mais nous n'avons pas besoin de connaître de JavaScript à ce stade pour les utiliser. Bootstrap nous permet de commencer rapidement des projets de construction, et nous permet également de profiter de nombreux composants préconstruits, tels que des barres de navigation, carousels d' images et des formes, pour n'en nommer que quelques-uns. Commencer est aussi très facile. Nous pouvons simplement ajouter Bootstrap à notre projet comme n'importe quel autre fichier CSS, et commencer à écrire notre site Web comme d'habitude. Nous pouvons alors utiliser un composant pré-construit ou écrire notre propre HTML comme d'habitude, puis profiter des classes CSS Bootstrap sont fournies pour nous donner un style de base sur lequel construire. Si nous allons de l'avant et ouvrons la documentation de la barre de navigation, il y a beaucoup à passer, et nous allons en couvrir beaucoup pour cette section. Tout d'abord, je vais me diriger vers les composants sur le côté gauche et cliquer dessus. A l'intérieur, nous pouvons voir tous les différents outils de composants disponibles. Par exemple, si nous voulions une barre de navigation, nous cliquons sur la section de la barre de navigation et nous recevons plus d'informations sur la façon de l'utiliser. Nous obtenons également beaucoup d'exemples de code, ainsi que la démonstration. Si nous voulions utiliser cette barre de navigation dans notre projet, nous pourrions copier ce code ci-dessous. C' est toute la section ici qui produit cette barre de navigation. Il y a généralement quelques exemples plus différents avec une mise en page différente aussi, et vous pouvez voir tous ces exemples lorsque nous faisons défiler vers le bas. Il y a aussi quelques formes. Cliquez sur les éléments de formulaire sur la gauche, et exactement la même chose qu'avant. Nous allons ensuite prendre une vue de beaucoup d'exemples différents. Tout cela tire parti des éléments HTML standard, tels que les entrées, les sélections et les zones de texte. Mais Bootstrap fournit ensuite quelques CSS pour nous à utiliser en ajoutant les classes Bootstrap, telles que form-group et form-control, comme nous pouvons le voir ici. Nous allons également examiner de plus près certains de ces composants tout au long de ce projet, tels que les carousels rotatifs, et utiliser également des modaux. Il est également intéressant de noter que tous ces styles que Bootstrap fournit n'est qu'un point de départ de base. Nous sommes libres d'aller de l'avant et de changer l'un des styles avec des CSS personnalisés. si vous n'êtes toujours pas sûr de ce qu'est Bootstrap, tout ce que vous devez comprendre pour l'instant c'est que nous pouvons profiter du CSS prédéfini de Bootstrap non seulement pour rendre notre HTML beaucoup mieux, mais aussi pour appliquer certaines bonnes pratiques, et maintenez notre style plus cohérent sur les différents navigateurs. Maintenant, nous avons un peu d'expérience dans Bootstrap. Passons maintenant à la configuration d'un projet Bootstrap. 23. Ce que nous allons construire: Au fur et à mesure de cette section, nous allons construire ce site Web Gourmet Burgers. Ce projet nous permettra d'apprendre comment fonctionne bootstrap et comment nous pouvons utiliser différents composants, ainsi que différentes classes d'utilité et aussi comment fonctionne le système de grille Bootstrap. Nous commençons en haut avec notre section d'en-tête, qui est une barre de navigation, y compris le titre du site, divers liens, et aussi une boîte de recherche dans le coin. faisant défiler vers le bas, vous pouvez également voir que nous avons un carrousel rotatif. Chaque image différente a sa propre légende. Nous utiliserons également des contrôles pour nous permettre de faire défiler vers la gauche et d'écrire à travers ces images. Ce carrousel rotatif est l'un des composants Bootstrap, tout comme la barre de navigation en haut. Je suis peut-être regarder diverses formes de ceux-ci et comment toutes les classes fonctionnent pendant ce projet. Si nous faisons défiler plus bas, nous avons alors des informations sur nos sites de hamburgers. Cela nous apprendra comment utiliser les conteneurs d'amorçage, les lignes et le système de grille pour aligner et organiser nos éléments sur la page. Ce site Web sera également pleinement réactif donc pour aller de l'avant et rétrécir, le navigateur. Nous verrons un changement de mise en page pour différentes tailles d'écran, y compris notre barre de navigation qui tend à une liste déroulante pour les plus petits écrans. Faisons cette taille une fois de plus. Alors, si nous allons encore plus loin, nous avons une section d'inscription. Si nous cliquons sur ce sera alors introduit à un composants modaux, qui est fondamentalement une pop-up où nous pouvons ajouter quelques informations pour l'utilisateur. Dans ce cas, nous allons jeter un oeil à la façon dont nous pouvons utiliser composants de formulaire Bootstrap pour rendre nos formulaires vraiment agréables. Ici, nous aurons un nom, un e-mail, et aussi une zone de texte, ainsi que quelques cases à cocher en bas. Puis enfin, nous terminons avec une zone de pied de page vers le bas. À la fin de cette section, vous aurez également ce site Web entièrement terminé et aussi quelques connaissances sur l'utilisation des composants bootstrap, des utilitaires bootstrap, ainsi que sur la façon dont nous pouvons utiliser des conteneurs, lignes et des colonnes pour créer un système de grille. Avec la connaissance de la façon de remplacer toutes les classes d'amorçage pour rendre cela entièrement personnalisé. Ok, bien, alors j'espère que tu attends ça avec impatience. Passons maintenant à la mise en route de notre projet. 24. Création d'un projet Bootstrap: Démarrer un projet en utilisant Bootstrap est vraiment facile. Pour commencer, si nous allons sur getbootstrap.com, qui est une page d'accueil Bootstrap, puis descendre à la section « Démarrer » ici. Rappelez-vous cependant que des sites Web comme celui-ci peuvent souvent changer mise en page, donc si le vôtre semble un peu différent lorsque vous visitez, un coup d'œil pour la section Installation ou Mise en route. Il y a plusieurs façons d'aller de l'avant. Nous pouvons télécharger le dossier de démarrage complet en cliquant sur le grand bouton « Télécharger » dans le coin supérieur. C' est génial, mais il comprend beaucoup de choses dont nous n'avons pas besoin à ce stade. Nous pouvons également passer à la section Télécharger sur la gauche. Ensuite, si nous faisons défiler vers le bas, nous pouvons aller de l'avant et télécharger les fichiers CSS et JavaScript. Ensuite, déposez-les dans notre dossier de projet. Tout le chemin que je vais faire dans ce projet est en utilisant un CDN. Revenons à l'Introduction, puis faites défiler vers le bas. Un CDN est un réseau de diffusion de contenu. Cela signifie essentiellement, plutôt que d'ajouter les fichiers CSS et JavaScript dans notre projet, puis de les lier dans notre HTML. Au lieu de cela, ces fichiers sont hébergés sur un serveur externe, suit pour lier à. Ici, nous pouvons voir que nous avons nos sections CSS et JavaScript. Nous pouvons copier ce lien pour le CSS. Nous avons également quelques liens JavaScript ici, où nous pouvons lier nos tags de script au CDN. Si nous faisons défiler encore plus loin, nous avons un modèle de démarrage, et c'est un endroit vraiment pratique pour commencer. Cela a toute la structure HTML de base dont nous avons besoin, ainsi que tous les liens vers le CSS requis et aussi le JavaScript aussi. Commençons par copier ce modèle de démarrage avec le bouton « Copier » dans le coin supérieur. Attrapons ça. Ensuite, si nous allons sur le bureau et créer un nouveau dossier appelé Gourmet-Burgers. Ouvrez Visual Studio Code, puis nous pouvons faire glisser dans ce dossier de projet pour commencer. Comme toujours, nous créons notre index.html, mais cette fois nous avons maintenant un démarreur bootstrap, sorte que nous pouvons coller dans la structure squelette. Donnez ça une sauvegarde. Ensuite, nous pouvons aller de l'avant et ouvrir cela dans le navigateur. Double-cliquez sur le index.html, affichez le navigateur, et il y a notre bonjour, exemple du monde. Tout fonctionne bien. Retour au projet, nous pouvons maintenant commencer à ajouter nos propres personnalisations. Nous pouvons changer le titre pour être Gourmet Burgers, puis enregistrer. Notre changement est maintenant reflété dans le navigateur. Ce texte de hello world peut ressembler à un élément h1 standard, mais il a un petit style Bootstrap par défaut comme tous les autres éléments auront aussi. Nous pouvons voir cela si nous commandons le lien CSS dans la section tête. Le CSS Bootstrap est juste ici. Si nous commandons cette ligne et puis actualisons, nous voyons que les styles par défaut Bootstrap ont maintenant été supprimés. Supprimons simplement ces commandes et ajoutez-le à nouveau. Pour voir ce qui se passe dans les coulisses, nous pouvons jeter un oeil au CSS fourni par Bootstrap. Si nous copions ce lien à l'intérieur de la droite href jusqu'à la fin, copions cela, puis sur le navigateur, nous pouvons coller cela comme une URL normale. Il s'agit de la feuille de style qui est liée à cette URL. C' est un peu difficile à lire car il est actuellement minifié. Cela signifie que tout l'espace blanc a été supprimé pour garder la taille du fichier plus petite. Pour voir cela encore mieux, si nous sélectionnons tout puis copions. Je vais chercher CodeBeautify. C' est ce dont nous avons besoin, codebeautify.org, alors sélectionnez ceci. Celui dont nous avons besoin est le CSS, alors sélectionnez ce lien ici. Sur le côté gauche, nous pouvons ajouter l'entrée CSS. Collez dans notre code Bootstrap, puis cliquez sur « Beautify » au milieu. Sur le côté droit, nous pouvons voir les sorties. Nous pouvons en faire la taille du plein écran. C' est tout le CSS que Bootstrap fournit. Il semble maintenant formaté d'une manière qui semble familière. Si vous faites défiler, il y en a beaucoup. Si nous appuyons sur « Command » ou « Ctrl » « F », cela va chercher à travers le code. Cherchons le h1 et appuyez sur Entrée, alors nous pouvons voir tous les CSS qui s'appliquent à ces éléments h1. D' abord, nous avons h1 jusqu'à h6, qui s'applique au bas de la marge par défaut, une famille de polices d'hérits. Nous avons également un poids de police, une hauteur de ligne, et hérite également de la couleur du texte. Jusqu'à la suivante. Nous pouvons également voir que la taille de la police est de 2,5 rem, c'est pourquoi lorsque nous enlevons les feuilles de style Bootstrap, le h1 est alors apparu plus petit. Nous pouvons également faire défiler et jeter un oeil à d'autres styles aussi, si nous le voulions, mais j'espère que vous aurez l'idée de ce qui se passe dans les coulisses. Nous allons également profiter de beaucoup de photos créées par la classe au fur et à mesure que nous construisons ces projets. Ce serait également le même qu'un fichier CSS si nous devions le télécharger et l'ajouter à notre dossier de projet. La dernière chose que je voudrais souligner est que même si tous ces styles sont parfaits à utiliser et à rendre notre projet meilleur, nous pouvons toujours remplacer l'un de ces styles de base avec nos propres feuilles de style. Nous le faisons en créant notre propre fichier CSS, tout comme nous l'avons fait dans les projets précédents et un lien vers lui dans la section tête ci-dessous ce lien bootstrap. Il est en fait encouragé d'ajouter ou de remplacer l'un de ces styles Bootstrap par défaut pour la simple raison que beaucoup de sites Web utilisent Bootstrap et nous ne voulons pas que tous les sites Web en ligne commencent à regarder le même. C' est une bonne idée d'utiliser Bootstrap cependant, pour construire rapidement des sites Web et des composants avec les meilleures pratiques, style cohérent sur différents navigateurs, et aussi une excellente base pour construire sur. Maintenant, nous avons notre configuration de projet. Ensuite, passons à comprendre comment fonctionne la grille Bootstrap. 25. La grille Bootstrap: Notre exemple Hello World est maintenant configuré. Dans cette vidéo, nous allons examiner probablement l'un des concepts les plus importants à comprendre lorsque vous travaillez avec bootstrap. C' est le système de grille d'amorçage. Les grilles en gros, lui permet de mettre les choses en place agréable et facile et utilise la boîte CSS flex sous le capot. Pour commencer, généralement la première chose que nous devons faire est de créer un conteneur pour notre contenu. Ceci est ajouté en tant que classe CSS de conteneur. Allons au projet et retirons d'abord le h1 de hello world, qui est juste ici. Nous pouvons ensuite ajouter notre div avec la classe de conteneur donc simplement créer un div, tout comme nous le ferions normalement. Cette fois, nous pouvons ajouter une classe bootstrap de conteneur. Les conteneurs sont nécessaires lorsque vous travaillez avec le système de grille d'amorçage car ils agissent comme un wrapper pour notre contenu. Leur utilisation nous permet également d'envoyer notre contenu à la fois horizontalement et verticalement. Imbriqué à l'intérieur, nous ajoutons un deuxième div, et celui-ci a une classe de ligne. A l'intérieur de l'ouverture à l'intérieur de la classe de ligne. Ces lignes agissent comme un wrapper pour la mise en page du contenu à l'aide de colonnes. grille Bootstrap est de 12 colonnes de large. Cela signifie que si nous voulons deux sections égales côte à côte dans la rangée, nous pourrions définir les deux à six colonnes de largeur chacune. Si nous voulions trois sections, chacune aurait besoin de quatre colonnes. Ajoutons notre premier div à l'intérieur de la ligne. Ça va avoir une classe de col-md-4. A l'intérieur d'ici, nous pouvons ajouter du texte avec les balises p d'un tiers de large. Comme la grille est de 12 colonnes de large, nous prenons quatre parties ici donc c'est un tiers de la largeur de la rangée. Si nous copions ensuite ceci dans et collé deux fois de plus. Assurez-vous également que cela est indenté correctement, juste comme ça. Maintenant, si nous obtenons qu'un sauvegardé et puis rafraîchir le navigateur, nous allons obtenir trois sections à l'écran, chacune avec un tiers de la largeur de la ligne. Pour mieux voir ces sections de grille, nous pouvons ajouter quelques classes d'arrière-plan qui sont également fournies par bootstrap. Après col-md-4, nous ne pouvons pas bg succès. Cela nous donne une couleur verte. Le second pourrait être bg primaire. C' est pour le bleu. Le troisième pourrait être bg secondaire et c'est une couleur grise. Cela nous montre maintenant l'effet du conteneur que nous avons ajouté. Le conteneur est une largeur fixe. Si nous avons simplement étiré le navigateur plus large ou plus petit, nous voyons que la largeur change avec différents points de rupture. Il y a aussi un conteneur pleine largeur disponible. Tout ce qu'il nous faut faire, c'est changer le récipient, être liquide. Cela couvrira toute la largeur de la page. Mais je vais m'en tenir au conteneur pour l'instant. Nous pouvons également avoir plusieurs lignes à l'intérieur de ce conteneur aussi. Si nous revenons à la classe de col-md-4, ce md représente des appareils de taille moyenne. Vous pouvez contrôler exactement combien de colonnes de large nous voulons le contenu pour différentes racines d'écran. Si nous revenons au site getbootstrap, qui est getboostrap.com, puis la documentation. Si nous descendons à la section de mise en page sur le côté gauche. Ensuite, en dessous, nous avons l'option pour la grille. Sélectionnez cette option. Si nous faisons défiler jusqu'à la table, qui est juste ici, nous voyons ici nous avons un préfixe de classe, et nous avons utilisé col-md pour les appareils de taille moyenne. Ce tableau montre qu'il y a une taille à laquelle chaque classe s'applique. Par exemple, petit est 540 pixels et grand 960. Nous pouvons ajouter autant de préfixes que nous le voulons. Par exemple, nous pourrions avoir une mise en page 12 colonnes de large sur de petits écrans, puis changer pour être six colonnes de large sur écrans moyens, puis descendre à quatre colonnes sur des appareils plus grands. Nous avons seulement les jeux de préfixes moyens, qui est 720 pixels et plus. Si nous réduisons le navigateur à moins de 720 à l'intérieur de notre page d'index, la largeur des quatre colonnes ne s'applique plus comme nous pouvons le voir ici. Nous pouvons changer cela en ajoutant col-sm. Plutôt que md le changer en sm, rafraîchir. Cela s'applique désormais aux petits écrans. Si nous voulions que cette section verte et bleue soient côte à côte, nous aurions besoin d'en définir six parties chacune. On pourrait aller de l'avant et le changer en col-sm-6. Ensuite, nos appareils moyens reviennent à quatre et aussi pour le second, nous pouvons ajouter col-sm-6. Ces deux premières sections, fois sur des appareils plus petits avec six colonnes large, puis changent avec quatre colonnes de large sur des périphériques moyens. Si nous sauvegardons, actualisons, ces deux sections sont maintenant six colonnes chacune et la section grise est la 12 colonnes par défaut. Si nous rendons cela plus large pour aller au-dessus des appareils moyens, cela changera à nouveau en quatre parties chacun parce que nous l'avons dit ici. Jetons maintenant un coup d'oeil à un scénario différent. Imaginez si nous changeons les deux petits divs pour être quatre colonnes donc, col-sm-4 et la même chose pour celui-ci aussi. Cela signifie que nous ne prenons pas la grille complète de 12 colonnes. Nous ne spécifions que huit parties pour les écrans plus petits, qui si nous sauvegardons et actualisons puis descendons sur le petit écran, cela laissera maintenant un espace à la fin de la ligne. Dans ce cas, nous pouvons déplacer le contenu en ajoutant un décalage. Nous pouvons ajouter ce décalage sur le côté gauche en poussant ces deux vers le milieu. Si nous faisons offset-sm, encore une fois cela ne s'appliquera que sur les petits appareils. Puis deux colonnes. Cela va maintenant pousser la ligne à travers de deux colonnes laissant la section verte et bleue au milieu. Si nous étirons le navigateur, cela s'appliquera également à toutes les tailles supérieures à deux. Maintenant, sur les appareils moyens, nous avons encore ces deux colonnes offset. Ceci est facilement résolu en réglant le décalage à zéro pour l'écran que nous voulons qu'il soit supprimé. Essayons de le supprimer des écrans de taille moyenne et au-dessus. Prenons le décalage md-0. Cela fera en sorte que le décalage s'il est retiré sur les appareils de taille moyenne et au-dessus. Si nous actualisons maintenant, le décalage est maintenant supprimé sur un périphérique moyen, les deux si nous réduisons cela vers le bas, il devrait toujours s'appliquer sur un petit écran. Nous pouvons simplifier encore plus les choses. Si nous voulons juste que tous les divs à l'intérieur d'une rangée soient égaux, nous pouvons simplement spécifier col. Plutôt que d'avoir tous ces avantages ici, si vous voulez garder les choses vraiment simples il suffit d'ajouter col. Même chose pour la deuxième section et aussi la troisième, obtenir que sauvé, recharger. Avec cela, toutes nos sections occuperont une quantité égale d'espace sur toutes les tailles d'écran. C' est ainsi que nous utilisons des colonnes avec le système de grille d'amorçage pour mettre en page nos articles. Maintenant, nous en savons plus sur la grille bootstrap. Passons maintenant à l'ajout de contenu à ce projet. 26. Ajouter des images et du texte: Depuis Bootstrap est juste HTML, CSS, et quelques JavaScript dans les coulisses. Ajouter du texte et des images est exactement la même chose que nous avons déjà appris. Commençons par configurer les trois sections pour être quatre colonnes, les périphériques moyens et au-dessus. Donc, changez l'appel pour être MD-4. On pourrait le faire pour les trois sections. Ajoutez MD-4 dans ces deux. Nous n'avons plus besoin de ces colonnes pour supprimer l'arrière-plan. Succès, Primaire et secondaire. Nous aurons le contenu cette fois aussi voir la différence entre les trois sections. Si nous retournons sur le site fini, que nous avons juste ici, nous construirons les images et tout le texte de ces trois sections. il s'agit de notre première section à quatre colonnes, notre deuxième et notre troisième, qui constitue la grille à 12 colonnes. J' ai inclus quelques images à télécharger. Si vous voulez utiliser la même chose que moi. Sinon, vous pouvez, bien sûr, aller de l' avant et choisir le vôtre si vous préférez. J' ai ces images enregistrées sur mon bureau. Je vais aller sur le dossier du projet et y ajouter. Voici mon dossier d'images. Donc je vais les traîner dans le projet gourmet-burgers. Avec ces maintenant dans le projet, nous pouvons maintenant travailler avec l'ajout de ceci à notre site Web. Donc, évidemment, l'index de notre HTML, nous allons travailler dans cette section conteneur. Tout d'abord, ce premier appel, MD-4, nous pouvons déplacer le texte, puis ajouter aux éléments d'image. Tout comme le HTML normal, nous ajoutons les attributs source. J' ai ajouté ces images à l'intérieur du dossier. Si nous ouvrons la barre latérale, puis les images, nous avons un carrousel et un carrousel 2 pour le curseur rotatif. Nous avons trois images différentes en bas ici, que nous allons utiliser pour les trois sections. Si nous fermons ceci, le premier que nous allons ajouter est ouvert. Ceci a l'extension point JPEG. L' ancien texte, que nous devrions toujours ajouter. Juste en dessous de cette image, nous pouvons alors aller de l'avant et ajouter quelques éléments normaux, tels que H2 pour le titre. Disons plus de 50 restaurants. Puis en dessous de cela quelques textes avec la balise P 2. Pour cela, nous ajoutons le texte de vous faire plaisir la prochaine fois que vous êtes dans la région. Vous pouvez le changer pour n'importe quel texte que vous préférez. Ça n'a pas vraiment d'importance. Maintenant, passez à nos projets, puis rechargez la page d'index. Vous pouvez voir que nous avons une image, nous aurons H2 et ensuite du texte. Cette image est vraiment grande pour le moment, mais nous allons corriger ça bientôt. Maintenant, à la section du milieu, nous pouvons également supprimer à nouveau ce texte, et le remplacer par une image. La source de l'image est le temps, est images/défi. jpg Le texte alternatif de l'image de défi mange-in. Maintenant, en dessous de l'image. Si nous regardons le site fini, c'est ce que nous cherchons maintenant. Le H2 du défi de fantaisie, puis le texte ci-dessous de pourquoi ne pas essayer l'un de nos fameux défis de consommation de hamburgers. En commençant par le H2, puis le texte ci-dessous avec les balises p. Donc les défis de manger des hamburgers C' est nos deux premiers maintenant en place. Ensuite, le troisième, supprimez le texte, et ajoutez une image pour ce troisième. La source cette fois est sign.jpg. Dans le dossier images, sign.jpg, l'ancien texte ou image de réputation. C' est la première section qui est sur le côté droit, qui est établi en 2003. Ensuite, un peu de texte ci-dessous. Le H2, ce sera tous les textes de votre choix. Plus de 15 ans de haute qualité. Une fois que vous avez inclus cela, passons au navigateur, et nous verrons probablement un peu de désordre, pour être honnête si nous rafraîchissons. Il y a donc trois images différentes, et les trois sections, parce que les images sont beaucoup trop grandes pour tenir en place. Pour résoudre ce problème, nous pouvons ajouter notre propre fichier CSS pour remplacer l'un des paramètres par défaut Bootstrap. Donc Courtney, si nous nous souvenons dans la section tête, nous avons le CSS de base Bootstrap. Mais ce n'est qu'un point de départ pour que nous puissions travailler. Comme nous l'avons dit plus tôt, il est encouragé à ajouter nos propres feuilles de style. Si nous passons à notre dossier de projet et puis nous pouvons ajouter un nouveau fichier. Donc styles.css pour les styles personnalisés. Maintenant, je vais cibler l'appel MD-4. Ensuite, toutes les images qui suivent. Nous pourrions bien sûr ajouter la classe personnalisée à cela si nous le voulions. Mais restons-en avec les cours que nous avons. Donc la largeur aura 140 pixels pour les garder assez petits et une hauteur de 140 pixels aussi. Parce que rappelez-vous ces juste destinés à être des images de taille miniature. Bien sûr, nous devons lier cela dans la page d'index. Donc, notre CSS personnalisé va toujours droit au bas. Nous pouvons donc remplacer l'un de ces styles par défaut pour les deux. Donc, la relation de lien est feuille de style, le href. C' est donc le même niveau que la page d'index. Cela peut simplement aller dans le href comme styles.css, puis fermer ceci. Une fois que vous avez fait cela, voyons à quoi cela ressemble dans le navigateur. Bien. Maintenant, les trois colonnes sont maintenant côte à côte avec les petites images, page aussi et aussi le texte. Le prochain contenu à ajouter à cette section, si nous allons à la version finale ici, est ces boutons qui sont en bas. Ces obligations sont assez simples à ajouter. Ces balises d'ancrage juste, dont certaines classes Bootstrap pour les rendre plus agréables. Retour à l'éditeur de texte, puis à notre première section, juste après ces balises P ici. Je vais ajouter quelques balises P et ensuite le lien à l'intérieur. Ce lien va avoir des classes Bootstrap. Donc ça va être btn. Puis btn secondaire. Cela ira comme une couleur grise que nous avons vu auparavant. Ces primaires, secondaires est similaire à ce que nous utilisons pour les couleurs d'arrière-plan lorsque nous regardons les grilles dans la dernière vidéo. Ce sont des styles par défaut que Bootstrap fournit pour différents éléments. Dans ce cas, secondaire est la couleur grise que nous pouvons voir juste ici. Plus tard, nous utilisons une couleur différente pour cette section verte. Retour à notre bouton, btn et btn et secondaire. Alors nous avons besoin d'un lien. Donc, le href. Nous pouvons simplement laisser cela vide pour l'instant car nous n'avons pas de pages vers lesquelles lier. Nous allons ajouter une ligne de bouton. Ensuite, le texte à l'intérieur des détails de la vue. Après cela, nous allons ajouter cette flèche droite, qui est celle-ci juste ici. Ceci est fait avec une entité HTML. N' oubliez pas que les entités HTML commencent par des esperluettes. Le code d'entité pour les flèches est raquo, et cela doit se terminer par un point-virgule. Sauvegardez ça. Ensuite, il y a notre bouton avec les flèches sur le côté droit. Je vais copier ce bouton et le coller dans les deux autres sections. Copiez donc ce lien que nous venons d'ajouter. Ensuite, nous ne pouvons pas jours à la fin de notre deuxième domaine. Alors le troisième domaine, juste en dessous de notre réputation ne se trouve pas. Ajoutez cette fin trois fois. Maintenant, c'est dans nos sections d'arborescence sur l'écran. Ces images ont maintenant l'air beaucoup mieux. Maintenant, ils rentrent à l'intérieur des conteneurs. Mais nous pouvons encore aller encore plus loin avec certaines classes Bootstrap. Pour rendre les coins arrondis, w e peut le faire avec une classe de cercle arrondi, que Bootstrap fournit. La première section ici pour les restaurants à l'intérieur de l'image à la classe de cercle arrondi. La même chose pour la deuxième image. Puis la troisième et dernière image. Voyons voir à quoi ça ressemble. Il semble qu'il y ait un problème au milieu, nous devrions ajouter un tiret à l'intérieur de là. Ok, bien. Ainsi, ces coins arrondis sont ajoutés avec le rayon de bordure CSS. Bootstrap nous permet d'ajouter ce rayon en haut, à droite, en bas à gauche ou en cercle, tout comme nous l'utilisons ici. Nous pouvons voir ces classes si nous allons à getbootstrap.com. Ensuite, si nous passons à la documentation, et si nous faisons défiler vers le bas jusqu'aux utilitaires, ainsi que les bordures, nous pouvons ajouter des couleurs plus audacieuses. C' est celui que nous venons d'utiliser, qui est un rayon de frontière. Nous utilisons le cercle arrondi, que nous voyons ici. Enfin, nous pouvons également aligner ce nouveau contenu au centre de chaque section. Donc, il semble plus aligné comme ceux-ci ici. Nous pouvons le faire en ajoutant une classe de centre de texte au conteneur. Donc, juste après le conteneur ajouter la classe de centre technique sur le navigateur. Cela aligne désormais tout le contenu sur chaque section. Super, donc maintenant tout le contenu est centré. Je vais laisser cette vidéo là et passer à la recherche. Barres de navigation Bootstrap. 27. Barres de navigation Bootstrap: L' un des composants vraiment utiles, Bootstrap fournit est Responsive Navbars. Si nous passons à la documentation dans la section du composant, si nous faisons défiler vers le bas jusqu'à l'onglet Navbar, nous pouvons passer par quelques exemples de ce que Bootstrap fournit. Si nous faisons défiler vers le bas, nous pouvons trouver plus d'informations sur le fonctionnement de ces programmes, les classes que nous devons appliquer, ou nous pourrions faire défiler vers le bas jusqu'à quelques bons exemples. Ce sera un modèle semblable à ce que nous allons construire. Il va avoir le titre de notre site dans le coin supérieur, puis quelques liens divers. Nous pouvons même avoir une liste déroulante si nous le voulons, une boîte de recherche, et un bouton de recherche, cela sera également réactif. Donc, si nous devions réduire le navigateur vers le bas, cela se transformerait en un joli menu déroulant comme celui-ci. Mettons-nous à travailler dans notre page d'index. À l'intérieur de notre index.html, donnons à cela un peu plus d'espace. Pour commencer en haut de la section du corps, nous allons commencer tout comme une section d'en-tête normale. Utilisons les balises d'en-tête HTML et puis à l'intérieur, nous pouvons continuer à construire un nav, à l'intérieur de ce nav, nous allons ajouter notre balise a et ce sera pour le titre de notre site. Nous pouvons ajouter notre Gourmet Burgers title initier ici, et nous pouvons simplement garder le href comme un attribut vide pour l'instant. C' est très bien. Il y a le titre de notre site à l'intérieur d'ici. Ensuite, juste après que nous allons créer div, qui serait conteneur suivre des liens. Ajoutez-les simplement pour l'instant, nous allons aller de l'avant et ajouter quelques classes Bootstrap bientôt. Mais pour l'instant, nous voulons juste vous montrer la structure. A l'intérieur de cette div, nous avons une liste non ordonnée et cela va être pour nos articles de liste. Nous allons avoir chez nous et aussi des endroits. Ajoutons les balises li et ceux-ci vont être des liens aussi, donc imbriquez un lien à l'intérieur d'ici. Le premier est la maison, puis un deuxième élément de liste, encore une fois avec la balise a imbriquée à l'intérieur, et ce sera pour les emplacements. Il y a nos liens, notre liste non ordonnée. Ensuite, après cette liste non ordonnée, nous allons ajouter un formulaire. Ce sera pour la boîte de recherche, donc le formulaire juste ici. Assurez-vous que cela est toujours dans cette div environnante. Donc juste pour cette balise div de fermeture. Ensuite, nous pouvons aller de l'avant et ajouter notre contribution au formulaire et ensuite je le mettrai juste après. Ce sera le bouton avec le type de soumission, puis fermez ceci avec le texte de la recherche. Sauvegardons cela et ouvrons ensuite cela dans le navigateur. Il y a notre section d'en-tête de recherche standard, le titre, les liens, puis la recherche ci-dessous. Maintenant, tout ce que nous devons faire est d'aller de l'avant et d'ajouter des classes Bootstrap pour rendre ce look plus agréable et aussi être réactif. Commençons tout en haut, l'intérieur de la section navigation. Ajoutons la classe. Le premier dont nous avons besoin est navbar, car c'est une barre de navigation, puis aussi une deuxième classe de navbar-expand-md. Cela fera étendre la barre de navigation sur les appareils de taille moyenne. Puis navbar-dark, c'est pour le thème plus sombre. Ensuite, le fixed-top, donc il est fixé en haut de la page. Puis bg-dark. Donnons cette sauvegarde et passons au navigateur. Si nous rechargeons, nous pouvons instantanément voir une couleur de fond sombre. Mais allons dans les outils de développement et voyons ce que chacune de ces classes fait réellement dans la pratique. Faisons un peu plus d'espace et inspectons notre navigation. Ce fixed-top était l'une des choses que nous avons ajoutées. Cela ajoute la position à fixer et il le définit également en haut de la page. Nous avons un fond sombre, qui définit cette couleur de fond sombre que nous voyons ici. Rappelez-vous que nous avons également ajouté navbar-expand-md. Cela démarre à l'intérieur de la requête multimédia avec la largeur minimale de 760 pixels, tout comme nous l'avons regardé dans les premières vidéos. Revenons à notre code, et commençons par les balises a. Nous avons le href vide. Allons de l'avant et ajoutons une nouvelle classe à ici aussi, et celui-ci peut être la marque navbar. Rappelez-vous, ce sont toutes les classes fournies par bootstrap. Enregistrer et puis rafraîchir, et maintenant nous avons ce lien de couleur blanche. Rappelez-vous d'avant nous avons ajouté un conteneur div environnant qui entoure toute cette section ici. C' est une section qui s'effondre sur les plus petits greens. Par conséquent, bootstrap nous fournit quelques classes que nous pouvons ajouter appelé collapsus et aussi navbar-collapsus. Cela gardera la section d'effondrement belle apparence. Jusqu' à la liste non ordonnée, nous avons la classe de navbar-nav, puis une seconde, qui est mr-auto. MR-Auto applique une marge automatique à droite de cette liste non ordonnée. Cela pousse cette barre de recherche vers le côté droit. Si nous actualisons, cela applique désormais une marge automatique à droite de cette liste non ordonnée. Garder cette section sur le côté droit. Nous parlerons plus en détail de la marge et du rembourrage plus loin dans cette section. Mais pour l'instant, passons aux éléments de la liste et ajoutons nos classes ici. Le premier est nav-item, et ensuite nous pouvons faire la même chose pour le deuxième élément de liste, la même classe de nav-item. Ensuite, il y a aussi quelques liens. Nous ajoutons la classe pour le lien de nav-link, puis la seconde, qui est juste ici. C' est aussi nav-link aussi. Enregistrer et aller dans le navigateur et maintenant nous avons un peu plus d'espacement et aussi quelques couleurs différentes. Encore une fois, nous pouvons aller dans les outils de développement et voir ce que chacune de ces classes fait individuellement. Vers le lien Nav-link. Nous avons ce navbar-dark et aussi le navbar-link, qui vous donne cette couleur. Nous avons quelques requêtes de médias qui appliquent un rembourrage de différentes tailles. La même chose avec ce nav-link que nous avons ajouté. Il a un type d'affichage de bloc et aussi un peu de rembourrage. Cela fera en sorte que notre barre de navigation soit bien alignée, avec un peu d'espacement autour. Si nous réduisons le navigateur, il se ferme. Nous ne voyons pas encore le bouton dans le coin supérieur droit sur les écrans plus petits comme nous l'avons vu dans la démo Bootstrap dans la documentation. Pour cela, nous devons ajouter un bouton à notre code. Juste en dessous du titre Gourmet Burgers et juste avant cette div, qui est une section d'effondrement, nous allons ajouter un bouton. Puis à l'intérieur de ce bouton, cela va prendre dans une classe de navbar-toggler. Cela va avoir le type de bouton, puis la partie suivante sera pour le bascule de données et nous définissons ceci pour être effondrée. Cela rend le bouton un bouton à bascule, qui développe et réduit le contenu de l'élément nav. Les autres éléments auxquels nous faisons référence est cette div ci-dessous avec la classe d'effondrement et navbar-collapsus. Pour lier ce bouton à cette div, nous devons ajouter un identifiant pour commencer et nous pouvons l'appeler tout ce que nous voulons, mais je vais appeler cela le NavBarCollapte. Maintenant, cela a une référence unique. Nous pouvons aller de l'avant sur notre bouton et ajouter une cible de données et lui donner le même nom. Donc, je vais ajouter un hachage parce que c'est un identifiant et puis nous avons NavBarCollapte. Maintenant, allons dans le navigateur et puis actualisons. Maintenant, si nous réduisons le navigateur vers le bas, nous pouvons voir que nous avons le bouton dans le coin supérieur droit, mais il ne se distingue pas trop pour le moment. Alors jetons un coup d'oeil. En fait, à l'intérieur des boutons, nous avons besoin d'ajouter l'icône pour le bouton. Nous le faisons en utilisant les éléments span, puis ajoutons quelques classes de navbar, et c'est navbar-toggler-icon. Sauvegardez ça, puis réduisez le navigateur vers le bas, et nous y allons. Il s'agit des éléments de span avec l'icône à l'intérieur. Nous pouvons maintenant voir notre bouton, et cela descend également parce qu'il est lié à la section div séparée. Le div auquel il est lié est celui-ci ici avec l'id de NavBarCollapte, qui introduira la cible de données juste ici. C' est maintenant la section complète et nous aurons une belle barre de navigation en appliquant simplement quelques classes Bootstrap et assistants. Dans la prochaine vidéo, nous allons ajouter un carrousel d'image à cette page d'accueil. 28. Carrousels d'amorçage: Tout comme les barres de navigation que nous avons vues au début de la dernière vidéo dans la documentation de bootstrap. De retour dans la section des composants sur le côté gauche, nous avons également un lien vers les carousels aussi. Cliquez sur le lien du carrousel ici. Puis encore une fois, si nous faisons défiler vers le bas, nous pouvons voir divers exemples du code. Voici donc un exemple simple ici, qui est juste le code ci-dessous. Si nous faisons défiler vers le bas jusqu'à la version qui dit que nous avons des légendes. Voici donc des indicateurs ici, qui seront ajoutés prochainement. Mais nous voulons cette version ici avec les légendes, résout un peu de texte sur chaque image. Cela va être semblable à celui que nous allons construire. Donc, nous comment ces légendes, et aussi ces indicateurs pour cliquer entre les différentes diapositives. Alors passons à notre page d'index. Ensuite, en haut de ces éléments d'en-tête, faisons de la place pour notre carrousel. Donc, d'abord, ajoutons une balise div environnante. Ensuite, à l'intérieur, nous allons ajouter des classes Bootstrap. Le premier sera de carrousel, puis le second de diapositive. Nous ajoutons également des attributs de trajet de données. Ça va être égal à Carrousel. Les attributs de parcours de données du carrousel indiquent à Bootstrap lire automatiquement le carrousel une fois la page chargée. À l'intérieur, nous allons ajouter une deuxième div imbriquée au milieu. Ça va avoir la classe de carousel-intérieur. Cette classe de carousel-intérieur va agir comme un wrapper pour nos diapositives ou images, que nous allons ajouter maintenant, Ajoutons notre premier div pour notre première diapositive. Ça va avoir une classe, et c'est un article de carrousel. Ensuite, à l'intérieur, nous pouvons ajouter notre image que nous voulons afficher à l'intérieur du carrousel. L' image a également une classe deux, et ce sera w-100. W-100 est une classe utilitaire Bootstrap permettant de définir la largeur de l'image à 100 % du conteneur. Nous pouvons ensuite ajouter la source de notre image, qui est notre dossier images. Ensuite, l'image de carousel.jpeg. Puis un attribut alt avec du texte. Je vais juste définir le texte pour être la première diapositive pour l'instant. C' est donc notre premier div pour le premier article de carrousel. Si nous copions cette section, nous pouvons ajouter une autre image juste en dessous. Cela va prendre dans les mêmes classes, mais tout ce que nous avons à faire est de changer pour être notre deuxième image de carousel2. Donc, sur le navigateur, puis la page d'index. Si nous actualisons, rien ne s'affiche à l'écran. C' est parce que l'une de nos images doit avoir la classe active ajoutée. Cela permettra au diaporama d'apparaître. Et cela commencera par la diapositive avec cette classe active plutôt que dans l'ordre source. Revenons au code. Juste après l'un de ces éléments de carrousel, nous pouvons ajouter actif, enregistrer cela, puis rafraîchir. Bien. C'est donc la première diapositive que nous voyons ici. Maintenant, nous pouvons voir tout de suite que cela fonctionne. Lorsque nous avons examiné les exemples sur le site Web Bootstrap, nous avons également mentionné l'ajout de légendes à ces diapositives. Nous pouvons les ajouter pour chaque section d'image. Revenons à notre article de carrousel. Ensuite, nous pouvons ajouter ceci juste après l'image. Alors faisons un peu de place ici. Ensuite, nous pouvons ajouter div, qui va entourer notre section de légende. Cela nécessite une classe bootstrap et c'est descriptif, c'est carousel-légende. Rappelez-vous si vous voulez savoir exactement ce que CSS l'une de ces classes applique, dirigez-vous vers le navigateur et allez dans les outils de développement et vous pouvez voir plus en détail. Ajoutons un titre de niveau 5. Ce sera pour le titre ou la légende. Donc, je vais ajouter « Made to order » pour cette première image, puis en dessous juste une balise p standard avec du texte d'utiliser uniquement les meilleurs ingrédients. Bien. Faisons un peu plus d'espace ici. Si vous voyez des problèmes lorsque vous passez par cette section bootstrap, assurez-vous simplement que toute l'imbrication est faite correctement. Assurez-vous, par exemple, que cette légende de carrousel est juste en dessous de l'image et que cette section est imbriquée à l'intérieur de cet élément de carrousel et ainsi de suite. C' est généralement la plus grande cause de problèmes de codage lorsque vous travaillez avec Bootstrap et aussi les classes appliquées aux mauvais éléments. Alors maintenant, allons de l'avant et faites défiler vers le bas jusqu'à la deuxième image. Donc, la deuxième image à l'intérieur de cet élément de carrousel, nous allons ajouter la div environnante comme avant. Cela a également la même classe de légende de carrousel, un h5 pour garder cela cohérent avec le texte de plus de 50 types sur notre menu. Ensuite, en dessous de cela, nos éléments standard p avec le texte de « Ou construire votre propre ». Il y a nos deux légendes pour nos deux images. Voyons cela en action sur le navigateur. Bien. Voici le titre de l'ordre de nos camarades de niveau 5 et les textures ci-dessous. Si on s'éloigne de ça, j'espère qu'on verra une rotation. On y va, dit notre deuxième avec la légende en bas. Bien, ce carrousel d'image fonctionne maintenant et se tient à bien paraître. Dans la vidéo suivante, nous ajouterons des boutons gauche et droit afin que nous puissions passer à travers ces images. 29. Ajouter des contrôles au carrousel: Bienvenue de retour. Nous avons un diaporama de travail maintenant, ce qui est agréable. Nous pouvons rendre cela encore mieux en ajoutant des contrôles à sauter entre ces diapositives. Pour ce faire, je vais ajouter quelques boutons au carrousel. Un sur le côté gauche pour passer à gauche, puis un sur le côté droit, pour sauter en avant. Ceux-ci ont été ajoutés au bas de notre section div carrousel. bas, si nous localisons la balise d'ouverture, qui est la diapositive de carrousel, puis faites défiler vers le bas jusqu'au bas. Nous allons ajouter ceci juste avant la balise de fermeture. Commençons par un, une balise parce que ce sera un lien. Cela va avoir la classe de carrousel control-prev, qui montre notre précédent. Un rôle de bouton, puis aussi une diapositive de données. Cela va être égal à précédent, qui est P-R-E-V. La diapositive de données spécifiera à quelles diapositives aller, les deux valeurs que vous pouvez ajouter sont, précédente ou suivante. Celui-ci va revenir en arrière, nous voulons cette valeur de précédent. Ensuite, nous allons ajouter nos balises span, et ce sera pour les icônes. Cela fonctionne d'une manière similaire à notre liste déroulante, où nous ajoutons la plage, puis nous ajoutons quelques classes pour afficher l'icône. La classe que nous voulons utiliser ici est carrousel control-previous-icon. Ça va être la flèche gauche, tout comme l'un de ces supports de mur de haie qui s'ouvrent ici. C' est notre icône et puis nous allons ajouter une seconde plage juste après cela. Cela va avoir le texte de précédent. Nous ne verrons pas cela sur les navigateurs standard. Ce sera pour les lecteurs d'écran seulement. Maintenant, nous déclarons que c'est pour les lecteurs d'écran en ajoutant une classe de sr seulement. Si nous sauvegardons cela et puis rechargeons, nous pouvons voir sur le côté gauche que nous n'avons pas le texte de précédent. On a juste cette petite icône juste là. Ensuite, nous pouvons faire exactement la même chose, allons copier ceci une balise et ensuite faire la même chose pour notre prochain. Juste aligner tout ça. La balise a va avoir la classe dont nous avons besoin pour changer ceci pour être la prochaine. Les diapositives de données peuvent également être les suivantes. Icône qui doit être modifié avant d'être le suivant. Puis enfin les textes de suivant pour les lecteurs d'écran, enregistrez cela et puis rechargez le navigateur. C' est un peu difficile à voir, mais nous avons la flèche droite juste ici et la gauche juste là aussi. Mais si on clique dessus, ils ne semblent pas fonctionner. C' est parce que nous devons les relier à notre diaporama. Ces liens sont des liens utilisant les éléments a. Mais comme avec tous les liens, nous devons spécifier où lier, avec les attributs href. D' abord, nous ajoutons un identifiant à la div enveloppante carrousel. Allons à la balise d'ouverture. Cette div avec la diapositive de carrousel de classe, nous pouvons ajouter un id. nous pouvons ajouter un id. Ce nom est totalement à nous de décider. Nous avons juste besoin de nous assurer que cet identifiant correspondra au href pour les deux liens. Copiez ce carouselcontrols. Nous pouvons utiliser cet identifiant juste ci-dessous comme href. Le premier a, nous allons ajouter un href et utiliser un # cette fois et coller dans carouselcontrols. Ensuite, pour le deuxième lien ici, les attributs href, encore une fois avec le # de carouselcontrols. Ces deux images se connectent maintenant à notre carrousel principal. Donc, j'espère que si nous sauvegardons et ensuite aller dans le navigateur, ces deux liens devraient maintenant fonctionner. Bien, pour que nous puissions aller en arrière et en avant à travers nos images. Super, tout ça fonctionne et c'est tout maintenant pour notre carrousel. Dans la vidéo suivante, nous allons regarder un autre des composants de Bootstrap, qui est le modèle. 30. Modaux d'amorçage: Il est maintenant temps de regarder d'autres composants Bootstrap utiles, qui est appelé modal. Un modal est une fenêtre contextuelle qui peut donner n'importe quelle information à l'utilisateur. Dans notre cas, nous allons ajouter une section d'inscription au bas de notre site. Ensuite, lorsque l'utilisateur clique sur le bouton d'inscription, cela active alors une fenêtre modale, où l'utilisateur peut s'inscrire à l'aide d'un formulaire. Une fois que le modal est apparu, nous pouvons toujours cliquer dessus et revenir à la page d'origine. Passons maintenant à notre page d'index et voyons comment ajouter modal. Pour commencer au bas de la page, je vais créer une section d'inscription. Ce sera essentiellement une ligne dont certains textes d'un côté. Dire « inscrivez-vous » pour des offres exclusives. Puis un bouton sur le côté droit pour cliquer sur, qui active le modal. Tout en bas de notre HTML. Faites défiler vers le bas. Je vais ajouter un nouveau conteneur pour cette section. Cela peut aller tout en bas. Juste au-dessus de ces JavaScript, créons un nouveau div, et cela va avoir une nouvelle classe de fluide conteneur, ce qui rend le fluide pleine largeur de la page. Puis aussi bg-dark pour lui donner une couleur de fond. À l'intérieur ici, nous pouvons ajouter notre div avec la classe de ligne. Fermez ça. Ensuite, nous devons ajouter deux nouvelles classes, suivre la section gauche et la section droite. La section gauche va être un div. et cela va avoir la classe de col-md-7 que vous faites sept parties de large sur les appareils de taille moyenne et au-dessus. Puis une deuxième section juste en dessous, que nous prendrons les cinq parties restantes. Cela doit avoir la classe de col-md-5, nous donnant notre grille de 12 colonnes. Maintenant, cette grille est en place, nous pouvons d'abord ajouter du texte d'inscription, qui va aller sur le côté gauche à l'intérieur de ces balises p. Inscrivez-vous à des offres exclusives, point, point, point. Ensuite, nous devons ajouter un bouton sur le côté droit, qui activera notre pop-up modal. À l'intérieur de la section cinq sur la droite, ajoutons un bouton avec le type de bouton. Puis quelques classes de boutons. Le premier est btn, puis btn-success, btn est les styles de base standard pour un bouton, puis btn-success lui donnera la couleur de fond verte. Si nous sauvegardons cela et vérifions cela dans le navigateur, c'est juste en bas. Nous pouvons juste voir notre texte sur le côté gauche ici, puis le bouton ici. Cela ne semble pas trop bon pour le moment, mais certaines classes Bootstrap devraient résoudre cela. Nous devons également ajouter du texte à l'intérieur du bouton aussi, faisons cela d'abord. Nous pouvons ajouter le texte de l'inscription ici. À l'intérieur de cette ligne, nous pouvons ajouter la classe du centre de texte, et cela pousse tout le texte au centre de la div. Voyons voir à quoi ça ressemble. Rafraîchir, bon, notre bouton et aussi le texte est au centre de chacun des conteneurs. Faisons ces textes maintenant, légers et aussi italiques. C' est sur le côté gauche. Nous pouvons l'ajouter dans ceci, div juste ici. Après md-7, nous avons la classe d'utilité des textes légers. Ceci est également fourni par Bootstrap et également forme italique. Ceux-ci sont assez explicites. Si nous enregistrons et voyons à quoi cela ressemble, bon, maintenant notre texte est maintenant de couleur blanche et aussi italique. Nous allons également améliorer cela plus tard en ajoutant une marge et un rembourrage. Nous le ferons dans une vidéo plus tard. Mais pour l'instant, passons à la construction de notre modale pop-up. Cela peut être ajouté n'importe où dans notre code mais je vais ajouter le mien juste sous la section d'inscription. Retour à notre code. Puis à nouveau tout en bas, en dessous de la div d'inscription ici, nous allons ajouter notre section modale. Ajoutons un commentaire. Maintenant, nous devons ajouter notre environnement un div. Cela va avoir une classe de modal et aussi fonder. Cette classe de fondu est un effet de décoloration fourni par Bootstrap. Cela rendra la transition agréable et lisse. À l'intérieur, nous allons ajouter un nouveau div. Cela devrait être assez familier, nous construisons simplement des divs avec des classes Bootstrap pour ajouter notre style agréable. La classe de dialogue modal. Cette classe de dialogue modal rend un modal plus étroit. Si nous supprimons cela, cela rend un modal la pleine largeur de la page. Je vais juste garder le dialogue modal en place pour garder ce joli et compact. Puis un nouveau div imbriqué à l'intérieur. Cela va avoir la classe de contenu modal. C' est le contenu que nous voulons avoir à l'intérieur de notre modal, et il est divisé entre une section d'en-tête, un corps et un pied de page. Maintenant, nous ajoutons trois nouveaux divs au même niveau. C' est le premier pour l'en-tête. La classe de l'en-tête modal. Si nous copions cette section ici et le collons dans, deux fois de plus. On y va, donc c'est notre en-tête. Le milieu sera pour le corps, et le dernier est le pied de page. Assurez-vous qu'il est le pied de page, le corps et la section d'en-tête sont tous imbriqués à l'intérieur de cette div de contenu modal ici, sinon les choses ne sembleront pas comme prévu. Voyons comment nous regardons si loin à l'intérieur du navigateur. Rafraîchissons et cliquez sur le bouton « S'inscrire ». Nous pouvons voir tout de suite que la fenêtre contextuelle ne se produit pas lorsque vous cliquez sur le bouton. Comme vous pouvez vous y attendre, nous devons lier ce bouton au modal pour qu'il fonctionne. Tout d'abord, nous incluons un identifiant sur modal réel. Si nous allons au sommet, cette carte d'identité sera n'importe quel nom de notre choix. Je vais juste appeler ça modal. Ensuite, nous devons ajouter deux attributs au bouton, ce qui l'activera. Le bouton d'inscription juste ici. Nous disons que ces boutons activent le modal en ajoutant d'abord l'attribut de bascule de données, et que cela soit modal. Ensuite, nous définissons quel modal nous voulions activer en utilisant la cible de données. Puis signez ceci égal à l'id du modal, le modal de hachage. C' est le même identifiant que nous avons donné au modal juste en dessous. Si nous enregistrons et essayons cela dans le navigateur. Maintenant, cliquez sur le bouton « S'inscrire » ici. Le bouton ne fonctionne pas tout à fait. Allons voir notre code et vérifier tout ici. Nous avons l'id de modal, puis le bouton, nous devons ajouter des données bascule sur cela et nous assurer qu'il est orthographié correctement, recharger, cliquez sur notre bouton. Il y a notre pop-up, qui est en fait notre modal. Mais rappelez-vous que nous n'avons pas ajouté de contenu à l'en-tête modal, au corps modal et à la section pied de page modal. C' est pourquoi nous voyons des sections vides gratuites sur l'écran. C' est ce que nous passerons ensuite lorsque nous ajouterons notre formulaire à ce modal, afin que l'utilisateur puisse ajouter ses détails d'inscription. 31. Formulaires d'amorçage: Nous savons tout sur l'utilisation des formulaires dès le début du cours. Cette vidéo ne devrait pas lancer de surprises. Cependant, nous allons regarder comment Bootstrap gère ces formulaires. Il utilise exactement les mêmes éléments, comme nous l'avons déjà vu, mais ajoutez ensuite un bon positionnement de style, en ajoutant les classes bootstrap. Notre modal apparaît maintenant, à l'écran, lorsque nous cliquons sur le signe et à l'intérieur de ce modal est l'endroit où nous allons ajouter notre formulaire d'inscription. Nous pouvons d'abord ajouter du texte à la section d'en-tête modale, qui est cette partie supérieure ici. Allons-y. En fait, avant de le faire si on clique sur le modal, on le ferme. Ensuite, vers l'éditeur de texte, faisons défiler vers le bas jusqu'à notre section d'en-tête modal ici, et à l'intérieur je vais ajouter un titre de niveau 5 avec le texte de souscrire à des offres exclusives. Bootstrap a également quelques classes disponibles et cette fois celui-ci est appelé titre modal, alors enregistrez cela, puis passez à la fenêtre pop-up modale, cliquez sur le bouton, et comme notre texte en haut, puis ajouter dans notre formulaire à l'intérieur de cette section centrale, qui est le corps, alors revenez à notre modal. Cette fois à l'intérieur de cette section de corps modal, nous allons ajouter un formulaire, ce formulaire va avoir un div imbriqué à l'intérieur de la classe du groupe de formulaires. Cela regroupe l'ensemble de la section de formulaire inclure toutes les entrées activées. Nous ajoutons chaque activation d'entrée à l'intérieur ce groupe de formulaires pour ajouter une structure à vos éléments de formulaire, comme toute marge pour les espacer. Commençons par une étiquette et cette étiquette aura les quatre attributs habituels. Cela va être lié à nos entrées. Appelons ceci une entrée de nom car nous allons ajouter une section de nom, puis le texte de votre nom. Ensuite, après que cette étiquette puisse ajouter notre entrée, cela va avoir le type de texte, puis quelques classes, donc les classes bootstrap de contrôle de formulaire, id et cet id vont être l'entrée de nom, ce qui correspond à cette étiquette donc id de l'entrée de nom. Ensuite, après cela, nous pouvons ajouter du texte d'espace réservé et cela peut être quelque chose de notre choix, je vais simplifier, entrez votre nom. Avant d'ajouter cette classe d'amorçage de contrôle de formulaire, cela est utilisé sur toutes les entrées de texte telles que le type de texte, sélection et la zone de texte. Cela appliquera n'importe quel style tel que les couleurs et définit également l'entrée à 100 pour cent de large, si nous sauvegardons cela, nous pouvons voir quel effet cela a à l'intérieur du modal alors cliquez sur le bouton et il y a nos entrées 100 pour cent au milieu avec l'étiquette de votre nom. Voici à quoi ressemble notre formulaire par défaut. Nous avons l'étiquette, une entrée, sur des lignes séparées. Bootstrap applique le type d'affichage du bloc et attendez 100 % à la plupart des éléments de formulaire. Si nous voulions que cette étiquette et cette entrée soient en ligne, il y a une classe pour ces deux-là. Nous pouvons ajouter cela au conteneur de formulaire environnant et la classe est appelée formulaire en ligne, enregistrez cela, puis rechargez, cliquez sur le modal, et maintenant notre étiquette et entrée est en ligne. Mais je vais garder cela comme c'était à l'origine sans cette classe de formulaire en ligne qui devrait supprimer cela pour maintenant et puis sur nos groupes de formulaires de courriel et d'adresse, donc tout comme cette section de nom ici, nous entourons également d'autres entrées avec cette classe de groupe de formulaires. Copions ceci, puis collez juste en dessous. Celui-ci sera pour l'email, alors changez votre nom pour être votre e-mail. Cela va avoir le type d'entrée d'e-mail aussi. Nous devons également changer l'étiquette pour que les attributs soient entrés par e-mail, qui va correspondre à cet ID ici. Modifiez également cela pour être des entrées de courrier électronique. Je pense que tout le reste va bien. Juste un détenteur de place, alors entrez votre email et qui est bon. Juste en dessous de cet e-mail, nous allons coller ceci dans une fois de plus et cela va aussi avoir la div environnante avec une classe de groupe de formulaires mais cette fois ce sera pour votre adresse. Cette fois, nous allons avoir une zone de texte, plutôt que les entrées standard. Supprimons cette entrée d'ici. Après cette étiquette, nous allons alors créer la zone de texte. Rappelez-vous que la zone de texte a une balise d'ouverture et de fermeture et que l'entrée a juste la balise de fermeture automatique. La zone de texte peut avoir une classe de contrôle de formulaire, qui est la même que celles ci-dessus car il s'agit d'une entrée basée sur le texte. Ensuite, un ID, qui correspond à cette étiquette d'adresse. Rappelez-vous précédemment avec une entrée de texte, nous pouvons également spécifier le nombre de lignes que nous voulons ajouter et nous le définissons sur 3 par défaut. Ensuite, un espace réservé, avec le texte d'entrer votre adresse. Je pense que tout est fait pour les entrées gratuites alors voyons à quoi ça ressemble. Activez le modal. Bien. Nous avons le nom, l'e-mail, et aussi l'adresse, qui est une zone de texte. Maintenant, nous pouvons faire glisser cette ouverture vers le bas pour le rendre plus grand ou plus petit. Cela laisse juste la zone de pied de page vers le bas. A l'intérieur ici, je voudrais ajouter quelques cases à cocher pour demander si l'utilisateur veut être contacté par e-mail ou poste puis un bouton de soumission trop pour envoyer le formulaire. Ajoutons d'abord ces cases à cocher, donc jusqu'à notre modal, il devrait être le pied de page modal alors assurez-vous que nous allons changer. On a le corps, l'en-tête, puis le pied de page en bas. Commençons par nos entrées de courrier électronique et de courrier. Le div environnant, avec les classes Bootstrap de vérification de formulaire parce que ce sera une case à cocher et ensuite la vérification de formulaire en ligne, garde ces éléments en ligne, puis nous pouvons ajouter nos entrées avec le type de case à cocher, les classes Bootstrap de forme vérifier les entrées. Après la classe, nous allons ajouter un ID, qui va être lié à notre étiquette. Cet ID, je vais appeler ceci la vérification par e-mail. Enfin, une valeur qui va être égale à l'option un, puis fermer cette option. Rappelez-vous que la valeur est le texte qui sera envoyé au serveur une fois ce formulaire soumis. Après l'entrée, nous devons ajouter notre étiquette. Cette étiquette va avoir une classe d'étiquette de vérification de formulaire. Les quatre attributs, qui vont lier à notre ID des cases à cocher et c'était la vérification par e-mail. Enfin, vérifiez à l'intérieur des contacts par e-mail. Faisons un peu plus petit pour que nous puissions voir à l'écran. Ensuite, je vais juste copier ceci pour accélérer les choses, alors assurez-vous que vous copiez cette div environnante complète collez-le juste ci-dessous et alors nous pouvons simplement changer celui-ci pour être contact par la poste. Les classes tout de même, nous avons juste besoin de vérifier la différence d'ID. L' ID cette fois va être post check. L' attribut de formulaire peut être post check aussi, contact par post, et je devrais ajouter un point d'interrogation après chacun d'eux. Enfin, nous allons terminer ce modal avec un bouton pour soumettre le formulaire, le texte de soumettre, le type de soumettre aussi, les classes Bootstrap de btn, puis btn-primaire, ce qui lui donnera le bleu couleur pour le bouton de sorte que devrait être tout maintenant pour le pied de page, je vais aller avec deux cases à cocher ici puis notre bouton de soumission. Jetons un coup d'oeil à cela en action. Activez la fenêtre contextuelle. Le contenu du pied de page est maintenant là, mais il semble un peu déplacé. Nous pouvons rapidement résoudre ce problème avec une petite flexbox. Plutôt que d'ajouter toute flexbox dans notre fichier CSS, Bootstrap nous fournit également quelques classes d'utilitaires. Nous pouvons utiliser flexbox très rapidement. Plus à notre code, puis nous pouvons ajouter une aide CSS flexbox à l'intérieur de ce div de pied de page modal. Juste après le pied de page modal, nous pouvons ajouter le contenu de justification entre. Cela fonctionne exactement comme justifier le contenu entre nous l'avons fait dans notre CSS. Bootstrap le fournit à l'intérieur d'une classe CSS, alors enregistrez cela et encore dans notre modal. On y va. Maintenant, les choses sont bien espacées dans le pied de page. C' est comme ce que nous avons déjà appris. Nous pouvons également remplacer entre par le centre, début, la fin, et autour, par exemple deux. La seule différence est ici que nous utilisons une classe fournie par Bootstrap, sous le capot, il applique toujours une propriété de style CSS, tout comme nous l'avons fait plus tôt dans le cours. Si nous devions ouvrir les outils de développement, puis faites défiler vers le bas. Si nous inspectons ensuite cette zone de pied de page du modal, cliquez dessus, nous pouvons voir que cette classe de contenu de justification entre, que nous avons ajouté juste ici, applique simplement la propriété flexbox de contenu de justification à ces éléments. Fermons ça. Maintenant, si nous revenons à notre HTML, si nous regardons la forme environnante, à l'intérieur du modal, donc l'élément de formulaire qui a la balise de fermeture, et il y a la balise d'ouverture. Vous remarquez que cet élément de formulaire doit être déplacé pour entourer tous les éléments de formulaire. Pour le moment, il entoure seulement ce contenu de corps de nom, e-mail et adresse. Coupons cette étiquette de formulaire de fermeture d'ici et ensuite si nous bougeons cela vers le bas, déplacons ceci vers le bas. Assurez-vous qu'il a le bouton avec le type de soumettre, et maintenant nous pouvons ajouter cela juste après la section pied de page. Maintenant, toutes nos entrées sont maintenant à l'intérieur de ces éléments de formulaire. Juste pour terminer les choses, je vais ajouter un bouton sur le formulaire, qui va juste être un x afin que l'utilisateur puisse cliquer pour fermer le modal. Vous pouvez également cliquer sur l'écran pour fermer un modal comme nous l'avons vu auparavant. Mais parfois, l'utilisateur peut ne pas savoir qu'ils peuvent le faire de sorte qu'une petite croix dans un coin de la forme sera vraiment bénéfique. Je vais ajouter ceci dans la section d'en-tête modal. Nous allons faire défiler jusqu'au modal avait une partie ici, et puis nous pouvons ajouter un fond. Juste après ce H5, ajoutons un bouton puis nous pouvons ajouter une entité HTML, qui va être un symbole des temps, et ce sera une petite croix, que nous verrons dans un instant. Le fond a besoin d'un type de bouton, d'une classe de close, puis de données de rejet de modal. Data dismiss modal déclarera que nous voulons que ce fond ferme un modal quand il est cliqué. Donnez cette sauvegarde et nous pouvons essayer cela dans le navigateur. Recharger, ouvrir le modal, et il y a notre entité HTML, qui est la croix, cliquez dessus, et maintenant cela ferme notre modal. Ceci est notre modal maintenant pleinement fonctionnel et aussi la forme maintenant regarder mieux. Comme pour tous les éléments et composants que nous avons utilisés jusqu'à présent, consultez la documentation Bootstrap pour connaître certaines variantes et quelques façons différentes que nous pouvons les utiliser avec n'importe quel exemple de code pour nous faire avancer. Ensuite, nous allons rechercher l'espace Bootstrap dans les utilitaires pour ajouter de la marge et du remplissage. 32. Utilitaires d'amorçage: Comme nous le savons déjà, Bootstrap est juste HTML, CSS, et quelques JavaScript. Si nous voulons ajouter des CSS tels que la marge et le remplissage, nous pouvons toujours sélectionner l'une de nos classes ou éléments Bootstrap, puis les ajouter à notre propre fichier CSS, puis changer les propriétés CSS comme nous l'avons fait précédemment. Il y a une autre façon que Bootstrap nous fournit et c'est avec quelques aides utilitaires utiles. Si nous allons à la documentation Bootstrap , puis dans le menu à gauche, cliquez sur « Utilitaires ». Les utilitaires sont fondamentalement un moyen pour nous d'ajouter rapidement des styles à un élément sans même avoir à aller au fichier CSS. En commençant par les bordures, nous pouvons voir ici nous pouvons ajouter des bordures à un élément avec des noms de classe descriptifs. Nous avons une frontière, qui appliquera une frontière aux quatre côtés. Nous avons également la bordure supérieure, droite, inférieure et gauche aussi. Si nous regardons le menu à gauche, nous pouvons voir que ces aides sont disponibles pour la plupart des propriétés CSS courantes. En fait, nous avons déjà utilisé certains de ces éléments dans notre projet. Si nous cliquons sur « Flex », nous pouvons jeter un oeil à la section flexbox et faire défiler vers le bas. Nous voyons quelques valeurs flexibles que nous pouvons ajouter en tant que classe. Nous avons déjà utilisé le contenu de justification entre pour notre section de formulaire, qui aura accès à tous les utilitaires flexbox. Si nous descendons aussi et cliquez sur « Texte », juste ici, regardant également cette section de texte, nous avons déjà utilisé la classe de centre technologique, que nous pouvons voir juste ici. Il y a aussi du texte à gauche, du texte à droite et aussi quelques utilitaires pour l'appliquer uniquement sur différentes tailles de clôture. Défilant plus bas, nous avons le dimensionnement, et nous l'avons déjà utilisé avant à l'intérieur de notre carrousel. Nous avons utilisé la classe W 100, que nous avons ici et cela définit nos images à 100 % de la largeur disponible. Il y a aussi de l'espace dans les services publics ici et c'est ce que nous allons regarder dans cette vidéo. Ceci est utilisé pour ajouter des valeurs de marge et de remplissage à notre CSS. Si nous regardons comment nous pouvons l'utiliser, nous devons construire un nom de classe. Nous construisons cela en commençant par un M ou un P, qui signifie marge ou rembourrage. Ensuite, après ce m ou p, nous spécifions ensuite quel côté de l'élément nous voulons qu'il s'applique. Nous pouvons ajouter T pour le haut, B pour le bas, gauche, droite, et ainsi de suite. Si nous voulions ajouter une marge à droite, nous commençons par m, r puis après ces lettres, nous spécifions ensuite quelle taille nous voulons ajouter avec un nombre de zéro à cinq ou nous avons également l'option d'auto. Zéro réinitialisera toute marge et rembourrage par défaut à zéro. Deux nous donneraient une valeur de 0,5 béliers et ainsi de suite. Nous avons aussi x qui appliquera les classes à gauche et à droite, ou y, qui est pour le haut et le bas. Passons à notre projet et si nous réduisons le navigateur, nous allons commencer à l'intérieur de la navigation. Laissons ça et nous allons commencer à travailler sur sa section de formulaire. abord, nous voulons ajouter quelques classes pour rendre ce look un peu plus agréable, puis nous utilisons certains des utilitaires d'espacement. Ouvrons notre éditeur de texte, puis commençons à travailler dans notre section d'en-tête. Nous faisons défiler jusqu'à notre formulaire à l'intérieur de cet en-tête. En fait, retirons ce carrousel de l'en-tête et placez-le ensuite afin de faire défiler la route vers le bas après ces contrôles, découpez cette section, puis vers le bas en bas de notre en-tête, collons ceci à l'extérieur et pour vous assurer que tout est correct, développez le navigateur. Super. Maintenant, nous avons juste notre navigation à l'intérieur de l'en-tête. Travaillons avec notre section de formulaire en ajoutant quelques classes Bootstrap. Juste ici, nous pouvons ajouter une classe de formulaire de ligne form-in et ensuite nous pouvons ajouter une marge, nous pouvons utiliser m y. Cela appliquera une certaine marge sur l'axe y , qui est au-dessus et au-dessous, puis la valeur de 2, sauvegardez cela, rechargez et la liste déroulante aura maintenant une marge en haut et en bas du formulaire. Ensuite, nous pouvons aller de l'avant et rendre ce look un peu plus agréable avec quelques classes Bootstrap. Tout d'abord, les entrées peuvent avoir une classe de contrôle de formulaire. Ensuite, nous ajoutons le type pour l'entrée de texte, puis une valeur d'espace réservé de recherche. Maintenant, le bouton, nous avons le type de soumission, ajoutons juste quelques classes à cela. Le premier peut être btn, que nous avons vu avant, puis btn outline-succès. Le contour s'assurera que cette couleur ne s'applique qu'en tant que bordure plutôt qu'en tant que couleur unie et le succès nous donnera la couleur verte, que nous verrons juste ici. Ceux-ci sont sur des lignes séparées parce que nous sommes sur une vue plus petite ici. Si nous rendons cela un peu plus large, nous avons maintenant ces composants en ligne. Ce my2, que nous avons ajouté ici, appliquera une marge pour toutes les tailles d'écran. Nous pouvons également définir une valeur de marge différente pour d'autres tailles d'écran. Par exemple, si nous voulions réduire cette marge sur les appareils de taille moyenne et supérieure, nous pourrions ajouter des périphériques de taille moyenne my-md, puis réduire cette marge à 1 plutôt qu'à 2. Si nous sauvegardons et actualisons, maintenant quand nous faisons le navigateur, les appareils de taille moyenne, cette marge est maintenant réduite sur le formulaire. Super. Maintenant, nous avons différentes valeurs de marge pour les appareils de taille moyenne au-dessus. Ce bouton de recherche est également un peu trop proche de ces entrées. Ça aurait l'air un peu plus agréable avec un peu d'espacement entre les deux. Pour corriger cela, nous pouvons ajouter une certaine marge à cette entrée aussi. Cette entrée juste ici, ajoutons une nouvelle classe de Mr, qui est marge, à droite. Ensuite, les petits appareils et au-dessus, définissons cela pour être 2, rafraîchir et là nous allons, donc c'est une marge sur le côté droit et cela devrait s'appliquer sur les appareils plus petits, qui juste ici et au-dessus. Bien. Si nous réduisons le navigateur à la plus petite taille, que nous avons vu auparavant, ce bouton est également serré contre l'entrée. Ajoutons une certaine marge au bouton pour espacer cela, donc jusqu'au bouton, après le succès du contour btn, nous pouvons utiliser mon et puis définissons ceci sur 2. Voyons cela en action. Super. Cela semble bien sur les plus petits écrans. Si nous étirons cela, sorte que les écrans plus grands. Nous pourrions également réinitialiser cette marge pour les écrans plus grands. Mais ça a l'air bien, donc je vais le garder comme ça pour l'instant. Maintenant sur les trois images en bas. Nous devons également ajouter un peu d'espace dans la section. Je vais ajouter un peu de rembourrage à l'intérieur de ces éléments. Allons au conteneur, les trois images sous le carrousel. C' est celui-ci ici après le conteneur et le centre de texte, ajoutons un peu de remplissage sur l'axe des y et cela peut être une valeur de 5, recharger. Bien. Maintenant, nous avons un rembourrage en haut et en bas. Rendons ce conteneur un peu plus grand, ajoutez un peu d'espacement plus égal. Enfin, pour terminer cette page d'accueil, ajoutons une zone de pied de page, revenons au HTML. En bas et nous fermerons cette div. Nous pouvons ajouter une section de pied de page. Ce sera une zone de pied de page simple. Nous allons commencer par ajouter un bouton d'arrêt de retour afin que lorsque l'utilisateur clique dessus, ils soient ramenés en haut de la page. Ensuite, nous ajouterons un symbole de copyright avec le nom de Gourmet Burgers. Nous ajoutons un lien maison et emplacements juste pour terminer les choses. Commençons par ajouter des classes à cette zone de pied de page. Nous pouvons en faire un conteneur et bg-light pour lui donner une couleur de fond claire. Pour espacer les choses, nous ajoutons un peu de rembourrage sur l'axe y et une vallée de 4, ouvrons les éléments p et ce sera notre texte ou retour en haut. En fait, nous allons simplement découper ceci et ajouter ceci comme un lien avec les éléments a et coller ceci à l'intérieur. Les balises p peuvent avoir une classe et encore une fois, c'est une classe utilitaire de droite flottante, Cela fera le texte flottant sur le côté droit de la page. Ce lien peut également avoir un attribut href avec une valeur de hachage. Cela signifie que lorsqu'un utilisateur clique sur ce lien, il sera redirigé vers cette page d'accueil, puis il commencera tout en haut de la page. Jetons un coup d'oeil à ça. Rafraîchissez, cliquez sur de haut en haut, puis la page se recharge juste en haut, donc il y a notre lien de retour en haut. Ensuite, juste après cela, nous pouvons ajouter un nouvel ensemble de balises p. Cela va contenir notre texte de Gourmet Burgers avec le symbole de copyright, puis ajouter deux liens, qui sera pour la maison et les lieux. Juste après cette balise p d'ouverture, je vais ajouter l'entité HTML du copyright, qui est copie esperluette et un point-virgule, puis le textile de 2018 Gourmet Burgers. Ensuite, je vais ajouter une deuxième entité HTML, qui est appelée point intermédiaire. Ce sera simplement un point qui séparera ce texte ici des liens que nous allons ajouter dans la prochaine. Ensuite, nous pouvons ajouter deux liens pour la maison et les emplacements encore dans cette balise p ici. Ajoutons notre premier lien avec le texte de la maison. Cela peut avoir un attribut href vide, car nous n'avons rien à lier. Juste après ce lien, nous pouvons également ajouter ce point intermédiaire une fois plus pour séparer nos deux liens et ensuite nous pouvons ajouter notre dernier lien, qui sera pour tous les emplacements. Encore une fois, cela peut également avoir le href vide, donner à cela une sauvegarde, sur le navigateur. Bien. Donc, si nous zoomons et puis faisons défiler vers le bas tout en bas, il y a un lien qui est en haut, qui est flotté vers la droite avec cet utilitaire ici alors nous avons notre symbole de copyright et le texte de Gourmet Burgers, un point dans entre pour séparer nos liens entre la maison et les lieux. C' est maintenant pour notre projet et aussi pour nos utilitaires d'espacement. J' espère que vous pouvez maintenant voir comment utiliser Bootstrap peut vraiment nous donner une longueur d'avance lors de la construction de sites Web. Bien sûr, tous les styles par défaut ne seront pas toujours exactement ce que nous recherchons et il est encouragé à les remplacer et à faire des personnalisations en fonction de vos besoins. C' est maintenant pour notre recherche Bootstrap et je vous verrai dans la section suivante. 33. Merci: Félicitations pour avoir atteint la fin de ce cours. J' espère que vous êtes maintenant beaucoup plus à l'aise de disposer des sites Web, en utilisant le CSS Flexbox, Grid et Bootstrap 4. Nous avons commencé au tout début, en jetant un coup d'oeil à la CSS Flexbox. Ensuite, nous avons passé sur le système CSS Grid, ce qui est une façon incroyable de créer presque n'importe quel type de mise en page que vous pourriez imaginer. Enfin, a appris à utiliser un framework Bootstrap 4 pour nous permettre de créer de superbes sites Web vraiment rapide. Ou tout en construisant un site Web de restaurant de hamburgers, mettez tout ce que vous avez appris en pratique. Rappelez-vous que tout cela n'est que la deuxième partie de ce cours. Assurez-vous donc de consulter la partie suivante, pour acquérir des connaissances plus approfondies et apprendre tout ce que vous devez savoir pour construire des applications de pile complète. Au revoir pour l'instant, et je vous verrai dans la prochaine partie de ce cours. 34. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.