De PSD à Bootstrap 4 : transformez votre conception Web en une page Web

1. Introduction au cours.: Hé tout le monde. Je m'appelle Luke Fetish. Je blogue sur lukefetish.com. Je suis développeur de logiciels professionnel depuis 1999. Mais la classe d'aujourd'hui est tout sur la façon dont nous pouvons transformer notre design web en une page web en utilisant Bootstrap 4. Si vous n'êtes pas familier avec Bootstrap. Bootstrap a été développé à l'origine par les gens de Twitter pour construire des pages web réactives super rapide. Par responsive, je veux dire des pages Web qui ont fière allure sur un appareil de n'importe quelle taille. Au cours de cette classe, nous couvrirons les bases de Bootstrap. Nous allons apprendre à inclure Bootstrap dans notre page Web. Nous apprendrons tout sur les fondamentaux de Bootstrap comme la grille et comment vous pouvez l' utiliser pour mettre en page votre web design pour le transformer en une page web. Ne vous inquiétez pas si vous n'avez pas votre propre design web. J' en fournirai un pendant le cours. Enfin, nous allons apprendre comment nous pouvons personnaliser l'apparence de Bootstrap pour nous assurer que notre page Web ressemble vraiment à la nôtre. Si vous avez des questions ou des préoccupations, n' hésitez pas à nous contacter. Je suis là pour être avec vous et prêt à vous aider à chaque étape de ce cours. Je suis super heureux que vous soyez là et j'ai hâte de commencer et de voir ce que vous construisez avec Bootstrap 4. 2. À qui est destiné ce cours ?: Alors, pour qui est ce cours ? Eh bien, cette classe est pour tous ceux qui veulent transformer un design de page Web en une page Web fonctionnelle et fonctionnelle. Nous allons utiliser Bootstrap 4 pour cela. Bootstrap est beaucoup plus bas niveau que les constructeurs de sites Web graphiques comme Wix, et Weebly, et des outils comme ça, mais il fournit un excellent compromis entre construction de pages Web rapidement et la flexibilité d'écrire du code personnalisé. Mais cela signifie que vous allez faire du codage pendant cette classe. Je suppose que vous êtes un peu familier avec HTML avec CSS, et avec l'utilisation d'un éditeur de texte. Maintenant, si vous n'êtes pas familier avec ces choses, alors ne vous inquiétez pas parce que nous sommes ici sur Skillshare, et il y a un tas de classes géniales ici que vous pouvez utiliser pour apprendre ces choses. Les professeurs sont fantastiques et vous serez au courant en un rien de temps. Donc, si vous êtes prêt, asseyez-vous bien pour la prochaine conférence où nous examinerons en détail ce que vous apprendrez pendant ce cours. 3. Ce que vous apprendrez dans ce cours.: Bonjour à tous et bienvenue à la vidéo. Nous allons vérifier ce que vous allez apprendre dans ce cours. Qu' est-ce qu'on va couvrir ? Eh bien, la première chose que nous ferions mieux de regarder, c'est mieux de savoir ce qu'est bootstrap de toute façon, je veux dire, est-ce un framework ou une bibliothèque ? Nous découvrirons d'où il vient, nous verrons quels problèmes cela résout, pourquoi tout le monde aimait tant l'utiliser, et n'introduisait aucun problème. Spoiler alerte encore ne fait pas peu, mais pas tellement que nous ne voudrions pas l'utiliser. Ensuite, nous allons passer aux concepts de bootstrap fondamentaux. Nous allons voir comment il gère la navigation, nous allons découvrir la grille d'amorçage, allons également voir comment les conteneurs, lignes et les colonnes fonctionnent. Après cela, nous allons passer à l'implémentation de la navigation bootstrap, nous allons voir comment les classes de navigation de bootstrap fonctionnent ensemble. C' est là que vous commencez à travailler sur votre projet aussi parce que vous pouvez commencer à implémenter ce tronçon. Nous allons voir comment nous pouvons rendre la navigation réactive. La navigation intérieure est, bien sûr, le menu que vous mettrez sur votre site Web pour vous conduire à différentes parties de votre site Web. Nous allons voir comment nous pouvons nous assurer que les écrans s'affichent bien sur écrans de différentes tailles comme sur votre ordinateur portable ou votre ordinateur de bureau, ou sur votre appareil mobile, puis nous verrons comment les menus déroulants fonctionnent également. C' est une autre chose que nous pouvons mettre en œuvre tout de suite dans notre projet. Après cela, passera à la grille d'amorçage. Maintenant, la grille est quelque chose qui est utilisé pour mettre en page une page Web. Mettre les choses sur une grille, c'est-à-dire comme des lignes et des colonnes, rend tout s'aligner bien, et il est également plus facile de les gérer lorsque nous changeons la taille de notre écran ou même simplement de notre navigateur. On verra, comme je viens de le dire, comment les tailles d'écran fonctionnent. Nous allons voir ce que sont les points d'arrêt et comment ils affectent la mise en page de votre page web, nous allons voir comment nous pouvons utiliser la cupidité dans différents contextes également. Comment la grille affecte différents travaux, comme la présentation du document global, comment ils peuvent l'utiliser pour structurer et formater une table de données. Aussi comment nous pouvons l'utiliser pour implémenter le pied de page. C' est la partie inférieure de notre page Web qui a peut-être la navigation à nouveau, peut-être qu'il a vos coordonnées, peut-être qu'il a comme vos icônes de médias sociaux, ces choses. Nous verrons comment la grille peut nous aider dans ces différents endroits. Après cela, nous allons passer à l'utilisation des composants d'entrée bootstrap. Nous allons voir comment nous pouvons utiliser les formulaires et les contrôles et ces formulaires comme une entrée de texte ou des boutons. Nous allons voir comment nous pouvons personnaliser bootstrap pour nous assurer que notre site Web ou notre design Web était comme le nôtre. Nous allons utiliser des règles CSS individuelles pour le faire. J' utiliserai aussi quelques styles de bootstrap. Mais surtout, nous allons explorer comment nous pouvons utiliser notre propre CSS pour changer l'apparence d'une page. Asseyez-vous bien pour la prochaine conférence. Lorsque nous commencerons à introduire bootstrap, nous découvrirons ce que c'est, comment cela fonctionne là où nous voulons l'utiliser. 4. Qu'est-ce que Bootstrap ?: Bonjour tout le monde. Bienvenue à notre prochaine leçon sur la transformation d'un design web en une page web avec Bootstrap 4. Avant d'aller plus loin, nous devrions parler de ce qu'est réellement Bootstrap. Eh bien, qu'est-ce que c'est de toute façon ? Bootstrap est une collection de CSS et JavaScript. Cela a été développé à l'origine par Twitter pour fournir un comportement cohérent sur tous les appareils et navigateurs. Ce que nous disons ici, c'est que nous avons Bootstrap. Cela nous aide à faire des pages Web qui ressemblent et se comportent de la même façon tout le temps. Parce que si nous réfléchissons à la façon dont les gens regardent le Web en ce moment, nous avons des téléphones et des tablettes, portables, puis des ordinateurs de bureau. Vous savez que chacun d'entre eux pourrait utiliser un navigateur différent. Potentiellement les personnes utilisant plus d'un navigateur sur le même appareil. Chacun de ces navigateurs va afficher votre page Web juste un peu différemment sur ces différents appareils et rendre votre page Web partout est compliqué et fastidieux. C' est le problème que Bootstrap résout. D' où vient Bootstrap ? GetBootstrap.com. Si on y va, c'est ce qu'on trouve. Voici la première page de Bootstrap. Vous pouvez le télécharger ici et vous avez instructions ici sur les autres façons de l'utiliser également. Je vais vous montrer comment vous pouvez l'utiliser quand nous commencerons à construire notre projet. Mais Bootstrap a-t-il des inconvénients tomber ? Oui. Un couple. Typiquement 100K -200K lorsque vous l'incluez. Lorsque vous incluez l'intégralité de Bootstrap dans votre page Web. C' est une très petite chose à télécharger à chaque fois. Bootstrap, même si c'est moins omniprésent qu'il ne l'était auparavant, il est toujours super populaire et il y a beaucoup de sites Web Bootstrappy à la recherche. Mais comme je l'ai déjà dit, nous allons nous assurer que nous pouvons personnaliser notre site Web afin qu'il ne ressemble pas vraiment à tous les autres sites qui utilisent Bootstrap. Maintenant que nous avons eu une petite introduction à Bootstrap et ce que c'est. Dans la leçon suivante, nous allons passer en revue les concepts fondamentaux de Bootstrap. Nous allons en apprendre davantage sur les blocs de construction de Bootstrap que nous pouvons utiliser pour créer nos interfaces. 5. Aperçu des concepts Bootstrap de bootstrap.: Bienvenue à notre prochaine leçon sur la transformation d'un design web en une page web avec Bootstrap. Cette fois, nous allons vérifier quelques concepts fondamentaux de Bootstrap et donc ce sont les blocs de construction que nous allons utiliser pour mettre notre page Web ensemble et il y a vraiment deux catégories principales que nous allons chercher au cours de cette classe. Le premier est la navigation, le second est la grille Bootstrap et la grille est composée de conteneurs, de lignes et de colonnes. Alors vérifions ça un peu plus en détail maintenant. Donc, à la navigation. Imaginons que c'est comme une page web, une page web très ennuyeuse. Une page Web va avoir un menu en haut de celui-ci, ou généralement en haut, nous verrons d'autres options dans un instant et quand nous avons ces menus, nous les appelons la navigation. C' est ce qu'un utilisateur utilise pour naviguer sur notre site Web et ils auront souvent des choses difficiles comme la page d'accueil et la page à propos et je vais lier à la page de contact et peut-être que si vous utilisez un site auquel vous vous connectez, il y a un pour cliquer sur quelque chose qui vous concerne en tant qu'utilisateur. Ce menu peut apparaître en bas de la page ou sur le côté, n'a pas vraiment d'importance, c'est tout la navigation. L' une des choses que la navigation Bootstrap nous donne est les menus déroulants. Donc, lorsque vous cliquez sur peut-être votre menu utilisateur, vous obtenez une liste déroulante où arriver à faire des choses avec votre compte ou jouer avec les paramètres de la façon dont la page Web fonctionne ou le site Web fonctionne, ou simplement se déconnecter. navigation Bootstrap est également réactive. Lorsque vous regardez une page Web sur un petit appareil comme un téléphone, vous verrez l'une de ces petites choses en haut à droite de l'écran, généralement il est en haut à droite souvent appelé un hamburger et quand vous cliquez dessus, alors vous obtenez un autre sorte de menu déroulant à partir de là et c'est un moyen d'économiser de l'espace sur un écran de téléphone mobile. Nous avons donc toujours notre navigation, mais la plupart du temps, elle est cachée jusqu'à ce que l'utilisateur en ait besoin. Nous espérons juste que l'utilisateur devine à quoi sert ce truc de hamburger. Je pense que la plupart des gens sont habitués à cela maintenant. Nous avons donc parlé du fonctionnement de la navigation. Maintenant, nous allons jeter un oeil aux conteneurs de grille Bootstrap. Un conteneur est quelque chose qui surprend, contient d'autres composants de la grille Bootstrap et la chose importante à noter ici est que d'autres parties de la grille ne fonctionneront pas très bien à moins qu'elles à l'intérieur d'un conteneur et c'est l'un des compromis que nous obtenons avec l'utilisation Bootstrap est que parfois il peut être un peu difficile choisir et de choisir quelles parties de celui-ci nous voulons utiliser. Certains des composants, pas tous, mais certains d'entre eux sont définitivement interdépendants et donc si nous voulons utiliser l'un d'eux, nous allons utiliser, eh bien, plus d'un. Quoi qu'il en soit, nous avons un conteneur, c'est quelque chose que nous pouvons mettre des choses à l'intérieur et ensuite la partie suivante de la grille est une rangée. Une ligne est, comme vous pouvez vous y attendre, une disposition horizontale d'autres composants et nous pouvons donc mettre plusieurs lignes à l'intérieur d'un conteneur. Ensuite, une fois que nous avons nos lignes en place, nous pouvons ajouter des colonnes et des colonnes dans Bootstrap sont conçues pour avoir une taille spécifique. Ils se divisent toujours en groupes de 12. Donc, vous pouvez avoir une colonne qui prend toute la largeur de la grille ou vous pouvez en avoir une qui occupe un douzième de la grille et nous verrons une petite démonstration de travail de cela en ce moment, mais la chose importante à retenir est que lorsque nous utilisons la grille Bootstrap, nous allons mettre des choses à l'intérieur d'un conteneur. Dans ce conteneur, nous aurons probablement des lignes à l'intérieur de ces lignes auront des colonnes. Nous pouvons spécifier la taille de ces colonnes, et voyons comment elles se comportent en ce moment. Voici donc une petite page web mise en place juste pour montrer comment fonctionne la grille. Nous pouvons voir que j'ai un type spécial de conteneur qui est en fait une largeur fixe, n'occupe pas tout l'espace de l'écran, et à l'intérieur, vous ne pouvez pas voir les lignes parce que les lignes sont complètement occupées par les colonnes et vous rappelez-vous comment j'ai mentionné que les colonnes sont divisées en portions de 12. Donc, nous avons ce col-12 ici et j'ai utilisé ce nom col dash 12 intentionnellement parce que c'est ainsi que les colonnes sont référencées dans Bootstrap. C' est donc une petite introduction aux styles Bootstraping et à la façon dont ils ont nommé, et nous avons donc un col-12 qui signifie qu'il a 12 colonnes de large, ce qui veut dire qu'il prend toute la place. À venir à la prochaine rangée, nous avons col-6, ce qui est surprenant la moitié de la largeur de notre col-12, puis en dessous, nous avons 1, 2, 3, 4 rangées de plus et ils sont occupés par ces différents types de col pour les colonnes et ils ont tous l'air la même chose pour le moment. Mais vous pouvez voir que certains d'entre eux ont sm dans le nom, autres ont md dans le nom, autres ont lg dans le nom et cela fait partie de l'approche réactive de Bootstrap pour traiter la grille. Ce que cela signifie, c'est que lorsque nous avons un col pour colonne, ce que cela veut dire, c'est que ce sera toujours une colonne. Mais si nous rendons cette page un peu plus étroite, vous pouvez voir que notre conteneur se rétrécit, quand un conteneur rétrécit, les rangées rétrécissent et ainsi nos cols, eh bien, se rétrécit pour occuper leur plus petit conteneur, Mais une fois qu'on aura dépassé une certaine taille, on peut voir que quelque chose s'est passé ici. Qu' est-ce qui se passe ? Nous pouvons voir que ces col-lg-4 qui étaient auparavant des colonnes, ils ont tous été empilés les uns sur les autres et c'est ainsi que Bootstrap prend en charge les plus petites tailles d'écran et dit, eh bien, peut-être dans votre mise en page, vous voulez que ces choses soient lorsque vous êtes sur un grand écran, grand moniteur d'une sorte quelconque, mais quand nous arrivons sur un écran plus petit ou un moniteur plus petit ou juste une fenêtre de navigateur plus petite parce que je suis juste le rétrécir manuellement ici. Nous ne voulons plus qu'ils soient côte à côte parce qu'ils seront tous encombrés et donc nous les mettrons les uns sur les autres. Donc c'est pour le col large. Avec col-md, qui signifie moyen, il va faire exactement la même chose, mais pas avant d'entrer dans une fenêtre de navigateur de taille moyenne. Vous vous demandez peut-être à ce stade, eh bien, ce qui compte est moyen, ce qui compte est grand ? Ceci est basé sur les tailles réelles de pixels et nous allons regarder de près plus tard dans la classe les tailles de pixels exactes que Bootstrap utilise pour décider si nous sommes à un grand, moyen ou petit écran ou une petite fenêtre de navigateur. Encore une fois, une fois que je les presses un peu plus, vous pouvez voir que notre col-lg est empilé les uns sur les autres, nos colonnes moyennes se sont empilées les unes sur les autres et maintenant nous sommes à nos petites colonnes. Encore une fois, nous sommes un peu plus loin et ils s' empilent les uns sur les autres aussi et maintenant que Bootstrap a décidé que nous sommes sur un véritable petit écran ou une fenêtre de navigateur, et nous n'avons plus besoin de ces marges sur le côté. Vous pouvez voir qu'il prend 100 pour cent de la largeur de la fenêtre de notre navigateur, puis finalement nous écrasons tout le chemin vers le haut et ces colonnes col-4 parce qu'ils n'ont pas une taille d'écran. Ils n'ont pas sm, md ou lg dans leur nom. Ils sont toujours des colonnes et donc ils ne s'empileront jamais les uns sur les autres. C' est donc une introduction très rapide à la navigation et à la grille de Bootstrap. Ceci est destiné à vous donner un aperçu de haut niveau pour voir comment ces choses fonctionnent. Ensuite, nous allons continuer à implémenter une navigation réelle et c'est là que vous allez commencer votre projet. 6. Comment mettre en œuvre la navigation Bootstrap.: Hé tout le monde. Bienvenue de retour. Dans cette leçon, nous allons commencer à construire quelque chose. Nous allons mettre en œuvre la navigation pour notre projet. Maintenant, le projet sur lequel, eh bien, nous allons travailler ou sur lequel je vais travailler de toute façon, construit une petite partie de cette interface d'administration. Maintenant, si vous avez un design de votre propre, vous voulez mettre en œuvre, génial. Mais le point principal est que, il a tous les éléments que nous sommes intéressés à explorer pendant cette classe et que nous avons un peu de navigation haut de gamme. Nous avons notre pied de page en bas. Notre navigation a un petit menu déroulant là à partir de notre petite icône utilisateur. Même de l'autre côté, nous avons une mise en page générale ici à gauche, nous avons la marque et du texte de remplissage là-bas. Sur la droite se trouve la prochaine section majeure de la page web, nous avons une petite table. Nous avons aussi quelques entrées. Ce sont des choses que nous pouvons utiliser pour explorer en utilisant bootstrap pour implémenter la conception de notre page Web. Si votre conception ne contient pas tous ces éléments, vous pouvez toujours les mettre temporairement simplement pour explorer les concepts et vous assurer de tirer le meilleur parti de cette classe. Vous pouvez toujours les supprimer par la suite. Bien sûr, si vous n'avez pas de conception propre, je vous fournit celui-ci dans la section des ressources pour votre projet afin que vous puissiez travailler avec moi et construire cette même page Web. Comme je l'ai dit plus tôt, la section d'aujourd'hui est tout au sujet de commencer implémenter la navigation afin Bootstrap. navigation dans Bootstrap est implémentée en affectant certaines classes CSS Bootstrap à des éléments HTML, qui peuvent sembler belaboring l'évidence là, mais c'est à peu près comment allons-nous faire tout. Dans Bootstrap, nous créons des éléments HTML, nous leur appliquons des classes Bootstrap, puis nous obtenons tous les avantages de l'utilisation du système Bootstrap. C' est la structure de base de la navigation dans Bootstrap. Nous allons commencer par un élément de navigation englobant et ensuite nous avons une liste non ordonnée. Voici l'ouverture de la liste non ordonnée, la fermeture de celle-ci, et ces éléments au milieu. La façon dont nous transformons cela en une navigation Bootstrap réelle est en assignant ces classes à ces éléments particuliers. Nav éléments obtient navbar, navbar-light, navbar-toggleable-md. Celui-ci, en plus d'être une bouchée, est un peu ambigu quant à ce que cela pourrait signifier. C' est pour rendre notre navigation réactive. Dans Bootstrap 4, vous avez une navigation réactive ou vous n'avez pas de navigation du tout, cela ne fonctionne pas autrement. Vous pensez peut-être, eh bien, comment je me souviens de ces noms de classe ? Ils n'ont pas beaucoup de sens pour moi. Je dois être d'accord que dans Bootstrap, les classes de navigation ne semblent pas être super cohérentes ou faciles à retenir, donc c'est pourquoi je vais fournir notre navigation terminée comme un modèle que vous pouvez utiliser qui sera également dans vos ressources. Vous pouvez l'utiliser comme modèle pour vos futures conceptions. Parce que je sais que je suis sûr d'oublier un temps de classe vital qui empêche ma navigation de fonctionner. Je travaille aussi sur un modèle. Quoi qu'il en soit, nous commençons par appliquer ces classes CSS, navbar, navbar-light, navbar-toggleable-md à notre autre composant nav puis pour notre liste non ordonnée, nous disons que c'est le navbar-nav. Ce qu'on a ici, l'élément de navigation à l'extérieur. C' est notre barre de navigation que nous le contenons pour notre navigation et nous disons cette liste non ordonnée, cette ul, c'est la navigation qui va à l'intérieur de la barre de navigation. Puis enfin, nous disons que ces gars sont des articles de nav. Nous les assignons plus nav élément aux éléments de la liste. Faisons cela dans un code. Il s'agit du fichier squelette fourni dans les ressources de votre projet. C' est vraiment juste un fichier HTML de base qui a un tas de liens CDN réseau de diffusion de contenu vers Bootstrap et le fichier jQuery. C' est là que nous obtenons tous nos CSS et JavaScript de. Nous n'utilisons pas tout de suite. Mais je travaille à partir de ce fichier squelette avec tout inclus au début afin que nous n'ayons pas à continuer à y ajouter des choses au fur et à mesure que nous traversons. La seule chose liée à l'amorçage que nous incluons ici est cette police d'icônes matérielles. J' utilise cela pour les icônes qui sont dans l'application, c'est pourquoi c'est là. Je pensais qu'on devait commencer à construire notre parcours de navigation. Nous allons commencer par quelques tags de navigation. Je vais juste les implémenter sans aucune classe au début. Je trouve juste que beaucoup plus facile à faire au début, a le plus de sens pour moi. J' ai une liste non ordonnée, liste non ordonnée à nouveau, fermez ça et nous aurons nos éléments li. J' ai besoin d'aller vérifier notre design pour voir combien de choses nous avons dans notre navigation. Le truc délicat, c'est qu'on a 1, 2, 3, 4, 5, ici, et ensuite on a ces autres de l'autre côté ici. Nous allons les explorer dans une leçon ou deux. Mais le fait est que ce sont deux groupes distincts de navigation et en ce moment nous allons faire le premier, prix sur FAQ, Blog, contact, donc c'est un prix sur FAQ, blog et contact. clair que la prochaine chose que nous devons faire est de vérifier la navigation impressionnante dans un navigateur. Voici notre fichier dans le navigateur. Comme vous pouvez le voir, il ressemble exactement à une liste non ordonnée. Bien sûr, cela est prévu. Nous n'avons pas encore appliqué de style à ces éléments, donc nous dirons que la classe est égale à navbar et ensuite navbar-light. Navbar-light est juste pour la couleur. De quelle couleur voulons-nous que ce fichier soit ? Il va être de couleur claire. Ensuite, nous avons notre excellent navbar-toggleable-md, md est pour moyen, ce qui signifie que nous voulons avoir un comportement réactif pour lancer sur un navigateur de taille moyenne. Ensuite, nous avons la classe égale navbar-nav. Enfin, nous pouvons avoir, en fait, ce n'est pas tout à fait enfin, mais nous allons faire semblant que c'est enfin pour l'instant, Nav-item. Je vais les mettre là pour ces gars. Voyons à quoi ça ressemble, je sais à quoi ça va ressembler. Eh bien, ce n'est pas comme n'importe quelle navigation du tout. C' est un peu mieux parce qu'ils s'espacent horizontalement maintenant, ou qu'ils sont disposés horizontalement plutôt que verticalement. Mais quand même, c'est dégueulasse. Le fait est que nous voulons qu'ils soient cliquables donc nous devons les mettre dans un élément cliquable. La chose est dans la navigation Bootstrap, nous utilisons une ancre et nous allons définir le href sur le prix de hachage. C' est ce qu'on va faire pour l'instant. Finis ça. Plus nos tags 'a'. Maintenant, ça ne va toujours pas avoir l'air super pour toi. Reviens ici, on peut voir qu'ils se sont transformés en choses cliquantes, mais ils sont tous regroupés et c'est parce qu'on a besoin d'une autre classe. Ensuite, nous disons classe égale nav lien. Nous rechargeons cela et finalement, notre petit menu est transformé par magie en navigation de style Bootstrap. Quelque chose d'intéressant va se passer ici. Si je écrase ce navigateur, vous pouvez voir qu'ils tombent sur le côté là et verticalement à nouveau. Maintenant, c'est le comportement réactif. Comportement réactif par défaut de Bootstrap. Il veut réorganiser notre menu dans un menu vertical est dès que notre navigateur devient plus petit que la taille moyenne. Comme je l'ai dit, nous allons explorer ce que ces désignations moyennes, petites et grandes plus tard. Mais si je change cela en sm et puis retourne ici et recharger la page. Je peux devenir un peu plus petit avec l'écran maintenant avant qu'il commence à sauter autour. Mais nous allons changer ça en effet. Mais ce que nous avons fait ici est d'implémenter notre premier bit de navigation. Ce serait un excellent moment pour vous d'essayer cela dans votre propre projet. Rappelez-vous si vous avez rencontré des problèmes, s'il vous plaît faites-le moi savoir. Je serai très heureux de t'aider. Pendant ce temps, restez serré pour la prochaine conférence où nous allons rendre notre navigation réactive un peu plus sensible et voir si nous pouvons éviter d'avoir ce menu vertical par défaut. 7. Comment rendre Bootstrap réactif.: Hé tout le monde, bienvenue. Dans la leçon d'aujourd'hui, nous allons vérifier comment nous rendons notre navigation Bootstrap réactive. Comment allons-nous le rendre plus réactif ? Parce que, il est déjà réactif maintenant. Il répondra à la taille de l'appareil sur lequel nous regardons bord. Mais ce n'est pas vraiment le meilleur en ce moment parce que si nous le regardons, ici c'est, nous avons notre petit menu en haut ici et si nous rendons ce navigateur plus petit, vous pouvez voir que j'ai le code en arrière-plan. Si vous le faites plus petit et répondez à la taille de notre navigateur, il obtient une mise à jour du navigateur et change d'être vertical plutôt qu'horizontal, c'est cool. Mais si nous sommes sur un téléphone portable et que notre écran est plus que ce genre de format, alors notre menu prend énormément d'espace en haut de l'écran et nous ne voulons pas cela. Ce que nous voulons faire à la place est de donner à l'utilisateur la possibilité de faire le menu s'étendre et s'effondrer. Pour ce faire, nous allons devoir utiliser du JavaScript et nous n'allons pas écrire de JavaScript. Nous devons juste inclure les bibliothèques JavaScript dans notre code source et comme je l'ai dit dans une leçon précédente, le fichier que j'ai travaillé, le fichier squelette a déjà ce truc inclus juste pour la simplicité, mais si vous aviez juste d'aller de l'avant avec votre propre fichier et que vous venez d'inclure le CSS Bootstrap, il est maintenant temps d'aller et d'inclure ces autres fichiers JavaScript. Vous vous demandez peut-être comment je fais ça ? Comment puis-je savoir ce dont j'ai besoin et d'où je l'obtiens ? La façon la plus simple de le faire est de se tourner vers bootstrap.com. Alors dirigez-vous vers la page Bootstrap. Vous pouvez simplement taper Bootstap dans le Google que vous obtenez ici, aller pour commencer, et dans Quick Start, vous pouvez voir qu'ils fournissent très souvent une option de copier-coller si vous cliquez sur la petite copie dans mon presse-papiers. Ceci est pour le CSS, mais nous sommes intéressés par le JavaScript et voici le JavaScript ici est signé pour vous. Cliquez sur « Copier dans le Presse-papiers », puis vous pouvez simplement aller et le coller dans votre code. Voyons le moyen facile d'inclure ces fichiers. Encore une fois, nous avons besoin de jQuery, Popper et Bootstrap JavaScript. Nous avons besoin de ces trois car le JavaScript Bootstrap utilise jQuery et Popper. Nous allons également ajouter un bouton à notre menu, sorte que nous pouvons cliquer sur le bouton et faire le menu se développer et s'effondrer. Ensuite, nous allons enfin envelopper notre<ul dans a<div, et nous aurons toujours quelques classes et surtout la valeur d'identité ou d'ID qui dira au JavaScript, hey, c'est la chose qui doit être développée et réduite. Je suis sûr que vous avez déjà rencontré ce scénario avant. Si vous regardez le web sur un petit appareil, vous allez souvent rencontrer l'un de ces petits gars ici en haut à droite de cet écran, souvent dérisoire appelé l' icône du hamburger parce que certaines personnes pensent qu'il semble comme un hamburger. Pour moi, ça ressemble plus à regarder un grille-pain. Mais de toute façon, c'est la chose sur laquelle nous cliquerions, puis notre menu s'étend et l'utilisateur a la possibilité de cacher le menu jusqu'à ce qu'ils en aient besoin et de le développer, cliquez dessus et vous avez terminé. C' est la structure de notre HTML de navigation pour le moment, nous avons notre élément nav et ensuite nous avons une liste non ordonnée, écoutez les éléments de liste à l'intérieur. Maintenant, ce que nous allons faire est, comme je l'ai mentionné, ajouter un bouton qui viendra immédiatement après notre élément nav. Il aura une travée à l'intérieur, et ensuite nous aurons cette div. Il commence juste au-dessus de notre élément de liste non ordonné et se termine juste en dessous pour envelopper notre liste, ce qui veut dire que c'est une navigation enveloppante autour MenuContent et ce sont les changements au HTML que nous allons faire. Ce que nous allons faire est que nous allons commencer par ajouter notre bouton et c'est l'élément span à notre code. Si vous codez avec moi travaillant sur votre projet, ce serait un moment génial pour ouvrir cela et obtenir du codage aussi. Nous allons le faire en petits morceaux au fur et à mesure que nous allons juste rendre les changements plus petits et plus faciles à gérer. Ici, je suis dans mon code et voici où nous avons notre navigation. Donc, voici notre élément nav, liste non ordonnée, ou si elle se ferme, et puis je vais lister les éléments à l'intérieur. La première chose que nous allons faire, comme je l'ai dit, c'est qu'on va ajouter un bouton. Les sons peuvent ajouter un bouton juste ici et à l'intérieur ce bouton nous allons avoir une portée qui va être vide. Que nos meilleurs efforts changent, que se passe-t-il ensuite ? Maintenant, nous allons devoir ajouter quelques classes et quelques autres attributs à notre bouton, faire faire quelque chose d'intéressant ou le configurer pour qu'il puisse faire quelque chose d'intéressant. Vous remarquerez peut-être que nous n'avons aucun rôle ou attribut aria ici. Je pense que je vais inclure un attribut de rôle plus tard quelque part dans notre code mais le fait est que je manque beaucoup de données ou d'attributs d'accessibilité pour notre mackup ici. n'est pas parce que je veux que mon code soit inaccessible, je veux juste le garder aussi propre et minimal que possible aux fins d'enseigner comment Bootstrap fonctionne. Si vous êtes habitué à travailler avec des attributs d'accessibilité comme ça, s'il vous plaît ne pensez pas que je préconise de ne pas les utiliser et ce n'est certainement pas le cas du tout. Mais pour revenir à notre code, nous avons le bouton ici, Il faut quelques classes nav bar bascule, parce que son travail est de faire basculer notre barre de navigation ouverte et fermée, et navbar-toggler droit. Ce qui est une classe à dire, il devrait être sur le côté droit de la navigation. C'est un bouton. Il a cet attribut de bascule de données appelé collapsus et hachage cible de données ou livre NavbarNavDropdown. Ces deux sont les choses qui diront au JavaScript que nous incluons pour Bootstrap. Ah, ce bouton a un rôle spécial à jouer et il va être la chose qui élargit notre menu et la chose qu'il veut développer et réduire, il aura un ID, c'est un sélecteur CSS ici de hachage ou livre navbar Dropdown. L' autre changement que nous voulons faire ici est l'ajout de navbar-toggle icône à cette plage. Nous n'avons pas eu à mettre quelque chose dans la travée nous-mêmes, si nous lui donnons cette classe, le CSS Bootstrap remplira une petite icône pour nous. Commençons à ajouter ça maintenant. Ici, nous avons, je ne peux pas coder à nouveau et navbar-toggle icône. Si nous sauvegardons cela et puis jetons un coup d'oeil dans notre navigateur, je viens de faire un rechargement et nous pouvons voir une différence. Si je l'écrase, nous pouvons voir que nous avons notre bouton ici que notre menu n' est pas encore caché juste parce que nous avons fait la moitié des changements que nous devons apporter. Si je vais cliquer dessus, rien ne se passe. Revenons en arrière et voyons quelles autres modifications nous devons apporter à ce code pour développer et cacher notre menu. La prochaine chose que nous devons faire. Eh bien, nous devons envelopper notre liste non ordonnée dans un div. Je le ferai avant de faire autre chose. Voici notre liste non ordonnée, fermant div et puis ouvrez la div là-dedans. Vous pouvez m'entendre tout à coup faire le calcul sur combien de lignes doivent être indentées. C' est trop [inaudible]. Vous avez cette div enveloppant notre élément de liste non ordonné. Maintenant, nous allons devoir mettre quelques classes sur notre div. Je vais devoir lui donner une carte d'identité. Maintenant, cet identifiant NavBarNavDropDown est opposé à la chose dont nous avons parlé à notre bouton. C' est ainsi que nous identifions l'élément qui doit être élargi et effondré. La classe est que nous lui donnons l'effondrement et l'effondrement navbar. Réduire et l'ID devrait être NavbarNavDropDown et dire maintenant que vous devriez voir quelque chose d'un peu plus intéressant. Je vais rafraîchir mon navigateur et regarder notre barre de navigation a disparu parce que nous avons notre navigateur contracté un peu de la mine. Si je tire à nouveau le navigateur, nous pouvons voir notre menu, notre navigation apparaît et disparaît et notre bouton apparaît et disparaît et si nous allons et cliquez sur notre bouton et notre navigation s'étend et ils peuvent le réduire à nouveau. C' est ainsi que nous pouvons implémenter une navigation plus réactive dans Bootstrap à l'aide d'un bouton pour développer et contracter ou pour afficher et cacher notre navigation. 8. Comment ajouter un menu à la navigation Bootstrap.: Bonjour à nouveau et bienvenue dans notre classe PSD à Bootstrap 4. Dans cette leçon, nous allons en apprendre davantage sur l'implémentation d'un menu déroulant Navigation. Juste pour faire une actualisation rapide, un menu déroulant pour une navigation ou pour un menu de site Web est où nous avons un menu régulier comme celui-ci et puis je l'utilise clique dans l'un des éléments de menu. Nous avons un autre petit sous-menu qui apparaît en bas de l'élément de menu sur lequel nous avons cliqué. Voici la chose qui est le plus important à retenir à ce que ces menus déroulants, ils juste un autre élément li ou liste dans notre navigation normale. Voici notre vue simplifiée de ce à quoi ressemble notre navigation, exprimée simplement sous forme d'éléments HTML. Je sais qu'on a enveloppé ça dans un div et que tu mets un bouton en haut. Mais c'est la structure fondamentale de la navigation dans Bootstrap. Ce que nous pouvons faire lorsque nous voulons un menu déroulant à partir de l'une de nos options de navigation ou l'une de nos options de menu est d'ajouter un nouvel élément de liste avec la liste déroulante égale classe. Voici la chose, quand nous regardons la maquette que j' utilise personnellement pour implémenter le projet que je fais pour cette classe particulière, nous pouvons voir que j'ai un menu déroulant sur le côté droit ici et il descend de cette petite icône d'utilisateur, mais elle appartient à cet autre groupe d'options et ce que nous avons ici sont deux éléments de navigation distincts. Nous avons des prix sur si un contact de blogue file d'attente et puis nous avons cette autre mise à niveau de groupe , puis une cloche pour les alertes et une petite icône d'aide, puis ce menu utilisateur. Ce sont deux éléments de navigation séparée et lorsque nous voulons des morceaux de navigation séparés dans Bootstrap, nous allons avoir deux listes non ordonnées séparées. Nous faisons cette deuxième liste non ordonnée à peu près de la même manière que nous avons fait la première liste non ordonnée afin d'implémenter notre deuxième élément de navigation. Si vous codez seul aussi maintenant serait un bon moment pour ajouter une deuxième phase de navigation si vous travaillez sur la même maquette que la messagerie instantanée. Encore une fois, si votre projet ne nécessite pas la deuxième phase de navigation, alors j'irais juste modifier de toute façon, juste dire que vous avez une pratique et voir comment cela fonctionne et à quoi cela ressemble. Je vais implémenter cela à peu près exactement de la même manière que j'ai implémenté le premier. Je viens d'avoir un implémenté ce deuxième menu aussi vite que possible. J' ai accéléré ça pour que tu n'aies pas à passer trop de temps à me regarder taper les choses. Ce que vous devez savoir ici, c'est que c'est fondamentalement la même que la première navigation que nous avons implémentée , voici la première ici, où nous avons ul, navbar-nav, li classe égale nav-item, li égale nav-link, puis quelques trucs à l'intérieur d'un élément. La seule vraie différence jusqu'à présent est que si l'un d'eux suit exactement le même modèle, il a une mise à niveau dedans. Les trois suivants n'ont pas de texte à l'intérieur, ils ont un élément i avec des icônes de matériau de classe , puis le texte de l'icône que nous voulons entre les balises i. Maintenant, c'est ainsi que fonctionne la police des icônes de matériel de Google. C' est juste pour moi, un moyen vraiment pratique d'obtenir facilement des icônes dans l'application. Mais celui qui nous intéresse vraiment est en bas ici qui ne sont pas des notifications, c'est une personne. Si nous jetons un coup d'oeil à cela dans un navigateur avant de faire autre chose, juste pour savoir où à. C' est notre nav tel qu'il était et le voici maintenant, voici notre petite personne, notre aide, nos notifications, mise à niveau. Maintenant, que vous pouvez voir qu'il est écrasé contre l'autre navigation ne semble pas très séparé et nous voulons séparer pour indiquer qu'il a un but différent parce que c'est une nouvelle navigation. Tout cela concerne l'utilisateur, ce sont des choses qu'ils font qui sont liées spécifiquement à eux ou des actions qu'ils peuvent taper. Alors qu'à gauche, on a des trucs bleus. Sur la gauche ici, nous avons des choses qui se rapportent au site Web Prix et À propos, FAQ et Blog, Contact, choses comme ça et nous voulons une certaine séparation entre ces. Ce que nous pouvons faire ici, c'est que nous allons mettre une autre classe contre notre ul, uto, ml-auto, qu'est-ce que ça veut dire ? Ceci fait partie d'un raccourci que Bootstrap a adopté pour déplacer les choses sur l'écran. Ce que cela signifie vraiment, c'est la marge gauche auto, donc ml-auto. Cela signifie simplement mélanger l'espace disponible que nous avons sur le côté gauche de cet élément de navigation et ensuite je vais le pousser jusqu'à droite de l'écran. Si nous sauvegardons cela et nous allons regarder notre navigateur, recharger, nous y allons. Mais ce que nous devons faire maintenant est en fait accrocher comme un sous-menu de notre petite icône utilisateur. Pour ce faire, nous allons ajouter une classe deux i, la plupart du bas li, ou la plus basse classe d'élément de liste égale à la liste déroulante. Je vais le faire ensuite, ici nous ajoutons notre petite classe li égal à la liste déroulante, puis nous revenons à notre présentation. Puis à l'intérieur de l dernière liste déroulante, ou notre dernier élément de liste où nous allons aller vers le bas. C' est la structure que nous voulons avoir. Nous allons avoir enfermé Buddy Li ou Buddy Li fermé qui est notre menu déroulant, que nous venons de donner le menu déroulant plus deux. Ensuite, nous avons comme d'habitude que nous avons tous les autres et un élément, c'est la partie cliquable de celui-ci. Nous venons d'ajouter une icône utilisateur. Ensuite, notre sous-menu est en fait enfermé à l'intérieur d'un div. Ce sera un div qui entoure une série d'éléments, et donc un élément comprendra notre menu déroulant. Ce que je vais faire, c'est que je vais sortir div et un élément là-dedans avant de faire autre chose, <div> plus </div>, nous allons avoir six options là-dedans. Maintenant, nous allons ajouter quelques classes supplémentaires à chacune de ces choses. Nous avons déjà donné à notre élément de liste une classe déroulante. Notre élément i, en plus de la classe de lien nav habituelle que nous donnons à tous nos liens de navigation. Il a également besoin d'un attribut bascule de données défini sur la liste déroulante. Encore une fois, c'est quelque chose pour notre JavaScript Bootstrap à se connecter et savoir que cela va avoir une fonction spéciale. Ensuite, nous voulons sortir div et fermer notre menu déroulant pour avoir le menu déroulant de la classe, puis chacun de nos éléments à l'intérieur notre menu déroulant div va avoir une classe d'élément déroulant. Allons les mettre en ce moment. En fait, la première chose que je vais faire est de mettre du contenu dans ces choses. Mais il y a d'autres choses que nous devons faire ici, et c'est un attribut appelé data-toggle equal drop down. Ensuite, notre div est le menu déroulant de classe. Il y a un peu plus que nous avons à faire à ce menu déroulant, mais je voudrais juste jeter un coup d'oeil dans le navigateur maintenant. Juste parce que je trouve cela très utile à voir, aider à voir comment les choses fonctionnent. Parce que de cette façon, je sais quelle classe fait quel boulot. Vous pouvez voir que notre menu déroulant semble plutôt misérable pour le moment. Je suis la liste parce qu'il disparaît de la page, c'est parce qu'ils sont par défaut, alignés à gauche de la chose dont ils ont abandonné, alignés à droite de notre petite icône utilisateur. Parce que c'est à l'extrême droite de la page et qu'il y a une classe que nous pourrions utiliser pour le faire, menu déroulant. Jetons un coup d'oeil à ce rechargement, voici notre petit menu déroulant. Il y a quelques choses qui vont clairement mal avec ça. Pas moins que cela, options de menu déroulant comme juste répartis dans le menu déroulant et pas tous dans une belle ligne verticale. C' est parce que nous devons faire ces liens appropriés et leur donner une classe qui dira à Bootstrap qu'ils ajoutent des éléments de menu déroulant. Bien sûr que nous devons ajouter un cours, je vais juste les mettre en super rapide. Si nous regardons cela dans le navigateur maintenant, nous pouvons voir qu'ils sont tous disposés verticalement et joliment stylés dans une liste déroulante. Il y a encore quelques choses que nous devons faire. Si nous regardons notre design, nous pouvons dire que notre nom d'utilisateur est en gras, notre nom de plan est en italique et nous avons quelques séparateurs ici, juste en divisant les options dans le menu déroulant, donc nous allons ajouter ces à notre code maintenant. Bootstrap nous donne une classe non nulle, nous pouvons l'utiliser, la classe déroulante div. Nous avons juste besoin d'un div vide pour ça. Je peux mettre ça là-dedans, ça va juste faire un petit élément avec une bordure sur le fond. Nous sauvegardons cela, vérifions dans le navigateur. Vous pouvez voir que nous avons ajouté des diviseurs maintenant très agréable. La dernière chose que nous devons faire est de styliser notre nom d'utilisateur et notre nom de plan. Nous pouvons simplement utiliser de vieux éléments HTML réguliers pour cela. On va avoir des forces et des em. Une fois de plus, nous allons vérifier notre navigateur, recharger, nous y allons. Voici notre nom d'utilisateur, notre nom de plan, et puis nous avons beaucoup d'options à la place comme nous nous y attendions. Bien sûr, notre navigation est réactive. Si nous marquons la feuille jusqu'à ce que nous arrivions à une petite icône de hamburger et que nous l'ouvrons, vous pouvez voir que nous pouvons entrer dans notre petite icône d'utilisateur et notre liste déroulante fonctionne toujours comme nous l'aurions prévu, et bien sûr, si nous ouvrons cela encore une fois, nous pouvons voir qu'il maintient son état et qu'il reste dans la position déroulante. C' est ainsi que nous pouvons implémenter un menu déroulant réactif en utilisant la navigation de Bootstrap. 9. Créez une mise en page avec des containers, des lignes et des colonnes de colonnes de conteneurs.: Hé tout le monde, bienvenue. Dans cette leçon, nous allons vérifier comment nous pouvons utiliser grille Bootstraps pour créer notre mise en page Web. Tout aussi rafraîchir super rapide. J' ai parlé de la grille. Il est vraiment divisé en conteneurs ou en un conteneur global. Ensuite, dans ce conteneur, nous pouvons avoir des lignes, puis dans ces lignes, nous pouvons avoir des colonnes. Nous mettons le contenu de notre site Web dans ces colonnes afin que Bootstrap puisse les réorganiser pour nous en fonction de la taille de notre navigateur ou de l'appareil sur lequel nous regardons la page Web. Aujourd'hui, nous allons vérifier comment nous pouvons utiliser ces colonnes pour créer une mise en page globale de notre page Web. Ceci est le contenu principal de notre page web. Je manque le [inaudible] à de cette capture d'écran juste pour plus de clarté. Mais nous avons ces deux colonnes de trucs dans notre page vraiment. Nous avons celui à gauche avec une identité de marque et un texte en dessous. Ensuite, à droite, nous avons nos données principales. Je suppose que nous avons notre titre, nous avons une entrée pour rechercher avec un bouton pour ajouter un nouvel élément de données. Cela montre des informations sur les formulaires de site Web, d'ailleurs et des informations sur ces formulaires. Chaque élément de données est un formulaire spécifique et individuel qui peut être affiché sur un site Web. Des informations sur ces formulaires sont présentées dans un petit tableau. Nous allons explorer comment nous pouvons utiliser grille de Bootstrap pour implémenter cette mise en page globale. À un niveau élevé, ce que cela va ressembler est une grande bande de divs. Mais ce que nous avons est un div externe ici, qui est notre conteneur, puis div à l'intérieur, ce qui va être un rôle. Ensuite, nous avons ces deux autres divs. Chacun d'entre eux sera une colonne, une pour le côté gauche, une pour la droite. Ce que je pense que je vais faire, c'est que je vais insérer ça dans le code maintenant. Ensuite, nous pouvons aller et mettre les styles Bootstrap appropriés sur ces cadeaux pour les faire fonctionner comme des conteneurs, des rangées et des colonnes. Si vous êtes en train de faire votre propre projet, que vous utilisiez les simulations appliquées dans cette classe ou l'un des vôtres. C' est le moment idéal pour recommencer à travailler là-dessus. N' oubliez pas de poster vos projets dans l'espace de projet de classe afin que nous puissions voir comment vous allez, vous pouvez obtenir des commentaires sur le travail que vous faites. Ou si vous avez déjà 20 problèmes, c'est une excellente occasion de les obtenir. Ici, nous sommes dans et hors code et vous pouvez voir que nous avons mis en œuvre notre navigation ici. Ce qu'on va faire, c'est aller au bas de cette navigation, les fermer. Comme la ligne là-bas et c'est là que nous faisons tous nos divs. Nous aurons un div pour notre conteneur et un autre pour notre rangée. Puis à l'intérieur, nous aurons la colonne 1, la colonne numéro 2 et nous pouvons numériser. C' est la mise en page fondamentale du contenu principal de notre page web. Je vais juste mettre un petit commentaire contenu principal. Puis un petit à la fin là juste pour dire que c'est là que cela se termine. Cependant, le regard sur cela dans le navigateur, parce que vraiment il est totalement rien à voir encore. C' est ce que nous avons dans notre code. Maintenant, nous allons commencer à mettre dans certaines classes, nous allons avoir un conteneur, une rangée, col-md-4 et puis col-md-8. Je vais mettre ça comme dans la carte maintenant. La classe est égale au conteneur. Je vais juste copier cela quelques fois et changer cela ligne puis col-md-4 et puis col-md-8. Ce que nous avons ici, c'est notre conteneur global contenant notre ligne et notre ligne a deux colonnes dedans. Nous avons une colonne qui prend quatre places et une autre qui en prend huit. Rappelez-vous de la leçon précédente où je parlais de la façon dont nous avons 12 espaces de colonne vraiment comme au total dans Bootstrap. C' est une façon de dire, eh bien, la colonne de gauche va prendre un tiers de la page et notre colonne de droite va prendre les deux tiers. Dans la prochaine leçon, je vais regarder les colonnes plus en détail afin que nous puissions parler plus sur le fonctionnement ces largeurs de colonnes et plus sur la façon dont ces désignations comme md, qui signifie moyen comme dans un écran de taille moyenne. Nous allons parler de leur fonctionnement aussi. Mais pour cette leçon, il suffit de suivre et vous pourrez voir un exemple de leur fonctionnement dans la pratique. Maintenant, nous allons travailler sur la colonne de gauche. Ce que nous allons faire, colonne de gauche, vous voyez que je l'ai mis en évidence ici en bas. Ce que nous allons sortir, cette colonne 10 qui s'appelle md-4. Nous remplissons simplement cela car nous allons avoir une autre div, qui sera une autre ligne, puis une autre div qui sera une colonne. Alors on aura une image là-dedans. C' est une identité passive, mais une image de marque et leur logo. Ensuite, dans notre prochain div aura une autre ligne, qui aura une autre colonne. Ensuite, ceci, etc, représente le texte. C' est important par la loi ainsi de suite. Ce qu'on va faire, c'est mettre tous ces divs à l'intérieur de col-md-4, qui est dans la colonne de gauche. Voici col-md-4. Je vais faire un petit commentaire à ce sujet aussi. Colonne. Ça ressemble à ça et dis ça. C' est la bonne colonne. Juste mettre un peu d'espacement et quelques commentaires ici, cela devient un peu bondé avec tous ces divs et colonnes et ce que nous avons flotté là-bas. Juste pour que nous puissions les voir individuellement et clairement, donc ce que nous allons avoir à l'intérieur de nos avants de vacances, nous allons avoir un div qui représentera une rangée. Vraiment, nous avons deux rangées, donc nous aurons deux de ces divs extérieurs. Ensuite, à l'intérieur de chacun de ceux-ci, nous avons une colonne, qui sera une autre div. Alors à l'intérieur de celui-ci, nous avons notre image. À l'intérieur, nous allons avoir un message. Maintenant, j'ai mon image pré-préparée. Si vous travaillez sur l'exemple que j'ai fourni, le code squelette provient de mon dossier, qui contient également une image, dans le répertoire de l'image. Là, on a une image et ça s'appelle le dopage d'entité. Je vais mettre un attribut qui équivaut à 100 pour cent. C' est un stop gap étant que je fais ici. Parce que vraiment ce que nous voulons faire est de styliser ceci avec un CSS personnalisé individuel pour notre site Web. Mais je ne fais pas de CSS pour le moment. Je laisse tout cela jusqu'à la fin lorsque nous personnalisons le look de notre page web, sorte que ce n'est pas tout comme tomber styles bootstrap. Mais pour le moment, je veux juste rester avec 100 % bootstrap juste pour qu'on puisse voir comment ça marche et qu'on ne boue pas vraiment les eaux avec leurs propres étoiles. Dans la dernière leçon vidéo de cette classe, c'est là que nous allons regarder le CSS que nous pouvons appliquer à notre site Web pour le rendre moins bootstrappy et plus comment propre ? Pour l'instant, pour empêcher l'image de prendre en charge l'ensemble de l'écran, je vais juste mettre cet attribut de largeur dessus. Je passe à la prochaine partie de contenu. Je sais que c'est une rangée ici, et ça va être une colonne. Ça va être une rangée. Cela va aussi être une colonne. Je sais à l'intérieur qu'on a besoin d'un peu de contenu. H2, c'est important. Je vais juste le remplir rapidement. Mais c'est essentiellement le contenu que nous devons avoir dans la colonne de gauche de notre page. C' est évidemment avant que nous ayons commencé à le coiffer avec les styles de bootstrap. Jetons rapidement un coup d'oeil à notre navigateur Web pour voir à quoi il ressemble. Voilà, nous avons eu notre marque, puis notre texte. Déjà, il ressemble à peu près à la façon dont nous aimerions qu'il ressemble. Nous allons juste ajouter quelques lignes, et des colonnes à notre DBS, juste la contrainte un peu, et cela aidera avec notre style plus tard aussi. Nous pouvons voir que tout est contraint en une seule page, qui est notre colonne de gauche. Mais quels styles allons-nous lui donner ? Nous allons commencer la deuxième contenant div comme une rangée. Ensuite, la div qui détient l'image comme milieu froid 10. Maintenant peut-être un peu contre-intuitif d'appeler les dix à l'intérieur d'un Col MD 4. 10 semblerait être plus grand que les quatre, donc il demande comment s'adapter à cela. Encore une fois, c'est quelque chose que nous allons examiner de près dans notre prochaine leçon. Nous allons avancer et définir notre prochaine ligne, ajouter encore un autre Col MD 10. C' est assez simple à faire dans notre ligne de classe de code égal. Classe égale. Si je me souviens comment taper du code, en fait MD 10. Bien sûr, cela va être la même classe égale K. C'est un 100 pour cent du style que nous devons appliquer pour la colonne de gauche. Si nous allons rafraîchir cela dans notre navigateur, nous pouvons voir qu'il est écrasé littéralement. Encore une fois, nous parlerons plus de la façon dont cela fonctionne dans la prochaine leçon sans colonnes, et le dimensionnement. Comme nous l'avons implémenté comme une colonne pour un écran de taille moyenne dès que nous écrasons cela. B sur la taille d'un écran de taille moyenne, nous pouvons voir que soudainement ils se développent pour prendre 100 pour cent de la largeur, qui est ce que nous attendons. Lorsqu' il n'y a plus assez d'espace pour les afficher sous forme de colonnes individuelles, elles sont toutes empilées les unes sur les autres pour s'assurer qu'elles sont lisibles, qu'elles peuvent être lues facilement et qu'elles sont encore assez bien disposées pour être consultées confortablement sur un petit appareil. C' est notre colonne de gauche qui s'occupe pour l'instant. Mais nous devons aussi continuer et faire la moitié droite de la page ou les deux tiers droit de la page, désolé, aussi. Encore une fois, nous avons une mise en page assez simple. Div et un H1 à l'intérieur, ce qui dit faux. Je ne vais pas prendre la peine d'appliquer ces divs, et le style séparément dans le code cette fois, parce qu'il n'y a rien de super choquant. Cette div externe est notre col MD 8 que nous avons créé au tout début de cette leçon. A l'intérieur, nous avons une rangée, puis un col MD 4 qui contiendra nos formulaires H1. Vous pouvez voir qu'il y a beaucoup d'autres contenus sur le côté droit ou dans la colonne de droite. Mais nous allons implémenter cela dans les leçons suivantes lorsque nous examinons le traitement des entrées de formulaire et des contrôles, puis l'implémentation d'une table de données en utilisant bootstrap également. Mettons cette implémentation initiale de notre colonne de droite dans notre code. Il y a une colonne de droite très solitaire et vide. Nous allons avoir une classe div égale chambre, alors nous avons un div égal col MD 4, formulaires H1, et nous allons finir notre div. Je pense que nous avons fini, ci-dessous que dans notre navigateur et surprise, surprise, il y a nos formulaires. Maintenant, ce que nous avons fait ici est implémenté deux colonnes. Comme lorsque nous écrasons un peu la page, nous pouvons voir qu'ils s'empilent les uns sur les autres, ce qui est le style réactif que nous voulons. Nous pouvons aller et cliquer sur notre menu de navigation. Nous pouvons voir qu'il s'ouvre et se développe, puis pousse tout le contenu principal vers le bas de l'écran. Mais le fait est que notre navigation, et notre contenu principal survivent ensemble. S' affiche bien sous la forme d'un format de grande page [inaudible]. Dans notre prochaine leçon, nous examinerons les colonnes beaucoup plus en détail. Nous allons voir comment les colonnes ont différentes largeurs sont définies et aussi comment Bootstrap traite les colonnes pour différentes tailles d'écran. 10. Colonnes Bootstrap en détail en détail.: Bienvenue de retour. Dans cette leçon, nous allons regarder les colonnes Bootstrap un peu plus en détail. Il y a quelques choses que nous n'avons pas vraiment couvertes super soigneusement jusqu'à maintenant, c'est comment nous pouvons avoir de grandes colonnes comme col-10 dans colonnes plus petites comme col-quatre et la définition des grands, moyens et petits écrans. C' est en utilisant comme lg et md et sm pour les grandes, moyennes et petites. Nous n'avons vraiment pas regardé ou expliqué ça. C' est à ce moment que nous éclaircissons ces choses. Ce que je vais parcourir maintenant, c'est comment les colonnes sont définies dans Bootstrap, comme le numéro de col dash, disons col-un par exemple. Si vous avez un oeil à dans le CSS Bootstrap, vous verrez que col-one est défini comme 8.33333 pour cent. Si nous allons regarder col-2, c'est 16,66667 % du double de celui de col-1 et ensuite si nous passons au col-3, nous voyons que c'est 25 %. Ce n'est pas vraiment pour nous de nous souvenir de ces pourcentages, mais pour remarquer qu'ils sont des pourcentages et qu'ils augmentent de huit et un tiers pour chaque nombre. Ce qui nous donne dans l'ensemble, c'est 12 colonnes qui augmentent de huit et un tiers, de taille égale, jusqu'à 100 pour cent. chose la plus importante ici, comme je l'ai dit, c'est qu'ils sont des pourcentages, ne sont pas des largeurs dures. Si nous définissons quelque chose comme un froid, nous savons qu'il sera de 8 et 3 pour cent de large de tout ce qui le contient. Jetons un coup d'oeil à un petit exemple. Disons qu'on a un div et qu'on lui a donné la classe Col-4. Si on regarde le col-4, on sait que ce sera comme 33 et un tiers de ce qui le contient. Imaginons que cela sort à 100 pixels. Parce que même si ces styles sont définis comme pourcentages lorsqu'ils viennent à être rendus dans le navigateur, ils vont finir par une largeur de pixel réelle en fonction de la taille de la chose qu'ils contiennent dans et la taille de la page du navigateur. Cela va changer chaque fois que nous changeons la taille de la page du navigateur. Si vous le faites très large, peut-être que ce sera 200 pixels. Si vous le rendez très étroit, peut-être que ce sera comme 50 pixels. Le fait est que nous savons que c'est un col-4, ce sera 33 et un tiers de ce qu'il est assis à l'intérieur. Maintenant, si nous allons mettre une autre colonne dans notre div col-quatre, et nous donnons à ça une classe de col- neuf. Maintenant, si on va regarder Col-9 et on peut voir que c'est 75 pour cent. Cela signifie que le col-neuf sera ce qui va occuper 75 % des col-quatre. Si col-quatre est un 100 pixels, cela signifie que col-neuf aura 75 pixels de large. C' est pourquoi il est valide, mais peut-être un peu déroutant de voir des colonnes avec de grands nombres, à l'intérieur des colonnes avec de petits nombres. Ce qu'on dit, c'est qu'il va occuper un certain pourcentage de la chose qui le contient. La prochaine chose que nous devons considérer sont les tailles d'écran Bootstrap. Maintenant, vous voyez courir en haut à droite de l'écran, nous avons col-3, col sm 3, col-md-3, col-lg 3, et col-xl- 3. Ces sm, md, lg et xl représentent tous les petits, moyens, grands et extra grands respectivement. Tout écran de moins de 576 pixels de large sera traité comme un très petit écran. Cela signifie qu'un col-trois, par exemple, j'ai utilisé trois comme un exemple pratique parce qu'il a un bon nombre rond, 25 pour cent. Nous savons que col-trois aura toujours 25 pour cent de largeur sur un très petit écran. Mais pour les petits écrans, pour les écrans moyens, pour les grands écrans et pour les grands écrans, cela ne sera pas traité comme la colonne zéro. Cela sera traité comme des colonnes de 100 pour cent de large ou des colonnes d'une largeur de 100 pour cent. Si nous regardons les écrans suivants, chaque écran qui est au-dessus de 576 pixels, puis col-trois, qui est très petit, sera toujours traité comme une colonne, col sm trois, petit. Sera toujours traité comme une colonne ainsi, obtient toujours 25 pour cent de largeur. Cependant, les colonnes moyennes, grandes et extra grandes seront traitées comme des colonnes de 100 % de largeur, ce qui signifie que lorsqu'elles apparaissent comme des colonnes, elles seront empilées les unes sur les autres. Mais si nous montons une autre taille, nous pouvons dire que notre taille d'écran est maintenant de 768 pixels. Tout ce qui est de 768 pixels ou plus large, la colonne extra petite serait traitée comme 25 pour cent de large. La petite colonne sera traitée à 25 pour cent de large et la colonne moyenne sera traitée à 25 pour cent de large, mais les grandes et les grandes colonnes ne le seront pas. Alors on peut continuer à monter comme ça. Nous avons un grand écran défini comme 992 pixels, puis un très grand écran défini comme 1 200 pixels. Encore une fois, ce n'est pas vraiment le point de se souvenir ces valeurs définies dans le CSS de Bootstrap. Le fait est que nous avons ces mnémoniques pratiques, sm, md, lg et xl que nous pouvons utiliser pour dire ; bien sur les grands écrans, je veux que ces colonnes apparaissent, mais sur tout petit, je veux juste qu'elles soient empilées au-dessus de chaque autre. Puis vers le bas pour les petits écrans, on peut dire, eh bien, je vais utiliser ce col- trois parce que je veux que ce soit toujours une colonne, peu importe quoi. Je sais que c'est comme une diapositive assez compliquée pour regarder beaucoup de nombres et cela peut ne pas sembler super intuitif pour vous, mais c'est là pour vraiment expliquer la façon dont les différentes tailles d'écran et les différentes définitions de colonnes fonctionnent . Dans la toute prochaine leçon, nous allons examiner comment nous pouvons utiliser des colonnes pour différentes tailles d'écran pour changer l'apparence des choses lorsque nous affichons notre contenu sur des navigateurs de différentes tailles. Nous allons avoir une démonstration pratique de la façon dont cela fonctionne à venir. 11. Ajoutez une table de données avec de petites colonnes: Bonjour et bienvenue dans la leçon vidéo d'aujourd'hui, nous allons voir comment nous pouvons utiliser Bootstrap 4 pour implémenter une table de données dans notre PSD conçue dans notre première conception de cette page web. Ce que nous allons faire est d'implémenter cette petite table qui se trouve à droite de la page. C' est plus au milieu à droite. Il a cinq colonnes au total, mais quatre colonnes de données, les en-têtes et le nom, les impressions, réponses et la conversion, puis dans la cinquième colonne, nous avons quelques petites icônes avec faire des choses pour ajouter des lignes de données. Dans la leçon d'aujourd'hui, nous n'introduisons pas de nouveaux concepts ou idées bootstrap, nous allons simplement mettre en pratique les choses que nous avons déjà abordées. La première chose que nous voulons faire est d'implémenter quelques en-têtes pour notre petite table de données. Vraiment ce sera juste un div externe, qui sera une ligne contenant quatre div pour nos en-têtes. Je vais les insérer dans notre code maintenant, puis revenir et appliquer nos styles à eux. Ici, nous annulons les codes, vous pouvez voir notre implémentation initiale de notre colonne de droite ici, et il a juste cette forme H 1 à l'intérieur. Nous allons commencer ce qui sera dans votre rangée une fois que nous appliquerons à certains styles avec cette div ici et à l'intérieur de cette div nous aurons quatre div supplémentaires, pour nos en-têtes de colonne. A l'intérieur de chacun d'eux, nous allons juste mettre le nom de nos colonnes. Nous avons le nom, les impressions, les réponses et la conversion. Maintenant, vous pouvez regarder dans le navigateur et vous pouvez voir nos en-têtes de colonne s'affichent comme des div normaux exactement comme nous nous y attendions. revenant à la présentation, nous pouvons voir que nous allons assigner une classe de ligne à l'additif, et ici nous pouvons voir que nous combinons deux styles de colonnes à la première div, donc c'est le nom et pour le reste d'entre eux, nous leur donnerons un Appelez aussi. On a un autre style qui s'appelle le texte. C' est un style défini par Bootstrap qui s'aligne juste sans envoyer de texte dans cette div particulière vers la droite, et c'est la pratique standard pour les tables de données qui ont des valeurs numériques, nous allons les aligner le long de la droite de la colonne. Mais revenant à notre premier div, avec appel col md- 3 col- 2. Qu'est-ce que cela signifie ? Eh bien, cela signifie sur un écran moyen que cette colonne va occuper trois espaces de colonnes, mais sur un très petit écran appelé tableau de bord deux, alors il n'occupera que deux espaces de colonnes. C' est là que la flexibilité des styles de colonnes de Bootstrap intervient parce que nous pouvons appliquer un certain nombre de largeurs différentes à une colonne et que cela a changé en fonction de la taille de notre écran. Je vais appliquer les styles à nos en-têtes de colonnes en ce moment, et là, nous allons passer à travers et les appliquer rapidement. Nous pouvons regarder notre navigateur à nouveau, lui donner une actualisation, et il y a comment les colonnes espacent à travers l'écran comme nous nous y attendons. Si nous commençons à égaliser cela, vous pouvez voir que nous avons un petit problème ici où ils se rencontrent, ce n'est pas génial. C' est une autre de ces choses que nous allons corriger quand nous arrivons à appliquer un style personnalisé, mais vous pouvez voir ce qui s'est passé ici est que le nom est maintenant droit chemin en bas ici, vous pouvez voir le nom occupe beaucoup cet espace qu'il ne l'était auparavant. Il occupe une quantité égale d'espace sur la largeur de cette table que les autres colonnes. Alors qu'une fois qu'il est un peu plus grand, il obtient relativement plus d'espace. C' est notre colonne trois contre colonne deux style. Tout ce que nous avons à faire est d'aller et de définir quelques entrées pour les données de notre tableau. C' est à quoi ressemblera une ligne de données dans notre table. Nous allons avoir un div contenant externe, puis quatre div s pour nos données. Ils vont s'aligner avec ces en-têtes de colonne, puis un div supplémentaire pour nos icônes et je vais juste courir directement et regarder les classes qui s'appliqueront à eux en ce moment. Vous pouvez voir que le premier div va être une ligne et que les autres div s après cela, et ils vont être les mêmes que nos en-têtes parce que nous voulons que les données s'alignent sous le titre donc nous appliquons les mêmes styles. Je vais en fait passer et les faire maintenant avant d'entrer dans nos icônes. Vraiment, tout ce que je dois faire est de prendre cette partie, en faire une copie , puis mettre quelques données et dire n'importe quel LP 1 et il a eu 2034 impressions et 1017 réponses qui va sortir à 50 pour cent taux de conversion a commencé à rendre les choses faciles sur moi-même. Vous ne voulez pas me voir ici assis et essayer de travailler à un taux de conversion de 34 pour cent de 2034 impressions Si nous allons vérifier à quoi cela ressemble dans un navigateur maintenant, donnez cela un rechargement et comme vous pouvez le voir, nous avons LP 1, 2034 impressions, 1017 réponses, 50 % taux de conversion et tout est bien aligné. Cela ressemble à peu près à ce que nous attendrions, et si nous serrons cela un peu plus, vous pouvez voir notre texte en cours d'exécution. Il faut des textes de tête qui courent les uns dans les autres, mais nous pouvons voir que nos colonnes s'alignent bien encore. Qu' est-ce qu'on va faire avec les icônes ? Ils seront toujours une colonne trois, donc ils peuvent prendre trois largeurs de colonne tout le temps. Je vais aller popup dans le code aussi. Il est temps de mettre nos icônes dans notre code pour qui et ici elles sont. Nous avons ajouté une colonne de plus à notre ligne, et ceci est assez similaire à ce que nous avons fait dans la navigation. Ensuite, nous avons une série de balises H contenant une balise I pour les icônes de matériau, et nous utilisons le nom d'icône de matériau approprié pour cette action. Comment ça ressemble dans le navigateur ? On a nos icônes qui pendent au bout de notre petite table. Il y a quelques choses à noter ici. La première est que nous ne nous attendions pas à montrer tout ça à la fois. Ce petit point est là pour dire, hé, attendez, il y a plus, venez jeter un coup d'oeil et donc quand vous allez passer la souris sur cette chose ou cliquez dessus ou quelque chose comme ça, les autres choses apparaîtront. Vraiment, nous voulons qu'ils apparaissent quand on fait la souris sur tout. C' est l'une de ces choses de style personnalisées que nous allons ajouter vers la fin de la classe, et l'autre chose à noter est que c'est comme une façon super artificielle afficher ces données parce que vous ne feriez jamais enseigné dans d'ici là ces données évidemment en direct. Ceci est une partie d'une page web, donc il serait rempli par les données d'un serveur quelque part, mais la façon de l'implémenter maintenant en HTML, juste parce que c'est une bonne chose pour nous de pratiquer et d'en apprendre davantage. C' est souvent la façon dont nous ferions ce travail de toute façon avec implémenté comme un type HTML de prototype, puis saisissons les bits de données hors du milieu du HTML et implémentons cela côté serveur. Ce n'est vraiment pas si fou après tout. Permettez-moi de mettre quelques lignes de données supplémentaires dans notre table pour le faire ressembler un peu plus à une table de données. On y va, je suis allé et posté dans un tas de trucs que j'ai sauvés plus tôt. Encore une fois, si nous vérifions cela dans notre navigateur, nous y allons. Voici un petit tableau de données sans icônes et à partir de divers éléments de données. Dans notre prochaine leçon, nous allons ajouter nos petits contrôles d'entrée à côté des mousses ici. Nous ajoutons ces recherches et ajoutons un nouveau formulaire. Contrôles qui sont dans notre conception de page Web. 12. Créer des commandes d'entrée Bootstrap sur Bootstrap de commande.: Bonjour encore. Dans cette leçon vidéo, nous allons voir comment nous pouvons définir des contrôles d'entrée en utilisant Bootstrap 4. Voici donc une petite conception de page Web et à côté de notre en-tête Forms, vous pouvez voir que nous avons une entrée avec une petite loupe dedans, qui est pour la recherche, et un bouton appelé Ajouter un nouveau formulaire, que nous devinons est par ajout d'un nouveau formulaire. Donc, nous verrons comment nous pouvons mettre en œuvre ces deux-là maintenant. Tout d'abord, voici notre maquette HTML pour implémenter un peu de contrôles d'entrée. Lorsque vous mettez l'un d'eux dans un formulaire, parce que vraiment dans une situation comme celle-ci, ce bouton Ajouter un nouveau formulaire ne va rien soumettre à un serveur. Il va juste ouvrir un petit pop-up ou une nouvelle page pour que nous puissions mettre les choses dans un formulaire et ensuite le soumettre à un serveur. Donc, il est juste là pour afficher un HTML similaire. Mais une telle entrée qui, va soumettre une requête au serveur le plus probable, puis le serveur va renvoyer quelques résultats. Donc, nous voulons mettre ça dans un formulaire. Encore une fois, nous sommes juste en train d'implémenter comme un prototype HTML aujourd'hui. Donc, nous n'allons pas implémenter de fonctionnalité de recherche, mais c'est ainsi que nous aimerions organiser notre HTML afin que nous puissions brancher cette fonctionnalité de recherche. Donc, la prochaine chose que je vais faire est de mettre notre maquette HTML dans notre code source, puis après cela, nous allons appliquer des styles à cela. Donc, nous sommes ici dans notre code et je regarde notre en-tête Forms, qui est comme la première chose que nous voyons dans notre colonne de droite. Tout ça se passe sur la même rangée. Donc, je vais le mettre à l'intérieur de la ligne div immédiatement après notre colonne Forms. Donc la première chose que nous allons avoir, c'est notre formulaire. Cela peut sembler contre-intuitif. Mais c'est ainsi que cela va devoir fonctionner, et c'est la façon dont les styles Bootstrap fonctionnent en ce moment. Tu verras de quoi je parle dans un instant. Dites Input, puis évidemment [inaudible]. Ensuite, après notre formulaire, nous avons un autre div. C' est là que va notre bouton, Ajouter un nouveau formulaire. Laisse-moi vérifier notre maquette. Oui, j'ai utilisé le cas Title pour ça. Laisse-moi changer ça. Revenons à notre présentation et voyons quel genre de styles nous pouvons appliquer à notre formulaire et à nos entrées. Tout d'abord, nous allons donner notre formulaire, la classe en ligne de formulaire. Si vous ne vous souvenez pas, en HTML, tous nos éléments sont des éléments blocs ou en ligne. Les éléments en ligne s'alignent horizontalement, d'un côté à l'autre. Les éléments de bloc s'alignent verticalement, de haut en bas. Mais nous voulons que notre formulaire se comporte comme un élément en ligne parce que nous voulons qu'il apparaisse sur la même ligne que nos autres entrées et comme le h1 à côté de lui. Donc, nous allons lui donner le form-inline plus puis aura un form-group suivi d'une colonne div. Pour moi, cela semble à l'envers. Je pense que notre colonne devrait être comme l'élément contenant et la forme devrait être à l'intérieur. Mais croyez-vous, les styles ne fonctionnent pas très bien si nous le faisons de cette façon, et c' est actuellement ainsi que les documents Bootstrap recommandent de travailler avec Forms. Nous avons mis la colonne à l'intérieur du formulaire et ensuite nous avons notre élément d'entrée. Après cela, nous avons notre div contenant pour notre bouton, qui va juste être une colonne de largeur trois pour les petits écrans. Alors allons-y et mettons-les dans notre HTML et nous verrons ce que nous obtenons. Donc, notre formulaire est classe sur inline, et div va être form-group et ensuite nous avons une classe de trois colonnes sur un petit écran. Alors on aura la même chose pour ce type. Nous allons donc charger ça dans notre navigateur. Rechargez, puis vous pouvez voir ce que nous avons obtenu cette forme, et vous pouvez voir ce qui est révélé partout une fois de plus, mais qui a réparé ça sans style. C' est donc à peu près tout ce qu'il y a pour mettre en œuvre nos contrôles d'entrée. Dans notre prochaine leçon, nous allons implémenter le pied de page et ensuite nous aurons fini avec notre partie bootstrap de l'implémentation de la page, puis nous allons passer à notre CSS personnalisé pour l'obtenir pour correspondre à la conception que nous avons commencée avec. 13. Comment créer un pied de page du pied dans Bootstrap.: Bonjour à nouveau tout le monde. Dans cette leçon, nous allons voir comment nous pouvons utiliser Bootstrap pour implémenter un pied de page dans notre page Web. Maintenant, c'est une autre de ces conférences. Nous n'allons pas explorer de nouveaux concepts Bootstrap, mais nous allons voir comment nous pouvons l'utiliser pour implémenter notre pied de page qui est la partie en bas de la page Web juste là. Maintenant, s'il ne fait que répéter notre navigation principale sur notre site Web, et il aura un petit avis de copyright tout en bas. Voyons à quoi cela ressemble dans notre HTML. Ici, nous l'avons. Nous commençons par une balise de pied de page englobant, la balise de cinq pieds de page HTML. Ensuite, nous avons un div englobant, qui va avoir une classe de liquide de conteneur. Maintenant, dans bootstrap, nous avons deux types de conteneurs. Nous avons le conteneur seul, qui est une largeur fixe, puis le liquide de conteneur qui est toute la largeur de la page. Nous voulons que notre pied de page soit la pleine largeur de la page dans ce cas. Après cela, nous allons avoir une ligne puis une colonne que nous lui avons également assignée, ce qui est une façon de dire que nous voulons que nos marges aient une valeur d'auto, ce qui est une façon de les centrer. Après cela, nous aurons une autre ligne puis une autre div centrée, et nous avons terminé. Mettons ça dans notre code maintenant. Nous allons mettre cela sous notre conteneur qui contient toutes les autres colonnes qui illustrent ce texte qui forme la table de données. Tous ces trucs et nous commencerons par notre pied de page juste ici. Si je peux nous épargner tous de mes fautes de frappe. [ inaudible] est égal conteneur pour le plomb. Quand aussi eu notre racine, et puis nous aurons notre classe égale mx-auto. Ensuite, nous fermerons cette div. Ensuite, nous allons répéter exactement la même structure à nouveau. Pour notre prochaine rangée, je mettrai ça juste là. C' est essentiellement cette structure dont nous avons besoin pour notre pied de page. Qu' est-ce qu'on va mettre à l'intérieur ? Vraiment, c'est juste une répétition de notre navigation principale. Nous avons 1, 2, 3, 4, 5 liens. Tarification sur le blog FAQ et contact et HRF à la livre des valeurs. Tarification que comme un cube blog contacts dans la journée réelle, ils seraient fuites vers d'autres pages sur notre site. Mais pour notre prototype, nous nous en tiendrons avec ceux-ci. Ensuite, nous devons mettre dans notre avis de copyright, qui va être deux espans.L'une avec le symbole de copyright l'autre avec notre marque, Copyright 2017. Si nous jetons un oeil à ce que cela ressemble dans notre navigateur, et là nous allons. Nous avons fait passer que si vous bloquez le contact et ensuite la marque 2017, bien sûr, cela ne ressemble pas à notre maquette, mais dans la toute prochaine leçon, nous allons aller appliquer CSS à cette implémentation pour nous assurer qu'il correspond à notre design original. 14. Comment personnaliser une page Web Bootstrap.: Bienvenue à tout le monde. Dans cette dernière leçon, nous allons passer en revue les styles personnalisés que nous pouvons appliquer à notre page Web pour qu'elle corresponde à notre problème de conception web, comme vous pouvez le voir, nous avons un peu de travail à faire, mais cela ne prendra pas trop de temps. Je vais faire face à ces changements assez rapidement. Il y en a quelques-uns, mais surtout ils sont assez petits. Vous n'avez pas à vous soucier de prendre des notes ou quelque chose comme ça parce que je vais fournir le fichier CSS final dans le cadre des ressources du projet. Vous pourrez y revenir plus tard. Ici, nous sommes avec le code. Jusqu' à présent, j'ai mon fichier index.html sur le côté gauche ici, et sur le côté droit j'ai un code de fichier form-admin.css, qui est vide pour le moment, c'est là que va aller notre CSS personnalisé. Maintenant, j'ai créé un sous-répertoire CSS dans mon dossier de projet, et nous ferons référence au nouveau fichier CSS même s'il n'y a rien dans notre fichier HTML d'index. C' est le tout premier changement que je vais faire. Au lieu de HTTP comme polices Google, etc. Je vais juste mettre notre form-admin.css juste là et enregistrer cela. La toute première chose que je vais faire est de pousser notre navigation sur notre site juste à travers un peu et j'utiliserai effectivement une classe bootstrap à faire alors et c'est l'une des classes que nous n'avons pas couvertes auparavant. Ça s'appelle offset-md-4. Cela fonctionne comme une colonne sauf que ce n'est pas quelque chose dans lequel nous mettons les choses, nous l'utilisons pour pousser les choses à travers un certain nombre d'espaces de colonne. Dans ce cas, nous voulons que notre barre de navigation soit enfoncée sur quatre espaces à partir de la gauche. Je vais mettre ça là et je verrai à quoi ça ressemble dans le code pour m'assurer qu'il a l'effet que nous voulons. Nous voici, cette page web, sauvegardez cela et rechargez-la plutôt, et nous pouvons voir que notre navigation sur le site a été poussée à travers, qui est ce que nous voulons et la prochaine chose que nous voulons faire est ajouter quelques modifications à la police en utilisant pour la page web dans notre conception, nous utilisons une police appelée dernière, et vous en avez trois ou plus. Je ne sais pas comment le prononcer avec eux. On a trois façons différentes pour ça. Je comprends que dans cela à partir des polices Google, puis nous le définissons dans notre corps et définissons la taille de la police du corps. Encore une fois, je vais vérifier dans le navigateur juste pour m'assurer qu'il y a un peu de changement, et là nous pouvons voir que j'ai trouvé a changé, et la prochaine chose que nous voulons faire est enfin entrer en couleur dans cette barre de navigation pour le moment, il est très pâle et notre design, comme vous pouvez le voir, utilise cette couleur de fond bleu, vert clair. Nous ferions mieux de le mettre aussi. Il est là. Qu'est-ce qu'on a ici ? Eh bien, la première chose que nous faisons est en fait de définir le poids de la police pour la navigation parce qu'il est en fait un peu plus grand que le corps du texte. Après cela, nous commençons à définir notre couleur d'arrière-plan pour notre navigation. Je suis en train de définir une nouvelle classe appelée navbar-brand-bg ou navbar-brand-background et de définir la couleur d'arrière-plan à cette valeur verte bleue, et après cela, nous disons n'importe quel lien de navigation qui est à l'intérieur de la barre de navigation qui est à l'intérieur de navbar-brand-bg le définissons sur blanc. Ensuite, nous avons une règle similaire lorsque les éléments de la barre de navigation sont survolés ou que nos liens ont survolé. Ensuite, nous les mettons à la couleur bleue plus foncée, verte. Juste pour donner un peu de rétroaction à l'utilisateur que quelque chose se passera quand il clique dessus. Mais tout cela référençant cette nouvelle classe signifie que nous devons l'ajouter à notre HTML. Nous y voilà, et je vais juste ajouter cette classe à navbar, et ce sera navbar-brand-bg. Nous allons jeter un oeil à cela dans notre navigateur, nouveau recharger et, n'est pas si excitant. Enfin, un fond coloré. Mais si je ferme mon navigateur, je pense que nous allons rencontrer quelques problèmes. Quand on change à notre navigation ouais, réactive. Regarde ça. Nous avons cette bande bleue particulière qui traverse le haut, et tout le reste semble être un ordre qui est bon. Heureux de dire que, cependant, nous voulons faire quelque chose sur ce groupe bleu vert qui traverse le sommet là-bas. Dans notre mode de navigation réactif. Donc, je dois faire quelque chose juste un peu non évident ici, qui est la classe additive égale la marque navbar, puis mettre un espace vide là-dedans et fermer cela, et vraiment ce que nous faisons est de profiter de classes de Bootstrap qui sont toutes configurées pour fonctionner ensemble bien, donc notre bouton à bascule est configuré pour être une certaine hauteur et cette classe de marque de navbar est définie pour être une certaine hauteur, et sans que je ne puisse coder à la main cette valeur de hauteur dans notre CSS personnalisé, je peux profiter de la marque navbar et le laisser faire pour nous. Cliquez sur recharger, et nous y allons. Donc, la navigation semble juste un peu plus saine maintenant, et belle. Je me sens mieux à propos de la façon dont les choses ont déjà l'air. Donc la prochaine chose que nous voulons faire. Est si vous jetez un oeil à notre petite icône utilisateur ici, assis là regardant parfaitement heureux avec le reste de ces icônes. Mais si vous regardez notre design web, nous pouvons voir que nous avons ce petit cercle derrière l'icône. Donc je vais mettre quelque chose pour ça maintenant, et ici on y va. Donc, il y a quelques choses qui se passent ici. L' un est que nous définissons une icône utilisateur de classe, définissant la couleur d'arrière-plan pour elle, envoyant une couleur de premier plan pour elle. Régler le rayon de bordure à 50 pour cent est essentiellement faire un petit cercle rond et régler manuellement la largeur, décaler un peu plus large et plus haut dans l'implémentation web que dans la conception. Juste parce que cela va avoir besoin de travailler un peu mieux pour nos styles réactifs et de compenser peu de rembourrage qui reste dessus ainsi pour s'assurer que notre petite icône utilisateur est centrée en arrière-plan et nous avons redouté important après cela. Juste parce qu'il y a des styles plus spécifiques qui s'accrochent dans notre icône, remplaçant notre rembourrage à gauche. Plutôt que de faire une règle CSS artificiellement spécifique pour notre icône utilisateur, j'utiliserai le mot-clé important là, définissant une couverture d'arrière-plan pour le hubbub, et finalement, nous avons seulement besoin de ces rembourrages si nous sommes dans notre mode responsive . Ce qui signifie que si nos pages sont vues sur un appareil plus petit, alors nous avons besoin de ce rembourrage supplémentaire. Mais si nous sommes sur un gros appareil, un appareil de 768 pixels ou plus large, alors nous n'avons pas besoin de rembourrage supplémentaire. J' ai donc cette petite requête multimédia juste ici, juste pour éteindre la cheville sur le côté gauche, et tout ce que nous devons faire maintenant est d'appliquer notre nouvelle icône d'utilisateur de classe. Nous allons donc l'appliquer à une balise, à l'œil, mais voir l'icône d'un utilisateur de balise. Sauvegardez cela, retournez au navigateur, et j'ai déjà lié pour que vous puissiez le voir là maintenant, et si nous fermons cela, accédez à notre navigation réactive. On peut dire que ça marche là aussi. C' est ce qu'on veut ? Ensuite, il est temps d'ajouter juste un peu d'espace pour respirer à notre disposition. Les choses semblent écrasées, et maintenant page Web pour le moment, et je pense que si nous appliquons peu d'espacement à notre classe de lignes, alors cela aura l'air beaucoup mieux. Donc un but, je dirai que c'est probablement trop. Maintenant, je pense que c'est bien. Nous allons donc appliquer un objectif de Head-space à nos rangées. Donc, dans notre CSS, je vais, ne rentre pas vraiment dans toutes les belles catégories. Je vais juste le mettre en haut, dis point. Je ne l'aime pas là parce qu'il les mélange sur les éléments HTML. Créer plus d'espace dans la mise en page, la ligne. Donc la moitié d'un em. Sauvegardez ça, revenez au navigateur. Recharger. Je ne sais pas, j'ai dit que je ferais un plein, n'est-ce pas ? Ouais, je pense qu'un em plein sera mieux. Un em. On y va. Je suis beaucoup plus heureux avec ça. D' accord. Ecoute, je suis content qu'on ait un peu plus d'espace dans notre plan. La navigation est beaucoup plus agréable. Maintenant, il est temps de s'occuper de notre pied de page, je crois. Il plane dans l'espace, il n'a pas de couleur d'arrière-plan. Il est temps de réparer ça maintenant. La première chose que je vais faire est d'ajuster le style pour notre corps, il est là. Qu' est-ce qu'on fait ici ? Nous fixons un minimum de hauteur à 100 vh. Vh est une unité de hauteur verticale. Ce sont 100 d'entre eux qui dit fondamentalement que la hauteur minimale de notre page web sera la hauteur de notre écran de navigateur. Ensuite, nous définissons l'affichage pour les fléchir et pour la flex-direction vers la colonne. Tout cela est pour aider à faire notre pied de page coller au bas de, pas coller au bas de la page, il ne sera pas collant mais il sera placé au bas de la page même si le contenu de la page n'est pas suffisant pour remplir l'ensemble hauteur de notre navigateur. C' est bien, mais maintenant nous avons besoin de quelque chose pour notre pied de page. Mettons-le ici parce que c'est un élément HTML. Nous dirons « margin-top : auto ». D' accord. Voyons comment ça marche. On y va. Il est poussé, descendu au fond. Il est un peu trop près du fond maintenant vraiment et il a besoin de sa couleur de fond et d'autres styles aussi bien. Cela semble assez grand, je vais le mettre un peu juste pour être en dessous de notre nav, style HTML, pied de page, si ce n'est pas trop évident. En plus de lui donner une marge supérieure, j'ai réduit le poids de la police à 300 pour rendre ce texte en bas juste un peu plus chic. J' ai introduit la couleur de fond, une hauteur minimale de 100 pixels, rembourrée un peu. J' ai mis la couleur sur blanc et ajouté un peu de rembourrage à nos liens juste pour qu'il ne soit pas si bondé, j'ai inséré le fond. J' ai présenté quelques styles, notre texte de marque et le droit d'auteur. Donc, notre texte de marque est cette petite chose qui dit « The Brand », je le fais assez lourd. Le droit d'auteur est pour le symbole de droit d'auteur ou l'ensemble. En fait, le texte du copyright, je veux qu'il soit un peu plus petit que le reste. En fait, nous devons l'utiliser avec succès. Je vais devoir réorganiser un peu notre pied de page, ce qui est juste pour imbriquer ces travées ensemble. Donc juste comme ça. Je pourrais simplement mettre le tout sur une ligne juste pour que nous puissions voir assez facilement à quoi ça ressemble. Je vais sauver ça, retourner au navigateur. Je l'ai sauvé. Maintenant, je recharge et il y a notre pied de page web. C'est génial. La prochaine chose que je veux aborder est cette image, The Brand. Si vous pouvez nous voir fouiller l'autre jour, nous avons développé nos outils. Je vais les fermer maintenant. Vous pouvez voir que nous avons cette image, The Brand, et j'ai l'impression qu'elle est un peu trop grande. Je ne suis pas sensible à la taille super massive de notre logo principal. Donc je vais juste mettre une restriction sur la taille maximale de ça. Je pense que là où il se trouve comme là, c'est bien. Je vais l'inspecter encore une fois. Je peux voir que c'est comme 286 par 298 pixels. Maintenant, revenez au code et je descends vers le bas ici. Je pense que je vais l'appeler image d'identité. Nous avons une ID pour cela parce qu'il n'y en a que si ça va être l'un d'entre eux, je dis, max-width : 297px. D' accord. Ouais, enfin on peut se débarrasser de cette largeur à 100 pour cent et dire, id est égal à « id-img ». ID est abrégé pour l'identité car il s'agit de l'identité de la marque. Revenons au navigateur, rechargez, et voilà. Ce n'est pas tout à fait une taille écrasante, mais regardez ça. Maintenant, il veut entrer dans notre table de données. Quelle taille il doit être avant que cela ne se produise pas. Je suis curieux à ce sujet. Ouais, je pense que ça fera, 245 pixels. Cela nous servira bien. J' ai fait un rechargement rapide là-bas. Voici notre petite image de marque qui se comporte bien tout au long du chemin. Fantastique. Maintenant, la prochaine chose que nous voulons faire est de contrôler ces entrées. Je parle de ces types. En ce moment, ils ressemblent à un désastre absolu. Maintenant, je vais devoir les réorganiser un peu et je vais déplacer ce bouton à l'intérieur du formulaire avec la saisie de texte. Ce n'est pas la meilleure chose au monde parce que ce n'est pas vraiment, comme je l'ai dit, avec le formulaire chaque fois que je soumets ce formulaire. Mais pour éviter de mettre beaucoup de style très spécifique sur ce bouton puis de l'arrêter dans la ligne, je vais profiter des styles libres définis dans notre forme. Je vais également ajouter quelques styles pour rendre ce bouton juste un peu moins brut et pour correspondre le reste de notre design de toute façon avec les coins arrondis. La première chose que je vais faire est de me diriger vers le formulaire. Je ne pense pas qu'on veuille plus ce groupe de formulaires non plus. Je vais mettre ça là, ça devrait aller ici. Ces gars reviennent un peu. C' est l'un de mes meilleurs. C'est la fin d'une rangée. Voyons comment on a l'air maintenant. Terrible. Probablement nous avons besoin de rendre ça un peu plus grand. On y va, maintenant ça marche. On est déjà mieux. Que se passe-t-il quand on écrase ça ? Oui, c'est bon, toujours bon, et heureux jours. C' est un peu irrégulier. La largeur de ces choses, mais nous allons régler ça dans un instant. Maintenant, nous devons ajouter un peu de style juste pour rendre nos entrées un peu plus jolies. Qu'avons-nous là ? Pour l'entrée et le bouton, nous définissons la marge sur auto. Nous définissons le rayon de bordure à 25 pixels ce qui leur donnera une belle bordure ronde à chaque extrémité, et un remplissage à cinq pixels pour leur donner un peu d'espace à l'intérieur de l'entrée. En outre, nous définissons nos ombres de boîte à zéro en leur donnant une belle petite bordure gris clair très fine, et en réglant la largeur à 100 pour cent afin qu'ils prennent l'espace disponible. Enfin, j'ai fait une règle d'ID de bouton de formulaire d'ajout où nous avons la bordure définie à zéro avec 100 pour cent, pas d'image d'arrière-plan, couleur d'arrière-plan qui est une couleur bleue plus claire, verte. Ensuite, nous avons enfin un texte blanc. Je vais aller de l'avant et appliquer ça au bouton. Rechargez, et nos entrées sont beaucoup plus agréables maintenant. Maintenant il y a une chose qui manque, c'est cette petite loupe ici. Nous voulons qu'il s'installe à l'intérieur des entrées de texte. Comme vous pouvez le voir, il n'est pas là, alors nous ferions mieux d'y aller et de le faire maintenant. Une chose que je vais faire est d'ajouter cette grande règle de style CSS poilue appelée contrôle de recherche. Fondamentalement, ce qu'il fait est un tas de choses pour positionner cette loupe dans l'entrée de texte. Ce que nous devons faire avant que cela fonctionne est en fait ajouter une petite icône à cela par les icônes de matériau du formulaire, puis le contrôle de recherche. Cela n'a pas du tout fonctionné. Ai-je enregistré le CSS ? Non. De toute évidence, je ne suis pas qualifié pour piloter plus d'une fenêtre d'éditeur à la fois. Recharger. On y va. Enfin. Si je ne couvre pas ça, je vais arranger ça. Ce que je fais, c'est que je fais un début d'un indice d'outil, couleur définie sur dadadada. On y va. Ça a l'air un peu mieux. Je vais l'utiliser sur notre petite icône de recherche, indice d' outil, vérifier dans le navigateur. Super. Maintenant, c'est la bonne couleur. Donc, nos entrées cette fois semblent beaucoup mieux. Il suffit de vérifier la petite icône de recherche se comporte, et c'est tout au long. Fantastique. Maintenant, la prochaine chose qui manque est assez simple, juste une petite bordure, une petite ligne sous nos en-têtes de table de données. Nous voulons une certaine séparation dans une ligne sous Nom, Impressions, Réponses et Conversion. Nous les obtenons dans le territoire de la table de données maintenant donc je vais marquer cela, et j'ai créé un style appelé lo border, qui a un peu de rembourrage et une bordure en bas qui est juste un autre gris clair. Pour l'utiliser, je vais le mettre en dessous. classe Div est égale col md 11 et frontière lo, et cela peut être juste un div vide. Fantastique. Il y a une ligne qui sépare nos en-têtes de colonnes de nos données de colonnes. Maintenant, la prochaine chose que nous devons regarder ce sont ces icônes ici. Ils n'ont pas l'air tout à fait correct. Ils sont censés être cachés. Ce petit point est censé être une indication qu' il y a plus d'icônes à voir comme je l'ai mentionné plus tôt dans la classe. Nous ferions donc mieux de nous cacher et de montrer ces icônes. Ce que j'ai fait, c'est que j'ai ajouté d'autres styles qui se rapportent à ces icônes et je vais les appeler outils d'administration. La première chose que nous faisons est d'ajouter un peu de couleur à eux et de définir l'affichage à zéro, ce qui est de dire que nous les cachons, mais quand nous survolons quelque chose appelé une ligne de données et que notre outil d'administration va devenir un bloc d'affichage en ligne. C' est une façon de dire que ces choses sont cachées jusqu'à ce qu'on les survole, puis on les montre. Cependant, nous avons ce petit indice qui est trois petits points horizontaux qui sont là pour nous dire qu'il y a plus à voir, mais quand nous survolons notre ligne, nous voulons que cela soit caché, donc nous définissons l'affichage sur zéro. Ensuite, nous définissons des couleurs alternatives pour nos icônes d'outil d'administration, un gris plus clair puis un gris plus foncé lorsque nous passons au-dessus d'eux. Avant de faire autre chose, nous devrons mettre ces choses en action en affectant réellement ces classes à nos icônes, donc ce que nous allons avoir notre outil d'administration. Je vais faire un à un pour commencer, juste pour m'assurer que tout fonctionne et ensuite je les travaillerai pour le reste d'entre eux. Ça va être un indice d'outil, comme notre petite loupe. En outre, notre ligne devrait également être une ligne de données afin que nous puissions sélectionner avec précision nos icônes. Nous allons donner cette alerte et regarder, nous pouvons voir ce petit ensemble d'icônes a disparu et quand nous allons et planer dessus, nous pouvons voir les autres icônes là-bas. Ils apparaissent et un peu plus d'icône a disparu. On y va. C'est ce que nous voulons. Donc, je vais rapidement appliquer cela au reste de nos lignes de données. Enfin, je suis sûr que ça va marcher maintenant. Fantastique. Si on écrase ça, on travaille toujours ? Oui. On y va. Nous en avons assez fait avec notre style personnalisé pour la page. Si vous ne l'avez pas déjà fait, veuillez poster votre projet dans la galerie de projets. J' adorerais le voir comme toujours et je parie tout le monde impliqué dans la classe aimerait le voir aussi. C' est une excellente occasion de comparer des notes, obtenir des commentaires et d'obtenir de l'aide si vous en avez besoin. J' ai vraiment hâte de voir sur quoi vous travaillez. 15. Révision du cours.: Donc nous sommes arrivés à la fin de la classe. Cela a été super amusant pour moi et j'espère que vous l'avez apprécié et que vous l'avez trouvé vraiment utile aussi. Au cours de cette classe, nous avons abordé ce qu'est Bootstrap, comment l'inclure dans une page Web régulière, comment les conteneurs de navigation, les lignes et les colonnes de Bootstrap fonctionnent, comment nous pouvons combiner ces composants ensemble pour créer un page Web. Maintenant, si vous ne l'avez pas déjà fait, n' oubliez pas de poster votre projet. Vous pouvez obtenir des commentaires à ce sujet et j'ai vraiment hâte de le voir. Rappelez-vous aussi que je suis toujours disponible pour aider ; si vous rencontrez des problèmes, faites-le moi savoir. Encore une fois, j'espère vraiment que vous avez apprécié la classe et j'ai hâte de vous revoir à l'avenir.