Framework CSS pour débutants

1. Introduction du cours: Avez-vous eu du mal à créer des sites Web réactifs modernes ou peut-être êtes-vous tout simplement nouveau dans le développement Web en général. m'appelle Kyle et je vais vous guider dans Bootstrap et comment l'utiliser pour créer des sites Web réactifs rapides pour vos clients. Nous allons passer en revue toute la documentation et souligner fonctionnalités importantes intégrées Bootstrap et vous donner un avantage concurrentiel sur le marché. Vos sites auront fière allure et seront fonctionnels et vous apprendrez beaucoup dans ce cours. J'espère que vous êtes prêts à commencer. 2. Section 2 - Introduction de Bootstrap: Très bien, bienvenue dans la classe, tout le monde. Merci de vous être inscrit au cours. J'espère que vous êtes prêts à commencer. Si vous n'êtes pas familier avec Bootstrap, nous allons approfondir la documentation, jeter un coup d'œil à quelques exemples et voir comment utiliser ceux notre site que nous allons construire. Dans ce cours. Nous allons construire un clone Facebook, pas nécessairement le back-end, mais nous allons simplement créer les fonctionnalités frontales. Nous allons commencer par la page d'inscription , puis nous allons nous frayer un chemin vers la page d'accueil. Nous allons utiliser les éléments Bootstrap autant que possible. S'il y a des CSS supplémentaires, nous allons y remédier. Tout ce que nous avons besoin de personnaliser. Nous allons le faire une étape à la fois. Ce cours sera destiné aux débutants, aux personnes qui ne connaissent pas Bootstrap. Cependant, si vous êtes familier avec le bootstrapping, avez juste besoin d'un peu plus d'expérience, juste besoin d'un rafraîchissement. Ce cours fournira également cela. J'espère que vous êtes prêts à y aller. Donc, cela dit, passons en avant. 3. Section 3 - Utiliser Bootstrap: Bon, donc pour commencer, nous allons avoir besoin d'un éditeur de code pour ce cours. Je vais utiliser Visual Studio Code. N'hésitez pas à utiliser l'éditeur de code que vous souhaitez. Il faut donc créer un nouveau fichier. Et je vais juste nommer ce index.html. Et je vais l' enregistrer dans mon dossier de téléchargements. Et je vais juste le mettre dans un dossier appelé cours Facebook. N'hésitez pas à le nommer comme vous voulez et à l'enregistrer. Donc index.html et enregistrez-le. Super. Maintenant, à l'intérieur de l'éditeur de code où il va mettre le boilerplate HTML pour commencer. Et pour ce faire, je vais juste faire un court code ici. N'hésitez pas à le saisir ou si votre éditeur de code dispose d'un raccourci, allez-y et utilisez-le pour le titre. Je vais juste mettre un cours Web et le sauvegarder. Super, donc maintenant nous pouvons ouvrir ce fichier à l'intérieur de notre navigateur et ne l'avons pas fait , il suffit d'aller dans votre explorateur et de trouver le dossier que vous avez créé et double-cliquez sur le fichier. Et puis je m'ouvrirai directement dans votre navigateur. ce moment, il est vide parce que nous n'avons rien dans le corps réel. Donc, juste pour m'assurer que cela fonctionne, je vais juste ajouter un élément d'en-tête de test et l'actualisation et la notation peuvent le voir là-haut. Nous en avons donc déjà fini et nous aborderons l'installation de bootstrap dans la prochaine leçon. 4. Section 4 - Connexion de bootstrap: Dans cette section, nous allons voir comment installer ou connecter la plateforme bootstrap à notre site Web ou à notre fichier index.html dès maintenant. Il existe donc deux façons de connecter bootstrap. Donc, ce que vous voulez faire est d'aller bootstrap.com, puis de cliquer sur le bouton de téléchargement. À partir de là, vous pouvez faire défiler et voir toutes les différentes façons qu'ils offrent pour connecter Bootstrap à votre site. Ils ont des gestionnaires de paquets, des liens CDN, des fils, des gemmes, des compositeurs, donc à peu près n'importe quoi. Si vous êtes plus avancé, vous pouvez suivre ces instructions. Comme je l'ai dit, ce cours sera davantage orienté vers les débutants. Donc, ce que nous allons faire ici, c'est d'utiliser les liens CDN. Il est donc dit CDN via JS livrer. Ignorez donc l'OJS téléchargé fourni pour fournir la version mise en cache du CSS et du JS compilés de Bootstrap à votre projet. C'est exactement ce dont nous avons besoin. Nous devons donc cliquer sur Copier dans le presse-papiers. Et nous allons revenir à notre fichier d'index. Et à l'intérieur de la section de tête, nous allons le coller. Et je vais activer l'écriture de mots très rapidement. Bon, maintenant que nous avons le fichier CSS et un fichier JavaScript liés à notre site Web. Allons de l'avant et sauvegardons tout simplement. Je vais garder l'élément d'en-tête là-dedans juste pour m'assurer que la police et la couleur par défaut et tout ce qui est semblable prendront effet sur le H1. De cette façon, nous savons avec certitude que Bootstrap est connecté. Je vais donc revenir dans le navigateur et me rafraîchir. Et vous pouvez voir que la police a changé. C'est toujours noir, c'est très bien. Mais certaines des marges de page, des rembourrages de page et des choses similaires ont également changé. Ce ne sont que des signes que bootstrap a été correctement connecté. C'est donc exactement ce dont nous avons besoin. 5. Section 5 - Aperçu de la grille: L'un des principaux avantages de l'utilisation de Bootstrap pour votre développement Web est le fait qu'ils disposent d'un système de réseau intégré. C'est donc très utile pour créer mises en page vraiment spécifiques ou personnalisées. Cela va être très utile lorsque nous concevons cette page d'accueil pour le fil Facebook où vous avez essentiellement des informations sur le côté gauche, vous avez votre flux principal au milieu Et puis vous avez des amis et peut-être des publicités sur le bon côté et des trucs comme ça. C'est donc vraiment utile pour que tout soit intégré, vraiment facile à utiliser. Cette section portera donc sur la grille ou les conteneurs tels qu'ils sont mentionnés dans Bootstrap. Donc, pour commencer, revenons sur le site getbootstrap.com, passons aux chiens , puis passons à mise en page et aux conteneurs. Ainsi, ici , il est dit que les conteneurs sont un élément fondamental de Bootstrap qui contient un pad et alignent votre contenu dans une fenêtre de diviseur donnée. Ils ont en fait quelques classes différentes que vous pouvez utiliser. L'un d'entre eux n'est que conteneur. Il y en a un qui est le liquide de tiret de conteneur, puis le point d'arrêt du tiret de conteneur, soit 100 % jusqu' au point d'arrêt spécifié. Super, donc ce que nous allons utiliser principalement ici, c'est le conteneur normal et le liquide de tiret de conteneur, qui sera 100% ou pleine largeur de la fenêtre d'affichage. Donc, si nous faisons défiler un peu ici, vous pouvez voir les points d'arrêt intégrés à Bootstrap. Ils sont donc très petits, petits, moyens, grands, très grands et XX grands. Ils vont donc ressembler à vos ordinateurs de bureau, et ce seront vos ordinateurs portables, peut-être des tablettes. Et puis, il s'agira d'appareils mobiles. Comme vous le savez, le développement Web ou la conception Web en général se dirige davantage vers une approche axée sur le mobile que ordinateurs de bureau ou ne sont plus aussi largement utilisés. La plupart de vos audiences vont probablement accéder à votre site Web ou à votre application à partir d'un appareil mobile, ce qui est tout à fait correct. C'est pourquoi Bootstrap et d'autres frameworks comme celui-ci existent. Tout est construit de manière responsable pour qu'il soit beau, quelle que soit la taille de l'écran. Super. Alors que nous faisons défiler un peu vers le bas, vous pouvez en voir quelques exemples ici. Juste une div très simple avec une classe de conteneurs. Et ensuite, vous mettez votre contenu de côté. Vous avez des conteneurs réactifs. C'est donc ici que le point d'arrêt du tableau de bord du conteneur entre en jeu. Vous pouvez donc voir le tiret de conteneur petit, moyen, grand et ceux qui ont tous fait référence à ces points d'arrêt ici. Ainsi, comme je l'ai dit, les contenants de liquide vont être de pleine largeur. Ils vont donc aller tout le long de la gauche, jusqu'à droite. Et ensuite, vous pouvez également imbriquer des conteneurs. Vous pouvez faire un conteneur pleine largeur, puis vous pouvez le faire avec un conteneur de largeur normale à l'intérieur de celui-ci. Supposons donc que vous voulez une couleur d' arrière-plan pleine largeur et, mais que vous voulez toujours que votre contenu dans 1200 ou 1400 pixels. Vous pouvez donc faire des choses comme ça, ce qui est vraiment sympa. Nous voulons donc commencer ici. Nous allons copier cet exemple ici, le conteneur par défaut. Je vais juste le copier. Accédez à l'éditeur de code. Débarrassons-nous de cet élément H1 de test et collons simplement cet exemple. Et ramenons l'élément et disons simplement « test ». Voyons quelle est la classe de conteneurs que nous allons faire. Parfait. Vous pouvez donc voir qu' il saute un peu par-dessus. Et c'est uniquement à cause du style par défaut. Je vais donc l' inspecter très rapidement et voir ce qu'il fait. Donc, vous avez div avec un conteneur de classe et ensuite vous pouvez voir ici, les conteneurs point css. s'agit des styles Bootstrap appliqués à ce nom de classe. Vous pouvez donc voir ici que lorsque l'écran est au minimum avec les 4000 pixels, le conteneur aura une largeur maximale de 1320. C'est donc ce que vous voyez ici. Vous pouvez donc voir que cet élément ombré en bleu va avoir une largeur maximale de 1320. Et comme nous le réduisons. Et ça va un peu rétrécir jusqu' à ce qu'il arrive à un certain point. Et ensuite, il va juste coller avec un rembourrage basique à gauche et à droite. Parfait. Donc, pour aller plus loin, je vais vous montrer comment faire ce que j'ai mentionné précédemment. Et c'est des conteneurs de nidification. Alors, sautez, revenez dans l'éditeur de code. Et quand je copie ça, je vais mettre un liquide de tiret de conteneur. Et nous allons remettre ce conteneur lumineux à l'intérieur. Et puis je vais faire quelques styles en ligne ici, juste parce que nous n'avons pas encore de feuille de style connectée, mais je vais juste dire couleur d' arrière-plan, gris. Et puis sur le conteneur imbriqué je vais faire de la couleur d'arrière-plan. Faisons simplement du bleu juste à des fins de test et sauvegardons le. Donc, si nous actualisons, vous pouvez voir que l'élément fluide de tiret de conteneur pleine largeur va s'étirer de gauche à droite avec une couleur d' arrière-plan grise. Et puis le conteneur imbriqué de notre premier, de notre premier exemple, sera à l'intérieur de max. Largeur maximale de 1320, couleur de fond bleu. Et il s'intègre très bien là-dedans. Et tout va toujours fonctionner de la même façon. Juste comme ça. Parfait. C'est exactement ce que nous voulons. Je vais donc supprimer ces styles en ligne pour l'instant, et je vous verrai dans la section suivante. 6. Section 6 - Aperçu des colonnes: Nous avons donc passé conteneurs qui ne sont essentiellement que le détenteur du contenu de la page que nous allons construire. Donc, vous vous demandez peut-être : OK, super, nous avons des conteneurs maintenant quoi ? Bootstrap a donc ce qu'on appelle le système de grille. Et à l'intérieur des conteneurs, c'est façon dont vous construisez réellement vos dispositions. Ainsi, à l'intérieur des conteneurs, vous avez des lignes et des colonnes, et vous pouvez créer votre disposition avec celles-ci. Il existe différents types de lignes et il existe différents types de colonnes et de classes de colonnes et de choses qui font différentes choses. Nous allons donc passer en revue la documentation ici et obtenir un exemple grossier de la façon d'utiliser la grille. Ce premier exemple est donc très basique. Comme vous pouvez le voir ici, il y a un conteneur, puis à l'intérieur du conteneur il y a une rangée avec trois divs qui ont la classe c, o, l col. Et qu'est-ce que c'est ? Il suffit de placer trois colonnes distinctes à l'intérieur de la ligne qui se trouve à l'intérieur du conteneur. Et vous pouvez voir ici l'exemple ci-dessus qui crée trois colonnes de largeur égale sur tous les appareils et les fenêtres d'affichage à l'aide de nos classes de grille prédéfinies. Ces colonnes sont centrées dans la page avec la classe de conteneurs parente. Donc, pour aller plus loin, nous devons passer à la section des options de grille. Et cela ressemble beaucoup aux points d'arrêt des conteneurs. Il s' agira des points d'arrêt pour certaines colonnes de classes. Vous pouvez donc voir ici le préfixe de classe, col dash, dash, small , col dash, medium, etc. Vous pouvez en fait ajouter des liens de colonnes spécifiques à ceux-ci. Et c'est là que sera la taille à des points d'arrêt spécifiques. Le système de grille est donc basé sur une ligne de 12 colonnes. Ainsi, vous pourriez faire des choses comme si vous vouliez une mise en page 5050, vous pourriez faire Col Dash Six Planet. Il y a deux divs avec cette classe qui vous donneraient 50 % de colonnes, dont deux. Nous pouvons donc continuer à faire défiler ici. Il existe des mises en page automatiques de colonnes sans utiliser les classes comme je viens de le mentionner. Ils vont donc être comme le premier exemple où vous allez juste obtenir une colonne standard. Vous savez, le nombre de colonnes que vous placez sur cette ligne correspond au nombre de colonnes que vous allez obtenir. Et c'est un peu prédéfini de cette façon. Dans cet exemple, vous pouvez voir qu'il y a deux colonnes dans cette ligne supérieure, puis trois colonnes dans cette ligne inférieure. Et il y aura deux colonnes dans cette rangée, trois colonnes dans l'autre ligne, quelle que soit la taille de l'écran. D'autre part, vous pouvez commencer à utiliser des colonnes prédéfinies. Dans cet exemple suivant, et dans cette ligne supérieure, il y a une colonne, une autre colonne avec un tiret six, puis une troisième colonne. Ce que ça va faire, c'est ajouter trois colonnes, mais celle du milieu va être définie à six. Donc, cela aura toujours 50 % de largeur quoi qu'il en soit. Je ne sais donc pas si ça va gâcher quand je redimensionne ça, mais comme vous pouvez le constater, il reste 50 % quoi qu'il en soit. OK. C'est là. Il reste donc 50 % quoi qu'il en soit. Et ensuite, la même chose ici. Et au fur et à mesure que nous descendons et vous pouvez définir la colonne de largeur automatique. Donc, si vous voulez définir deux colonnes au lieu d' une seule et laisser les deux autres types de remplir automatiquement l'espace. Vous pouvez le faire dans l' autre sens et définir deux colonnes et en laisser une au milieu pour fluctuer en quelque sorte. C'est donc ce que c'est ici. Et ensuite, les cours réactifs sont vraiment ce que nous allons utiliser la plus grande partie de ce cours. Cela vous donne simplement plus de contrôle sur la largeur de vos colonnes. Les points d'arrêt indiquent que nous allons un peu plus loin ici. Il indique que vous pouvez mélanger et faire correspondre des colonnes de note à ligne. Il s'agit donc d'une autre discussion plus approfondie. Je pourrais en fait parler dans la section suivante, mais cela vous donne un moyen de construire un peu comme un système de grille plus structuré plutôt qu'une mise en page. Et je peux expliquer cela dans la section suivante. Donc, nous allons juste sauter ça maintenant. Vous pouvez imbriquer des colonnes et des lignes. Donc, ce que nous voulons vraiment aborder ici, c'est la sauvegarde ici en haut où il y a des options de grille. Nous allons donc utiliser les points d' arrêt spécifiques pour nos classes de colonnes et vous verrez pourquoi au fur et à mesure que nous travaillerons sur notre clone Facebook. Passons donc dans notre éditeur de code. Et je vais remonter la capture d'écran du Facebook que nous voulons cloner, la capture d'écran Facebook que nous voulons cloner. Et nous allons commencer par le contenu réel de la page ici. Nous allons passer en revue la navigation maintenant. Nous allons juste sauter au milieu de la page ici. Donc juste à première vue, nous allons faire trois colonnes et nous allons faire ce que cet exemple de bootstrap a fait. Et il y a une troisième colonne, une colonne de 50 pour cent, puis une autre autre troisième colonne ici. Alors allez et nouvel éditeur de code. Et nous pouvons garder tout ce que nous avons jusqu'ici. Débarrassez-vous simplement de l'élément d'en-tête. Et on va faire de la plongée avec une classe de rangée. Et puis, à partir de là, nous voulons mettre une colonne avec un tiret, un grand tiret trois. Ensuite, nous voulons faire une div avec une colonne, six grandes. Ce sera le milieu, la partie d'alimentation réelle. Et ensuite, sur la droite, nous voulons une autre troisième colonne. Je vais donc faire 1, 2 et 3 et rafraîchir juste pour que nous puissions voir le formulaire de mise en page. Super. Vous pouvez donc voir ici que nous avons une colonne 11 ici aussi est notre deuxième colonne. Et puis trois arrêts à peu près ici. Maintenant, si nous voulions que cela aille sur toute la largeur, il suffit de se débarrasser de cette classe de conteneurs ici. Ensuite, la rangée serait contenue à l'intérieur du conteneur tiret fluide div, ce qui l' étirerait d'un côté à l'autre. Donc, juste pour que vous puissiez voir que je vais commenter le conteneur et le rafraîchir. Vous pouvez le voir s' étirer sur toute la largeur , puis le ramener juste parce que je veux qu'il soit plus contenu. Super. Nous pouvons donc maintenant passer à la section suivante. 7. Section 7 - Exemple de lignes de colonnes: Dans cette section, je veux aborder brièvement la section ligne, colonnes de la documentation ici. J'y ai brièvement abordé dans la dernière section, mais je voulais plonger un peu plus en profondeur et simplement vous donner un exemple de ce que cela pourrait être utilisé. Et il est indiqué ici que vous pouvez utiliser ces classes de lignes, de colonnes qui créent rapidement des mises en page de grille de base ou pour contrôler les mises en page de vos cartes. Quand je trouve vraiment utile avec cela, c'est créer presque comme une grille de galerie d'images ou simplement garder des choses. Et j'ai vraiment structuré la position à l'écran. Et je veux vous montrer ce que je veux dire par là. Je vais donc passer à l'éditeur de code. Et juste en dessous, je vais faire un nouveau conteneur. Et puis à l'intérieur, je vais faire une rangée et je vais ajouter les colonnes 3 de la ligne. Et comme je veux m' assurer que j'ai ce nom de classe corrige à quel point ça se rapproche. Et à l'intérieur d'ici, ce que nous voulons faire, c'est faire une plongée avec le col de la classe. Et puis à l'intérieur de ça, je vais faire juste l'image, juste un porte-place ici. Et je crois que ce lien fonctionne toujours. Et je vais juste le copier cinq fois. Nous voulons donc un total de cinq colonnes ici. Si vous vous souvenez, nous avons dit que Rho appelle trois et ce que ça va faire, c'est juste le verrouiller. Par conséquent, seules trois colonnes apparaissent d'affilée à un moment donné. Alors sauvegardez-le et rafraîchissez-le. Et vous pouvez voir ici que nous avons cinq colonnes, mais il y a trois colonnes, qui est exactement ce que nous voulons. Maintenant. Pour vous donner une meilleure idée de ce que j' utilise habituellement cette structure de lignes, je vais juste faire un peu de styles pour les images. C'est ici et c'est Hub. Très vite. Je vais ajouter des styles qui allaient dire image, puisque ce sont les seules images sur la page, je vais dire avec une hauteur automatique à 100%. Et cela devrait remplir l' espace pour les colonnes. OK, parfait. Vous pouvez donc vous mêler à certains des autres styles pour les rapprocher. Eh bien, ce qui est vraiment sympa, c'est que vous devenez plus petit et qu'ils gardent un peu le ratio et le TAC, ce qui est vraiment sympa. Comme je l'ai dit, c'est bon pour les galeries d'images ou si vous avez besoin d'afficher des données dans une structure très définie. Et vous pouvez également aller un peu plus loin et définir des points d'arrêt. Vous pouvez donc dire des copains de rangée, trois grands. Et ensuite, sur les écrans moyens, nous voulons qu' ils n'en affichent que deux. Et ensuite, sur de très petits écrans, nous ne voulons en montrer qu'un d'affilée. Sauvegardons ça et rafraîchissons. Et rien ne se passe. Mais à mesure que nous deviendrons un peu plus petits, ils vont passer à deux. Et puis, à mesure que nous deviendrons plus petits, il reviendra à un. Et puis pour vraiment petits et nous devons définir cela, cela prendra effet ici. Ce que nous devons faire est donc mis à jour pour que les classes par défaut soient parfaites. Et puis, comme vous pouvez le constater, lorsque nous grandissons, nos styles restent parfaits. C'est donc un exemple d'utilisation de la ligne, des colonnes, des classes et du bootstrap. Comme je l'ai dit, ils peuvent être utilisés pour n'importe quoi. Je les utilise généralement pour des galeries d'images. Mais laissez votre imagination se déchaîner. 8. Section 8 - Commande des colonnes: Dans cette section, nous allons parler un peu plus de colonnes. Je vais approfondir les classes personnalisées appliquées à ces colonnes. Les colonnes Bootstraps sont, je suppose que la grille est construite en utilisant flexbox, CSS, flexbox. Il existe donc de nombreux styles et classes intégrés que vous pouvez utiliser qui utilisent les styles Flexbox. Ainsi, des choses comme l'alignement vertical, l'alignement horizontal et tout ce genre de choses sont entièrement intégrées au bootstrap, ce qui rend vraiment agréable de faire des choses comme celle-ci. Vous pouvez donc aligner vos colonnes verticalement ou les aligner horizontalement. Cela s'avère donc utile lorsque vous construisez vos mises en page ou vos navigations. Par exemple, il est vraiment agréable d' avoir vos nombreux liens alignés verticalement dans le conteneur plutôt que d' essayer d'écrire un tas de CSS personnalisés pour les faire paraître centrés. C'est vraiment bien que Bootstrap ait tous ces éléments intégrés comme l' encapsulation de colonne. Une chose que j' utilise souvent, c'est la réorganisation. C'est donc sympa. Par exemple, supposons que vous ayez du contenu à gauche et une image à droite. Et puis la ligne en dessous de laquelle vous avez l'image à gauche et le contenu à droite. Eh bien, sur mobile, lorsque vous les empilez, vous aurez du contenu, de l'image, du contenu d'image. Donc, ce que j'aime faire, c'est réorganiser ces colonnes de deuxième rangée de manière à ce que sur mobile, où il s'agisse de taxi , de contenu, image et de flux un peu mieux pour l'utilisateur. C'est vraiment sympa. Vous pouvez donc voir ici l' exemple dit premier dans DOM, aucun ordre n'est appliqué troisième et DOM avec un ordre de 1, deuxième et bas avec un ordre avec un ordre plus important. Vous pouvez donc voir qu'il ne s'agit que d'une colonne standard ici. Le second ici a commandé le tiret f5, ce qui signifie qu'il va être placé à la toute fin, puisqu'il a un nombre plus élevé. Et puis la troisième colonne a l'ordre 1, ce qui le dirait, lorsqu'elle est affichée, elle sera affichée au-dessus de cinq. C'est ainsi qu'ils obtiennent cet exemple ici. Vous pouvez également appliquer le point d'arrêt à ces classes afin qu'elles ne modifient l'ordre qu'à un certain point d'arrêt. Bootstrap comporte également des colonnes de décalage. Donc, si, pour une raison quelconque, vous ne voulez pas avoir une troisième colonne, vous pouvez simplement compenser de quatre dans cet exemple. Et cela vous donnerait un écart entre les deux. Je vais donc me lancer dans l'éditeur de code et vous donner un exemple rapide de ce dont je parlais. OK. Je vais donc juste venir ici juste entre les conteneurs R2 et en ajouter un nouveau avec une ligne puis deux colonnes à l'intérieur de cette ligne. Je vais dire que sur les grands écrans, nous voulons qu'ils soient six larges. Ensuite, je vais copier cette ligne et la coller juste en dessous. Et puis dans la toute première colonne, on dira ce texte. La deuxième colonne va obtenir la même image d'en bas. Et ensuite, cette même image va apparaître dans la première colonne et la deuxième rangée. Et puis c'est un texte qui va aller et la deuxième colonne et la deuxième ligne. Et je vais simplement supprimer nos anciens conteneurs car nous n'en avons plus besoin. Puis enregistrez et rafraîchissez. Et c'est ce que nous devrions en obtenir. Nous avons du contenu sur l'image de gauche, l'image de droite sera constante à droite. Donc, en ce moment, lorsque nous réduisons l'écran, ils s'empilent. Et vous pouvez voir que ce n'est pas vraiment le plus beau d'avoir deux images dos à dos comme ça. Nous allons vouloir donner à l'utilisateur certaine marge de manœuvre entre les éléments de notre page. Donc, pour obtenir cet effet, nous allons en fait tout garder, comment nous l'avons. Et nous allons simplement modifier l'ordre avec les classes Bootstrap par défaut. Ce que nous devons faire, c'est que les classes de commande. Nous allons donc dire sur ce premier, nous allons dire Order dash T2, ce qui signifie simplement que par défaut, nous voulons que ce soit la deuxième colonne. Et puis on va dire en commander un moyen. Ainsi, lorsqu'il est plus grand qu'un écran moyen, il s'agit de la première colonne, qui la gardera sur le côté gauche. Mais à part cela, nous allons en vouloir à la deuxième place, ce qui signifierait quelque chose de moyen ou de petit. Donc, les téléphones portables, nous voulons que ce soit la première colonne. Et puis dans la colonne du bas, on va dire « Commander un tiret », puis commander le moyen 2. Allons de l'avant et sauvegardons cela et rafraîchissons. On ne voit rien qui change vraiment. Mais si nous devenons plus petits, vous pouvez voir ici, le texte est en haut. Les images en bas, textes sont en haut, l'image est en bas. Parfait. C'est exactement ce que nous voulons. 9. Section 9 - examiner tous les composants: La rubrique suivante que je veux aborder concerne certaines classes Bootstrap par défaut concernant la topographie, images, les tableaux et les figures. Bootstrap a donc beaucoup de style par défaut qui semble plutôt bon pour la plupart des applications. Vous pouvez bien sûr les personnaliser, comme les familles de polices, les poids, les tailles et autres. Mais ce qui est intégré ici, comme vous pouvez le constater, c'est un dimensionnement par défaut pour les éléments d'en-tête. Ils ont également des styles par défaut pour le petit élément, ce qui lui donne un aspect plus fondu pour certains contenus secondaires. Généralement comme un sous-titre ou quelque chose comme ça. Ils ont des en-têtes d'affichage encore plus grands. Et puis, bien sûr, vous pouvez les personnaliser comme bon vous semble. Que le paragraphe principal, qui est généralement, vous savez, lorsque vous regardez un article de blog qui se démarque un peu plus, fait plus un point, vous mène en quelque de blog qui se démarque un peu plus, fait plus un point, sorte vers le bas de la page. Et ensuite, ayez juste un ton de classes intégrées vraiment agréables que vous pouvez utiliser sans avoir à écrire votre propre CSS, ce qui, vous savez, si vous construisez un grand site Web, cela peut vous faire gagner beaucoup de temps. Il y a des cours universels, donc ils sont faciles à mémoriser lorsque vous tapez ou pendant que vous codez, vous pouvez, vous savez, être vraiment fluide au fur et à mesure que vous travaillez, ce qui est vraiment sympa. Ce sont donc les polices, images de l'image intégrée de classe réactive, fluide IMG Dash, qui applique la largeur maximale 100% et la hauteur automatique. Cela permet simplement à l' image de remplir l'espace. Si vous vous souvenez d'une leçon précédente, je l'ai fait manuellement pour remplir la ligne, exemple de colonne que j' essayais de vous exprimer. J'aurais donc très facilement pu utiliser cette classe, mais comme je l'ai dit, j'ai juste appliqué les deux styles pour obtenir les mêmes résultats. Il aurait donc été beaucoup plus rapide d'appliquer cette classe aux images. Au fur et à mesure que nous allons plus loin ici, ils ont des miniatures d'image, ce qui est sympa. Il vous donne un joli bord arrondi avec une bordure très faible. Ils ont beaucoup de classes d'alignement pour les images afin qu'elles soient alignées à gauche ou à droite, centrées. Et ensuite, vous pouvez faire de même avec les éléments d'image ici. C'est juste bon de connaître les tables. C'est vraiment très pratique si vous avez affaire à un grand nombre de données que vous exprimez à l'utilisateur. Avoir des styles de table intégrés vous fera gagner beaucoup de temps. conséquent, par défaut, en plaçant une partie de la table des classes sur votre table HTML, nous allons le coiffer très bien. Vous pouvez voir en descendant un peu plus loin, vous pouvez appliquer des variantes secondaires à vos tables pour leur donner , selon l'application, une couleur différente, différente. Vous pouvez faire X, puis des tables avec des lignes rayées. Encore une fois, ce ne sont que des cours qui vous permettent de gagner du temps pour créer votre application ou votre site Web. Ils ont des rangées stationnaires. Mode sombre pour sombre, actif. Donc, il y a beaucoup de bonnes choses ici. Je veux donc simplement aborder brièvement cette section. Je veux aller trop en profondeur juste parce que beaucoup de ces choses seront personnalisées au fur et à mesure que vous construisez votre site Web. Sachez donc qu'ils sont ici. Il existe d'autres styles intégrés sont des classes que Bootstrap possède pour l'alignement du texte et des choses comme cette marge de remplissage. Alors, faites un plongeon plus profond là-dedans quand vous en avez l'occasion. C'est vraiment, vraiment sympa et ça va accélérer votre développement. Cette section va donner un aperçu rapide de tous les composants intégrés à Bootstrap. Je ne vais pas approfondir chacun d'eux, mais je veux en parler au fur et à mesure que nous parlons cette liste et de ce qu'ils sont. Donc, en commençant par le haut, nous avons l'élément accordéon. Et tout cela est juste un moyen développer et de réduire le contenu. Juste pour donner à votre page un aspect et une sensation plus concis. Vous les voyez beaucoup avec des sections FAQ similaires. Vous avez la question comme titre , puis la réponse à l'intérieur. C'est donc une très bonne façon de condenser votre page. Et ils offrent un peu plus de contrôle sur ce genre de choses. Vous pouvez supprimer la couleur d' arrière-plan et les bordures pour une intégration plus transparente et plus transparente à votre site Web. En descendant, vous pouvez faire des choses comme toujours ouvertes. Ainsi, lorsque vous chargez la page des premières, ouvrez, vous pouvez voir l'accessibilité pour plus d'informations. C'est vraiment sympa. Alertes, il s'agira d'éléments plus interactifs. Si vous soumettez un formulaire avec succès ou si vous échouez, l'utilisateur télécharge quelque chose ou si vous l'avez configuré. Ils ont ces alertes intégrées qui sont vraiment agréables. Ils sont thématiques basés sur le succès ou l'échec. S'il y a un avertissement, dit quelque chose d'un peu plus générique, pas de style. Donc, c'est plutôt cool. Ils disposent également de fonctions de rejet intégrées. Vous pouvez simplement le fermer et il disparaîtra. Cela est intégré dans la partie JavaScript de Bootstrap, ce qui est vraiment sympa. L'élément badge. Vous voyez beaucoup de choses à déclencher comme cet exemple ici, quelque chose de nouveau ou une notification ou ce que vous avez. Ils vous donnent donc la possibilité d'ajouter des chiffres. Voici le type de symbole de notification auquel nous sommes habitués, le symbole de la boîte de réception. Vous pouvez modifier la couleur d'arrière-plan, les badges de pilules. Vous pouvez faire des choses. Peut-être attribuer plusieurs catégories à quelque chose, la chapelure. Ce sont donc des liens de chapelure assez standard sur tout le site. Les boutons sont vraiment cool. Ils sont également assez interactifs. Donc l'état de survol, toutes sortes de modes différents ici. Succès primaire, secondaire, avertissement de danger, etc. Il y a beaucoup de ces composants, le principal danger de succès secondaire, danger de succès secondaire, ces noms de classes sont cohérents. Donc, si vous utilisez un bouton successif, vous pouvez également utiliser une alerte de succès. C'est vraiment sympa, quelque chose auquel ils ont beaucoup réfléchi. Encore une fois, vous avez défini des boutons, peut-être un appel à l'action secondaire. Vous avez des tailles différentes. États handicapés. Vous pouvez faire toutes sortes de choses ici. Ils ont les états à bascule. Vous pouvez donc voir qu'il s'agit d'un survol, c'est actif puis désactivé. C'est vraiment sympa là-bas. Ils vous permettent également de regrouper des boutons. Vous les voyez beaucoup avec des pages sur un blog pendant que vous faites défiler, des trucs comme ça. Si peu de styles intégrés, leurs cartes sont vraiment une fonctionnalité sympa avec Bootstrap. Cela vous donne donc un moyen très simple d' exprimer un lieu, un restaurant, un magasin ou quelque chose comme ça. Cependant, vous affichez votre contenu. Cela vous donne un très bon moyen rapide d' avoir un élément organisé et bien agencé. Vous pouvez donc voir que vous avez la classe de cartes. À l'intérieur, vous avez l' image avec l'image de la carte, corps de la carte haut de gamme avec le titre, le texte et le bouton. Et vous pouvez ajouter plusieurs boutons et toutes sortes de choses comme ça. Et tous ces composants sont personnalisables. Donc, si vous ne voulez pas le bouton principal, vous pouvez utiliser un bouton personnalisé, vous pouvez utiliser un bouton de classe différent, etc. Il suffit donc d'approfondir cela et il n'y a pas d'image du tout. Il y a une image sans bouton, et ainsi de suite. Les cartes sont donc très pratiques. Ne les négligez pas. Comme je l'ai dit, ils sont déjà Bill, donc cela vous évitera beaucoup de temps d'avoir à coder manuellement et à coiffer quelque chose comme ça. Carrousel est une autre caractéristique vraiment géniale de Bootstrap. Il s'agit essentiellement d'un curseur intégré. Encore une fois, vous n'avez pas besoin d'utiliser un autre service tiers ou vous n'avez pas à coder complètement quelque chose à partir de zéro pour obtenir une sorte d'élément de type carrousel de curseur. C'est vraiment cool aussi parce qu'ils ont des fonctionnalités supplémentaires comme des indicateurs, des flèches et des trucs comme ça. C'est vraiment cool, c'est le bouton de fermeture. Je crois que cela permet simplement de rendre certains éléments inadmissibles. Je n'en suis pas sûr. Je pense que c'est un élément assez récent ici avec Bootstrap, donc je ne suis pas trop familier avec celui-ci, mais il semble qu'ils aient quelques options différentes. Donc définitivement quelque chose que je vais examiner plus en profondeur moi-même. S'effondrer. Vous pouvez donc voir que c'est un peu comme un accordéon, juste un peu différent pour déclencher du contenu. Cela peut servir une grande variété d'utilisations ici. Et encore une fois, ce ne sont que des éléments de base qui changent avec les classes Bootstrap par défaut. Assurez-vous donc d'y prêter attention. Ainsi, pour cet exemple réduit ici et un lien avec HRF, vous pouvez voir qu'un titre de tiret BS de données égal à la réduction. Et ensuite, si vous faites défiler un peu, oui, l'exemple de réduction des contrôles de zone. C'est donc ce que vous allez réellement regarder pour cibler le contenu. Vous pouvez donc voir des exemples de réduction de l' ID. Donc, lorsque vous cliquez dessus, bootstrap vous dit : OK, Nous allons chercher cet élément et si vous le trouvez, allez-y et développez-le ou réduisez-le en fonction de l'état actif. Vous pouvez donc voir un clic qui affiche le même texte ici. C'est ainsi que cela fonctionne. Assurez-vous donc que si vous copiez ces exemples auxquels vous portez une attention particulière, les identifiants sont les éléments ciblés. Parce que si ce n'est pas le cas, il sera un peu plus difficile de résoudre les problèmes. Alors, assurez-vous d'y prêter attention . Vous pouvez voir des choses comme ça. petites animations. Ensuite, nous avons des listes déroulantes. Vous les verrez beaucoup et les navigations ou parfois des remplissages de formulaires ou des téléchargements de fichiers et des choses du genre. Donc, un autre élément intégré qui est vraiment, vraiment sympa. Liste des groupes. Cela ajoute donc un peu de style par défaut à une liste non ordonnée ou à une liste ordonnée. Vous pouvez donc voir qu'il y a une légère bordure avec un rayon de bordure. Peut-être un peu de rembourrage autour de tout. Vous avez les actifs. Vous avez l' état actif, désactivé. Vous pouvez y ajouter des liens et des boutons. Et ainsi de suite. Encore une fois, une version épurée, donc elle s'intègre un peu bien à votre site Web. Vous pouvez ajouter des numéros. Et c'est vraiment cool. Donc, il suffit de prendre celui-ci, par exemple ici, pour coder quelque chose comme ça à zéro, il faudrait créer l'élément entier, donner à chacun son propre nom de classe. Construisez cela, positionnez-le ici à droite, et ainsi de suite. Bootstrap rend tâche vraiment facile une fois que vous en avez pris le coup, l' ajout de ces classes intégrées devient une seconde nature. Vous pouvez donc voir la liste, liste des groupes, les groupes numérotés. C'est ce qui va ajouter ces chiffres réels ici. Ensuite, sur votre élément de liste, vous allez ajouter un élément de groupe de liste, justifier le contenu entre les démarrages d'un élément. Ce sont donc les cours dont j'ai parlé dans une section précédente ici. Et ce ne sont que les styles Flexbox qui donnent tout ce que j'espace. Il s'agit des classes de marges et de remplissage par défaut , etc. Et puis vous pouvez voir que c'est juste que le sous-titre et le contenu, donc le reste est géré, tout le style est géré par toutes ces classes de groupes de listes. C'est vraiment cool. Encore une fois, les modaux sont vraiment une bonne chose à avoir intégré. Je dois coder quelque chose comme ça à partir de zéro pourrait prendre beaucoup de temps. Encore une fois, si vous copiez ces exemples, assurez-vous simplement que tout correspond bien. Si vous changez de nom de classe fait quelque chose de différent. C'est vraiment cool. Démo lancée, modal et tout comme ça. C'est vraiment cool. Voici le bouton de fermeture, le bouton fermeture, des trucs comme ça. Donc, tout cela est juste intégré et super, super agréable à avoir. Donc des navs et des onglets. C'est une autre bonne chose d'avoir intégré ici pour les navigations, que ce soit dans l' en-tête ou le pied de page. simple fait d'avoir un moyen de présenter les choses pour qu'elles soient jolies tout suite est une très belle fonctionnalité. Je vais donc aller de l'avant. Nous avons Navbar et cela utilise simplement certaines des classes des navs et des onglets, ainsi que d' autres choses. Pour que vous puissiez voir ici dans cet exemple, nous avons la barre de navigation. Cela s'appelle en fait la marque, donc la barre de navigation, le tableau de bord et la marque. C'est ici que vous pouvez insérer le nom de votre site ou de votre logo avec un lien. Ensuite, nous passons à autre chose. Nous avons le menu actuel. Et cela utilise l'élément déroulant. Ils ont également un style de formulaire intégré que je n'ai pas encore abordé. Ce sera la prochaine section, mais ils ont également un formulaire et un en-tête. Et puis, par défaut, si vous copiez ces exemples de barre de navigation, la version mobile fonctionne également. Donc, vous regardez cela sur un écran plus petit, il s'effondrera et vous montrera le bouton hamburger pour agrandir le formulaire. Et vous pouvez le voir ici. Classe de boutons navbar-toggle ou Type de données Button, basculement du tiret BS, etc. Ici, c'est l'icône du hamburger. Donc, s'il s'agissait d'un écran plus petit, vous pourrez voir ce bouton mobile apparaître, le menu principal ici et le formulaire disparaîtraient. Et quand vous cliquez sur ce bouton de menu, tous ces éléments apparaîtraient très joliment à la mode, donc vraiment sympa là-bas. Ils ont également des styles différents ici pour les images dans leur image et les tags nav, croient qu'il y a également une classe de mode sombre ici. Vous pouvez donc voir ici, barre de navigation, tableau de bord Light, BG light, vous pouvez changer cela en noir et vous obtiendrez une version plus sombre . Voici le formulaire pour les barres de navigation. En général, il s'agit simplement d'un champ de recherche, donc c'est assez simple. Mais ces classes d'entrée et ces classes de boutons peuvent être utilisées dans d'autres endroits où se trouvent des formulaires. Donc vraiment cool, vous pouvez ajouter des icônes. C'est donc un bar de navigation. Définitivement, explorez-le définitivement. Beaucoup de fonctionnalités géniales. Off Canvas. Cela ressemble assez aux menus déroulants mobiles. C'est un moyen pour que le contenu de la fenêtre Off Off s'affiche sur votre site Web. Ainsi, comme vous pouvez le voir ici, lien avec un lecteur, il glisse à partir de la gauche. Ils sont parfois utilisés pour les menus mobiles. D'autres fois, vous savez, vous pouvez faire à peu près n'importe quoi avec ça. C'est juste un moyen de stocker du contenu disponible pour un accès rapide. C'est tellement cool, là. Et parfois, ce que certains de ces composants bootstrap vous permettent d'y relier directement. Par exemple, un accordéon, vous pouvez cibler le panneau d'accordéon que vous souhaitez ouvrir en ajoutant un paramètre à l'URL, ce qui est vraiment très sympa. Si vous avez des questions là-dessus, hésitez pas à me le faire savoir et je peux également en parler. Pagination ou pagination. Je ne sais pas si c'est bien prononcé. Mais c'est une excellente fonctionnalité pour les styles de blog et ainsi de suite, ou tout ce dont vous avez besoin pour parcourir la page. Donc, avoir cela intégré, encore une fois. Jolis espaces réservés aux fonctionnalités. C'est donc intéressant, c'est plus vrai si vous le faites, si vous vous moquez d'un design ou d'un truc et que vous n'avez pas de contenu réel. On dirait que vous pouvez simplement mettre un espace réservé et cela vous donne un peu cette boîte serrée animée grisée. Cela peut s'avérer utile si vous partagez votre conception avec une équipe ou un client ou si vous essayez d'obtenir une approbation, en donnant un exemple, c' est à quoi cela pourrait ressembler. Au lieu de mettre du contenu réel, il pourrait s'avérer très utile. Popovers est quelque chose qui repose sur une bibliothèque tierce appelée Popper. Il n'est pas directement intégré à Bootstrap, mais il peut être connecté assez facilement. Je n'utilise pas cela trop souvent, mais c'est ce à quoi ça ressemble un peu vous donne l'impression qu'ils sont aussi appelés une info-bulle. Mais cela vous donne beaucoup de contrôle sur la façon dont vous le souhaitez, façon dont vous voulez qu'il apparaisse, des choses comme ça. C'est tellement cool. Les barres de progression sont généralement utilisées pour afficher la progression du chargement. Vous ne les voyez pas trop souvent sur sites Web plutôt que sur des applications. Mais ils sont ici. Ils vous donnent la possibilité d' ajouter des étiquettes et des animations, des arrière-plans et autres choses. Donc, une autre fonctionnalité plutôt cool là-bas. C'est également une très bonne fonctionnalité, ScrollSpy. Cela vous permet de faire défiler jusqu'à un emplacement spécifique de la page en fonction d'un clic. Vous pouvez donc voir ici que vous pouvez descendre jusqu' au deuxième titre lorsque vous cliquez sur le deuxième, ou si vous descendez jusqu'au troisième titre fonction du troisième élément. C'est vraiment cool, quelque chose à utiliser si vous avez une page très longue. Les Spinners, encore une fois, sont généralement affichés pour charger des animations. Il s'agit également d'un élément assez récent, je crois. Mais encore une fois, vous avez un succès primaire, secondaire et ainsi de suite. Des jeux de couleurs indiquant si vous souhaitez afficher un formulaire, soumission, le charger ou quelque chose du genre. Donc, les toasts sont essentiellement des notifications. Vous les voyez beaucoup avec les applications Web. Non seulement un site Web standard, mais encore une fois, Bootstrap est conçu pour les sites Web et les applications. C'est plutôt cool. Encore une fois, ils sont interdits et beaucoup de choses sympas que vous pouvez voir ici. Juste comme ça. Des trucs tellement cool là-bas. Encore une fois, tout intégré. Je ne crois pas que celui-ci nécessite un tiers. Maintenant, il est intégré. Encore une fois, beaucoup de bonnes informations ici si vous voulez mettre en œuvre cela. Et puis, encore une fois, des infobulles similaires aux popovers, mais elles ne sont pas aussi personnalisables. Vous pouvez donc voir qu'il s' agit de pointes d'outils beaucoup plus petites et plus statiques. Il s'agit donc de la plupart des composants intégrés à Bootstrap. Encore une fois, si vous voulez une plongée en profondeur, n'importe lequel de ces éléments lorsque vous construisez votre site Web ou votre application, veuillez le faire. Cela vous fera gagner beaucoup de temps. Une fois encore. Même si vous voulez l'utiliser comme point de départ, suffit d'obtenir quelque chose sur il suffit d'obtenir quelque chose sur la page et vous pouvez toujours le modifier à partir de là, ajouter votre touche personnelle, mais définitivement, vous ne le ferez pas Je le regrette. La dernière chose que je veux couvrir avant plonger dans la construction notre clone Facebook est la fonctionnalité de formulaires dans Bootstrap. Comme vous pouvez le voir ici, ils contiennent de nombreux styles pour presque tous les éléments que vous pouvez imaginer pour un formulaire. Ainsi, les contrôles de formulaire, les vérifications et les radios, les groupes d'entrée, disposition, la plage de sélection, les étiquettes flottantes et la validation. La partie validation est plutôt cool. Ainsi, lorsque vous créez vos formulaires et que vous souhaitez obtenir une validation pour la saisie de l'utilisateur. Bootstrap a ce qui est intégré, ce qui est vraiment, vraiment sympa. Nous allons donc juste faire défiler un peu et obtenir un aperçu très rapide. Dans cet exemple, nous avons ici adresse e-mail et le mot de passe avec un bouton d'envoi. C'est plus que probablement ce que nous allons réellement utiliser dans notre exemple. Mais vous pouvez voir à partir du code, vous n'avez qu'un élément de formulaire standard. Et puis vous avez une div avec la classe MV3. Et puis, à l'intérieur, vous avez une adresse e-mail d'étiquette avec la classe d'étiquette de tiret de formulaire. À côté de cela, vous avez l'entrée avec le type e-mail avec la classe de contrôle de formulaire. Le contrôle de forme est en fait ce qui lui donne les jolis coins arrondis, une légère bordure, un peu d'espacement autour et ainsi de suite. Et juste en dessous, vous avez le texte d'aide, qui reçoit la classe de texte de tiret de formulaire qui dit simplement ne partagera jamais votre e-mail avec quelqu'un d'autre. C'est un peu comme un petit conseil à l'utilisateur. Ce qui va donc être légèrement différent de l'étiquette réelle. C'est bien que ce soit un mot de passe intégré. Encore une fois, des classes très similaires, elles sont formées formulaire de contrôle, étiquette, et ensuite vous avez le bouton Soumettre, je suis désolé, juste avant cela, vous avez la case à cocher qui est également cochée de formulaire de style étiquette. Je crois que cela place l'étiquette à côté la case à cocher plutôt qu'en dessous ou au-dessus. Et puis le bouton avec une classe de primaire. Vous pouvez donc voir comment toutes ces choses se confondent. Toutes les classes tout au long, tous les composants travaillent ensemble pour donner une cohérence au site. Ce genre de texte juste et s'étend sur certaines de ces classes, les textes de forme. Il semble donc que cela soit couramment utilisé pour décrire la durée d'un mot de passe. Encore une fois, il y en a un plus petit. Différents états, accessibilité. Vous pouvez voir ici à gauche, vous pouvez cliquer sur n'importe lequel de ces groupes d'entrée sont sympas. Il vous permet d'ajouter des icônes. Pour les montants en dollars, il y a des noms d'utilisateur et des choses comme ça. donc toujours agréable de donner un peu de conseils à l'utilisateur . Étiquettes flottantes. C'est plutôt cool. Lorsque vous cliquez sur une sorte de réduction et au-dessus, puis vous donne un peu de place pour taper Validation. Et vous pouvez lire tout cela. Mais ici, si vous cliquez sur Soumettre le formulaire, il validera les informations. Veuillez donc utiliser le nom d'utilisateur, sélectionner un état, accepter les conditions, puis soumettre. Encore une fois, vraiment cool que ça soit intégré. En règle générale, vous devez utiliser un service tiers pour obtenir quelque chose comme celui-ci. Encore une fois, vraiment sympa que Bootstrap ait cela inclus. Et dans la prochaine section, nous allons en fait plonger et commencer à construire notre clone en utilisant ce que nous avons appris jusqu'à présent. Si vous êtes resté avec moi jusqu'ici, merci beaucoup. J'espère que vous appréciez le cours. Et ça ne fera que s'améliorer à partir d'ici. 10. Section 10 - Page d'accès: Dans cette section, nous allons commencer à créer notre clone Facebook. Donc, si vous êtes restés avec moi jusqu'ici, j'apprécie vraiment, vraiment. Veuillez laisser un avis sur le cours si vous l'avez apprécié. Cela m'aide vraiment à réfléchir aux sujets des futurs cours, façon dont je peux m'améliorer, etc. Il est donc très utile d'obtenir ces commentaires pour moi les gars. Encore une fois, merci. Cela étant dit, allons commencer créer la page de connexion. Donc, nous n'allons pas construire ce dossier ils vont juste faire la section supérieure ici. Revenons donc dans l'éditeur de code et nous utiliserons simplement le fichier index.html que nous avons utilisé jusqu'à présent. Et nous allons le nettoyer un peu pour que nous n'ayons pas vraiment besoin du style. Et nous allumons à nouveau l'emballage de mots pour une raison quelconque, il s'est éteint. Je vais donc allumer ça et ensuite je vais me débarrasser du liquide de conteneur aussi. Donc, en regardant la page de connexion, je vais juste décomposer cela en ce qui concerne la façon dont nous allons construire la grille. Cette section est donc assez simple. Nous allons faire un conteneur pleine largeur. On va faire un conteneur à l'intérieur avec deux colonnes. Nous allons avoir du contenu à gauche, puis nous aurons un formulaire à droite. Passons donc dans l' éditeur de code et nous allons ajouter le liquide de tiret de conteneur. Ensuite, nous allons ajouter un autre conteneur. Et à l'intérieur de ce conteneur imbriqué, nous allons ajouter une rangée. Et ensuite, nous allons faire des colonnes de largeur égale comme ça. Et ensuite, sur le côté gauche, nous allons faire une image. Et je vais juste copier cette image Facebook et rafraîchir la page. Et vous pouvez voir les images Facebook juste là. Super. Et juste en dessous je vais juste ajouter du texte. Voyons donc ce qu' ils ont ici. Ils ont eu des contacts avec des amis et le monde qui vous entoure sur Facebook. Je vais juste copier et coller ça. Ok, parfait. Nous devons donc faire un peu de style ici juste pour mieux aligner les choses. Mais avant de le faire, je voudrais ajouter à la section de formulaire de droite. Je vais donc revenir dans Bootstrap. Je vais prendre deux formes. Revoyez, et je vais juste copier ce tout premier exemple ici, mais l'e-mail et le mot de passe et copier et sauter dans l'éditeur de code. Mais je vais faire une chose ici. Je vais ajouter une div avec une classe d'emballage de forme, former un emballage de soulignement et le coller à l'intérieur. Et la raison pour laquelle je fais cela, c'est juste pour lui donner une sorte de couleur de fond. Vous pouvez donc voir que c'est un peu enveloppé dans cette boîte blanche avec une ombre de boîte. Je voulais donc faire la même chose. Super, donc pour styliser cela, alors allons-y et connecter une feuille de style. Donc je vais faire link puis css, styles.css. Il faut donc ouvrir mon Finder et ajouter simplement un dossier appelé CSS. Et puis à l'intérieur de cela, je dois créer le fichier CSS. Donc ce que je vais faire ici, c'est dans mon éditeur de code Visual Studio Code, allez File Open. Et je vais juste ouvrir ce dossier de cours ou le dossier du site que nous avons créé au tout début. Et de cette façon, je trouve le navigateur de fichiers sur le côté gauche ici. Je vais donc ouvrir à nouveau le fichier index.html. Et puis je vais ouvrir mon dossier CSS et créer un nouveau fichier appelé un type nommé styles. C'est CSS. Super. Donc, à l'intérieur du fichier styles.css, nous devons essentiellement cibler certaines de ces choses. Donc, pour commencer sur le liquide de tiret de conteneur, je vais ajouter une nouvelle classe et l'appeler conteneur de soulignement de page. Et ensuite, dans la feuille de style, je vais mettre ce nom de classe là-dedans. Je vais lui donner une couleur de fond F6, F6, F6. Cela va lui donner un fond gris très clair. Ensuite, nous allons cibler la ligne. Et ce que nous voulons faire ici, c'est utiliser la classe Bootstrap intégrée pour les lignes afin d' aligner verticalement nos éléments. Et c'est aligner les éléments au centre comme ça. Alors allez-y et enregistrez cela et nous allons nous rafraîchir et voir à quoi ressemblent les modifications. Et vous ne pouvez pas vraiment le dire simplement parce qu'il n'y en a pas. Hauteur ou rembourrage ou quoi que ce soit sur ce conteneur. Ce que nous pouvons faire, c'est revenir dans la feuille de style et lui donner une hauteur de 100 vh, soit la hauteur verticale de la fenêtre d'affichage. Cela devrait donc étirer cette couleur d'arrière-plan, toute la hauteur de la fenêtre. Et maintenant, vous pouvez le voir. Ensuite, nous devons faire la même chose pour le conteneur en taille, alors qu'un conteneur de pages souligne hauteur d'un conteneur de 100 vh. Allons de l'avant et sauvegardons ça. Et ça ne fonctionne pas. Découvrons donc ce que nous faisons mal ici. Ainsi, la rangée a également besoin d'une hauteur verticale de 100. OK ? Donc, nous pouvons simplement le faire, copions ça. Et nous dirons que la rangée à l'intérieur est 100. Ok, super, donc on a compris que tout va vraiment bien. Maintenant, nous pouvons placer la boîte blanche autour du formulaire et réduisons le formulaire un peu plus petit. Retournez dans l'éditeur de code, dans notre fichier HTML. Et au lieu de faire la dernière colonne 6, faisons-en quatre. Vous voyez que ça réduit un peu ça. Je vais revenir dans la documentation ici, aller dans les colonnes Disposition. Voyons si nous pouvons trouver le domaine qui parle de laisser un écart entre les deux et qui devrait être compensé. Il suffit donc d'ajouter une classe de décalage. Offset grand 2. Donc, depuis que nous sommes passés de six à quatre, il nous reste deux espaces de colonnes. Nous allons donc le compenser de 2 sur de grands écrans, ce qui devrait en résulter. Et je vais en fait le changer pour qu'il soit un peu plus centré. Comme ça a l'air vraiment, vraiment bien. Il suffit donc d'ajouter un fond blanc à cela. Nous allons donc cibler cette classe d'enveloppe de formulaire. Dites couleur d'arrière-plan, blanc, et ajoutez un rayon de bordure de 10 pixels. Nous allons ajouter un peu de rembourrage tout au long de la route. Et cela ne devrait pas suffire à nous donner cela. Et puis ajoutons une très légère ombre de boîte. Je vais ajuster cette couleur noire ici pour être un peu plus légère. Ok, super. Allons donc mettre à jour cela vers D3, D3, D3. Et rafraîchissez-vous et regardez bien. Nous allons donc mettre à jour certains des styles sur le côté gauche ici. Selon la page d'accueil des logos, beaucoup plus petit et le texte est un peu plus grand. Nous pouvons donc changer cela pour être, disons simplement un h3 et au lieu d'un paragraphe. Ensuite, je vais donner l'image et l'identifiant du logo. Je vais donc dire Logo, hauteur maximale, 75, largeur, auto. Et ça devrait être très bien. On peut peut-être aller un peu plus gros. Je suis un logo, mais le texte lui-même est plutôt bon. Passons donc à 100. Parfait, et nous sommes plutôt bien. Et une autre chose que nous pouvons faire est d'ajouter le bouton Créer un compte qui se trouve sous le formulaire qu'ils ont ici. Allons-y et faisons-le très vite. Pour ce faire, nous voulons toujours être à l'intérieur de la boîte blanche, la boîte de fond blanche. Nous allons donc passer juste en dessous de ce bouton de soumission ici. Nous allons ajouter une ligne horizontale. Et puis je vais ajouter un moment de bouton. Donc, le bouton Class et ensuite nous allons dire le succès du bouton pour que nous puissions obtenir le bouton de fond vert. Je dirai créer, créer un compte, puis actualiser. Ok, super. Ils ne se sont donc pas concentrés. Revenons donc dans Bootstrap et passons dans la section des boutons. Et ce que nous voulons faire, c'est que nous pouvons ajouter le bouton type égal à notre bouton ici, comme ça. Ensuite, nous voulons obtenir la classe d'alignement pour ces boutons. Alors, cherchons ça. Ok, on dirait que tout ce qu'il faut faire c'est de mettre ça dans une div avec quelques cours ici. Quelqu'un va copier cela , puis enrouler notre bouton et ce div autofill en essayant de le remplir avec le mauvais élément. Laissez-moi régler ça. Ok, super. Allons de l'avant et rafraîchissons et ajustons au besoin. Et ça ne change pas. Découvrons donc ce que nous avons mal fait ici. Oups, je dois me débarrasser de cette div de clôture. Juste comme ça. Ok, parfait, donc on a ça centré. C'est donc un exemple rapide de la façon d' utiliser certains styles Bootstrap pour obtenir un écran de connexion agréable. Nous avons utilisé le conteneur, les classes de colonnes de somme de lignes, certaines classes d'alignement de lignes ainsi que toutes les classes de formulaires. C'est donc un bon exemple de la façon d' obtenir quelque chose de ce genre dans un laps de temps relativement court. 11. Section 11 - Créer la navigation: Et ces dernières sections, nous allons construire notre clone Facebook de la page de flux actuelle. Nous allons donc créer la navigation supérieure , puis la barre latérale de chaque côté ainsi que le contenu principal. On va juste faire exactement ce qu'il y a dans cette capture d'écran. Nous n'allons pas construire toute la page lorsque vous faites défiler et des trucs comme ça, mais n'hésitez pas à aller jusqu'à E1. Prenez ce que vous avez appris ici et courez un peu avec et voyez jusqu'où vous pouvez le faire. Je serais très intéressé de voir ce que vous pouvez créer à partir de cela. Alors, allons-y et plongeons. Ce que nous allons faire, c'est commencer par la barre de navigation supérieure. Donc, pour ce faire, allons-y et créer un nouveau dossier. Et nous allons juste appeler ce home.html. Et ce que nous pouvons faire, c'est simplement copier ce que nous avons sur l'index et simplement le coller dans le fichier d'accueil. Et nettoyons tout ce qui se trouve à l'intérieur du corps et gardons tout dans la tête. Nous pouvons changer le titre en page d'accueil afin de faire la différence. Ensuite, nous pourrons aller de l'avant et commencer. Jetons donc un coup d'œil à la documentation Bootstrap et nous devons simplement recueillir des informations sur la barre de navigation. Trouvons donc un qui est similaire. Nous avons donc besoin d'un logo, d' un menu et d'une fonctionnalité de recherche. Je crois donc que cet exemple est ici. Il y a quelques jeux de couleurs et je suis presque sûr que déjà passé en haut est le tout premier exemple. Oui, c'est là. Donc, allons-y et copions ça. Revenez dans l' éditeur et collez-le. Donc, ce que nous pouvons faire, c'est au lieu de simplement barre de navigation, nous pouvons mettre notre propre image ici. Et je vais juste aller sur Google et attraper un logo Facebook. Cette ronde ici ne devrait pas être parfaite. Il suffit donc de copier l' adresse de l'image et de la coller là. Et puis nous pouvons donner à cela l'identifiant du petit logo. Super, donc dans notre feuille de style, allons-y et coiffons un peu ça. Et donnez-lui une hauteur de 30 pixels et une largeur de 30 pixels. Peut-être que des bateaux trop petits vont de l'avant et voient à quoi cela ressemble dans l'URL, il suffit de le changer pour la maison. Et vous pouvez voir que nous l' avons déjà fait. Mais il semble que l'image que nous avons copiée était un peu faussée juste parce qu' il y a des espaces blancs autour de celle-ci. Tout ce qui veut dire, c'est qu'il faut juste lui donner un peu plus de largeur, de hauteur, car ce n'est pas un carré parfait. Essayons 50. Ok, parfait, ça devrait suffire. Maintenant, ce que nous devons faire, c'est ajouter quelques icônes et d'autres icônes à droite. Bon, donc en ce moment, nous avons des liens textos ici. Je vais les laisser sous forme de texte simplement parce que je ne veux pas traquer les icônes, mais n'hésitez pas à utiliser des icônes. La seule différence va être au lieu du texte ici, au lieu du lien ou de la maison, vous allez simplement mettre une balise d'image avec le lien vers l'icône. Ce sera la seule différence. Je vais juste les laisser sous forme textures parce que ça va être un peu plus facile pour trouver des icônes. Nous voulons également que ce menu soit centré. Ok, alors travaillons à ce que ça soit centré. Il nous suffit donc de trouver le menu actuel et de changer certaines classes. Donc, si vous vous souvenez de la leçon précédente avec le formulaire de connexion centrant le bouton Créer un compte, j'ai pris la classe m x dash Auto. En ce moment, nous avons M E dash auto, donc je vais le changer en MX, l'enregistrer. Et maintenant, nous avons un lieu centré. Parfait. Nous pouvons donc déplacer le formulaire vers la gauche. Ensuite, nous ajouterons d'autres boutons ici à droite. Allons de l'avant et travaillons là-dessus. Mais pour ce faire, il suffit de trouver le formulaire. Je vais le couper et le déplacer ici. Ensuite, nous pouvons ajouter des menus, des éléments de menu sur le côté droit. Et je viens de copier ce menu déroulant juste pour avoir du contenu, mais je vais nettoyer ça. Je n'ai besoin d'aucun de ces trucs ici. Je vais juste me débarrasser de ce séparateur. Voyons à quoi ça ressemble. J'ai donc la classe automatique MX Dash avec une liste non ordonnée avec trois éléments de liste. Je vais également accéder aux classes d'articles déroulantes pour l' instant et me rafraîchir. Ok, donc on dirait que ça a l'air plutôt bien, mais il faut avoir un cours ici pour que ça ressemble à ça. Alors, sautons ici et nous allons juste dire Navbar Nav, je suis ex auto. Et j'espère que cela fera l'affaire. Bon, on y arrive. On dirait que nous avons juste besoin d'un peu de style supplémentaire ici. Nous avons donc besoin de la classe d'article de navigation pour chaque élément de liste. Allons de l'avant et mettons en œuvre cela. Et cela devrait le nettoyer, nous donner un meilleur espacement, donc un meilleur formatage. Et ce n'est pas le cas. Découvrons donc ce qui se passe. Le lien de navigation est également ce dont nous avons besoin pour la classe. Allons de l'avant et ajoutons cela et cela. Ok, parfait. Donc, nous sommes bien allés. Une fois encore. N'hésitez pas à utiliser des icônes, comme l'exemple ici. Je n'ai aucune icône enregistrée sur mon ordinateur, donc je n'en ai pas disponible, mais n' hésitez pas à le faire. Je vais juste les garder comme liens pour l'instant. Et une dernière chose que nous pouvons faire est de changer cette classe automatique de tableau de bord MX en fin de tableau de bord flottant. Et puis nous allons vraiment saisir le tout et le déplacer juste en dessous de cette balise de liste non ordonnée de clôture ici. Cela le maintiendra dans le conteneur principal de la barre de navigation, ce qui permettra également de le maintenir dans la navigation mobile. Et c'est ce que je veux dire par là. Donc, pour l'instant, tout se ressemble. Mais lorsque nous arriverons sur les écrans plus petits, il s'effondrera correctement et apparaîtra ici. Nous devons ajuster les styles pour qu' ils ne collent pas complètement sur le côté droit. Mais cela va au moins le faire dans le menu mobile. Échangez ces styles. Tout ce que nous avons à faire est de trouver la classe de fin de tableau de bord flottant et de la changer en tiret flottant, LG Dash end. De cette façon, il ne circulera qu'à la fin sur grands écrans et il y aura trucs sur le côté gauche ou ne flotteront pas du tout sur des écrans plus petits. Donc, juste pour que vous puissiez voir que ça a l'air bien. Et c'est là. Donc, ça a l'air génial. C'est exactement ce que nous sommes après avoir obtenu le logo avec la recherche, quelques liens au milieu, puis des liens sur le côté droit. Super, donc dans la prochaine section, nous allons construire le corps réel. Alors que commencez par le côté gauche, le côté gauche, et progressez vers la droite. Nous allons utiliser d'autres éléments Bootstrap pour faire fonctionner ces listes, des cartes et ainsi de suite. ai donc hâte de le voir. 12. Section 12 - barre latérale: Très bien, dans cette section nous allons commencer à créer le contenu réel de notre page d'accueil ici. Nous allons donc commencer par construire la structure. Nous allons faire une colonne de gauche, le contenu du milieu, puis nous aurons une colonne de droite. Donc, si vous voulez prendre quelques minutes et voir si vous pouvez le faire vous-même. Et si vous voulez aller de l'avant et mettre en pause la vidéo, essayez-la et revenez. Je vais commencer. Ok, donc maintenant nous allons passer dans l'éditeur de code et nous allons juste entrer directement dans le fichier home.html. Et nous allons commencer juste en dessous de l'élément de navigation. Et nous allons faire une plongée avec une classe de conteneurs. Et nous voulons que cela soit pleine largeur, sorte qu'il s'étend sur toute la largeur de la fenêtre. Et puis à l'intérieur de ce conteneur, nous allons faire une plongée avec une classe de tiret de col, un grand tiret. Allons-y trois. Et puis, à côté de celui-ci, nous allons faire du col avec une classe de, ou je suis désolé, une div avec une classe de col, un tiret de six. Et puis la dernière colonne ici sera la même que la première. Juste comme ça. Et puis, juste pour nous assurer que tout fonctionne, allons-y et mettons juste des espaces réservés ici. Et encore une chose, nous devons en fait envelopper toutes ces colonnes à l'intérieur d'une rangée. Allons-y et faisons-le très vite. Juste comme ça. Nous pouvons rafraîchir la page et nous devrions voir branché, donc les archons vont finir ici. Cela va se terminer ici. Et puis cela commencera jusqu'à la fin. Parfait. Revenons donc à notre exemple. Nous avons donc une liste avec une icône ou une image avec du texte. Voir plus. Et puis, en dessous, c'est la même chose, mais nous avons un titre dans cette section. Et encore une fois pour en voir plus, alors continuons et concentrons-nous d'abord sur cette barre latérale. Si vous souhaitez accéder à la documentation Bootstrap, nous pouvons passer aux composants, puis faire défiler vers le bas jusqu'au groupe de liste. Et ce sera suffisant pour commencer ici. Alors, permettez-moi de voir s' ils en ont un. Flush. C'est ce que nous recherchons ici. Cela nous donnera un peu plus de place que nous pourrons personnaliser comme nous le voulons. Il suffit de copier cet exemple et de le coller dans notre première colonne. Et nous allons simplement laisser tout ce texte le même pour l'instant, sauvegarder et le rafraîchir pour nous assurer qu'il fonctionne. Ok, parfait. Maintenant, nous avons juste besoin d'une icône ici et il y a plusieurs façons de le faire. Ce que je veux faire, c'est utiliser le système de grille à l'intérieur de ce groupe de listes. Il existe d'autres façons, comme les pseudo-éléments avec CSS. Il peut être un peu difficile d'obtenir la bonne image ou l' icône à l'intérieur de celles-ci. Par conséquent, avec ce système de réseau, nous pourrons avoir un peu plus de contrôle pouvoir aller de l'avant et commencer avec cela. Ces groupes de listes se trouvent donc à l'intérieur de ces listes. Supprimez le texte, puis nous mettrons une ligne à l'intérieur. Avec une colonne. Celui-ci sera vraiment petit, donc on dira simplement col dash grand deux. Et là, ce sera notre image. Et ensuite, si vous vous souvenez de la section précédente, nous allons faire un porte-place. Cela peut être de 25 sur 25. Et ensuite, la colonne suivante peut simplement remplir le reste de l'espace. Et ce sera un texte ici. D'accord, nous allons nous assurer que ça fonctionne correctement. D'accord ? Notre colonne pourrait donc être un peu plus grande que ce dont nous avons besoin. On peut peut-être en faire un, mais tout le reste semble bien. Allons de l'avant et ajustons cela. Ensuite, nous pouvons simplement copier tout cet élément de liste et remplacer nos autres éléments ici pour qu'ils correspondent. Faisons cinq éléments ici. Rafraîchissez-vous, d'accord, parfait, donc ça a l'air vraiment bien. Voyons à quoi ça ressemble quand on devient un peu plus petit. Ok, donc on peut probablement condenser ça. Donc, sur les écrans moyens, revenons ici. Et cette première colonne, on pourrait dire moyen. Gardons ça un, puis petit. Nous garderons celui-là aussi. Voyez ce que cela fait. Ok, ça va bien. Allons de l'avant et prenons cela en vigueur pour toutes nos colonnes ici. D'accord ? En regardant très bien sur des écrans très petits, nous devons également ajouter une classe pour cela. Donc, nous allons juste faire Col Dash et le garder un. Allons de l'avant et ajoutons rapidement cela à nos colonnes , puis nous allons passer à autre chose. Super. air bien. Ok, donc maintenant ce que nous pouvons faire est d'ajouter l'élément accordéon, ce qui nous donnera notre bouton Voir plus, qui affichera simplement plus d'éléments de liste. Allons de l'avant et rendons cela un peu plus grand et nous allons aller dans la documentation de bootstrap. Et nous allons revenir dans l'accordéon, et nous allons naviguer jusqu'à l'accordéon. Nous pouvons simplement copier le premier exemple ici et ensuite nettoyer ce dont nous n'avons pas besoin. Je vais donc copier cette version affleurante ici. Donc, copiez tout ça. Et nous allons juste venir ici juste après notre liste commandée et coller. Et rapidement, vous pouvez regarder ces cours ici. Nous allumons le mot rouge. Vous pouvez rapidement regarder par ici et voir en fonction de l' en-tête affleurant le titre 1. Donc, lorsque vous cliquez sur cet élément H2, ce bouton, il va essentiellement afficher ce contenu ici. Vous pouvez donc voir un titre affleurant, un, un titre affleurant, une zone marquée par. C'est ainsi qu'ils communiquent entre eux. Allons donc simplement de l'avant et débarrassons des deux autres articles en accordéon. Bon, allons-y et rafraîchissons. Et cela devrait nous donner un excellent accordéon, et il se développera un peu très bien. Alors, nettoyons un peu ça. Au lieu de l'accordéon, article numéro un, nous voulons en voir plus. Et puis à l'intérieur du corps de l'accordéon, nous allons juste venir ici et copier notre liste non ordonnée. Puis collez-le à l'intérieur du corps de l'accordéon. Et peut-être que nous n'avons pas besoin des cinq. Mettons-en deux là-dedans. Et enregistrez et rafraîchissez. Super, nous en avons vu plus si vous cliquez dessus et que vous avez d'autres éléments de liste. Il y a donc un peu de style qui ajoute un peu de rembourrage sur les côtés si vous voulez nettoyer et le faire rincer à nouveau. Cela ressemble donc à une suite de la liste ci-dessus. N'hésitez pas à expérimenter cela. Je vais juste le laisser tel qu'il est juste parce qu'il a l'air un peu, il semble plus prévu de cette façon. Vous êtes en train d'étendre et de réduire le contenu. On s'attend à ce qu'il soit un peu différent. Tellement génial. Dans notre exemple, il semble y avoir une ligne horizontale ou une bordure. Et puis, fondamentalement, la même chose juste dessous avec un titre. Allons-y et faisons-le. Donc, à la fin de notre accordéon, quand il descend ici et se trouve à un élément de rangée horizontale. Et puis nous allons mettre, disons un H4. Je crois que cela a été dit raccourci. Et puis vraiment tout ce que nous avons à faire est de copier tout ce que nous avons ci-dessus et de revenir juste en dessous ici et de le coller et de le rafraîchir. Bon, il y a donc un problème et nous pouvons résoudre ce problème en 1 seconde. Comme vous pouvez le constater, l'extension un accordéon élargit les deux. Mais ça ressemble à nos raccourcis, peut-être un peu gros, mais nos éléments de liste ont l'air bien, tout semble bien. Allons de l'avant et changeons cela par un H5. Et puis nous allons résoudre les problèmes de notre accordéon. Vous pouvez donc voir ici un exemple de chasse d' accordéon. Et ce que cela fait, c'est donner une pièce d'identité à cet accordéon spécifique. heure actuelle, les deux accordéons de la page partagent le même identifiant. Donc, ce que nous pourrions faire au lieu d'Selon l'exemple flush, nous pouvons simplement renommer cet ID en raccourci accordéon. Ensuite, nous pouvons copier ceci et le coller ici pour qu'ils soient conscients l'un de l'autre. Ok, ce que nous devons également faire est de mettre à jour l'ID de contenu réduit. Vous pouvez donc voir ici cet identifiant est également similaire à celui ci-dessus. Il suffit donc d'ajouter un raccourci à l'intérieur de cela. Puis mettez à jour où il doit se trouver. Bon, voyons si ça fait le tour. Parfait. Pour que l'on travaille , celui-ci travaille. Super. Donc, cette section est plutôt belle. Cette barre latérale ici, elle est réactive, fonctionne toujours sur des écrans plus petits, tout a fière allure. Dans la section suivante, nous allons passer au contenu du milieu ici. Nous allons construire ces cartes en haut. Nous ajouterons ici un petit élément de formulaire avec quelques boutons. Ensuite, nous passerons à la carte réelle. Ensuite, dans la section suivante, nous allons finir avec la barre latérale droite. Et vous serez prêt. Vous serez sur le point de créer superbes sites Web en utilisant Bootstrap comme framework. 13. Section 13 - Contenu principal: Dans la dernière section, nous avons parlé la barre latérale gauche et cette section, nous allons passer au contenu du milieu. conséquent, en regardant notre exemple d'image, nous allons commencer par le haut ici. Et ce que nous allons faire, c'est que nous allons ajouter un conteneur avec une rangée, avec quelques colonnes. Nous allons avoir cinq colonnes. Et c'est un bon exemple. En revenant sur une section précédente ici lorsque nous avons parlé la ligne de colonne où chaque chose est identique. Donc ça va être un très bon exemple, hum, ou un cas d'utilisation pour ça. Nous allons donc utiliser ça. Nous allons passer à autre chose, construire une section de formulaire avec une petite icône, quelques boutons, puis la carte. Alors, allons-y et plongeons tout de suite. Jetons donc un coup d'œil à la documentation Bootstrap. Et nous voulons passer à la mise en page. Et puis on va passer à la grille. Et faisons défiler vers le bas. Et nous voulons des colonnes de lignes. Nous allons donc simplement copier cet exemple ici, puis sautons dans l'éditeur de code. Et passons à notre colonne du milieu ici. Et je vais juste donner de l'espace entre eux. Et je vais coller ça dans la documentation. Et à l'heure actuelle, on dirait que nous avons quatre colonnes. Je vais ajouter un cinquième. Et puis je vais ajuster un peu ça. Donc, en regardant en arrière la documentation, on dirait utiliser les classes d'astérix de vaches réactives pour définir rapidement le nombre de colonnes qui restituent le mieux votre contenu et votre disposition. Alors que les classes maîtres normales de tiret de col s'appliquent à des colonnes individuelles, les classes de comptage de lignes sont définies sur la ligne parente comme un raccourci avec rho cause auto vous pouvez donner aux colonnes de largeur naturelle. Nous pouvons donc aller de l'avant et essayer de régler cela. Donc, ce que nous voulons faire est basé sur le point d'arrêt, montrer un certain nombre de colonnes. Donc, en regardant cet exemple ici, c'est essentiellement ce que nous allons faire, c'est que je vais copier ça, toutes ces classes de lignes et sauter dans notre exemple et ensuite les coller ici. Donc, là où nous sommes partis sur de grands écrans, j'ai dû montrer et nous voulons probablement que tous les phi soient diffusés sur des écrans moyens aussi. Et alors que nous devenons un peu plus petits, allons-y et sautons jusqu'à trois. Et ensuite, sur les petits écrans, il n'y aura que deux. Alors sauvegardons cela, rafraîchissons et voyons à quoi cela ressemble. D'accord, allons-y et faisons un peu de réglage ici. D'accord. Vous pouvez donc le voir s'empiler. Je montrerais un grand écran jusqu'à cinq. Bon, allons-y et commençons à coiffer ça. Dans la première colonne ici, supprimez le texte réservé. Et je vais juste faire une plongée avec une classe de détenteurs d'histoires. Et puis à l'intérieur de cela, nous voulons une icône, nous avons besoin d'une image d'arrière-plan, puis textes indiquant Ajouter à l'histoire. Commençons donc par ça. Je ne suis pas fan, je suis désolé, on va faire une image. Et puis à l'intérieur pour la source, nous allons juste être mis en garde à nouveau. Faisons simplement 25 panneaux lumineux plus qui auront la portée avec les textes qui indiquent Ajouter à l'histoire. Et pour l'instant, je vais juste faire un style en ligne pour mettre une couleur d'arrière-plan là-dessus. Je ne vais pas faire de noir, faisons du bleu, donc le texte s'affiche, accord, donc maintenant exactement ce que nous recherchons, mais nous sommes en route. Nous allons donc ajouter d' autres styles ici. Je vais donc supprimer ce style en ligne. Et je vais copier ce cours , puis j'irai dans notre feuille de style. Je vais dire la hauteur jusqu'à 100 pixels. Faisons un peu de rembourrage autour de huit pixels. Flex d'affichage. Et puis à l'intérieur, nous pouvons justifier contenu ou l'espace edu entre les deux. Et voyons à quoi ça ressemble vraiment rapidement. Et pas encore. Nous allons donc faire une colonne de direction flexible. Ok, on y arrive et on dirait que notre image est un peu trop déformée. Allons de l'avant et disons une histoire. Image plus ancienne, hauteur 25 avec 25. Ok, donc nous avons notre icône, en haut, c'est un peu petit. Nous pouvons probablement rendre cela un peu plus grand. De plus, notre texte est un peu trop volumineux. Allons de l'avant et faisons 35, 35. Et puis notre porte-histoire s'étend, si je peux l'épeler correctement. Nous voulons qu'il s'agisse d'une taille de police de 10 pixels, de couleur, de blanc. Alignement du texte, à gauche. Faisons notre couleur de fond sur le porte-histoire. Ok, ça a l'air plutôt bien. Ce que nous pouvons faire maintenant, c'est appliquer cette classe au reste des colonnes et nous serons en route. Il suffit donc de copier ceci et de le placer dans nos colonnes restantes. Et rafraîchissons. Ok, ça va bien. Nous pouvons donc agrandir le texte un peu et ajouter un rayon de bordure autour. Allons de l'avant et faisons un rayon de bordure de 10 pixels. En fait, allons en faire 15. Et puis notre portée, faisons un peu plus grand à 12 pixels, et cela devrait suffire. Ok, super. On a l'air plutôt bien jusqu'à présent. Nous avons ensuite cette section ici. Si vous voulez essayer de le faire vous-même, hésitez pas à suspendre la vidéo et à revenir quand vous l'aurez prête. Si ce n'est pas le cas, n'hésitez pas à continuer de suivre. Revenons donc sur le fichier home.html juste en dessous. Et nous voulons faire un autre conteneur avec une rangée. Ensuite, nous allons faire quelque chose de similaire aux éléments de la liste que nous avons fait auparavant. Et on va juste faire une colonne avec un grand tiret. Et puis l'image. Nous allons simplement utiliser la même image. Et puis, dans la colonne suivante, nous allons juste remplir l'espace restant. Et ce sera en fait un formulaire. Ce que nous pouvons faire, c'est sauter dans la documentation Bootstrap, sauter deux composants, puis je suis désolé, j'ai sauté deux formulaires juste au-dessus composants et je clique simplement sur Vue d'ensemble. Et cela nous donnera assez d'exemple ici. Nous pouvons probablement décrire ce premier élément de la même manière. Et venez ici. Et mettons juste à jour certains de ces trucs. Nous n'avons donc pas vraiment besoin de dire une adresse e-mail. Je ne pense même pas qu'il y ait une étiquette sur notre exemple. Il est écrit ce que vous pensez, Joséphine. Il suffit donc d'ajouter un espace réservé pour que nous puissions nous débarrasser de l'étiquette. Et puis, à l'intérieur de notre entrée réelle, nous pouvons dire que l'espace réservé est égal. Qu'est-ce que vous pensez ? Je vais juste mettre mon nom. Nous pouvons dire que lorsque vous lisez la pièce d'identité, n'en avez pas nécessairement besoin pour le moment. Et ensuite, nous pourrons nous en débarrasser également. Nous n'avons plus d'étiquette et nous allons simplement changer cela en texte. Super, alors allons-y et rafraîchissons. Et nos icônes étaient encore un peu trop petites, mais notre entrée est bien coiffée. Allons de l'avant et ajoutons d' autres styles pour obtenir cela, quoi nous voulons qu'il ressemble. Tout d'abord, rendons ça un peu plus grand. Faisons 50 par 50. Et je vais mettre une classe supplémentaire sur ce conteneur et dire conteneur d'état. Ensuite, je vais passer à la feuille de style. Et juste en dessous de nos histoires, je vais dire la marge 35 en haut et ça dira simplement automatique à gauche et à droite. Et ensuite, nous devrions probablement faire la même chose pour notre détenteur d'histoires. Sautons donc ici à ce conteneur et disons conteneur histoire et appliquons un style similaire ici. Et la raison pour laquelle je fais en sorte que ces instances soient séparées ici, c'est parce que nous devons mettre une couleur d' arrière-plan de blanc avec un rayon de bordure sur celle-ci. En fait, l'arrière-plan de notre page est blanc et notre exemple d'image, l' arrière-plan de Facebook est comme un gris clair avec des éléments de fond blancs. Je vais vraiment inverser cela. Je vais donc garder le fond blanc, mais je vais en faire un gris très clair. Allez-y et rafraîchissez-vous. Très bien, donc on a eu un meilleur espacement ici. Cette section peut encore utiliser un peu d'amour. Allons-y et faisons-le. Ajoutons un peu de rembourrage ici. Disons simplement 20 pixels. La course à la frontière a été un peu trop élevée alors qu'elle a baissé à 12. Et puis juste pour s'amuser, nous pouvons faire une image de conteneur d'état. Ensuite, nous allons juste mettre un rayon de limite de 50 % là-dessus, donc c'est un cercle complet. Ok, ça va bien. Et la prochaine chose que nous devons faire est d'ajouter une rangée de boutons essentiellement. Il peut s'agir de liens dans ce cas, mais nous allons utiliser des éléments Bootstrap. Nous allons donc faire des boutons. Vous pouvez donc accéder aux composants. C'est un groupe de deux boutons. Et nous pouvons simplement copier ce premier exemple. Mais tout d' abord, ce que nous voulons faire est à l'intérieur de notre conteneur d' état, nous voulons ajouter une autre ligne avec une colonne pleine largeur. Ensuite, nous pouvons coller notre groupe de boutons que nous venons de copier. Et puis, à partir de notre exemple, nous avons une étiquette vidéo d'identité avec photo, amis et une activité de slash de sentiments. Nous allons donc copier ça. Photo. Étiquetez les amis et les sentiments. Activité. Ok, donc nous pouvons aller de l'avant et rafraîchir et voir à quoi nous devons faire face maintenant. Ok, donc pas exactement ce que nous voulons. Et un groupe de boutons peut ne pas être le meilleur exemple ou les éléments utilisés pour cela. Je pourrais vraiment changer ça. Revenons donc en arrière et implémentons simplement un système de grille dans cette rangée et débarrassons d'un groupe de boutons. Je pense que le style va être plus impliqué pour obtenir ce que nous voulons plutôt que de le faire simplement dans un système de grille. Donc parfois des choses comme ceci ou des essais et des erreurs, il n'y a vraiment pas de mauvaise façon de le faire. Mais je vais le changer ici. Allons de l'avant et débarrassons-nous de ce groupe de boutons. Et puis la ligne, colonne grand tiret 12. Allons de l'avant et changeons ça par quatre. Et puis ici, nous allons simplement ajouter un lien. Et puis celui-ci dira une photo slash vidéo. Et nous pouvons copier cela, coller deux fois et le mettre à jour pour marquer des amis, ainsi que sentir une activité oblique. Cela devrait donc nous donner quelque chose un peu plus de ce que nous recherchons. Ok, parfait. Allons de l'avant et stylisons cela pour que cela ressemble à notre exemple. Nous pouvons donc dire conteneur d'état, puis cibler le lien, car c'est le seul lien présent dans ce conteneur. Conteneur de statut a. Et on peut dire couleur, 333, décoration de texte, aucun. Et puis sautons dans le conteneur de position lui-même dans disons, aligner le texte au centre. Super, donc ça devrait suffire pour nous obtenir ce que nous recherchons. Peut-être ajoutons un peu de rembourrage autour de cela pour lui donner plus d'espace. Donc, nous pouvons dire la ligne de conteneur d'état, et nous pouvons simplement dire marge, 10 pixels auto. Ok, parfait. J'ai l'air plutôt bien jusqu'à présent. Nous devons ajouter nos icônes ici. Allons-y et faisons-le très vite. Et juste pour que les choses soient simples, nous allons juste éditer ici. Nous allons le garder petit, 25 ans. Ok, parfait. Donc, d'après notre exemple, nous sommes très proches. On dirait qu'il y a une frontière ici, donc on peut le faire très rapidement. Nous ne pouvons faire qu' une classe appelée bouton à la ligne qui abrite les boutons. Et puis nous pouvons venir ici et dire conteneur d'état, ligne de bouton comme bordure d'un pixel solide. Ensuite, nous ferons une autre nuance de gris clair. Et on dirait que c'est beau, mais nous avons juste besoin d'un peu d'espace entre la bordure et nos boutons pour que nous puissions simplement rembourrer le haut, disons 15 pixels. Ok, parfait, très beau jusqu'à présent, notre prochaine section est une carte de contenu géante. Nous avons donc une autre image avec un nom, un sous-texte ou un sous-titre ici, le contenu réel, puis une image. Donc bootstrap, rendez ça vraiment facile. Vous pouvez entrer dans les composants, puis la carte. Ensuite, nous pourrons examiner les exemples ici et trouver celui qui répondra à nos besoins. Donc, en ce moment, celui-ci a l' air plutôt bien. Le titre est un contenu, puis des liens. Alors que nous continuons à faire défiler. Vous voyez que c'est un peu construit ici. Nous pourrions le faire. Éléments d'en-tête et de pied de page. Vous pouvez ajouter des guillemets en bloc, des choses comme ça. n'est pas exactement ce que nous recherchons, mais nous pouvons certainement travailler avec elle. Et il a l'air de l'alignement du texte, cartes de navigation, un peu intéressant. Et puis des images. Voici donc exactement ce que nous recherchons pour ce titre de voiture de l'image ci-dessous. Donc, allons-y et copions ça. Allons de l'avant et copions ce dernier. Et nous pouvons revenir ici. Et juste en dessous de cette section, nous allons ajouter une nouvelle section ou un nouveau conteneur. Et nous allons donner à celle-ci une classe supplémentaire appelée conteneur de contenu. Et puis à l'intérieur d'ici, nous ferons une ligne avec une colonne pleine largeur. Ensuite, nous collerons notre carte. Parfait. Ce que nous devons donc faire, c'est simplement sauvegarder cela et voir avec quoi nous devons travailler avant apporter des changements importants. Nous pouvons déplacer ce texte vers le haut , puis ce contenu en dessous. Allons de l'avant et apportons quelques changements. Nous pouvons avoir ce paragraphe sous le titre. Remarquez la classe de texte en sourdine qui lui donne en fait un aspect fondu ou gris plus clair. De plus, le petit élément lui donne un texte plus petit. Allons de l'avant et mettons une image d' espace réservé ici. Et puis celle-ci peut être, dirons-nous, 600 pixels sur 400 pixels de hauteur. Et allons-y et gardons ça. Rafraîchir Bien, jusqu'à présent, l'image est peut-être un peu plus grande. Ce n'est pas forcément un problème, mais c'est à peu près tout ça pour cette section. Dans notre dernière section, nous allons fermer avec la barre latérale droite ici, allons être très similaires à la première barre latérale que nous avons faite. Mais j'espère que vous appréciez le cours jusqu'à présent et nous allons passer directement à la section suivante. 14. Section 14 - barre latérale droite et conclusion: Bienvenue dans la dernière section de ce cours. Nous allons finir avec la barre latérale droite ici. En regardant notre exemple, nous pouvons réutiliser de nombreux éléments que nous avons utilisés jusqu'à présent. Nous pouvons utiliser le titre et d'autres styles similaires. Allons de l'avant et plongeons directement, sautons dans l'éditeur de code et revenons dans le fichier home.html. Ensuite, nous allons naviguer dans notre dernière colonne ici. À l'intérieur de cela, nous allons vouloir un conteneur. Et ensuite, nous allons vouloir une rangée. Et puis, à l'intérieur, nous ferons une colonne pleine largeur. Ensuite, nous voulons faire un H5. Et puis cet en-tête va dire sponsorisé. Il s'agit donc de la section Ajouter. Et juste en dessous, nous allons faire une autre rangée. Et puis cela contiendra en fait la petite icône portant le nom. Ensuite, nous aurons une image juste en dessous. Allons donc avec une grande colonne. Et puis ce sera notre image avec un espace réservé pour l'instant. Parfait. Et juste à côté de ça, nous allons faire une colonne en expansion. Et alors, il ne peut s'agir que d'un paragraphe. Et on dira juste une pizzeria. Et juste en dessous de cette ligne, faisons une autre ligne avec une colonne pleine largeur. En fait, cette image est contenue. Donc, ce qu'on veut faire, c'est faire 11. Et nous allons dire « offset ». Un. À l'intérieur de cette colonne, nous allons faire une image. Et nous allons juste dire 300 par 175 et rafraîchir et voir ce que nous avons. Ok, ça va bien. Vous pouvez donc voir que nous avons besoin d'un peu d' espacement juste au-dessus. Mais nous avons notre icône avec notre nom, puis nous avons le décalage d' une colonne pour que l'image remplit cet espace de manière appropriée. Allons de l'avant et ajoutons simplement quelques styles ici pour améliorer ce look. Ce que nous pouvons faire, c'est simplement dire le conteneur sponsorisé, copier cette classe dans la feuille de style et nous allons descendre. Nous allons juste dire marge, 20 pixels supérieurs. Et ensuite, l'image ne fera que le faire. En fait, nous avons deux images ici, donc nous devons être un peu plus précis. Ce que nous pouvons faire, c'est dire titre sponsorisé, puis nous allons simplement dire du contenu sponsorisé. Prenons d'abord la classe de titre. Je suis ici. Et ensuite, pour l'image ici, nous voulons un rayon de limite de 50 %. Et ensuite, pour notre contenu, nous en voudrons un peu moins. Nous allons donc dire peut-être 12 pixels. Ok, ça va bien. Et nous pouvons passer à la section suivante, qui est celle des anniversaires. Encore une fois, cette section va être assez simple. Ajoutons donc une ligne horizontale, une autre ligne, puis une autre route horizontale. Ensuite, nous sauterons ici. Commencez par un autre conteneur et nous donnerons également le cours de conteneur d'anniversaire et le mettrons ici. Nous allons faire une rangée. Il y a également une icône, donc nous allons simplement la copier ici. Gagnez du temps, puis nous changerons de pizzeria en anniversaires. Et puis juste en dessous des anniversaires. Je vais en fait confondre ça un peu. Ce que nous voulons dire, c'est une rangée de titre, comme ça. Donc div avec la classe de colonne pleine largeur de ligne, cela peut sauver les anniversaires. Et puis, ici, nous avons vraiment besoin de ça pour dire l'anniversaire. C'est ce que dit Jessica Eric aux autres. Jessica, Erica, les autres ont des anniversaires aujourd'hui. Je ne vais pas jouer avec les poids des polices de cette section, mais n'hésitez pas à le faire. Et juste à la fin ici, j'ajouterai un autre rafraîchissement horizontal de ligne. Et nous sommes plutôt bien. Dans notre dernière section, vous trouverez ici la liste des contacts. Je pense que c'est pour la fonctionnalité Messenger de Facebook. Eh bien, allons-y et réutilisons simplement quelque chose que nous avons déjà construit, qui est très similaire aux raccourcis ici. Allons donc simplement défiler vers le haut dans notre home.html et trouver notre liste de raccourcis non ordonnée, comme ceci. Copiez cela, puis faites défiler vers le bas. Ici, on peut dire div avec un conteneur. Nous dirons le conteneur de contact. Ensuite, avec une ligne, la largeur totale de la colonne ou une colonne pleine largeur, nous allons simplement coller cette liste ici. Nettoyez un peu l'espacement, modifiez le contexte. Et nous pouvons nous rafraîchir. Et nous sommes plutôt bien. Donc, nous pouvons faire un peu plus ici. Allons de l'avant et faisons des cercles de ces images, puis nous leur ajouterons un peu de bordure. Ce que nous pouvons faire, c'est passer à la classe des conteneurs de contact et à notre feuille de style. Et on peut dire que les images auront un rayon de bordure de 50 %. Et puis pour nous faciliter la tâche, pour cet exemple, nous pouvons dire l'image de conteneur de contact et de type étrange. Et on peut dire qu'ils ont une bordure de deux pixels, bouton bleu uni, sauvegardez-le et rafraîchissez. Et c'est effectivement en train d'entrer en vigueur. Il nous suffit donc d'ajuster rapidement notre style ici. Au lieu de l'image, nous avons besoin que ce soit le mensonge qui a le nième de type. Ensuite, nous dirons l'image à l'intérieur de ces éléments de liste. D'accord ? Et là, vous pouvez voir d'abord, troisième, cinquième, je ferai appliquer ce style. Donc, à propos de notre clone Facebook de la page d'accueil. En haut de la section ici, si vous voulez. J'espère que vous avez vraiment apprécié ce cours jusqu'à présent. N'hésitez pas à continuer avec ce que nous avons jusqu'ici. Il manque une conception très rugueuse d'un clone Facebook. Donc, si vous vouliez développer cela, vous savez, faites-en un peu le vôtre sur le contenu réel, les images réelles, rendez tout plus réactif et ainsi de suite. Je serais vraiment curieux de voir jusqu'où vous pouvez aller si isolé que vous avez suivi ce cours. J'espère que vous avez beaucoup appris. Si vous avez des questions, n' hésitez pas à me le faire savoir. Vous pouvez me contacter via Skillshare ou je suis également sur Twitter. J'espère que vous avez vraiment apprécié ce cours. Laissez-moi vos commentaires, s'il vous plaît. Dites-moi comment j'ai fait et s'il y a quelque chose que je peux améliorer s'il y a des sujets que vous voulez que je aborde. Faites-le moi savoir. J'ai vraiment aimé faire ces cours et j'espère que vous avez aimé les suivre. Merci encore, les gars.