Construisez votre site Web en utilisant Bootstrap

1. Introduction: Bonjour et bienvenue. Je suis eu des unités et c'est créer votre site Web en utilisant Bootstrap. Alors tout d'abord, qu'est-ce que Bootstrap ? Fondamentalement, bootstrap est un site Web qui nous permet de prendre les classes déjà implémentées et intégrées et de les utiliser dans notre propre site Web. Ainsi, nous pouvons prendre les classes qui sont disponibles pour nous dans bootstrap et les utiliser dans nos fichiers HTML pour modifier et rendre notre site Web plus agréable. C' est donc l'idée générale à propos de bootstrap. Et dans cette classe, nous allons vérifier les différentes classes. Bootstrap, puis apprenez à les utiliser. Et bien sûr, euh, et nos sites web. Ensuite, nous allons utiliser ce que nous avons appris jusqu'à présent et construire notre propre site Web. Et gardez à l'esprit, ce site Web sera construit urllib en utilisant Bootstrap. Et bien sûr, nous finirons notre classe avec la création du projet. Et cette session de projet est pour vous de construire et de créer vous-même et bien sûr de les publier ainsi que la section projet afin que je puisse vous donner un avis et quelques suggestions. Et bien sûr, pour que vous puissiez compléter cette classe, vous devriez être capable de comprendre les éléments de base ou les tâches de base que vous allez utiliser un HTML. Donc, sans plus tarder, commençons. 2. Qu'est-ce que Bootstrap: Bonjour et bienvenue. Donc aujourd'hui, nous allons parler de Bootstrap. Et bootstrap est un framework CSS libre et open-source. Et il contient essentiellement des modèles de conception basés sur CSS et JavaScript ou des formulaires, boutons, de la navigation et d'autres composants d'interface. Et si vous n'êtes pas familier avec HTML et CSS, je vous encourage fortement à commencer par ceux avant qu'ils puissent revenir à ma classe précédente et regarder ces sujets, puis revenir ici et commencer par Bootstrap. Et pour cette classe, nous allons utiliser le code Visual Studio. Et vous pouvez aller à Google et à droite, télécharger le code Visual Studio et appuyez sur Télécharger. Et vous obtiendrez la dernière version. Donc, c'est tout pour le code Visual Studio. Et maintenant, divisons notre tâche en plus simples. Donc, tout d'abord, bootstrapped est, comme nous l'avons dit, un framework CSS libre et open-source. Alors qu'est-ce que ça veut dire ? Cela signifie que chaque fois que nous allons écrire notre fichier HTML et CSS, nous pouvons toujours utiliser l'aide de bootstrap. Donc, au lieu d'écrire le titre et de spécifier sa largeur, sa couleur, son design, où je voulais qu'il soit. Je peux simplement utiliser Bootstrap pour faire le travail pour moi. Et il est plus facile et toujours préférable d'utiliser ces types de framework. Donc, tout d'abord, nous allons examiner différents composants d'interface et comment les utiliser en utilisant un bootstrap. Ensuite, nous allons créer plusieurs composants et plusieurs formes. Après cela, nous allons mettre fin à notre classe avec la création d'un site Web complet en utilisant HTML, CSS et Bootstrap. Donc c'est ça. Commençons par notre première vidéo. 3. Éléments: Donc, la première chose à utiliser Bootstrap est d'aller sur bootstrap.com. Et voici la page d'accueil. Alors cliquez sur Commencer. Voici l'introduction, Quickstart, CSS JavaScript. Et nous pouvons ignorer tout cela et aller jusqu'à notre modèle de démarrage. C' est donc le modèle démarré de bootstrap. Comme vous pouvez le voir, il inclut la longueur pour CSS, document Bootstrap que CSS et aussi le lien pour le JavaScript. Alors maintenant, copions ceci et revenons à notre code Visual Studio. J' ai déjà créé un fichier et je l'ai nommé Bootstrap. Voici quelques images que nous allons utiliser plus tard, bien sûr. Et la première chose que nous allons faire est de créer le fichier HTML. Donc, nous pouvons simplement écrire index.html. Ceci est notre fichier HTML. Nous avons simplement basé tout notre modèle Bootstrap commencé ici. Et laisse-moi juste sauver ça. Et bien sûr, si nous voulons vérifier ce fichier, nous pouvons toujours cliquer, faire un clic droit sur notre fichier et ouvrir et le navigateur par défaut. Comme nous pouvons le voir, c'est notre HTML5. Ça dit Hello World. C' est le titre que nous avons créé, ou c'est essentiellement la valeur par défaut dans Bootstrap. Donc nous pouvons toujours l'enlever. Et bien sûr, si nous retournons ici, rafraîchir, il ne sera plus disponible. Cependant, ce Hello World est tiré du titre. Et laissez-moi juste le changer et souscrire Bootstrap. Laisse-moi juste créer un titre. Bienvenue sur notre site bootstrap. Et si je retourne ici et me rafraîchir, cela apparaîtra. Donc, comme nous pouvons le voir ici, c'est une rubrique et c'est la plus grande rubrique. Nous avons des rubriques qui vont de l'un à l'autre. Et ils sont tous disponibles dans Bootstrap. Maintenant, chaque fois que nous créons cet ajout de gonorrhée, chaque fois que nous écrivons une balise et la balise de fermeture H2, nous n'avons jamais vraiment utilisé Bootstrap ici, nous spécifions simplement qu'il s'agit d'un titre en HTML. Donc, si j'écris, par exemple, à x2 et que cela va revenir ici, rafraîchir. Il s'agit de la première rubrique et ceci en ajoute deux. Maintenant, dans bootstrap, nous avons le H1, H2, ou tous ce sont des classes et Bootstrap. Donc, nous pouvons spécifier ici et ce H2 dernier, et nous allons spécifier la classe H1. Si je retourne ici, si des ordures, comme on peut le voir. Ce titre a pris les attributs et il semble qu'il s'agit d'un titre de titre, même si nous avons créé ce titre en tant que titre 2. Cependant, comme nous pouvons le voir, c'est la même chose et ce sont des classes dans Bootstrap. Laissez-moi juste ajuster ceci et la classe H1 et puis le voir clairement avant de me laisser créer un titre dit sexe, l' a fait revenir en arrière, rafraîchir. Comme vous pouvez le voir, c'est le sexe et ça a l'air très petit. Cependant, si je lui donne une classe, chacune, elle ressemblera à cette rubrique. Et ce n'est pas fondamentalement pour les titres. Nous pouvons créer l'ajout 123456. Maintenant, nous pouvons également personnaliser le titre. Donc, par exemple, si je veux écrire Bienvenue sur notre site bootstrap, cependant, je veux écrire ce bootstrap comme fané. Donc, je peux simplement me permettre de le supprimer. Et je vais le faire glisser en petit. Et la classe sera en sourdine. Et j'écrirais Bootstrap ici. Et c'est vérifié comme on peut le voir. Et de cette façon, nous avons personnalisé notre cap avec une étape très simple et cela semble un peu mieux. Maintenant. Et revenons à notre code et apprenons à afficher nos en-têtes. Donc, ici, nous avons créé notre premier titre. Et par exemple, si je veux l'afficher, je peux utiliser l'affichage de classe. Et vous verrez la différence dans une minute. Donc, affichez un et enregistrez revenir en arrière. Et comme vous pouvez le voir, cet écran fera notre cap pas Becker. Cependant, il sera la taille des lettres sont un peu plus petites. Et c'est ça essentiellement pour l'affichage. Et bien sûr, nous pouvons afficher n'importe quelle classe, par exemple, est si j'écris ici le SpaceX. Et ça ressemblera au sexe en tête. Même si j'écris bord six et écris ceci comme en ajoutant six et lui donne une classe, affichez. Sx, reviens, rafraîchis. Ils auront l'air exactement le même. Et bien sûr, si je lui donne une classe est jouer un pour être plus grand que cet écran. Maintenant, nous avons aussi le leader de classe, et il suffit de faire ressortir n'importe quel paragraphe en l'ajoutant. Par exemple, permettez-moi de supprimer ces en-têtes et de créer un paragraphe avec certains apprenants aide à l'apprentissage. Et laissez-moi revenir ici et voyons le paragraphe. C' est donc notre paragraphe. Retournons en arrière et donnons-lui une classe de plomb. Maintenant, retournez ici. Et comme vous pouvez le voir, c'est notre paragraphe après modification qui va regarder. Comme ça. Et vous pouvez convenir qu'il s'agit d'un paragraphe plus beau que le précédent simplement en ajoutant cette piste de classe. Maintenant et HTML, nous avons le style pour les éléments, nous avons l'élément suivant en ligne. Permettez-moi de vous montrer quelques exemples. Donc, par exemple, si je veux mettre en évidence un mot, je peux simplement utiliser la balise MAC. Donc si je l'ai fait, c' est le MAC lié à la haute lumière. Et dans ce cas, je veux mettre en évidence ce mot. Donc, si je tape Mark ici et ces surlignements détaillés, retournez en arrière. Et comme vous pouvez le voir, c'est la marque pour mettre en évidence les textes et le mot surligné est en fait mis en évidence. Bien sûr, nous avons également un autre élément de texte en ligne. Et dans ce cas, ce sera la balise d, l ou delete. Donc, si j'ai Lorem, Laissez-moi juste en abaissant le tuyau et comme nous pouvons le voir, nous avons notre Seigneur et je vais simplement ajouter la balise delete. Lauren cinq. Retournez, rafraîchissez, et nous allons obtenir notre paragraphe de connexion, mais avec une ligne droite au milieu. Et bien sûr, nous avons aussi la ligne qui est en dessous et nous pouvons l'utiliser en utilisant le Uta x2, y2 et un inférieur lui cinq, revenir en arrière, rafraîchir. Et c'est notre étiquette. Et nous avons tellement d'autres choses que nous n'allons pas entrer autant dans les détails. Cependant, nous pouvons toujours utiliser Bootstrap pour ces types de choses. Nous n'avons pas vraiment besoin d'écrire le tag ici ou ici. Donc, par exemple, permettez-moi juste de supprimer ceci. Et au lieu d'utiliser la masterclass, je peux simplement utiliser le verre de marque DOD en utilisant Bootstrap. J' ai donc un paragraphe, nous en avons huit, et je peux simplement utiliser la classe ici. Mark, revenez en arrière, actualisez, et comme vous pouvez le voir, il sera mis en surbrillance. Maintenant, bien sûr, si vous voulez mettre en évidence un des éléments spécifiques, par exemple. Ainsi, nous pouvons toujours créer, développer et écrire le mot à l'intérieur, puis y ajouter la marque de classe. Laissez-moi supprimer ceci. Et le, la marque de classe d'ici, revenir en arrière et rafraîchir. Et comme nous pouvons le voir, nous avons obtenu le même résultat exact qu'avant. Revenons maintenant à notre code et supprimez ce paragraphe. Nous avons aussi des abréviations, alors créons un paragraphe ici. Et à l'intérieur de ce paragraphe, nous avons une abréviation pour un certain mot. Et le titre sera, par exemple. Et c'est, par exemple, CSS. Si je reviens et actualise ma page, comme nous pouvons le voir, nous avons cette abréviation et pour une taille de police légèrement plus petite, nous pouvons ajouter l'initialisme de classe. Et laissez-moi juste créer une autre abréviation juste pour voir la différence. Donc, ici, nous avons aussi CSS. Cependant, nous seulement, nous avons aussi la classe. N' importe quel shell ne le fait pas. Si nous revenons à notre navigateur, et comme vous pouvez le voir, est une taille de police légèrement plus petite. Et c'est tout pour l'abréviation. Et enfin, le dernier élément que nous allons couvrir dans cette vidéo comme les codes de bloc. Et dans ce cas, chaque fois que nous allons créer un code bloc, nous devons ouvrir les balises de code bloc et nous avons quelques apprendre ici. Donc, c'est le volume neuf. Retournez, rafraîchissez, et c'est notre code. Cependant, nous pouvons ajouter le verre ici et il sera également blackout. Comme vous pouvez le voir, la plupart des classes avaient le même nom que la balise. Juste pour simplifier les choses pour vous les gars et juste pour le rendre un peu plus facile et comme vous pouvez le voir, il est un peu plus grand et il a l'air plus agréable. Maintenant, nous avons aussi la source. Chaque fois que nous écrivons un code, nous vous souhaitons probablement ajouter notre source. Donc c'est notre rhume. Je peux ajouter un chiffre, Doug. Et laissez-moi juste remplacer ici. Et c'est notre figure. À l'intérieur de notre figure, nous avons notre code, et bien sûr, nous avons notre, par exemple, notre légende ou notre légende de figue. Et dans ce cas, je vais simplement écrire Loudon sept. Et ici, je peux ajouter le code chance de classe et le mettre pour indiquer que c'est la légende ou le pied de page de notre code bloc. Revenez en arrière et comme vous pouvez le voir, c'est notre légende et c'est notre code de bloc. Donc, c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons parler de moins. Alors, à vous voir. 4. Listes et couleurs: Passons à moins. Et à moins que nous ayons une liste non stylée et que nous ayons quelque chose qui s'appelle liste en ligne. Alors commençons par le non stylé. Et c'est fondamentalement comme le nom l'indique, c'est une liste non triée. Et cela ne s'appliquera qu'aux enfants immédiats des éléments de la liste. Donc, par exemple, permettez-moi juste de supprimer la figure. Et dans ce cas, pour créer une liste, comme nous le savons, nous pouvons créer une liste non ordonnée. A l'intérieur de cette liste non ordonnée. Laissez-moi juste obtenir un élément de liste 5 et copier ceci quelques fois. Alors 12345. Et dans ce cas, c'est le premier élément de la liste. Et si je retourne ici pour me rafraîchir, et comme on peut le voir, nous avons une liste non ordonnée avec quelques points de puces. Cependant, si nous ne voulons pas ces points, points à faire appel, nous pouvons simplement utiliser la liste et la classe stylée de bootstrap. Donc, dans notre liste non ordonnée, ou je peux taper classe et utiliser la liste et le style. Ton dos, rafraîchissez-vous. Et comme vous pouvez le voir, les points de balle disparaîtront. Et nous avons également dit que ces caractéristiques ne s' appliqueront pas aux enfants des enfants. Supposons que j'ai une liste non ordonnée, une autre liste non ordonnée. Dans ce cas, il sera composé de lorem dix. Et si je retourne ici, rafraîchir, comme vous pouvez le voir, cette puce apparaîtra toujours sens cet enfant n'est pas l'enfant comme la première liste non ordonnée. Donc, c'est essentiellement pour la liste non stylée. Passons à quelque chose qui s'appelle inline. Et dans ce cas, nous pouvons supprimer la puce et appliquer une marge de lumière avec une combinaison de deux classes. Nous avons la date limite de liste et la liste et l'élément de ligne. Et nous allons les explorer maintenant. Donc, la première chose que nous allons faire est de supprimer tous ces éléments. Donc c'est notre liste non ordonnée. Cependant, nous ne voulons pas qu'il soit déstylé. Nous voulons que ce soit moins que la ligne. Et cela est essentiellement utilisé dans les barres de navigation. Chaque fois que nous voulons créer un ABA, nous pouvons utiliser ce type de classes. Et bien sûr, nous avons notre premier article. Laisse-moi juste créer la maison, bienvenue. Et le statut. Et bien sûr, nous devons ajouter ici une classe appelée liste et liste et élément de ligne. Et nous devons ajouter la même classe ici et ici. Et c'est un raccourci si vous voulez l'utiliser. Chaque fois que vous voulez ajouter quelque chose à plus d'un endroit, vous pouvez cliquer ici, par exemple. Et cliquez sur ajouter sur votre clavier, puis cliquez sur l'autre position. Ensuite, ce sont, vous pouvez monter sur ces positions en même temps. Donc si j'appuie sur l'espace ici, vous pouvez voir qu'on peut écrire ici le verre et la liste et l'élément de ligne. Maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nos articles sont maintenant répertoriés sur la même ligne, la même maison, l'accueil et le même statut. Et c'est essentiellement pour l'inline de peur. Nous avons aussi tellement de descriptions et éléments que vous pouvez aller voir sur le site Bootstrap. Il y a tellement d'éléments et de classes que vous pouvez utiliser pour rendre votre site Web meilleur. Mais ce sont les bases que nous devrions connaître avant de créer un site Web en utilisant Bootstrap. Maintenant, puisque nous avons quelques éléments, nous pouvons, créons d'autres et nous pouvons parler des couleurs et Bootstrap en utilisant ces éléments. Donc la liste et l'élément de ligne. Et dans ce cas, je vais le nommer. Contactez-nous. Et dans ce cas, si je retourne à notre navigateur et actualise notre élément Contactez-nous. Donc, tout d'abord, nous avons dans Bootstrap tant de couleurs. Revenons à notre bootstrap. Et ici, nous avons les économistes. Donc, tout d'abord, nous avons les informations primaires, secondaires sur le succès, l'avertissement, danger, la lumière et l'obscurité. Et vous avez aussi tant d'ajustements pour ceux-ci et vous pouvez aller de l'avant et les essayer par vous-même. Cependant, nous allons essayer une partie de l'original et utiliser les érudits. Nous pouvons simplement aller à notre article de liste et ici nous avons notre article d'accueil. Nous pouvons utiliser les informations textuelles pour indiquer qu'il s'agit d'une information. Et comme vous pouvez le voir, il deviendra bleu. Et par exemple, nous avons le succès. Succès donc taxé. Changons ça en danger, texte rouge, danger. Et ce sera la hache sombre. Maintenant, revenons en arrière, rafraîchissez-vous. Et comme nous pouvons le voir, nous avons maintenant le statut de bienvenue à la maison. Contactez-nous. Tous ces éléments sont de couleurs différentes et nous avons simplement créé les chercheurs ou utiliser ces couleurs, invite Bootstrap sans utiliser de CSS du tout de notre côté. J' espère que maintenant vous comprenez complètement ce qu'est Bootstrap et pourquoi nous l'utilisons. Ainsi, nous pouvons simplement créer ces statuts CSS ou caractéristiques dans notre fichier ici. Mais nous choisissons de ne pas être tendus. Ils sont déjà créés et disponibles pour nous chaque fois que nous voulons les utiliser. Maintenant, puisque nous avons parlé de couleurs, parlons de couleur de fond. Et pour l'utiliser, nous pouvons simplement corriger B, G et point de tiret par exemple. Retournons ici. Et comme nous pouvons le voir, ce débogueur d'article sur, cet article s'avère sombre. Maintenant, nous allons utiliser VG danger, BG, succès, et ils sont fondamentalement les mêmes classes. Mais comme le texte, cependant, nous écrivons Vg pour indiquer qu'il s'agit de fond. Donc VGS, par exemple, hymne. Maintenant, retournez en arrière, rafraîchissez. Et je sais qu'ils ne correspondent pas, mais c'est juste une indication simple de la façon de les utiliser. Et c'est ça essentiellement pour les couleurs. Nous avons tellement de voitures en bootstrap. Et vous pouvez aller de l'avant et les vérifier sur le site d'origine. Et il y a super facile et agréable à utiliser et à apprendre. Et je vous encourage à aller les vérifier par vous-même. Donc c'est tout pour cette vidéo. Et la prochaine vidéo, nous allons découvrir d'autres composants dans Bootstrap. Nous avons tellement de composants et nous allons passer en revue la plupart d'entre eux. Et cela étant dit, c'est la fin de cette vidéo. Rendez-vous à la prochaine. 5. Images: Bonjour et bienvenue. Et dans cette vidéo, nous allons commencer par des images. Donc, tout d'abord, pour créer une image, nous pouvons simplement utiliser la balise géo. Et ici, nous devons écrire notre source et ensuite suivi de l'alternative. Donc, cette alternative est utilisée pour simplement indiquer que cette image est, par exemple, disons que j'ai un enfant un enfant a pris une théorie, utilisons la première image. Une bonne. Et dans ce cas, l'image ne s'est pas ouverte pour quelque raison que ce soit. L' alternative sera ceci comme E premier. Et si je vais de l'avant et que je l'ouvre, nous pouvons simplement l'utiliser. Voyez que c'est le premier effrayé depuis que nous n'avons pas ajouté le numéro du cycle solaire. Maintenant, pour ajouter la source, nous pouvons simplement aller à notre fichier d'images. Nous avons ces images et nous allons utiliser la bonne. Image, retournez en arrière, rafraîchissez. Et comme on peut le voir, c'est la première photo. Et vous pouvez clairement voir que cette image est très grande et nous devons l'ajuster. Alors faisons cela en utilisant Bootstrap. Donc, tout d'abord, c'est notre source. C' est l'alternative. Ajoutons ici nos lunettes. Donc, le premier, donc nous allons ajouter est le fluide d'image. Maintenant, retournez en arrière, rafraîchissez. Et pour ajuster notre image, nous devons l'ajouter dans une division spécifique ou une forme spécifique. Et dans ce cas, pour ce faire, nous pouvons simplement ajouter notre division ici, écrire def, déplacer tout cela, et l'ajouter à la division. À l'intérieur de notre division, je vais ajouter le conteneur de classe et maintenant revenir en arrière. Et rafraîchissons. Et c'est notre image maintenant ajustée. Et c'est juste en utilisant la division que encore une fois, notre fichier HTML. Et bien sûr, la classe de conteneur de Bootstrap. Supposons maintenant que je veux ajouter quelques images ici. Donc, par exemple, je veux trois images. Le premier ici, le deuxième, le troisième. Et dans ce cas, je dois créer une rangée. Donc c'est la première rangée. Et puis j'ai besoin de créer des colonnes. Il s'agit donc de la première colonne, la deuxième colonne et de la troisième colonne. Maintenant, généralement notre navigateur est divisé en 12 éléments ou 12 éléments. Et dans ce cas, nous pouvons diviser ces 1223 éléments égaux en utilisant pour chacun. Donc, la première colonne prendra feuille, la seconde nous allons prendre feuille, et la troisième aussi, ils le définissent pour elle. Pour ce faire, laissez-moi simplement supprimer ceci. Et créons le rho. Et nous pouvons créer le rôle soit en créant les morts, puis en écrivant le Grove de classe, soit en écrivant simplement le point rho puis en appuyant sur Entrée. Et cela créera automatiquement une division de la dernière ligne. Maintenant, nous devons créer la colonne, et dans ce cas, créons la colonne. Et la première colonne sera quatre. Et puis nous avons aussi une autre colonne, je suis désolé d'écrire la colonne d point avant. Et enfin le dernier serait ce composant aussi. Et ici, nous pouvons ajouter nos photos. Donc, la première image, la première image sera à partir d'images et obtiendra b1. La deuxième image sera également à partir d'images, obtenir à. Et la dernière image sera des images. Et revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons eu nos images, cependant, elles ne sont pas comme nous le voulons. Donc je vais frapper le fluide d'image de classe et le fluide ici aussi. Et enfin ajouté à ce fluide d'image de classe et revenir en arrière, rafraîchir. Et comme on peut le voir, nous avons nos images ici. Ce sont donc nos images et elles sont divisées en trois côtés égaux. Et bien sûr, si nous les voulons sur le navigateur comme une feuille, nous avons besoin de liquide de deux ans. Puisque nous avons utilisé la classe de fluide d'image, nous pouvons également utiliser le liquide de récipient. Alors retournez en arrière, rafraîchissez. Et comme on peut le voir, ce sont nos trois images. Maintenant, supposons que nous ne voulons pas de ces bords carrés. Nous pouvons toujours ajuster ces images en utilisant les classes dans Bootstrap. Donc, à l'intérieur de notre classe ici, je peux voir que je veux que cette image soit arrondie si je retourne ici. Et comme vous pouvez le remarquer, que cette image est un peu arrondie par rapport aux autres. Et c'est essentiellement pour créer des images et les placer sur notre site Web en utilisant Bootstrap. Bien sûr, nous avons tellement d'éléments ou de caractéristiques que vous pouvez utiliser. Mais nous allons les explorer plus tard tout en créant nos sites Web. Pour l'instant, je pense que cela suffit pour les images. Passons maintenant à un autre composant qui est capable, et nous en discuterons dans la prochaine vidéo. Alors, à vous voir. 6. Tableaux: Bonjour et bienvenue. Dans cette vidéo, nous allons créer des tableaux. Donc, tout d'abord, comme d'habitude, partout où nous avons besoin de créer un composant en HTML, nous l'écrivons simplement, puis appuyez sur Entrée. Donc c'est notre table. A l'intérieur de notre table, comme nous le savons, nous avons la tête et le corps. Donc, tout d'abord, créons la tête. Donc c'est la tête de table en forme de D-hat. Et à l'intérieur de notre tête de table, nous avons besoin de quelques rubriques. Supposons donc que je veux créer une table qui se compose d'un prénom, nom et e-mail. Et pour ce faire, il suffit d'ajouter le titre, le premier titre, qui sera le prénom. Et puis le second, nom, enfin, l'adresse e-mail. Et bien sûr, après avoir terminé, laissez revenir en arrière. Il s'agit de notre prénom, de notre adresse e-mail, et ils ont l'air trop petits. Mais pour l'instant, nous allons travailler avec. Donc c'est la tête. Allons de l'avant et créons notre pote. À l'intérieur de notre corps. Nous devons créer notre première rangée. Et à l'intérieur, je vais grandir. Ce sera et les premières données, le prénom sera Mon nom Heidi, puis Uranus, puis mon adresse e-mail, par exemple, 1-2-3 sur gmail.com. Maintenant, c'est notre première rangée. Ensuite, nous pouvons créer une autre ligne. A l'intérieur de la deuxième rangée. Le prénom sera marque, puis le nom sera, supposons fontaine. Et puis bien sûr, l'e-mail serait de un à deux sur email.com. Maintenant, si nous revenons à notre rafraîchissement du navigateur, nous pouvons voir que nous venons de créer une table entière composée d'une tête et d'un corps. Et à l'intérieur de notre corps, nous avons nos données. Donc nous avons eu des unités, Mark Thornton, et si nous revenons ici, nous pensons qu'il nous faut des ajustements sur l'écurie, car ça n'a pas l'air très agréable. Donc, la première chose que nous allons faire est de donner à cette table l'attribut ou la table de classe de bootstrap. Donc table de classe, retournez en arrière, rafraîchissez. Et comme vous pouvez le voir, il y a une énorme différence entre notre première table et cette table. Cette table est sur toute la page et une meilleure table, et nous avons ces lignes. Donc la première ligne est plus attrayante que les autres, puisque ceux-ci sont peut-être légers, et c'est le titre. Et bien sûr, nos premiers éléments sont sur boulon et les comparent aux données. Donc, ce n'est qu'un mot simple qui a beaucoup changé. Maintenant, bien sûr, si nous ne sommes pas satisfaits de l'écurie, nous pouvons toujours changer et ajouter quelques classes ici. Donc, par exemple, si je veux que cette ligne soit sombre. Deuxième rangée pour être léger, je peux simplement les ajouter sur notre classe de table. Donc, par exemple, supposons que je veux que toutes les lignes soient info. Donc, je peux ajouter une table et revenir en arrière, rafraîchir. Comme on peut le voir, la table est devenue bleue. Maintenant, on ne veut pas ça. Nous voulons juste que la première ligne, par exemple, la première ligne de données soit comme ceci. Donc, nous pouvons ajouter ici en classe et nous pouvons détecter ou couleur de fond, je suis désolé, NFO coloré, revenir en arrière, rafraîchir et la couleur de fond de la maladie. Et il se compose d'une rangée qui couleurs dans laquelle la couleur est bleue. Maintenant, bougeons ceci et faisons-le sombre, par exemple. Et comme nous pouvons le voir, si nous faisons sombre, nous ne verrons pas le texte ici. Donc, une façon de faire face à cela est de donner le texte plus attrayant ou plus blanc. Nous avons la diapositive de texte et nous pouvons l'utiliser ici. Et cela est généralement utilisé avec le fond sombre, et il donne une meilleure apparence Taemin. Maintenant, nous pouvons également créer ici la deuxième table ou la deuxième ligne, sera une lumière de couleur de fond, et le texte sera sombre. Et c'est l'opposé de la première rangée. Et ça aura l'air plus agréable. Et c'est essentiellement pour les couleurs. Nous avons aussi la bande grandir. Et pour ce faire, nous pouvons simplement utiliser la classe à rayures de table ici. Donc, au lieu d'ajouter ces classes et notre, à l'intérieur de nos lignes, je peux simplement ajouter ici la table. Retournez, rafraîchissez-vous. Et comme nous pouvons le voir, notre table est maintenant dépouillée. Donc nous avons le premier comme ça, le second, je suppose que je viens d'ajouter la troisième rangée. Troisième ligne de données juste pour voir la différence. Et c'est ça. Et c'est ainsi que nous pouvons créer un script rho, nous avons aussi la table sombre ou table-strié. Et pendant qu'il fait sombre, nous ajoutons simplement la table sombre ici. Tellement sombre. Et bien sûr, si je reviens maintenant, rafraîchissez comme nous l'avons dit, c'est le cas. Et en même temps, alors que détecte comme blanc. Maintenant moins, passons aux lignes doubles survolées. Et dans ce cas, juste, nous devons ajouter quelque chose ici. Et c'est la fin. Retournez et rafraîchissez. Vous pouvez voir que ce n'est pas très spécial. Je pensais cependant, chaque fois que vous vous déplacez sur les données, cela donnera juste cet effet. Et c'est un bel effet. Et nous pouvons faire la même chose avec la version sombre. Retourne. Et comme vous pouvez le voir, nous avons ce bel effet chaque fois que nous survolons des données à l'intérieur de notre table. Donc c'est tout pour les horribles rangées. Et maintenant, nous avons quelque chose qu'on appelle un rôle actif. Et cela est généralement utilisé chaque fois que nous avons besoin de préciser que cette paille. Par exemple, la première ligne est la ligne active et nous devons déplacer la seconde. Ensuite, nous passons simplement ou bascule entre l'actif à l'intérieur de la première deuxième rangée. Cependant, ici, nous apprenons juste les bases et il y a en fait une classe que nous pouvons utiliser. Par exemple, dans cette ligne, lorsque nous pouvons spécifier qu'il s'agit d'une ligne active. Maintenant, si nous revenons, rafraîchir, laissez-moi juste le mettre comme table, juste table et rafraîchir. Revenons voir le problème. Je suis désolé, pour ajouter la table active dans notre classe. Et si nous revenons en arrière, rafraîchir, et c'est une ligne active à l'intérieur de notre table, est très commun et très utilisé. Et généralement chaque fois que vous ouvrez un site Web, par exemple ici, il s'agit d'un bouton actif. Donc, chaque fois que j'appuie sur ce formulaire, cela disparaîtra. Et ce formulaire serait actif maintenant. Et nous avons aussi l'effet de vol stationnaire ici. Comme vous pouvez le voir, à peu près, où chaque fois que vous appuyez, il y a un effet de survol. Et ce sont des outils très essentiels et très puissants que vous pouvez utiliser à l'intérieur de votre site Web. Passons maintenant à la table sans frontières. Et pour ce faire, nous pouvons simplement supprimer l'actif d'ici. Et nous pouvons utiliser la table sans bordure. Et cela nous donnera une table sans frontières. Donc si on retourne ici, rafraîchissez-vous, comme vous pouvez le voir, nous n'avons pas de chaudières et ce n'est pas si bon. Cependant, il est utilisé dans certains sites Web. Et bien sûr, si nous voulions qu'il soit plus sombre, nous pouvons simplement ajouter la table sombre. Et je pense que ça aura l'air un peu plus agréable. Maintenant, nous avons aussi les petites tables. Et pour ce faire, nous pouvons simplement ajouter le tableau ici. Et supprimons simplement ça. Enregistrer, actualiser. Et voici notre table. Et il suffit de couper tout le rembourrage en deux. Donc juste pour vous assurer que vous comprenez la différence. C' est la table comme d'habitude. Et si nous écrivons des tables et revenons, rafraîchir, ça, nous deviendrons un peu plus petit puisque le rembourrage sera coupé en deux. Maintenant, passons à la tête maintenant. Alors maintenant, c'est notre tête. Nous pouvons faire exactement la même chose que nous l'avons fait pour les données. Par exemple, nous pouvons ajouter l'année ou avait une classe pour indiquer que c'est le tableau et sera léger. Bien sûr, déplacons cette table petite. Et comme vous pouvez le voir maintenant, nous avons notre cap. Et c'est comme maintenant que nous pouvons aussi le faire comme sombre, bien sûr, en ajoutant simplement ici sombre. Et je ne vais pas faire ça puisque c'est pareil. Passons maintenant au pied de page. Et en fait, le pied de page est un autre élément qui n'est pas si couramment utilisé. Cependant, il existe et nous pouvons simplement l'utiliser après le corps. Donc, chaque fois que nous finissons le pour le corps, nous pouvons simplement ajouter le pied de table. Et à l'intérieur de cette nourriture de table, essayons un peu. Alors bonjour, ou essayons juste le pied de page. Tout comme le pied de page et le pied de page. Et maintenant, si nous revenons et nous rafraîchissons, nous allons obtenir Pied de page, Pied de page et Pied de page. Maintenant, enfin, nous avons aussi les légendes. Donc, chaque fois que nous créons une table, nous aurons probablement besoin d'une légende. Et pour ce faire, nous pouvons simplement ajouter cette légende juste avant la tête. Ainsi, nous pouvons ajouter Etag qui est appelé Caption et tous les utilisateurs. C' est donc la table de tous les utilisateurs. Et il semblera brillant fait. Maintenant, je pense que c'est suffisant pour les tables. C' est les bases que vous devez savoir chaque fois que nous voulons créer une table et HTML en utilisant Bootstrap. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 7. Formulaires: Bonjour et bienvenue. Et dans cette vidéo, nous allons discuter des contrôles de formulaire. Alors laissez-moi aller de l'avant et supprimer ceci. Donc, pour commencer, nous allons commencer par une entrée et une zone de texte où l'utilisateur peut taper quelque chose. Par exemple, si nous voulons créer une entrée, il est logique de commencer par une division. Donc, une fois que nous avons créé notre division, nous pouvons créer notre entrée et ce sera de type II fait, par exemple. Et nous allons lui donner une classe de contrôle de forme. Et puis nous allons juste mettre l'espace réservé est entrer votre e-mail ici. Et après ça, laisse-moi ouvrir ça ici. Et comme nous pouvons le voir, c'est notre contribution. Maintenant, nous ne voulons pas vraiment que nos commentaires soient en haut de la page. Peut-être qu'on veut un peu d'espace. Donc, pour ce faire, nous pouvons simplement utiliser l'une des classes qui est liée au padding et dans Bootstrap. avons donc plusieurs. Une fois, par exemple, si nous voulons un rembourrage sur la marge, je suis désolé, une marge sur le dessus. Nous pouvons simplement utiliser le MD et spécifier la longueur. Par exemple, ici, je voulais être cinq pixels. Si je voulais être trois, encore une fois, tapez simplement trois. Il s'agit de quatre marges, en haut, en marge, en bas Mo. Et puis nous avons une hache pour l'axe X et bien sûr y pour l'axe y. Donc axe X signifie qu'il nous donnera une marge de dernière et séchée. Et l'axe y signifie qu'il nous donnera la marge du bouton supérieur. Et nous pouvons également spécifier, par exemple, que toute la marge devrait être de trois. Et si je reviens maintenant, rafraîchir, nous pouvons voir que nous avons trois d'ici et trois d'ici, et aussi trois d'ici. Et si nous insérons quelque chose après cette entrée, nous allons obtenir ici un autre rembourrage. Et c'est essentiellement pour l'entrée, va le modifier plus tard, mais pour l'instant, laissez-moi simplement créer l'autre division. Et puis cette division, nous allons avoir une marge, aussi trois. Et bien sûr, nous devons créer une zone de texte. Ainsi, le nom de cette zone de texte sera un exemple. Je ne veux pas d'identité pour l'instant. Colonne défiler nous, ok, et maintenant vérifions ce que nous avons. Donc c'est nos attaques jusqu'à maintenant. On peut essayer quelque chose ici. Par exemple, P a raison, et si nous le gardons, nous pouvons voir que nous avons des abeilles ici. Cependant, chaque fois que nous voulons écrire quelque chose, nous pouvons soit y ajouter ou simplement supprimer et dès le début. Et bien sûr, ce n'est pas beau, donc nous devons le modifier un peu. Maintenant, revenons ici. Et voyons ce qu'on peut faire ? La première chose que nous allons faire est d'ajouter ici une classe de bootstrap, et c'est la même chose qu'avant, ce qui serait un contrôle de formulaire. Depuis que nous allons, nous utilisons un formulaire, car il est logique d'utiliser la classe de contrôleur par défaut. Si je retourne ici et nous pouvons voir que nous avons une zone de texte tout le chemin sur tout le navigateur. Et la même chose pour la zone d'entrée. Maintenant, nous pouvons voir que l'utilisateur pourrait ne pas comprendre ce que nous essayons de dire. Nous pouvons donc simplement ajouter, par exemple, ici, une étiquette pour l'e-mail et bien sûr une autre étiquette pour la zone de texte. Donc, une façon de le faire est simplement d'ajouter une étiquette avant l'entrée. Et cette étiquette aura la feuille, cette spécifique. Et laissez-moi juste ajouter une pièce d'identité ici. Et ce sera égal à l'entrée. Et c'est pour l'entrée. Et bien sûr, la classe sera aussi pour l'étiquette. Ensuite, nous allons écrire quelque chose ici, par exemple, adresse e-mail. Et bien sûr, après avoir terminé d'ici, je peux simplement supprimer cela. Ou nous pouvons taper 1-2-3 sur example.com. Et cela permettrait à l'utilisateur de mieux comprendre ce qui se passe ici. Donc, tout d'abord, nous avions l'adresse e-mail et nous avons aussi l'exemple ici. Maintenant, revenons en arrière. Et comme nous pouvons le voir, nous devons ajuster la zone de détection. Donc, une façon de le faire est d'ajouter également l'étiquette. Cette étiquette sera pour la zone de texte. Et bien sûr, la classe sera un étranger étiqueté comme avant. Et c'est la zone de texte. Et bien sûr, après avoir terminé à partir d'ici, il suffit de supprimer cela et de rafraîchir. Et comme vous pouvez le voir, nous avons eu notre adresse e-mail et notre zone de texte. Maintenant, si par exemple, nous constatons que nous avons tellement d'espaces ici, nous pouvons simplement modifier notre marge. Par exemple, ici, nous disons que nous voulons avoir une adresse e-mail, puis suivie de ceci. Et bien sûr, suivi par la zone de texte avec la zone de texte. Maintenant, par exemple, nous pourrions ajuster la marge en bas ici, je suis désolé, la marge à la marge en bas. Donc, si je fais quelque chose comme ça et que nous revenons à rafraîchir, nous pouvons voir que nous avons l'adresse e-mail en haut de la page. Et bien sûr, l'e-mail où nous pouvons insérer notre email. Et bien sûr, chaque fois que nous appuyons sur Entrée ici, rien ne se passera puisque nous n'avons rien ajouté ou aucune action qui pourrait résulter de la saisie ou de la soumission de nos données. Pour l'instant, il s'agit de notre adresse e-mail et de la zone de texte. Maintenant, nous avons aussi le dimensionnement. Donc, nous avons le dimensionnement de classes telles que. Contrôle de formulaire, puis spécifie une décision spécifiée. Donc, par exemple, cette taille, laissez-moi juste changer ici. Je peux aller à notre entrée et à l'intérieur de notre entrée et à l'intérieur de notre classe, nous pouvons ajouter le contrôle de formulaire. Et puis suivi par LG. Et ça veut dire de la boue. Retournez, rafraîchissez-vous. On peut voir que les décisions sont devenues un peu plus grandes. Et nous avons trois classes, le LG et la valeur par défaut, et le petit SM. Maintenant, nous pouvons également ajouter l'attribut disabled, et c'est un attribut booléen. Donc, par exemple, si nous avons quelque chose que nous ne allons pas montrer pour l'utilisateur car il pourrait ne pas être connecté. Et nous pouvons le faire en utilisant le bouton désactivé. Donc, par exemple, je peux revenir à nos commentaires. Et à l'intérieur de notre entrée, je viens d'ajouter simplement les handicapés ici. Retournez, rafraîchissez-vous. Et désolé, laissez-moi juste et bien sûr, nous ne l'avons pas ajouté ici, alors laissez-moi l'ajouter. Nous avons donc désactivé. Et bien sûr, retournez en arrière, rafraîchissez. Comme nous pouvons le voir, nous avons eu cette adresse e-mail grise. Nous pouvons taper init ou même supprimer quoi que ce soit d'ici. Ici, nous pouvons simplement ajouter. Revenons à notre code et parlons de mot de passe et de confirmation d'identité. Donc, tout d'abord, nous avons notre division. Permettez-moi de supprimer tout cela et de créer notre formulaire. Et sous cette forme, nous allons sans action, bien sûr, puisque nous ne l'avons pas appris. Et maintenant, nous avons notre classe. Et puis nous avons à l'intérieur de notre classe. Utilisons la rangée et bien sûr g trois. Et puis créons notre défaut et ceci est colonne, laissez-moi lui donner l'attribut de l'auto. Ensuite, nous allons créer notre travail. Donc, cette étiquette sera utilisée pour le courrier électronique. Email, et puis bien sûr, notre type d'entrée, nous pouvons spécifier qu'il peut être e-mail ou texte, n'a pas d'importance. Et puis après le type, nous pouvons ajouter la classe, le contrôle du forum et bien sûr, le texte brut. L' espace réservé sera envoyé par e-mail à example.com. C'est différé. Première division. La deuxième division aura également l'auto de l'île de verre et nous avons l'étiquette pour cette étiquette, ce sera pour le mot de passe, donc je vais simplement écrire passe, puis la classe sera visuellement cachée. C' est donc la classe que nous utilisons chaque fois que nous voulons créer un mot de passe. Et nous verrons ce que nous ferons dans un instant. C' est donc l'entrée étiquetée. Je, bien sûr, mot de passe pour cacher l'entrée. Et puis la classe sera pour le contrôle, suivi de l'ID, qui sera le passé que nous avons donné l'étiquette avant. Et bien sûr, l'espace réservé sera mot de passe. Et puis ici, nous avons juste besoin de taper ID Email. C' est donc notre deuxième division. Et dans la dernière division, nous allons créer notre bouton pour simplement donner ces données à notre serveur. Alors comment on fait ça ? Nous créons simplement notre, bien sûr, la classe sera automatique comme avant. Et à l'intérieur de cette division, nous allons simplement créer le bouton. Le bouton sera la conformation d' identité et le type sera Soumettre. Et puis la classe, nous allons lui donner des cours. Mais pour l'instant, laissez-moi juste rafraîchir ça. Et comme vous pouvez le voir, nous avons ici l'e-mail, email à example.com. Ensuite, nous avons la confirmation de mot de passe de l'identité. Et comme nous pouvons le voir ici, cette affirmation d'une identité n'a pas l'air d'une glace. Nous allons le modifier, mais avec l'utilisation de Bootstrap. Maintenant, c'est un courriel à example.com. Laisse-moi juste lire. C'est ça. En fait, ça n'a pas l'air bien. Alors laissez-moi juste décent ou nous pouvons utiliser le visuellement caché ici aussi. Donc, nous pouvons simplement ajouter visuellement, puis revenir en arrière. Et voyons voir. Nous avons visuellement fait. Et comme on peut le voir, il n'est plus là. Maintenant, si nous revenons à notre code, nous pouvons voir que nous devons ajuster ce bouton. Nous avons donc plusieurs cours ici. L' une des classes les plus importantes est DBT, qui indique que cela a un bouton. Je reviens maintenant, voyons la différence. Et il semble très, très différent d'avant nous avions ces frontières et le courant n'était pas agréable. Et maintenant, comme vous pouvez le voir, il a l'air moderne et beaucoup plus agréable. C' est donc le premier exemple ou la première classe que nous allons utiliser. Bien sûr, nous pouvons choisir l'arrière-plan a, sorte que le bouton sera primaire pour l'instant. Et bien sûr, marge, trois en bas, revenir en arrière, rafraîchir. Ainsi, nous pouvons voir que nous avons maintenant notre bouton. Et bien sûr, si nous voulons ajuster cela, nous pouvons simplement ajouter à notre formulaire ici les trois marginalisés et revenir en arrière, rafraîchir. Et nous avons notre marge maintenant. Donc c'est tout pour le mot de passe et la confirmation du bouton d'identité. Vous pouvez toujours changer tout ce que vous voulez si vous n'aimez pas la couleur ou si vous voulez changer la taille, tout ce que vous pouvez aller sur bootstrap.com et vérifier chaque élément et vous verrez une description détaillée de chaque élément dans là. Et bien sûr, par exemple, permettez-moi de terminer avec ceci. On peut changer ce bouton pour qu'il soit sombre. Et je pense que c'est mieux maintenant avec des couleurs blanches et sombres. Et c'est tout pour cette vidéo. Et la prochaine vidéo, nous poursuivrons notre discussion sur les forums. Et nous allons introduire de nouveaux formulaires que nous pouvons utiliser et qui sont couramment utilisés sur les sites Web. Alors, à vous voir. 8. Formulaires 2: Parlons maintenant de l'entrée de fichier. Chaque fois que vous voyez quelque chose ou aligné, par exemple, et à l'intérieur de cette ligne, nous avons l'attribut select file. Il s'agit généralement d'une entrée de fichier. Maintenant, créons l'un d'eux juste pour démontrer l'utilisation de ces entrées de fichier. Ainsi, par exemple, la première chose que nous allons faire est de créer notre division. A l'intérieur de cette division, je vais lui donner une classe de marchandises arbuste. Et cette classe serait la marge, bien sûr, juste pour lui donner une certaine marge sous tous les angles, alors nous avons notre travail et donc l'étiquette serait du fichier. La classe sera formée étiquetée comme d'habitude. Et puis nous avons aussi l'étiquette ici, nous pouvons ajouter, par exemple, fichier. Mais après l'étiquette, nous pouvons ajouter notre entrée. Donc, l'entrée sera de type fichier. Le verre serait un contrôle étranger, suivi de la pièce d'identité juste pour le faire pour l'étiquette. Et cela vient aussi du fichier. Maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, c'est notre étiquette et c'est notre fichier Choisir. Chaque fois que j'appuie dessus, je peux aller à mon bureau, Documents, Téléchargements, et ainsi de suite. Choisissez n'importe quel fichier à partir d'ici et téléchargé. Maintenant, voyons la différence entre ceci et l'étiquette sans ce HTML à ce Bootstrap. Comme on peut le voir, ça n'a pas l'air chic, ce n'est pas si moderne. Cependant, lorsque nous avons ajouté ce contrôle de formulaire de classe, je pense que nous pouvons convenir que cela semble beaucoup mieux. Maintenant, ce n'est pas pour l'entrée du fichier. Nous avons aussi quelques autres attributs que nous pouvons ajouter, par exemple, les entrées multiples. Nous pouvons ajouter plusieurs fichiers à la fois. Et nous avons aussi les handicapés, les petites, petites et grandes entrées de fichiers. Nous pouvons soit ceci est la taille par défaut, nous pouvons le rendre plus petit ou plus grand. Je ne vais pas passer en revue toutes ces choses depuis qu'on les a numérotées. Cependant, vous pouvez toujours aller à bootstrap et les vérifier. Quelque chose ici, quelque part ici. Et je pense que c'est les bases. Et nous avons juste besoin des bases pour faire de nos sites Web si vous voulez, si vous voulez en creuser plus profondément, vous pouvez toujours aller à Bootstrap. Mais pour l'instant, c'est notre entrée de fichier. Et passons à un autre sujet, et c'est le sélecteur de couleurs. Et ici, nous avons quelque chose qui s'appelle le sélecteur de couleurs en fait. Et dans ce cas, créons un délibéré sera le coin pour les couleurs, par exemple, pour la colonne. Et la classe sera comme d'habitude pour le travail et une couleur. Puis suivi de l'entrée réelle. Et dans ce cas, nous avons l'entrée de type. Bonjour, classe pour le contrôle. Et laissez-moi juste effacer et voyons ce qui se passe. Donc, si je supprime la classe, revenez en arrière, rafraîchissez. C' est notre sélecteur de couleurs FE, et appuyez dessus. Il nous donnera tous les coins disponibles pour nous. C' est le RVB. Nous pouvons choisir ici, changer les chiffres, ou choisir ici. Et de l'écran. Cependant, ça n'a pas l'air sympa. Donc, une façon d'ajuster cela est d'ajouter la classe contrôlée par formulaire, suivie de la couleur de contrôle étrangère. Retournez, rafraîchissez. Et comme on peut le voir, on a eu cette belle apparence, ça a l'air mieux. Et il fera le même travail qu'avant. Cependant, peut-être que nous ne voulons pas cette couleur noire par défaut. Alors, comment pouvons-nous modifier cela ? Donc, une façon de le faire est de revenir à l'entrée. Et à l'intérieur de l'entrée, nous avons quelque chose, laissez-moi juste ajouter l'idée de l'intestin plutôt. Et puis nous avons quelque chose qui s'appelle une valeur. Et à l'intérieur de cette valeur, nous pouvons choisir n'importe quel nombre ou n'importe quelle couleur pour être la couleur par défaut. Alors, comment choisir le genre de nous pouvons revenir à la couleur et Bootstrap l'idée de n'importe quelle couleur que nous voulons. Alors supposons que je veux cette couleur. Je peux simplement le copier, revenir en arrière, à droite , hashtag, cette couleur, puis revenir à notre site web, rafraîchir. Et on y va. Nous avons notre couleur bleue par défaut. Donc, c'est essentiellement pour la couleur. Maintenant, allons de l'avant et parlons des listes de données. Donc, dans ce cas, les listes de données nous permettent de créer un groupe d'options qui peuvent être accédées et complétées automatiquement à partir d'une entrée. Donc, en fait, ils sont similaires aux éléments sélectionnés, mais viennent avec plus de style de menu, limitations et de différence, et nous allons les explorer dès maintenant. Donc, la première chose que nous devons faire pour créer ce type de liste pour créer l'étiquette et l'étiquette sera comme d'habitude. Donc, d4 est, sera la liste de données, puis la classe pour l'étiquette. Et bien sûr, c'est une liste de données. Et puis suivi par l'entrée réelle de type. On peut ignorer le type. Et nous allons créer la classe pour le contrôle. Ensuite, suivi de l'ID comme liste de données, puis du type d'espace réservé à surcharger. Et bien sûr, pour créer cette idée, nous devons avoir la liste, les données, les options de liste. Et dans ce cas, chaque fois que nous faisons quelque chose comme ça, si nous allons rafraîchir, c'est notre liste de données. Et ici, nous pouvons chercher tout, tout ce que nous voulons. Maintenant, les options seront après l'entrée. Nous pouvons créer notre liste de données. Et dans cette liste de données, liste de données. Laisse-moi créer comme ça. Et l'idée serait des options de liste de données, comme nous l'avons dit précédemment. Et puis ouvrons. Donc, la première option sera de valeur. Disons que vous divisez le Liban que l'Égypte. Écrivons aux États-Unis. Et enfin, l'Inde. Maintenant, revenons en arrière, rafraîchissez-vous. Et je pense qu'on a un problème ici. C' est donc l'option de listes de données, les options de liste de données. Déplacez simplement les clics ici, sauvegardez, revenez en arrière, actualisez, appuyez ici. Et nous avons nos options ici, le Liban, l'Égypte, les États-Unis. Et nous pouvons choisir parmi eux. Ou nous pouvons taper le nôtre, par exemple, Dubaï. Et cela fonctionnera correctement, mais ce sont quelques options. Vous voudrez peut-être en faire les seules options, c'est complètement à vous de décider. Et cela viendra plus tard. Chaque fois que nous utilisons JavaScript ou chaque fois que nous avons fini avec notre site Web. Et ce n'est pas fondamentalement pour la liste de données , sujet très simple, mais aussi il est très puissant et cela nous donne un peu, ou cela rend le site un peu plus agréable puisque l'utilisateur peut réellement le voir qu'il a quelques options ou il peut choisir parmi quelque chose. Et ce n'est pas seulement qu'il ne peut écrire que si. Et c'est tout pour cette vidéo. Mais ceci étant dit : Rendez-vous dans la prochaine. 9. Vérification et radios: Parlons maintenant de la sélection. Et il s'agit d'une sélection personnalisée qui peut être utilisée en HTML. Cependant, nous avons quelques classes que nous pouvons modifier ou net que nous pouvons ajouter à notre sélection. Donc, la première chose que nous allons faire est de revenir à notre code, de supprimer tout cela, puis de commencer à zéro. Donc, la première chose est de créer le select et sans nom ou ID. Et je peux simplement dire que la classe devrait être un contrôle étranger. Et commençons par nos options. Donc, la première option sera, comme d'habitude, l'option numéro un serait une, et ici nous pouvons la sécher. Liban, option pour vous acheter deux États-Unis. Puis suivi par la valeur trois, l'Egypte. Et puis ce sont nos valeurs qui les ont poussées. Et bien sûr, nous pouvons ajouter ici la zone LeBron, et ce sera les exemples de sélection par défaut. C' est donc l'exemple de sélection par défaut. Et bien sûr, si je reviens ici, et qu' on a des choix DS3. Maintenant, par exemple, nous ne voulons pas que le Liban apparaisse dans le premier. Nous pouvons ajouter l'option et elle sera sélectionnée. Et la valeur sera sans personne, nous ne donnons aucune valeur ici. Et bien sûr, l'option serait ouvrir ceci pour sélectionner dans Actualiser. Alors ouvrez ceci pour sélectionner à partir d'arpanet. Nous avons tous ces éléments disponibles pour nous. Je peux choisir les États-Unis, l'Egypte et le Liban. Cependant, ici, c'est différent qu'avant. On peut essayer n'importe quoi ici. Ce sont donc les seules options disponibles pour nous, et nous devons choisir l'une d'entre elles. Donc, c'est essentiellement pour la valeur par défaut. Maintenant, nous pouvons également choisir la taille en ajoutant simplement la taille ici. Donc, nous avons le formulaire sélectionner, peut ajouter formulaire sélectionner déjeuner. Et si je reviens, rafraîchir, comme on peut le voir, cette sélection s'est agrandie. Et ça a l'air clair. Maintenant, nous pouvons également choisir le et cette Abel. Et c'est l'attribut que nous avons ajouté auparavant, et c'est un booléen, donc nous pouvons simplement l'ajouter ici. Donc, cette capacité revenir en arrière, rafraîchir et nous pouvons choisir parmi elle. Et il est très utilisé et des sites Web courants, surtout si vous n'êtes pas connecté et que vous ne pouvez pas choisir ou modifier quoi que ce soit. Et ce bouton désactivé, attribut désactivé permettra au site Web ou au créateur de s'assurer que vous êtes connecté pour le faire, ou vous pouvez le faire. Donc, c'est essentiellement pour la sélection. Parlons maintenant des chèques et des radios. Alors allons de l'avant et supprimons cela et créons notre chèque. Pour ce faire, nous pouvons simplement créer notre division et nous serons choqués à l'intérieur de notre division, nous allons créer notre contribution. Donc, le type de cette entrée sera une case à cocher. Et bien sûr, la classe sera pour Jack et mettre. Et puis l'idée, disons que c'est une vérification suivie par la classe étiquetée. Donc, ici, nous devons ajouter la vérification et puis la classe sera avant vérification étiquetée. C' est donc notre première division par aller. Et actualisez cette page. Nous pouvons voir que nous avons cette division ici. Cependant, nous n'avons rien à l'intérieur sont étiquetés. Laisse-moi juste ajouter ici. Vérifie-moi, rafraîchis-toi. On m'a vérifié. Je peux le vérifier ou le décocher et cela fonctionnera très bien. Maintenant, parfois nous ne voulons pas ce bouton par défaut non coché ici. On avait besoin de l'être. Donc, une façon de le faire est de vérifier ou de dire pour le navigateur que ce bouton est coché. Alors laissez-moi juste copier ceci et le coller ici. Comment faites-vous ça ? Nous pouvons simplement aller à notre entrée et ajouter le mot vérifié, rafraîchir. Donc, nous avons un bouton qui n'est pas coché et l'autre case est cochée. Et vous pouvez toujours basculer ou choisir entre eux ou cocher les deux car ils sont case à cocher. Maintenant, nous avons aussi quelque chose qui est appelé intermédiaire, et il vient comme la ligne horizontale. Laisse-moi retourner ici. Et nous ne pouvons pas le créer à partir de HTML ou bootstrap. Il doit être créé à l'aide de JavaScript et il n'est pas disponible dans les attributs HTML. Maintenant, enfin, nous pouvons créer notre bouton désactivé ou la vérification désactivée par exemple, ici, au lieu de cocher, je peux simplement écrire désactivé, revenir en arrière, rafraîchir. Et comme vous pouvez le voir, je ne peux pas vérifier ce bouton. Je peux, je pense, vérifier le cygne. Ceci est désactivé. Maintenant, allons-y et passons au rayon. Et dans ce cas, laissez-moi juste supprimer ceci, recommencer. Donc le formulaire sera quatre. Vérifie. L' entrée sera de type radio. La classe sera pour l'entrée de shack. Et puis suivi d'une idée. Par exemple, il s'agit d'une radio. Et puis le nom sera à la radio. Et puis après l'entrée, nous devons créer notre étiquette. Donc, pour la radio, puis la classe sera formée. Vérifier et étiqueter. Bien sûr, à l'intérieur de notre étiquette, nous pouvons créer ou taper n'importe quoi. Donc pour l'instant, je vais taper la radio, et comme on peut le voir, nous avons cette entrée radio. Maintenant, nous pouvons également le taper ou le faire comme Jack simplement en ajoutant le vérifié ici. Retournez, actualisez, et c'est déjà vérifié. Nous pouvons également l'utiliser comme un défaut ou comme un désactivé. Mais je ne vais pas faire ça. Vous pouvez simplement changer ce mot avec désactivé et pour travailler très bien. Maintenant, nous avons quelque chose qui est très populaire et très utilisé dans les sites Web. Et c'est ce qu'on appelle un interrupteur. Donc, j'ai commuté a une case à cocher personnalisée remarquable, mais utilise le mélangeur de classe deux ou un commutateur à bascule. Donc, pour ce faire, nous allons rester et ce sourd. Mais laissez-moi juste ajuster ce que nous avions avant. Et nous avons aussi un interrupteur déformé. Maintenant, nous avons les deux formes. Laissez-moi supprimer et vu le gunk de D. Et l'entrée sera le type, sera une case à cocher. Ensuite, nous avons la classe pour vérifier. Et puis suivi de l'idée ou non, laissez-moi simplement alimenter notre étiquette à l'intérieur de notre étiquette. On va taper. Laisse-moi juste faire ça pour. Et la classe sera égale à quatre étiquette de vérification suivie du texte réel ici. Donc, c'est commutateur, case à cocher et mettre. Et si je retourne ici, rafraîchir, nous avons cette case à cocher et basculer entre allumer et éteindre. Et nous pouvons faire la même chose avec ça qu'avant. Nous pouvons le désactiver, nous pouvons faire une vérification par défaut ou nous pouvons le désactiver pendant qu'il est vérifié. Donc, ce n'est pas fondamentalement pour ces modèles et je pense que cela suffit pour l'instant. Permettez-moi d'ajouter une chose qui est les cases à cocher éclairées. Donc, si par exemple, je ne veux pas qu'ils soient sur l'horizontale ou sur la même colonne. Je veux qu'ils soient sur la même rangée. Par exemple, permettez-moi d'ajouter ici quelques cases à cocher. Donc, le premier sera la division de quatre, vérifier, vérifier éclairé. Et ce éclairé fera les cases à cocher sur la même ligne. Donc, l'entrée sera de type case à cocher. La classe sera pour l'entrée de contrôle. Puis suivi de la valeur, ce nom et l'option un. Et bien sûr, l'étiquette sera de classe. Cette classe sera quatre vérifications étiquetées. Et bien sûr, c'est l'option une. Et laissez-moi simplement copier et coller ce deux fois de plus 12. Donc, c'est l'option deux. Et la valeur ici sera aussi deux et ici trois et aussi trois. Et si je reviens maintenant, rafraîchir, comme nous pouvons le voir, ils sont tous dans la même ligne puisque nous utilisons le contrôle de formulaire ou la ligne d'enregistrement étranger. Et je peux cocher n'importe laquelle de ces entrées. Maintenant, passons à la case à cocher boutons à bascule. Et dans ce cas, laissez-moi simplement supprimer ceci. Et créons notre bouton de case à cocher. Donc, la première chose que nous allons faire est de créer la case à cocher et mettre la classe sera btn check. Donnons-lui la même idée, puis complétez automatiquement TLB. Après cela, nous pouvons simplement revenir sur la ligne suivante et créer notre étiquette. La classe sera comme d'habitude, btn, BTN primaire pour la première fois. Alors revenez en arrière et donnons-le un nom. Bouton Vérifier. Retournez, rafraîchissez-vous. Et comme nous pouvons le voir, nous avons ce bouton et c'est un bouton principal. Maintenant, si je voulais qu'il soit vérifié, je peux simplement utiliser l'attribut checked ici. Donc, comme vous pouvez le voir ici, je peux revenir en arrière, rafraîchir et est maintenant vérifié. Si je clique dessus, rien ne se passera puisque nous n'avons pas fini ajouter quoi que ce soit à maintenant. Et c'est essentiellement pour les boutons. On peut toujours les habiliter, tous, les vérifier comme on veut. Donc, nous pouvons, nous pouvons supprimer cela, que désactivé ici et revenir rafraîchir. Ainsi, nous pouvons voir qu'il s'agit d'un bouton désactivé. Et enfin, nous avons le style contour. Et cela est généralement utilisé pour simplifier les choses. Donc, par exemple, si c'est le bouton et que nous ne sommes pas satisfaits du style de ce bouton. Nous ne sommes pas satisfaits de la couleur de fond. On voudra peut-être l'enlever. Nous pouvons simplement utiliser ce schéma. Et dans ce cas pour l'étiquette, je peux simplement utiliser le contour BTM primaire. Maintenant, revenons en arrière et rafraîchissons. Et comme on peut le voir, ça pourrait paraître plus agréable sur certains cas spéciaux. Donc c'est tout pour les chèques et le rayon. Cela dit, c'est la fin de cette vidéo. se voit dans la prochaine. 10. Gamme et entrée: Parlons maintenant de la portée. Et tout d'abord, permettez-moi juste de supprimer ceci et de créer notre labeur. Donc ce câble sera à la recherche de la gamme. La classe serait comme d'habitude pour étiquetés. Et c'est une gamme. Bien sûr, nous devons créer l'entrée des veines de type. Nous avons également la classe pour la gamme. Et permettez-moi de lui donner l'idée de la gamme aussi. Revenons ici et rafraîchissons le comme nous pouvons le voir, nous avons maintenant notre gamme afin que nous puissions le déplacer arrière comme nous pouvons le voir et le mettre où nous le voulons. Et nous avons ceci étrange. Maintenant, nous pouvons toujours le modifier. Nous pouvons soit créer des lignes, donc c'est la ligne et diviser la page en deux colonnes différentes et rendre leur pouce plus petit, par exemple. Ou créez une division au milieu du chantier et placez cette page à l'intérieur de cette division et afin qu'elle soit meilleure et plus intelligente. Parce que ce n'est pas une très belle gamme. Cependant, il a toutes les caractéristiques dont nous avons besoin. Maintenant, nous pouvons toujours ajouter l'attribut disabled. Nous pouvons ajouter un minimum et le maximum. Et je vous encourage à les essayer par vous-même. Et bien sûr, ils sont tous disponibles sur le site Web de Bootstrap. Passons maintenant à un autre formulaire très important qui est le groupe d'entrée. Et pour ce faire, permettez-moi de supprimer ceci et de créer notre division. Et à l'intérieur de notre division, nous lui donnerons la classe. Cette classe serait le groupe d'entrée, et j'ajouterai la marge de tous les côtés. A l'intérieur de cette classe, nous allons avoir notre élément d'expansion à l'intérieur de ce groupe. Je vais simplement écrire l'annonce pour indiquer qu'il s'agit d'un nom d'utilisateur. Et bien sûr, la classe serait le texte d'entrée. Et comme nous pouvons le voir maintenant, si je reviens et rafraîchis notre page, nous allons avoir ça au symbole et aux rayons. Et comme nous pouvons le voir, c'est notre division. On a créé la travée. Maintenant, nous devons créer notre entrée où l'utilisateur peut taper a prononcé. Dans ce cas, nous allons créer l'entrée de texte de type. Les déclarations seront comme d'habitude pour le contrôle, et l'espace réservé sera dans le nom d'utilisateur. Et bien sûr, vous pouvez ajouter tout ce que vous voulez après cela, mais nous allons juste l'utiliser pour l'instant. Et comme nous pouvons le voir, c'est notre nom d'utilisateur d'annonce. On peut écrire ce qu'on veut ici. Et bien sûr, nous pouvons ajouter un bouton ou quelque chose comme ça juste pour indiquer que nous voulons soumettre. Ou peut-être qu'on a un formulaire. Donc, si nous avons plusieurs éléments, nous devons simplement les remplir tous, puis cliquer sur soumettre pour soumettre nos informations à la fois. Donc c'est tout pour le nom d'utilisateur. Par exemple, si nous voulons ajouter cet e-mail, nous pouvons utiliser la plage, par exemple, en bas ici. Et bien sûr, je peux ajouter example.com pour indiquer que c'est la fin. Et si j'essaie encore une fois, nous avons un nom d'utilisateur ici et example.com. Et vous voudrez peut-être simplement diminuer la largeur ou la longueur de ceci. Depuis son très long, il est sur toute l'image sur le site. Vous pouvez simplement créer une division et peut-être juste la moitié de la page ou au milieu de la page ou ainsi de suite. Donc, c'est essentiellement pour l'e-mail. Maintenant, supposons que nous ne sommes pas sûrs de l'example.com. Dans ce cas, nous pouvons ajouter une autre entrée après cette plage et nous pouvons l'indiquer comme avant. Alors laissez-moi simplement déplacer ceci et copier coller. Et bien sûr, nous pouvons changer le titulaire de place pour ajouter example.com, revenir en arrière et rafraîchir. Et comme nous pouvons le voir, nous avons maintenant notre nouvelle division ou notre nouvelle contribution. Dans ce cas, nous pouvons écrire notre nom d'utilisateur ici à, et bien sûr, sur exemple.com, nous devons le changer pour tout ce que nous avons. Maintenant, une autre chose à ajouter, par exemple, si nous voulons faire cela et mettre mieux regardé, nous pouvons toujours utiliser le groupe d'entrées-petit ou entrée pour Groupe gros aliments, un plus grand apport. Donc les groupes d'entrée petits. Maintenant, retournez en arrière, rafraîchissez, et comme vous pouvez le voir, il est devenu plus petit. Et bien sûr, le LG sera plus grand. Et comme nous pouvons le voir, c'est notre contribution maintenant. Maintenant, nous pouvons également ajouter les cases à cocher et les radios à l'intérieur de nos options. Ainsi, par exemple, au lieu de spécifier le type de l'entrée en tant que texte, nous pouvons le spécifier comme il case à cocher. Maintenant, bien sûr, nous devons changer cela et nous lui donnons la cabane à bogues de classe. Et c'est l'entrée. Retournez, rafraîchissez-vous. Est-ce qu'on peut voir qu'on a cette petite case à cocher ici. Et quand nous pouvons le modifier, nous pouvons également l'ajouter au lieu de l'ajouter ici. Et nous pouvons faire tout ce que nous voulons dans cette division. Maintenant, nous pouvons également ajouter plusieurs add-ons. Donc, par exemple, au lieu de spécifier ceci ou peut-être qu'il suffit de supprimer ceci. Et avant cela, laissez-moi juste revenir à notre défaut. Et au lieu de cela, j'ajouterai un autre élément span avec une classe d'entrée. Texte du groupe. Et ici, je vais ajouter l'example.com et revenir rafraîchir. Et comme vous pouvez le voir, nous devons étendre les éléments et ceux-ci indiquent plusieurs ajouts. Maintenant, nous pouvons également ajouter le bouton ajouter ons. Donc, au lieu de créer une plage, nous pouvons créer un bouton réel. Dans ce cas, permettez-moi de supprimer le deuxième, ou peut-être le troisième. Et créons un bouton de classe BTN, PT et contour secondaire. Et bien sûr, essayons quelque chose. Donc, c'est un bouton et revenir à l'actualisation. Et comme on peut le voir, on a notre bouton ici. On peut planer dessus et ça nous donne un bel effet. Maintenant, nous avons aussi quelque chose qui s'appelle boutons, listes déroulantes. Et dans ce cas, nous pouvons créer notre bouton et nous pouvons ajouter quelques éléments à ce bouton. Donc, chaque fois que nous appuyons dessus, ces éléments apparaissent et nous pouvons choisir parmi eux. Donc pour ce faire, supprimons ceci et je garderai la division et les classes à l'intérieur de la division. Donc, la première chose que nous allons faire est de créer la classe, le bouton et les classes seront la fin btn, outline et secondaire comme d'habitude. Et maintenant, nous allons ajouter une autre classe pour la liste déroulante, et cela s'appelle une liste déroulante basculée. Et dans ce cas, le type sera un bouton. Et bien sûr, chaque fois que nous avons besoin d'utiliser la liste déroulante, nous devons mettre à jour les données. Ainsi, les données ps seront égales à la liste déroulante. Et dans ce cas, nous avons mis, peut ajouter notre bouton. Donc, à l'intérieur de ce bouton nous avons, créons une liste non ordonnée. Donc, la liste non ordonnée sera d'une classe appelée un menu déroulant. C' est donc notre classe et les éléments de la liste. A l'intérieur du dernier élément, nous allons créer un lien. Et voici le lien hypertexte. Et chaque fois que vous voulez créer un lien sans aucune référence, vous pouvez simplement écrire l'année hashtag et ensuite travailler comme d'habitude. Donc, la classe serait un élément déroulant. Rappelez-vous que toutes ces classes sont boostent les classes Bootstrap, et nous ne sommes pas responsables de les écrire. Nous pouvons simplement les utiliser dès maintenant. Et bien sûr à l'intérieur de cela, nous pouvons créer, par exemple, la page d'accueil. Permettez-moi de copier ceci et de le coller plusieurs fois, et juste de les faire sur des lignes séparées. Et ici, disons mission. Disons de nous contacter. Et disons des commentaires. Ça a l'air bien. Et voici notre liste non ordonnée. Nous avons la classe de menu déroulant à l'intérieur de notre liste non ordonnée que dans chaque élément de la liste, nous avons un lien et ce lien est Avid verre liste déroulante. Maintenant, nous n'avons qu'à créer notre contribution ici. C' est donc notre contribution et ici, cela ne devrait pas être ici. Nous pouvons simplement le déplacer ici et créer le bouton. Laisse-moi juste essayer, peut-être un bouton. Et c'est ça. Fais-le sur la même ligne. Et maintenant, bien. Donc, le type sera du texte, peut-être. Donc, nous allons le laisser comme un texto. Et nous allons écrire quelques cours. Donc, la classe sera comme d'habitude pour le contrôle. Et nous ajustons aussi cela. Et maintenant je pense que nous sommes bons, revenons et rafraîchissons. Et comme vous pouvez le voir, nous avons eu notre bouton. Et chaque fois que nous appuyons dessus, nous avons notre maison Michigan Contactez-nous et commentaires. Maintenant, rappelez-vous que chaque fois que nous nous reposons sur quelque chose, rien ne se passera puisque nous n'avons pas ajouté d'action à notre atlas. Donc, c'est essentiellement pour le bouton avec des listes déroulantes. Nous pouvons toujours changer l'emplacement du bouton. Par exemple, ici je l'ai créé sur la gauche, vous êtes créé sur la mariée ou peut-être les deux. Donc c'est à vous de décider. Et c'est tout, on peut juste modifier quelque chose ici. Donc, par exemple, supposons que j'ai la maison Michelle Contactez-nous et commentaires d'un côté. Et j'ai besoin d'une ligne séparée pour les séparer d'une autre chose qui pourrait, que nous pourrions vouloir ajouter. Donc, pour ce faire, nous pouvons simplement ajouter et notre liste non ordonnée, l'élément de liste. Et cet élément de liste sera essentiellement l'élément et la classe sera un diviseur déroulant. Et c'est comme ça que nous le faisons. Donc maintenant nous avons un diviseur, quoi que nous ayons essayé une autre chose ici, supposons qu'on ait écrit au revoir et qu'on retourne au frais et qu'on presse une fois de plus. Nous pouvons voir que le Adieu est différent et séparé des autres. Et je crois que j'ai fait une erreur. Donc, cette mise à jour déroulante et c'est bon maintenant. Donc ce sont nos, notre premier côté et c'est le deuxième côté séparé par cette ligne. Donc, c'est essentiellement pour les boutons. Nous avons donc parlé de plusieurs groupes d'entrée et de la façon de les créer. Nous avons aussi parlé de gammes. Et je pense que ça suffit pour l'instant. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 11. Mise en page: Bonjour et bienvenue. Et dans cette vidéo, nous allons discuter de la mise en page. Alors revenons en arrière. Et fondamentalement, ce que nous allons faire est de créer plusieurs pages ou plusieurs formes d'un site Web. Et bien sûr, nous devons les modifier et les faire ressembler à un site web moderne. Donc, tout d'abord, laissez-moi juste supprimer ceci et aller ici. Nous pouvons commencer par créer notre division. Et nous allons commencer avec l'utilitaire inférieur de ma marge de gym. Et c'est fondamentalement, comme on peut le dire, m3. Laisse-moi juste l'écrire B5. Donc, au lieu de spécifier cela, au lieu de dire que nous avons en effet tous les bords d'au moins trois pixels. Nous pouvons spécifier que nous n'avons besoin que du fond. Et bien sûr, après avoir quitté la division, nous pouvons commencer par créer notre label. Donc livré sera, laissez-moi juste supprimer le pour. La classe sera égale à quatre étiquetés. Et puis nous avons l'exemple ici. Passons maintenant à notre côté d'entrée. L' entrée sera tapée du texte. Ensuite, la classe sera le contrôle de formulaire comme d'habitude. Et bien sûr, laissez-moi juste créer l'espace réservé ici. Et l'espace réservé sera peut-être le nom d'utilisateur. Et maintenant, si je retourne ici, rafraîchir, c'est ce que nous allons obtenir. Maintenant, supposons que j'ai besoin du prénom et du nom, ou de l'email ou du mot de passe et du mot de passe. Donc, par exemple, dans ce cas, je peux créer une autre division. Et dans ce cas, si je me rafraîchis maintenant, je vais obtenir ces deux divisions séparées sur des lignes séparées. Peut-être qu'on ne veut pas ça. Peut-être que nous voulons juste que le nom d'utilisateur soit, à prendre la moitié de la page et, par exemple, la moitié prénom et le nom de famille, la seconde moitié. Alors laissez-moi juste ajuster l'espace réservé pour être prénom et nom de famille. Maintenant, retournez en arrière. Et voici Prénom, Nom. Maintenant, une façon de le faire est de créer notre nouvelle division. Et à l'intérieur de cette division, placez ces deux divisions. Donc, tout d'abord, notre division devrait être d'une rangée de classes pour indiquer que c'est notre pâte. Et bien sûr, vous avez besoin de l'explicite ici. Et ce sont des colonnes de lunettes. Donc ce sont nos deux colonnes à l'intérieur de notre drone sur le rafraîchissement. Et comme on peut le voir, nous avons nos deux divisions et elles sont séparées au milieu. Alors maintenant, continuons. Notre page, donc nous avons maintenant notre prénom, nom. Donc, je vais simplement supprimer cela et écrire e-mail et mot de passe jusqu'à ce que cela aussi. Donc, l'espace réservé ici, juste supprimé, puis supprimer le nom de famille. Ici, nous avons l'e-mail et le mot de passe. Comme d'habitude, chaque fois que nous utilisons mot de passe, le type de l'entrée sera également mot de passe. Maintenant, après avoir créé ces deux colonnes à l'intérieur de notre conduite, nous pouvons créer une autre ligne. Et dans ce cas, vous pouvez simplement créer une autre ligne ici. A l'intérieur de cette rangée, nous allons diviser nos colonnes et deux, peut-être trois séparées. Ou laissez-moi simplement ajouter l'adresse d'abord et puis créer ceci. Donc c'est notre drone et nous n'avons qu'une seule colonne. Et cette colonne sera composée d'une entrée et le type sera taxé. La classe sera pour le contrôle. Et bien sûr, l'espace réservé sera l'adresse. Maintenant, si je retourne ici, rafraîchir, nous avons aussi notre adresse, mais comme vous pouvez le voir, nous n'avons pas de place entre eux. Alors peut-être juste ajouter un peu d'un haut de marge ici. Donc à l'intérieur de notre verre, nous pouvons, à l'intérieur de cette classe de marge en haut, peut-être trois. C' est assez de rafraîchissement. Et comme nous pouvons le voir, nous avons un peu d'espace entre les deux entrées. Maintenant, en revenant ici, c'est notre première adresse. Maintenant, où nous avons une deuxième adresse, laissez-moi la copier et la coller. Donc, ici, nous avons ajouté ceci pour revenir en arrière, rafraîchir. Et comme nous pouvons le voir, nous avons l'adresse 1 et l'adresse 2, mais peut-être juste les modifier. Donc, au lieu d'un seul, nous pouvons simplement écrire un exemple d'adresse. Alors Main Street, c'est l'espace réservé. Et ici, nous pouvons simplement ajouter le bâtiment et le flux. Et comme nous n'avons pas spécifié d'adresses, nous devons créer nos propres étiquettes. Donc, à l'intérieur de l'érudit, l'étiquette sera de type. Donc pour avril et ensuite suivi par le travail réel, c'est l'adresse. Et bien sûr, laissez-moi juste copier cette base ici et changé juste pour l'adresse, pour revenir en arrière et rafraîchir. Et comme on peut le voir, on a nos adresses. Maintenant, ajoutons la ville, l'état et le code postal. Et dans ce cas, nous devons les créer en une seule division et ils prendront tout ce site Web. Cependant, nous devons diviser notre site Web. Et comme nous l'avons dit, nous en avons 12. Ce site web. Donc nous pouvons diviser ces 12. Par exemple, peut-être que la ville peut prendre jusqu'à huit, et les 24 autres, peut-être cinq. Alors, voyons ça. Maintenant. Revenons à notre code. Et à l'intérieur de notre Joe Maintenant, nous devons créer nos colonnes. Donc la première colonne sera, disons sexe. Je pense que le sexe est bon. Et à l'intérieur, nous allons créer notre set M. Donc l'étiquette sera en verre pour L1. Donc, c'est pour étiqueté. Et puis le label serait la ville. Ensuite, l'entrée. Donc taxé comme d'habitude classe pour le contrôle et ensuite suivi par l'autre, l'Etat. Et laissez-moi juste me rafraîchir et voir ce qui se passe. Donc c'est notre ville. Il a fallu à la moitié de la page. On a encore l'autre moitié. Et dans ce cas, je peux simplement copier et coller en arrière. Cependant, nous ne voulons pas que l'État prenne tout le reste de la page que nous devions prendre jusqu'à quatre. Maintenant, retournez en arrière, rafraîchissez. Nous avons notre état ici, puis finalement suivi par notre code postal. Donc, je peux simplement copier ceci, encore une fois, changement basé, ceci, rafraîchir, et maintenant nous avons notre ville, l'état et le code postal. Laisse-moi juste modifier ça. Donc c'est le code. Donc, c'est fondamentalement nous pouvons également modifier certains des éléments ici. Ainsi, par exemple, si nous connaissons le nombre exact des états et les noms exacts, nous pouvons simplement ajouter l'option ici. Et puis chaque fois que l'utilisateur appuie simplement sur cette option, toutes les options apparaissent et il peut choisir parmi elles. Et il peut toujours écrire quelque chose ici. Cependant, comme nous l'avons dit, chaque fois que nous écrivons quelque chose, rien ne se passera. Et puisque nous n'avons pas ajouté d'action pour cette forme, et je pense que cela suffit. Nous pouvons toujours ajouter un simple bouton ici, par exemple, pour soumettre notre formulaire. Et je pense que c'est tout pour ce site. Créons un autre en modifiant simplement certains des éléments ici. Donc, par exemple, peut-être que nous avons besoin de l'e-mail et du mot de passe, puis nous devons vérifier certaines des options. Laissez-moi juste supprimer tout cela. Et dans notre tirage au sort, nous avons un mot de passe e-mail et je pense que nous n'avons pas besoin de tout ça. C' est la version. C' est la deuxième division. C' est au fond. Et maintenant, nous pouvons en créer un autre, aller à l'intérieur de la paille. Nous allons avoir la première colonne et il faudra jusqu'à deux à l'intérieur de cela, essayons quelque chose de si envergure, comme d'habitude sont peut-être nous allons créer une étiquette. La chose va mieux. Et la classe serait pour l'étiquette. Puis suivi par la cabane. Et je pense que c'est assez pour l'instant. Nous avons ici notre chèque, laissez-moi juste ajuster. Donc, à l'intérieur de notre colonne, je suis désolé, à l'intérieur de notre rangée, j'ajouterai peut-être MD5. Et comme nous pouvons le voir, nous avons ces cinq. Laisse-moi le faire de tous les côtés. Maintenant, nous avons notre chèque ici. Et bien sûr, créons l'autre colonne. Et cela prendra jusqu'à tout le reste de la page. Et à l'intérieur de cette colonne, nous pouvons créer quelques options. Alors créons notre boîte de chat. Et nous pouvons simplement taper entrée, taper case à cocher. Et bien sûr, nous avons plusieurs classes à ajouter. L' un d'eux est pour l'entrée de vérification et c'est le plus important. Revenez à frais, nous avons notre boîte de chat maintenant. Donc c'est notre classe et c'est notre contribution. Nous pouvons toujours l'ajouter à une division et à une classe pour cabane. Et ensuite, c'est notre division. Et si nous voulons écrire quelque chose, par exemple, à la maison. Et comme vous pouvez le voir, c'est notre première entrée. Peut toujours ajouter plusieurs entrées ici. Alors, pour les vérifier. Et puis enfin ajouter le bouton ici, par exemple, inscrivez-vous ou quelque chose comme ça. Et je pense que c'est suffisant pour l'instant. Vous pouvez toujours jouer avec ces éléments. Par exemple, vous pouvez tous les placer sur la même ligne ou utiliser les formulaires intégrés. Ou vous pouvez les mettre, chaque élément et une ligne. Et cela dépend de vous, façon dont vous voulez que votre site Web ressemble, et des différents types de pages. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 12. Composants: Bonjour et bienvenue. Et dans cette vidéo, nous allons discuter de certains composants dans Bootstrap. Le premier sera l'accordéon. Laisse-moi juste en créer un pour que tu comprennes mieux ce qu'est un accordéon. Donc, tout d'abord, pour le créer, comme d'habitude, nous devons créer une division. A l'intérieur de cette division, le verre sera gardien. Et laissez-moi lui donner une carte d'identité. Donc c'est de l'accordéon. Aussi à l'intérieur de cette division, nous allons créer un objet accordéon. Donc, cet objet accordéon, c'est une autre division. A l'intérieur de cette division, nous pouvons créer notre accordéon. Donc c'est l'objet de l'accordéon. Il se compose d'un en-tête et d'un bouton. Donc, pour créer le headless, créez un en-tête H2. La classe sera l'accordéon Hadoop. Et nous pouvons simplement taper quelque chose ici. Donc, c'est l'article un, puis suivi par le bouton et la classe, et ce bouton sera bouton accordéon. Le type comme d'habitude sera bouton. Et puis bien sûr, puisque nous allons utiliser l'accordéon, disons juste quelque chose ici. Par exemple, il s'agit d'un élément yen froid un. Et laissez-moi juste le placer ici. Bien sûr, supprimez cet article un puisque nous venons de l'ajouter à notre bouton. Maintenant, si je retourne me rafraîchir, alors c'est notre accordéon. Maintenant, chaque fois que nous ajoutons quelque chose à cet accordéon et que nous appuyons dessus, il apparaîtra ici. Alors créons, après avoir créé le titre, nous allons ajouter la division. Il s'agit de la deuxième division à l'intérieur de l'élément. Et puis cette division, nous allons lui donner une classe de labos d'accordéon. Et puis bien sûr, laisse-moi juste créer le copain. Donc ici la division sera d'un accordéon de classe. Mais à l'intérieur de cette division, créons le paragraphe. Lauren. Peut-être. Retournez, rafraîchissez. Et voici notre paragraphe. Maintenant, commençons à ajouter quelques idées, puisque nous ne pouvons pas l'utiliser pour maintenant nous pouvons juste faire disparaître ce paragraphe. Donc, pour ce faire, nous devons ajouter deux choses ici. Donc, les données, BS bascule pour s'effondrer et la cible VS. Et je lui ai donné l'effondrement juste pour l'ajouter à l'intérieur de la deuxième division. Maintenant. Donc ici, à l'intérieur de notre deuxième division, créons notre effondrement d'identité. Un, bien sûr. Et modifions simplement ceci. Ici. Nous avons l'ID de division réduire une classe et nous avons également besoin d'écrire des données BS, parent. Et dans ce cas, ce sera l'accordéon, c'est celui-ci avant. Donc ce groupe sera égal à. Maintenant. Si j'appuie dessus, ça disparaîtra. Et si j'appuie une fois de plus sur elle, ça fera appel. Et nous pouvons faire la même chose pour plusieurs accordéons. Donc, nous pouvons juste copier ça deux fois de plus et ensuite jouer paie. Il paie. Laisse-moi juste le copier. Et je pense qu'on va y retourner, se rafraîchir. Comme nous pouvons le voir, nous avons nos trois accordéons et nous pouvons basculer entre eux. Cependant, ils sont liés maintenant, puisque nous avons la même carte d'identité et les mêmes idées en fait pour plusieurs objets en Chine à l'intérieur de ces accordéon. Nous devons donc changer les idées simplement pour nous assurer qu'elles sont complètement indépendantes. Donc, comme vous pouvez le voir, si j'insiste là-dessus, ces deux-là vont changer et nous ne voulons pas vraiment que cela se produise, donc nous pouvons simplement changer ces idées. Donc, par exemple ici, je peux le nommer selon, selon, et puis nous sommes bons. Et je pense que c'est tout pour l'accordéon. Passons aux alertes. Alors, que sont les alertes ? En fait, les alertes sont quelque chose qui nous fournit un message de rétroaction pour un utilisateur typique. Toute action que nous effectuons. Et nous avons gagné l'utilisateur pour obtenir ce message. Nous pouvons réellement leur fournir ce message en utilisant la classe d'alerte disponible pour nous et bootstrap. Et ils sont en fait un plugin JavaScript. Puis Nazi SS, ils utilisent JavaScript. Donc, pour ce faire, laissez-moi juste supprimer ceci et commencer à partir de zéro. Donc supposons que je veux créer une alerte. Nous pouvons simplement créer notre division. A l'intérieur de cette division, la classe qui serait alerte et autre primaire. A l'intérieur de cette division. On peut l'essayer. Lauren. Et nous pouvons en fait spécifier le rôle pour être la limite. Maintenant, passons à autre chose et il apparaîtra comme une alerte. Maintenant, nous pouvons également créer une autre alerte pour rejeter quelque chose. Donc, par exemple, permettez-moi juste de supprimer ceci et de créer notre classe qui sera alerte. Et à l'intérieur de notre division. Ajoutons quelques classes ici. Nous avons donc la classe d'alerte, d'avertissement et d'alerte non valide. Nous avons aussi le fondu et le spectacle. Bien sûr, le rôle sera alerte. Et puis après avoir créé cette division, créons un paragraphe. Donc, à l'intérieur de ce paragraphe, je vais écrire Lorem sept et puis suivi par le bouton. Et ce sera le bouton X. Donc, tapez sera bouton. Et puis après ce bouton, nous avons la classe BTN, vêtements et données, BS, rejeter. Il sera égal à alerter. Et bien sûr, nous pouvons spécifier l'étiquette pour être égal à fermer. Maintenant, si on revient à rafraîchir, on va avoir cette alerte de rejet. Et c'est encore JavaScript, et il est possible de rejeter toute alerte en ligne. Et donc, par exemple, si vous appuyez dessus, il disparaîtra. Et donc nous pouvons l'utiliser chaque fois que quelque chose de mal s'est passé ou que l'utilisateur vient d'entrer quelque chose qui ne devrait pas être ajouté. Nous pouvons simplement faire sortir cela et dire, par exemple, que c'est mal, mais essayez simplement cela à nouveau ou essayez cette méthode ou ainsi de suite. Et l'utilisateur peut appuyer sur le bouton X et il disparaîtra automatiquement. Donc c'est pour l'alerte. Je vous encourage à aller de l'avant et à les vérifier. Ils sont gentils et vous pouvez en utiliser autant dans différents cas. Passons aux badges. Supposons que nous ayons un cap. Et à l'intérieur de notre rubrique, nous voulons ajouter que cet article est nouveau. Supposons que j'ai un H1 à l'intérieur de celui-ci. Nous avons, par exemple, l'article 1, et nous voulons spécifier que cet article est nu. Une façon de le faire est de gagner l'élément span, puis d'ajouter à cela un verre de lot. Et nous pouvons changer la couleur pour que la couleur de fond soit secondaire. Et je peux simplement ajouter de nouveaux ici. Maintenant, si vous revenez en arrière et actualisez, nous allons voir l'article 1 et avec ce nouveau et décider d'indiquer qu'il s'agit d'un nouvel élément. Et cela s'appelle un lot. Maintenant, nous pouvons utiliser, nous pouvons l'utiliser sur n'importe quel élément ou un, n'importe quel élément. Donc, c'est en ajouter un. Vous pouvez l'utiliser pour les en-têtes un à six, et bien sûr, les paragraphes, les boutons et ainsi de suite. Laissez-moi juste démontrer l'utilisation de cela sur un bouton. Supposons que j'ai un bouton. A l'intérieur de ce bouton. Nous avons le genre ici, bien sûr. Et puis on a les cours. Donc btn, btn-primaire. Maintenant, nous pouvons créer, par exemple, supposons que je veux créer le bouton de notification. Donc, ce n'est pas vaincre les patients. Et puis créez l'élément de span de classe. La classe sera badge et BG, secondaire. Et à l'intérieur de l'expédition, Laissez-moi juste ajouter. Numéro spécifique, par exemple, j'ai neuf notifications. Alors retournez en arrière, rafraîchissez. Nous avons ce bouton modifications. Et ici, nous avons notre badge indiquant que nous avons neuf multiplications. Maintenant, nous avons aussi quelques couleurs d'arrière-plan que nous pourrions vouloir changer. Donc, ici, nous utilisons le primaire, nous avons aussi le succès secondaire, danger, l'avertissement, puis pour la lumière et l'obscurité. Donc, enfin, nous avons encore les badges pilules et ils sont généralement arrondis. Donc, comme nous pouvons le voir ici, ils sont à la terre EBIT, puis pas entièrement carrés, mais peut-être les veulent comme une ceinture. Nous pouvons simplement utiliser la pilule téléchargée ici. Alors laissez-moi l'idée a sonné. Cours, retournez en arrière et rafraîchissez. Et comme on peut le voir, c'est maintenant compté. Laissez-moi juste ajuster ça juste pour que vous puissiez le voir plus clair. Donc, c'est notre élément de classe span, je suis désolé, sorte que la classe sera mise à la terre et l'arrière-plan sera primaire. Essayons quelque chose ici. Donc c'est primaire. Et revenez rafraîchir. Et comme vous pouvez le voir, nous avons notre arrondi. Mais c'est tout pour les badges. Maintenant, puisque nous utilisons quelques boutons ici, parlons juste de boutons. Ce sera plus. Alors. Par exemple, il s'agit d'un bouton. Donc, comme nous l'avons dit, le type devrait être bouton. Et puis les cours que nous allons utiliser. Le btn est essentiel et DBD et de choisir les couleurs. Donc je vais choisir primaire. Donc c'est un bouton, un, rafraîchir. Donc c'est notre premier bouton. Comme nous l'avons dit, nous avons plusieurs types et plusieurs autres. Donc, par exemple, si je voulais être creusé, je peux simplement ajouter de l'obscurité ici, rafraîchir. Je reçois ce bouton sombre. Maintenant. Supposons que je ne veux pas que ce bouton soit un autre arrière-plan, Doug, je voulais être transparent. Et dans ce cas, je peux utiliser les boutons de contour que j'ai déjà implémentés auparavant, mais il est préférable de simplement le dire quand nous allons, nous discutions de l'élément de bouton. Donc, dans ce cas, nous pouvons utiliser le contour a commencé, décrit, primaire, et revenir en arrière actualiser. Comme nous pouvons le voir, les bordures du bouton sont maintenant bleues. Cependant, à l'intérieur, il est blanc. Et chaque fois que nous survolons, nous pouvons voir que c'est l'effet. Cela nous donne l'effet d'un bouton ordinaire. Et c'est pour le bouton extérieur. Nous avons aussi des tailles. Nous pouvons choisir la taille de notre beurre. Donc si je retourne ici et BTN, grand, tu es de retour pour te rafraîchir. Nous pouvons voir que notre bouton est devenu plus grand et nous avons aussi les petites et ces lunettes capables. Et je ne vais pas les utiliser car ils sont les mêmes. Et je pense que c'est assez pour les boutons. Nous avons plusieurs éléments et plusieurs caractéristiques, plusieurs classes que nous pouvons utiliser un bouton. Et je vous conseille de les lier tout seul et d'être vraiment bon pour eux afin que vous n'ayez plus besoin d'aller à la documentation. Vous pouvez simplement les utiliser quand vous le voulez. Mais cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 13. Cartes: Bonjour et bienvenue. Et dans cette vidéo, nous allons parler de cartes. Donc, allez personnaliser nos propres pièces en utilisant les classes Bootstrap. Et nous avons tellement de caractéristiques et tant de classes que nous pouvons utiliser. Alors allons de l'avant et commençons par notre premier. Donc la première chose que nous allons faire est de créer notre classe de division. Et à l'intérieur de cette division, la classe sera une carte puisque nous créons un garde. Et laissez-moi juste ajuster la largeur de ceci. Il faut avoir 18 RER. Et maintenant, nous pouvons travailler avec le rejet. Alors créons une image. Donc, l'image sera des images deuxième cochon. Et bien sûr, je peux ajouter une alternative, donc deuxième image. Et maintenant, si je reviens et me rafraîchis, vous pouvez voir que l'image est très longue et nous devons ajuster cela. Et en fait, nous avons un cours à Bootstrap qui nous aidera en Dieu. Et c'est une image actuelle. Et maintenant, revenons en arrière et rafraîchissons là comme nous pouvons le voir, regardons notre image. Et ça a l'air sympa. Maintenant, nous pouvons ajouter du texte ici. Par exemple, nous pouvons ajouter un titre , puis suivi d'un paragraphe décrivant l'image. Et vous pouvez le faire en créant, nous pouvons créer une division. A l'intérieur de cette division, nous avons le titre, donc un et puis paragraphe ni lui huit. Et comme nous pouvons le voir maintenant, si nous retournons et nous rafraîchissons, nous avons notre guide appelé un Lorem Ipsum, et voici notre paragraphe. Et cependant, nous avons aussi une classe dans Bootstrap pour nous aider et a fait gentil Bali et c'est une carte, mais la classe soi-disant copain. Maintenant, si nous retournons et nous rafraîchissons, nous pouvons remarquer la différence. Nous avons un rembourrage de gauche à droite et en bas et en haut. Et bien sûr, nous avons aussi des cours à l'intérieur du corps. Et l'un d'eux est le titre et l'autre texte de carte SD. Rappelez-vous donc que vous pouvez les ignorer, mais si nous revenons en arrière et actualisons, vous pouvez voir qu'ils sont mieux à chaque fois que vous utilisez ce type de classes, soi-disant titre et contextes de carrosserie. Et enfin, laissez-moi juste ajouter peut-être un lien ici. Et dans ce lien, la classe devrait être un bouton, bouton primaire. Et bien sûr, laisse-moi juste essayer de partir. Si nous actualisons, nous avons maintenant notre courant complet. On a la photo à l'intérieur. Nous avons l'en-tête du paragraphe corps et le bouton. Donc c'est S. Donc c'est le premier exemple. Et revenons en arrière et créons un autre exemple juste pour mieux le comprendre. Donc peut-être que notre carte n'a pas besoin d'image. Alors laissez-moi supprimer ceci. Et gardons le corps actuel. Cependant, si nous n'avons pas d'image, c'est peut-être un bon choix pour créer notre en-tête. Alors laissez-moi créer le code division Hadoop. Et à l'intérieur, je suis juste juste écrire n'importe quoi. Laisse-moi juste lire. C' est l'en-tête. Maintenant, si nous retournons et nous rafraîchissons, nous pouvons voir que nous n'avons plus notre image. Cependant, nous avons quelque chose. Et il ressemble à ceci, l'en-tête de notre code. Et vous pouvez convenir que c'est beaucoup plus agréable que de simplement écrire des lignes directrices et ensuite écrire nos paragraphes, nous pouvons maintenant supprimer notre carte une. Et nous avons l'en-tête ici et le paragraphe sur le corps. Maintenant, si nous retournons à notre site, nous pouvons voir que tous les éléments de Hadar, titre et paragraphe ainsi que le bouton sur le côté gauche de notre guide. Peut-être qu'on veut qu'ils soient du bon côté. Une façon de faire face à cela est de créer à l'intérieur de notre titre ou peut-être de notre division. Donc, ici, nous avons notre Dieu. Nous pouvons ajouter le centre de texte. Et maintenant, si vous revenez et actualisez, nous pouvons voir que tous les éléments sont maintenant centrés. Et si nous voulons qu'ils soient à la fin, nous pouvons simplement utiliser le texte et l'actualisation de la classe. Et maintenant ils sont du côté droit de nos voitures. Maintenant, c'est pour les bases. Comment créer quelque chose de plus compliqué ou un peu plus complexe ? Par exemple, si nous voulons créer une navigation dans notre courant, laissez-moi aller de l'avant et supprimer ceci et commencer à partir de zéro. Donc, la première chose que nous allons faire est de créer notre division actuelle. Et je vais y ajouter le centre de texte plus. Et maintenant, créons notre chariot Hadoop, soi-disant. Non plus. Dans notre en-tête de code, je vais créer notre liste non ordonnée. Donc, nous allons créer un petit nombre. Cependant, nous allons en discuter en détail dans les prochaines vidéos. Mais pour l'instant, nous allons créer notre liste non ordonnée. À l'intérieur de cette liste, nous avons notre article de liste. A l'intérieur de cette liste, nous avons notre longueur. Et cet élément de liste aura l'élément de navigation de classe. La liste non ordonnée aura le nav de classe et maintenant abs. Mais les deux onglets. Et toutes ces classes sont en bootstrap. Et bien sûr, notre longueur, nous devons ajouter quelques classes. Donc, la classe sera nav link, puis c'est le premier élément de la liste. Donc le fer le rend actif. Et bien sûr, laissez-moi juste taper quelque chose des années, alors à la maison. Et maintenant, si vous revenez et rafraîchissez, nous pouvons voir que nous avons obtenu notre guide et c'est et la totalité de la page. Et nous avons notre bouton ou notre premier élément de liste ici et il est actif, il s'appelle la maison. Maintenant, revenons en arrière et copions cet élément de liste deux fois de plus. Ici et ici. Permettez-moi de changer cette maison, peut-être Mission et ensuite produit. Maintenant, revenons en arrière et rafraîchissons. Et comme vous pouvez le voir, nous avons trois éléments. Cependant, nous ne voulons pas qu'ils soient actifs. Alors laissez-moi juste supprimer ceci d'ici et d'ici. Et je pense qu'on peut y retourner et se rafraîchir. Et comme vous pouvez le voir, c'est le premier élément de liste et il est actif. Cependant, tous ces éléments ne sont pas encore actifs. Maintenant, si nous ne voulons pas que notre garde prenne tout notre site, nous pouvons ajouter le style et la largeur sera, sera 18 RAM RAM. Maintenant, revenons en arrière et rafraîchissons. Et voici notre guide. Maintenant, nous devrions ajouter un titre ou un titre, l'année et le corps. Et bien sûr, vous pouvez ajuster cet oiseau comme vous le souhaitez. Par exemple, si vous vouliez, par exemple, sur la moitié de la page, vous pouvez ajuster la largeur des gars à partir d'ici. Et maintenant, revenons en arrière et ajoutons. Donc c'est notre en-tête et ça se termine ici. On peut créer une autre division appelée corps à l'intérieur du copain de la jupe. Créons notre cap. C' est l'élevage de et puis quelque paragraphe Lorem six. Maintenant, ajoutons quelques classes ici. Donc, plus le titre actuel et le texte du paragraphe. Maintenant, si vous revenez rafraîchir, nous avons notre code complet et ce texte centré, nous avons produit machine maison. C' est en tête de la carte et du graphique à secteurs que nous voulons. Maintenant, si vous remarquez, si j'appuie sur ces boutons, rien ne se passera puisque nous n'avons pas ajouté de JavaScript qui puisse basculer entre les atomes de chaque élément. Mais pour l'instant, nous avons ceci aussi actif et tous ces éléments comme des éléments normaux. Maintenant, nous avons quelque chose qui s'appelle superpositions d'image. Et allons de l'avant et créons un de ceux-ci juste pour voir la différence entre eux et notre courant normal. Donc, la première chose que nous allons faire est de créer notre code. Et nous le faisons simplement en créant notre division. Et la classe serait engagée et la couleur de fond sera sombre, puis détecte sera blanc. Maintenant, après la fin de la division, créons notre image. Donc, l'image sera comme l'image avant la deuxième cheville. Et bien sûr, nous devons ajouter la classe d'image culte. Alors créons notre corps. Et cela créera simplement une nouvelle division. Cependant, nous avons besoin de cet organe pour être sur notre photo. Et pour ce faire, nous ajoutons simplement la classe, cette superposition d'image. Alors retournez et essayez-le, tout ce qu'on veut ici. Ainsi, par exemple, il s'agit d'un titre. Et si je reviens et bien sûr, la classe de titre et le paragraphe seraient taxés plus huit comme d'habitude. Maintenant, revenons en arrière et rafraîchissons. Et comme on peut le voir, on a eu notre photo. Et à l'intérieur de cette image, nous avons notre titre et paragraphe. Maintenant, nous pouvons toujours ajuster la largeur d'une image en ajoutant simplement le style ici. La largeur doit être 18 RAM pour l'instant. Maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons eu notre photo et à l'intérieur de cette image nous avons notre titre et notre paragraphe, et ils sont au-dessus de l'autre. Maintenant, nous avons tellement d'autres éléments et caractéristiques que nous pouvons ajouter à notre guide et nous allons les découvrir. Et la vidéo suivante. 14. Cartes 2: Passons maintenant à une autre structure. Et c'est la coupe horizontale. Et cela est fait en utilisant une combinaison de grains et de classes d'utilité. Alors allons de l'avant et supprimons cela et commençons par créer notre carte de division de classe de division. Et à l'intérieur, laissez-moi juste lui donner une marge, peut-être trois. Et comme d'habitude, nous pouvons spécifier la largeur sur ce temps. Je vais utiliser la propriété max-width. Et cela signifie que la largeur maximale autorisée est de 540 pixels. Et maintenant, nous pouvons commencer par notre garde. Donc la première chose que nous allons faire est de créer la ligne à l'intérieur de notre travail. Comme d'habitude, nous utilisons la colonne et nous allons devoir diviser notre coupe en deux divisions. Laisse-moi retourner ici. Et supposons que c'est notre code. Nous allons la diviser car cette zone est pour notre image et cette zone pour notre corps qui comprend notre titre et notre paragraphe. Et pour ce faire, peut-être que nous pouvons choisir de le diviser en 48 feuilles pour l'image et l'aide pour l'ensemble du paragraphe, titre et corps en janvier. Donc, pour ce faire, nous pouvons simplement utiliser la feuille de colonne et ajouter notre image ici. Donc images, deuxième photo. Et maintenant, créons la deuxième division et ce sera huit. Et cette division inclura le titre. C' est la mise à jour. Et puis le paragraphe. Et bien sûr, nous pouvons ajouter quelques classes ici, comme le titre. Et puis voici un texte. Maintenant, je pense qu'on pourrait sauver, repartir. Et comme nous pouvons le voir, regardez cette image. Et revenons en arrière. Ici. On a oublié notre cours. Donc la classe sera image, Dieu abîmé. Et maintenant, si nous revenons, rafraîchir, nous avons eu cette image et suivi de ceci, mais nous avons aussi oublié d'ajouter la division ici. Une classe appelée corps. Ça a l'air plus agréable. Et bien sûr, ajoutons une larme. Et maintenant, regardez, allez-y et rafraîchissez. Et comme nous pouvons le voir maintenant, si je veux juste diminuer la taille, rien ne se passera. Cependant, nous voulions être horizontaux chaque fois que nous. A emmêlé entre les tailles. Donc, ici, nous avons un grand écran de taille. Cependant, si nous avons une taille moyenne ou plus petite, nous avions besoin de cette image pour être grande et le titre, titre et le paragraphe se trouvent en dessous. Donc, une façon de le faire est de simplement spécifier que chaque fois que nous avons ici moyen et supérieur, cela s'appliquera. Et sinon, nous avons besoin que notre image soit sur le dessus, puis suivie du titre de la tête et du paragraphe. Maintenant, comme vous pouvez le voir, si la taille de l'écran, il deviendra horizontal. Et c'est tout pour l'horizontale. Allons de l'avant et commençons avec nos couleurs de fond. Ainsi, par exemple, nous pouvons créer notre carte avec un fond bleu. Comme on peut le voir. Supprimons cela et commençons à concevoir l'alcool. Donc, la première chose dont nous allons avoir besoin est de créer le code. Les classes seront taxées en blanc. Parce que je vais choisir l'arrière-plan primaire, qui est principalement bleu. Et bien sûr, donnons-lui un peu de budget et déboutonné. Et choisissons cette largeur de tuile de 18. Rém. Maintenant, on est bons. Nous pouvons commencer à concevoir nos cartes de sorte que l'en-tête des cartes et retourne tout simplement droit, primaire. Et puis à l'intérieur de la carte pote, nous pouvons créer notre cap. Et une façon de créer notre embauche et nos cours en même temps est de simplement sécher notre rubrique H5, puis d'appuyer dessus. Et puis suivie par b, une classe, qui est appelée Titre VI était entrée. Il sera créé automatiquement. Et je peux simplement écrire serrer paragraphe cinq. Et j'ai oublié d'ajouter ici le test de classe. Maintenant, si je reviens et rafraîchis, nous avons notre carte, qui est bleue à la primaire, et voici le titre et le paragraphe. Et nous pouvons aussi toujours changer cela. Donc, nous avons tellement de couleurs que vous le savez, nous avons utilisé la plupart d'entre eux. Et c'est l'obscurité. Et nous avons, comme nous l'avons dit, le succès, danger, l'avertissement, le NFO, secondaire et la lumière. Maintenant, nous pourrions aussi vouloir faire que la bordure a découvert la couleur sombre. Et nous ne voulons pas que le fond soit le lentilles d'eau, juste besoin d'être transparent. Donc, une façon de le faire est de simplement et de modifier ceci afin que nous ne voulons pas de l'arrière-plan, nous avons juste besoin de l'évité pour être sombre. Retourne à frais. Comme nous pouvons le voir, nous avons notre régime frontalier. Cependant, notre texte est blanc et nous pouvons le voir maintenant. Alors laissez-moi juste supprimer ceci. Et rafraîchir. Et c'est notre chariot maintenant. Donc c'est fondamentalement pour les couleurs. Passons à un autre sujet, et c'est les cartes de grille. Donc, par exemple, supposons que je veux placer autant de cartes sur mon site Web. Je peux choisir de placer soit 123 cartes au même niveau, puis suivie de trois cartes ou peut-être quatre cartes, puis quatre cartes. Donc c'est à nous de choisir. Revenons en arrière et supprimons et commençons à créer nos vies. Supposons que je veux que mon site ait des prévisions. Donc 1234. Et commençons par créer notre sonde. Donc la première chose que nous allons faire est de créer la ligne. Et à l'intérieur de ce cours, je vais lui donner la ligne 1 et la rangée 2, et nous allons en discuter de façon intermittente. Donc ce sont les classes et la première classe à l'intérieur rho est la colonne d. Et nous avons notre code. Donc c'est la division de la carte. Nous pouvons ajouter notre image ici comme un ajout beaucoup. Ensuite, à l'intérieur de notre code, nous pouvons ajouter notre garde Buddy. J' ajoute simplement le titre simple. Donc, je pense, et je pense bien, bon de maintenant dans ce code, laissez-moi juste revenir, rafraîchir. Comme nous pouvons le voir, nous avons eu ceci et laissez-moi juste ajuster en utilisant le haut de l'image. Retournez, rafraîchissez-vous. Et c'est notre courant jusqu'à maintenant. Ajoutons un autre. Et en copiant simplement cette ligne entière, colonne, je suis désolé. Et si je reviens maintenant, j'ai deux cartes. Changeons la photo. Donc ce sera la première photo. Et comme nous pouvons le voir, désolé, choisissons une autre photo. Alors peut-être le troisième. Et je pense qu'on va bien maintenant. On y retourne et on se rafraîchit. On a les deux photos. Maintenant, si nous voulons ajouter d'autres images, par exemple, je peux copier et coller ds. Si je me rafraîchis. Pour obtenir ces photos, cependant, laissez-moi revenir en arrière. Voyons voir. Donc, pour la colonne et ceci, OK, donc c'est le problème. Nous avons ajouté une division par erreur ici. Et ici. Et je pense que maintenant on va mal classique. Je suis désolé. Supprimons simplement cela aussi. Oui. Bon, maintenant on est bons. Rafraîchir. Et c'est ça. Nous avons nos quatre cartes à 1234. Et tout ça, c'est pour les grandes cartes. Vous pouvez toujours ajouter quelques éléments aux jupes de, par exemple, ici je viens d'ajouter le titre. Vous pouvez ajouter le paragraphe et la même chose vaut pour le reste des cartes. Et c'est essentiellement la, en fait la dernière chose que je vais couvrir est le pied de page. Donc, par exemple, si j'ai un courant et que je veux ajouter un pied de page, je peux simplement ajouter le verre et ajouter tout ce que je veux. Laisse-moi soit en petit. Donc, la classe devrait être taxée en sourdine. Et c'est le pied de page. Et je viens d'ajouter dans la dernière photo, donc je ne vais pas le voir dans aucune de ces racines ici. C' est le pied de page et il ressemble à un pied de page réel. Et c'est tout pour la carte. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 15. Carousel: Bonjour et bienvenue. Dans cette vidéo, nous allons parler de carrousel. Et ce sont les diapositives que vous pouvez, que vous voyez. Habituellement, lorsque vous avez un site Web, par exemple, un site d'achat. Et il y a tellement de produits, ils utilisent généralement un carrousel. Et c'est la photo. Et cela peut être changé. Et vous pouvez aller à droite ou à gauche. Et il change automatiquement aussi. Et pour créer ceci, permettez-moi juste de supprimer ceci et de commencer. Donc, la première chose que nous allons faire est de créer notre division. Et ce sera dans nos classes carrousel et types de terrorisme et diapositive. Et c'est un, créons à l'intérieur de notre carrousel, le carrousel. Donc il y a de l'énergie. C' est ça. Et avant d'oublier, nous devons ajouter les données BS, non ? Et c'est pour indiquer que c'est un parasol. Et bien sûr, à l'intérieur de notre carrousel, nous devons créer les objets. Donc, le premier article sera de l'article de carrousel de classe. Et je vais lui donner le type d'actif. Puisque c'est le premier et ce sera principalement une image à partir d'images. Je choisirai les enfants cette fois. Donc le premier serait bon. Et bien sûr, Ajoutons quelques cours ici. La première classe sera la chance, et la seconde sera quatre largeur 100, juste pour le rendre agréable. Et puis copions ceci et collez-le quelques fois. Et peut-être que vous n'avez pas assez de pièces. Maintenant, passons ceci d'actif à normal. Et ça des enfants veulent en avoir 32. Et maintenant je pense qu'on devrait retourner rafraîchir. Et voici notre carrousel. Et comme nous pouvons le voir, si nous attendons un peu, cela changera radicalement. Et comme on peut le voir, ça a changé à la deuxième image. Et si nous attendons plus longtemps, nous aurons le troisième dix. Retourne à la première photo. Pour l'instant, revenons à notre code et voyons comment pouvons-nous modifier cela. Donc, nous avons vraiment les contrôles. Et ce sont les flèches qui viennent et la droite et la gauche. Et nous pouvons les ajouter à notre carrousel. Et pour ce faire, nous pouvons simplement ajouter à l'intérieur de notre division. Donc, après avoir terminé de notre entrée, nous pouvons ajouter le lien. Et ce lien le sera. Lunettes, contrôle du carrousel. Suivant. Et bien sûr, le rouleau sera un bouton et une diapositive BS de données. Et cette diapositive sera de type précédent, donc d égal à précédent. Donc, ici, nous avons notre lien. Et dans ce cas, créons un peu de travée. Donc le premier serait l'icône Rebus contrôlée par le carrousel. Il s'agit de l'icône de la précédente. Et bien sûr, permettez-moi juste de dire que la zone cachée sera égale à vraie. Et puis après avoir créé la plage qui créent la seconde, dans ce cas sera le bouton Précédent. Cependant, je le rends visuellement caché, donc c'est ici, mais nous pouvons le voir maintenant. Donc visuellement. Et maintenant, pour que nous puissions faire apparaître ces flèches, nous devons les lier à notre carrousel. Et pour ce faire, nous avons simplement besoin de créer un ID ici. Laisse-moi le nommer parasol et peut-être des contrôles de carrousel. Et bien sûr, nous devons lier cela au carrousel et aux pros aussi. Et je pense qu'on pourrait. Cependant, ici, nous avons ajouté une icône précédente et ici nous l'avons spécifiée à un X. Donc, nous allons juste ajuster cela. Donc, c'est un précédent aussi. Maintenant, revenons à rafraîchir. Et comme on peut le voir, on a ce bouton ici. Si j'appuie dessus, je retourne en arrière et y retourne encore une fois. Maintenant, nous allons faire la même chose pour la prochaine. Ici, nous avons les contrôles du carrousel. Et puis les classes seront une classe en fait le contrôle du carrousel. Et ensuite, le rôle est le bouton et les données, BS, diapositives, et ce sera le suivant. Et je pense que maintenant nous sommes bons avec juste besoin d'ajouter notre portée. La classe sera carrousel. Contrôle. Icône suivante. Donc, ici, nous ajoutons l'icône de l'élément suivant. Et la pédale de zone sera vrai aussi. Et créons la deuxième classe de travée, qui avait visuellement fait plus. Et cela indiquera que c'est le prochain ici. Maintenant, si on retourne rafraîchir, comme vous pouvez le voir, on a les deux. Nous avons le suivant et le précédent. Cependant ici, la prochaine est faite une erreur ici, et je vais revenir en arrière, rafraîchir. Et maintenant, on est bons. Nous avons notre droite et notre gauche. Et vous pouvez basculer entre eux. Nous pouvons choisir d'aller à droite et à gauche ou nous pouvons attendre. Et il va se basculer. Et c'est tout pour le carrousel. Nous avons également l'indicateur. Et c'est quelque chose qui vient à la fin de l'écran. Et nous pouvons choisir, peut-être, si nous avons trois photos, il y aura trois lignes ici et nous pouvons choisir la ligne que nous voulons. Alors allons-y et mettons-le en œuvre. Et pour ce faire, nous devons retourner à notre division. Avant de créer le carrousel, entrez. Nous avons réellement besoin de créer la liste ordonnée. Et à l'intérieur, nous allons avoir les indicateurs Darussalam de classe, les ennemis. Et je pense qu'on est bons. Et maintenant, créons notre élément de liste. Le premier élément de la liste, nous avons les données BS, cible. Et cela indiquera pour le carrousel, l'identification du carrousel. Donc, les contrôles du carrousel. Et puis les données VS diapositive. Et cela glissera vers le premier, sera la diapositive 0, et je vais lui donner la classe d'actif. Et le second, laissez-moi juste copier ceci et le coller ici. Et une fois de plus. Donc, le premier indiquera à 0, le second et le troisième 22. Et bien sûr, le premier que nous aurons sera le seul à avoir la classe active. Maintenant, si je retourne me rafraîchir, comme vous pouvez le voir, nous avons ces petites lignes ici. Si j'appuie sur l'un d'eux pour me conduire automatiquement à l'image. Donc si j'appuie ici, je retourne à la première photo. Et chaque fois que vous créez un carrousel, vous n'en avez besoin qu'un. Donc, soit les contrôles, soit les indicateurs en bas. Et c'est tout pour les indicateurs du carrousel. Maintenant, supposons que j'ai besoin de conduire quelque chose ici, peut-être une légende. Revenons à notre code. Après avoir créé l'image, nous pouvons ajouter chaque élément de carrousel, la légende du carrousel, et que nous avons créé en utilisant la légende du carrousel. Et je vais ajouter la classe, le zéro et le bloc moyen. Donc maintenant, si je tape quelque chose ici et bas, puis paragraphe six, si je retourne maintenant et rafraîchir. Comme vous pouvez le voir, nous avons quelque chose ici. Cependant, si je minimise, l'image disparaîtra. Et c'est à cause de cette classe que j'ai ajoutée ici. Donc DMD noir. Cela signifie que cela s'appliquera à tout ce qui est supérieur à moyen. Cependant, si nous arrivons à un point où nous avons moyenne, petite x petite taille, tailles d'écran et 12 disparaissent automatiquement. Et c'est ça. Nous pouvons copier ceci et collé sur différents éléments et cela fonctionnera très bien. Donc maintenant, si je retourne me rafraîchir, je peux le voir ici. Peut-être changé le Kynar à chaque fois. Alors peut-être que nous pouvons ajouter le texte sombre. Retournons et rafraîchissons. Et comme vous pouvez le voir ici, nous avons nos textes dans la couleur sombre, et c'est tout pour la légende. Et je pense que c'est assez d'informations sur le carrousel puisque nous allons l'utiliser chaque fois que nous créons un projet. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 16. Navbar: Bonjour et bienvenue. Dans cette vidéo, nous allons parler de siestes et d'onglets. Nous avons déjà utilisé et mis en œuvre certains d'entre eux dans les vidéos précédentes. Cependant, dans celui-ci, nous allons creuser plus profondément et nous allons entrer dans les détails de la façon de créer et d'utiliser. Donc, tout d'abord, supprimons tout cela et commençons. Donc, la première chose que nous devons faire est de créer la liste non ordonnée. Et la classe le sera. Donc, u l point. Et voici notre liste non ordonnée. Maintenant, nous pouvons créer des éléments de liste à l'intérieur de sorte que l'élément nav, donc la classe serait élément nav à l'intérieur de cette classe, donnons-lui un lien. A l'intérieur de cette longue classe sera nav élément ou lien nav. Et ce premier serait actif. Et on peut juste ajouter ça. Donc, c'est courant et il sera égal à la page. Et bien sûr, c'est, nous devons lui donner un nom et ce sera la page d'accueil ou l'élément d'accueil. Maintenant, revenons ici. Tu vois ce qu'on a créé ? Donc nous créons juste cette maison. Maintenant, nous allons créer d'autres éléments de liste. Donc, au second sera mentionné. Alors. marques peut-être. Maintenant, si nous retournons et nous rafraîchissons, c'est ce que nous obtiendrons. Donc, c'est tout pour les éléments de lien. Nous pouvons toujours ajouter, par exemple, la classe désactivée ici. Et c'est pour rendre l'élément de liste désactivé afin que nous puissions appuyer dessus. Et par rapport à cela, je peux appuyer sur les marques maison et mission. On peut appuyer sur ça. Alors revenons en arrière et maintenant parlons de l'alignement horizontal. Et une façon de faire face à cela, si vous ne voulez pas être sur le côté gauche, est d'utiliser le contenu justifié centré. Et c'est une classe qui est généralement utilisée pour la liste non ordonnée lorsque vous créez une barre de navigation. Justifiez donc le Centre de contenu. Retournez, rafraîchissez-vous. Et maintenant, nous avons nos éléments au centre de la page. Si vous voulez qu'ils soient à la fin, je peux simplement changer cela pour et revenir en arrière et rafraîchir. Et comme nous pouvons le voir maintenant, ils sont à la fin. Nous avons aussi l'alignement vertical. Et dans ce cas, laisse-moi revenir ici. Et nous allons utiliser la classe de collier flexible. Donc drapeaux colonne. Maintenant, retournez en arrière, rafraîchissez. Et comme nous pouvons le voir, maintenant, ils sont tous verticaux, donc les éléments sont verticaux et nous avons aussi les onglets. Et ceci est utilisé. Utilisation des onglets de navigation de classe. Donc, les onglets de navigation. Et si nous retournons et nous rafraîchissons, nous allons avoir les onglets. Et cela est désactivé puisque nous l'avons désactivé en utilisant le désactivé ici. Et bien sûr, nous avons aussi les pilules. Et comme son nom l'indique, nous devons utiliser les pilules de navigation. Si je retourne me rafraîchir, on va avoir le pouls comme ça. Et laissez-moi juste supprimer l'acteur de celui-ci. Donc, nous voyons la différence, rafraîchir. Et comme vous pouvez le voir, c'est actif, c'est normal, et c'est cela activé. Maintenant, utilisons la liste déroulante dans notre barre de navigation. Et dans ce cas, nous avons des groupes de mission à domicile. Ajoutons ici, il a laissé tomber et ajouter quelques options. Donc la première chose que nous allons faire est de copier cette base ici. Et cela devrait être la liste déroulante. Drop vers le bas. Et bien sûr, chaque fois que nous créons notre liste déroulante, nous devons créer des options. Et pour ce faire, nous créons simplement une liste non ordonnée. Et la classe serait menu déroulant. Nous l'avons déjà implémenté auparavant, mais nous allons l'incrémenter une fois de plus. Et dans ce cas, nous allons l'implémenter ici et la barre de navigation. Donc, nous avons le côté de l'élément de liste, cet élément, nous avons un lien de classe et ce lien point vers rien. La classe sera l'élément déroulant. Et c'est l'article 1. Laisse-moi copier ça. Peut-être deux ou trois fois 123. Donc, ceci est l'article à l'article trois, item for et ceci est tout pour la liste non ordonnée. Et bien sûr, nous devons ajouter des classes à notre lien. Pour moi, nous avons le lien de navigation et le basculement déroulant. Alors faites défiler vers le bas. Et enfin à l'élément de liste dans son ensemble, nous devons ajouter la liste déroulante de classe. Et je pense qu'on est bons. Si je retourne en arrière et me rafraîchir, vous allez avoir cette liste déroulante, c'est que j'appuie dessus. Je pense qu'il arrivera. Peut-être qu'on a fait une faute de frappe. Donc on a un sablier qui joue maintenant des listes déroulantes que je pourrais. Ok, donc on a oublié d'ajouter les données. Basculer sur UDL. Peu importe ce qu'on presse, ça a baissé. Et maintenant, on peut se rafraîchir. Et c'est ça. Nous avons nos articles, mais je vais appuyer sur le menu déroulant. Ils apparaissent et une fois de plus ils ont disparu. Maintenant, puisque nous avons quelques informations sur la liste déroulante et la barre de navigation, créons une carte complète que nous pouvons utiliser sur notre site Web. Donc la première chose que nous allons faire est de créer notre division. Et il contiendra la barre de navigation de classe et Navbar développer sur de grands écrans. Si bon marché. Et je pense que nous sommes bons pour l'instant. Dans notre classe, nous allons créer le liquide contenant et nous en discuterons plus tard. Mais pour l'instant, nous allons juste l'écrire. Nous avons le lien. Et dans ce cas, la classe sera la marque navbar. Et c'est Navbar. Alors revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons notre premier élément sur notre premier élément à l'intérieur à droite, et c'est là. Revenons à notre division. A l'intérieur de cette division, créons un bouton. Et dans ce cas, le bouton sera de type bouton. Et les cours seraient suffisants, mais basculé, basculé. Et bien sûr, nous avons des données bascule. Et ce sera de type effondrement. Et maintenant, après avoir créé cela, nous avons toujours les données BS et cible. Et c'est ça. Et c'est pour cibler les données. Et chaque fois que nous appuyons, alors donnons-lui un nom tel que le contenu de la barre de navigation. Et je pense que maintenant on est bons. Si je retourne ici. Et c'est donc notre bouton. Créons notre spanned. Donc, à l'intérieur de notre division, nous avons ce groupe. Ce groupe serait de classe navbar, icône double bord. Maintenant que nous avons terminé avec notre première division ou notre premier bouton, allons de l'avant et créons la deuxième division. Et ce seront les éléments de la barre de navigation. Alors laissez-moi lui donner la classe de l'effondrement et de l'effondrement de navbar. Et entrez. Bien sûr, nous devons ajouter l'ID que nous avons utilisé ici. Donc, nous avons dit que les données sont, nous devrions cibler le contenu de la barre de navigation. Nous devons donc ajouter le contenu de la barre de navigation ID. Et bien sûr, à l'intérieur de notre division, nous devons créer notre liste non ordonnée comme avant. La classe sera navbar, nav. Et la voiture. Donnons une certaine marge. Donc MV2 et être grand 0. Donc, c'est margin-bottom pour les grands écrans est égal à 0. Et maintenant, nous pouvons ouvrir notre élément de liste, le premier élément de liste, comme article de navigation de classe habituelle. Et à l'intérieur de notre article de liste, nous pouvons créer notre longueur. Dans ce cas, la zone actuelle sera égale à la page. Et bien sûr, les classes seront nav link et le premier sera actif. Et c'est à la maison. Maintenant, copions ces deux fois. C' est donc le premier 1, deuxième, troisième, quatrième. Donc la maison Mission, produit et contactez-nous. Alors revenons en arrière et rafraîchissons. Est-ce qu'on peut voir qu'on a nos boutons ici. Et si nous le voulons, nous pouvons ajouter le bouton déroulant. Chaque fois que, comme nous l'avons fait avant, chaque fois que nous appuyons sur quelque chose, certaines options apparaissent. Mais nous ne le ferons pas pour le temps. Mais pour l'instant je pense que c'est bien. Maintenant, revenons en arrière et ajoutons la recherche. Donc, après avoir fini avec nos listes non ordonnées, nous pouvons créer notre téléphone sans aucune action. Et la classe sera les décalages. Bien sûr, à l'intérieur de notre formulaire, nous avons l'apport. L' entrée sera de type recherche dans ce cas. Et bien sûr, nous devons ajouter des classes comme d'habitude. Donc, la première classe sera pour le contrôle et l'espace réservé. Nous pouvons ajouter un espace réservé à rechercher via l'étiquette. Cherchez aussi. Et je pense que nous sommes bons avec l'apport. Nous pouvons ajouter le bouton. Et ce bouton sera des classes btn, PTEN, succès. Et le type sera Soumettre. Et bien sûr, nous devons ajouter le mot recherche. Maintenant, si je retourne et rafraîchis, comme on peut le voir, on a notre bouton de recherche et on peut Social n'importe quoi d'ici. Cependant, si nous tapons quelque chose et la recherche précédente, rien ne se passera puisque nous n'avons pas ajouté de Fontenelle ou aucune action. Donc c'est tout pour la barre de navigation. Vous pouvez utiliser tout ce que nous avons appris jusqu'à présent de mots, badges, alertes, cartes. Vous pouvez mettre n'importe quoi dans ce réseau. Et bien sûr, vous pouvez les diviser comme nous l'avons fait avant. Et comme vous pouvez le voir ici, nous avons décidé de placer ça à la fin. Si nous supprimons la classe deflects et retournons rafraîchir, nous pouvons voir que cela n'a pas l'air agréable. On a des sacs ici. Et cela nous aide à mieux manipuler notre barre de navigation. Donc, c'est essentiellement pour la barre de navigation. Vous pouvez aller de l'avant et l'essayer par vous-même. Tu peux changer peut-être la couleur. Laisse-moi juste changer une fois la couleur. Nous pouvons décider ou choisir la couleur d'ici. Donc on sera entre la nuit. Si on y retourne et on se rafraîchit. C' est notre barre de navigation noire. Nous pouvons également modifier le texte pour être aligné. Et nous pouvons le faire en utilisant l'attribut sombre de la barre de navigation ou le verre. Donc, Naff, mais sombre. Et ainsi nous pouvons voir la machine à domicile navbar s'est avéré blanc. Puisque Bootstrap sait que nous utilisons un fond sombre, il transformera automatiquement ces mots en mode blanc. Maintenant, si nous revenons en arrière et pour le rendre un peu meilleur, nous pouvons supprimer le btn-succès d'ici, rafraîchir et peut-être simplement choisir la lumière btn. Je pense que ce sera bon, frais et ça a l'air plus agréable maintenant. Nous utilisons l'obscurité et la lumière à l'intérieur de notre réseau. Donc c'est essentiellement pour la barre de navigation. Vous pouvez aller de l'avant et modifier, changer tout ce que vous voulez, et choisir votre barre de navigation. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 17. Site Web de Bootstrap : Navbar: Bonjour et bienvenue. Dans cette vidéo, nous allons commencer à construire notre premier site bootstrap. Et ce site sera entièrement construit en utilisant Bootstrap. Et à la fin, nous pourrions ajouter quelques effets et certains stylés en utilisant CSS. Mais pour l'instant, nous allons le construire en utilisant Bootstrap Andi. Donc, avant de commencer, nous devons aller à Google et rechercher la police. Impressionnant. Et c'est un site Web qui nous permettra d'utiliser les icônes. Alors vous allez de l'avant et vous inscrivez gratuitement, créez votre premier get, puis allez à vos enfants à partir de votre compte et appuyez sur ce premier. Et puis après avoir obtenu les compétences, il vous suffit de copier le code et de le coller dans votre site Web. Et c'est tout ce que vous devez faire, maintenant, nous pouvons travailler avec font-impressionnant comme nous le voulons, et nous allons voir comment nous pouvons utiliser ces icônes dans notre site Web. Donc, la première chose que nous allons créer est la barre de navigation. Permettez-moi donc d'aller de l'avant et de créer un commentaire. Et c'est ainsi que nous pouvons créer un moment en utilisant HTML et numéro limite. Et puis, et maintenant on peut commencer. La première chose que nous allons créer est le NADPH. Et nous pouvons le créer en utilisant l'élément nav. Et les classes seront navbar, barre navigation, développer le moyen HAT. Et peut-être que nous allons utiliser l'arrière-plan sombre, donc Vg sombre. Et bien sûr, si nous allons utiliser l'arrière-plan sombre, nous devons avoir les diapositives de texte ou la lumière de la barre de navigation dans ce cas. Et maintenant, nous avons dit que nous pouvons aller de l'avant et commencer avec notre réseau. La première chose que nous allons créer est une icône. Pour ce faire, nous allons créer le lien. Et ce lien ne pointerait rien jusqu'à maintenant la classe sera la marque navbar. Et à l'intérieur de ce lien, nous pouvons créer notre icône. Et ici, nous devons lui donner des cours. Donc, ici, nous devons utiliser quelques icônes de Font Awesome. Si nous revenons à notre et aussi page et aller aux icônes, nous pouvons rechercher plus de 7 mille icônes. Si nous faisons défiler un peu vers le bas, nous trouverions quelques icônes disponibles. Ceux-ci sont pour pro et vous avez besoin d'une licence pour les avoir. Donc, nous allons utiliser celui qui est disponible pour nous. Et ça ressemble, alors appuyez dessus pour prendre, pour nous emmener à ça. Et comme vous pouvez le voir, nous pouvons l'utiliser. Et en tant que B et Microsoft. Revenons donc à notre code et dessiné ici f a, b, f a. Et bien sûr, nous avons besoin que le texte soit tendu d'avertissement, nous utilisons un fond sombre. Et donnons-lui quelques cours. Donc, pour deux actes, nous avions besoin de deux fois. Et bien sûr, donnons-lui une marge et un maximum de trois peut-être. Alors revenons en arrière et rafraîchissons notre page. Comme nous pouvons le voir, nous avons notre icône ici au début de notre barre de navigation. Donc c'est tout pour l'icône. Maintenant, allons-y et continuons avec notre navbar. Après avoir créé notre lien, nous pouvons créer notre bouton. Donc, c'est le bouton qui sera de type bouton. Et on doit lui donner des lunettes. Donc, barre de navigation, tabulaire et l'arrière-plan sera léger. Et nous pouvons également ajouter le bascule de données. Et ce sera du temps écoulé. Bien sûr, nous ne voulons pas gâcher la cible de données. Et cela ciblera et quelque chose que nous allons créer le plus tard, mais laissez-moi lui donner le nav ID. Maintenant, après avoir créé le bouton, nous pouvons créer notre expansion. Et à l'intérieur de la travée. Nous allons lui donner quelques classes telles que navbar, icône tabulaire, et chargé pour visualiser le HTML du site. Tout en conduisant notre code. Je vais télécharger cette extension et c'est un serveur en direct. Peut aller de l'avant et le télécharger. Ensuite, chaque fois que vous avez terminé, vous pouvez appuyer sur Go Live. Et le total ajouter automatiquement la page Bootstrap sur notre site Web et il changera et sera modifié automatiquement chaque fois que nous changerons quoi que ce soit. Laisse-moi juste ajuster cette page et je pense que maintenant on est bons. Donc, par exemple, si j'ai rétrogradé cette icône et l'enregistrer, elle sera automatiquement supprimée d'ici. Mais pour l'instant, laissez-moi le sauver à nouveau. Ainsi, nous pouvons voir que nous avons eu notre retour I. Alors continuons. Nous allons à notre première division et ce sera assez type ou l'idée, laissez-moi juste nommer l'ID puisque nous avons nommé ici dans notre nerf de cible de données. Nous allons donc cibler cette division. Et l'idée sera, maintenant nous allons ajouter quelques classes, mais laissez-moi apparu ici et les lunettes seront le premier est l'effondrement. Pour s'effondrer. Et les alertes Navbar. Nous devons également ajouter le justifié. Ensuite, entre et nous voyons, nous allons voir ce que cela fera dans une minute. Mais pour l'instant, ajoutons-le. Et bien sûr, chaque fois que nous créons notre barre de navigation, nous devons ajouter la liste non ordonnée. La liste non ordonnée sera de classe navbar nav, et les éléments de liste seront de type nav éléments. Donc l'élément de navigation de classe. Et puis nous avons ouvert une liste non ordonnée, un élément de liste à l'intérieur. Nous avons la longueur. Et cette longueur sera de lunettes. Maintenant, la longueur et le texte seront la police légère. Ou peut-être laissez-moi les mettre en majuscules. Donc, textez en majuscules. Et nous allons ajouter le B X 3 juste pour nous donner un peu de rembourrage. Et bien sûr, nous devons ajouter quelque chose entre les deux. Donc la première chose que nous allons être à la maison en cliquant sur Enregistrer. Et maintenant, nous ne pouvons pas le voir puisque nous avons ceci. Donc si j'augmente la taille, on peut voir qu'on a notre maison ici. Alors revenons en arrière et continuons. Copions ceci une ou deux fois. Alors, à la maison. Et je pense que maintenant avec du bien, si je change cela, première chose que nous allons ajouter est après Home est le contact avec nous ou peut-être notre mission. Et la dernière chose que nous pourrions ajouter SP, contactez-nous. Et nous pouvons ajouter ici notre produit. Et je pense qu'on est bons. Comme nous pouvons le voir, nous avons obtenu nos produits de machines à domicile et le contact. Laisse-moi juste diminuer la taille de ça. Et aussi ça. Et maintenant, on est bons. Nous avons terminé la première étape de notre barre de navigation. Donc maintenant, nous pouvons vouloir ajouter le bouton de recherche qui vient ici ou l'entrée de recherche. Et pour ce faire, nous devons créer une nouvelle réforme. Et sans aucune action, la classe sera égale à quatre. Check in line. Et je suis à trois ans. Et maintenant, si nous allons et commençons, nous pouvons créer notre division et ce sera le groupe d'entrée. Et à l'intérieur de notre division, nous pouvons créer notre première entrée. Et les trois être de type texte. La classe sera contrôlée pour ou le contrôle de forme comme d'habitude. Et l'espace réservé sera simple. Il suffit de chercher n'importe quoi. Et maintenant, si je reviens et augmente la taille, nous pouvons voir que nous avons notre entrée de recherche. Maintenant, nous pouvons ajouter le bouton pour générer la recherche. Ajoutez-le juste ici après notre entrée. Donc c'est la division, et nous pouvons ajouter une nouvelle division à l'intérieur de l'ancienne. Et D2 sera le texte du groupe d'entrée. Maintenant, nous pouvons créer notre bouton. Ce type sera bouton. Comme d'habitude. La classe sera simple, juste btn. Et à l'intérieur de ce bouton, nous pouvons ajouter notre recherche. Je peux obtenir, on peut obtenir de Font. Impressionnant. Donc, si je retourne en arrière et recherche l'icône de recherche, comme nous pouvons le voir, c'est surge et appuyez sur Entrée. On va faire cette recherche. Appuyons dessus. Et voici l'icône de recherche. Si nous voulons l'utiliser, nous écrivons simplement F un S d'une recherche. Donc, à l'intérieur de notre bouton, nous devons créer l'icône. Les classes seront un a comme une recherche. Et donnons-lui une couleur du texte en sourdine. Et si nous revenons en arrière, Augmentez la taille, vont obtenir cette recherche. Donc, c'est fondamentalement, c'est notre barre de navigation, notre premier élément de notre site Web. Dans la vidéo suivante, nous allons continuer à construire les éléments suivants, les formulaires, et essayer de fusionner les choses ensemble pour trouver un site Web bootstrap complet. Alors on se voit dans la prochaine vidéo. 18. Maison et mission: Bienvenue de retour. Et dans cette vidéo, nous allons commencer à créer notre maison et notre mission. Donc, la maison est la première chose que l'utilisateur va voir chaque fois qu'il accède à notre site Web. Et je pense à quelque chose de très simple, c'est une lettre de bienvenue. Et faisons cela en quittant simplement la barre de navigation, créant la maison, une sorte de maison et, et la maison. Donc, à l'intérieur de notre maison, nous devons créer une nouvelle section entière. A l'intérieur de la section, nous avons le liquide de conteneur de division. Donc, le liquide du récipient. A l'intérieur de cette division, nous avons notre première rangée. Donc, la ligne sera, nous allons ajouter quelques classes à jeter. La première est de justifier Benton Center. C' est simplement d'ajouter tout le contenu au centre de notre site Web et d'aligner les éléments, les centres. Et cela pour aligner les éléments au centre. Et donnons-lui une hauteur de 100. Je pense que ce sera bien. Et maintenant, commençons par notre division. Donc la première chose que nous allons créer est la colonne 10. Et à l'intérieur de cette colonne, nous allons aussi créer le titre de l'affichage de classe. Et bien sûr, la taxe devrait être capitalisée. Donc, je vais utiliser la capitalisation fiscale. Et à l'intérieur de notre cap, nous avons notre portée. Et laissez-moi ajouter. Bonjour et bienvenue sur mon site. Si j'appuie sur Sauvegarder, ça va générer quelque chose comme ça. Donc, comme nous pouvons le voir, c'est le Bienvenue sur notre site. Cependant, nous pouvons le modifier un peu. Donc, à l'intérieur de notre plage, nous pouvons réellement ajouter la classe. Et c'est le texte. Essayons peut-être le noir. Et c'est l'obscurité. Donc peut-être se demander, puisque nous utilisons le jaune ici, peut-être l'utiliser ici. Donc SMS avertissement, je pense que ça a l'air sympa. Maintenant, après l'avertissement de texte, nous pouvons ajouter l'après le titre, nous pouvons ajouter le texte. Donc paragraphe. À l'intérieur de ce paragraphe, écrivons quelques Lauren et quelques classes ici. La première classe va être du texte. Le texte Clyde ? Non. Donc je pense que l'obscurité est bonne. Alors merci. Doug. Et je pense que c'est trop large. Peut-être ajouter la diapositive de texte. Et c'est la même chose en fait, mais si vous le remarquez, ça lui donnera un peu d'obscurité. C' est plus entre le blanc et le gris. Et c'est essentiellement pour l'accueil par ceci est très simple. Vous pouvez aller de l'avant et le modifier et travailler avec. Mais en fait, je vais juste rester simple pour que tu puisses me suivre. Et puis chaque fois que vous en avez la chance, modifiez et améliorez. Et ça. Donc, en fait, c'est une maison de 20 ans. Allons de l'avant et commençons à créer notre mission. Donc, après la maison, nous avons la mission. Et puis la fin de cette mission et de cette mission. Et maintenant, commençons. Donc, la première chose que nous devons faire est de créer notre section. Et cette section sera une mission de classe plus Michigan. Et laissez-moi commencer par créer notre première division. Et c'est le liquide du récipient. Ajoutons les textes de classe secondaires juste pour le voir et le visualiser. Et ajoutons quelques lignes ici. Donc BR fois dix, rafraîchissez. Et c'est la seconde. D' ici. Permettez-moi d'ajouter le, désolé ici, nous avons besoin d'ajouter l'arrière-plan. Donc BG secondaire. Et si je me rafraîchis, je vais avoir ce gris ici. Et cela indique le liquide du conteneur ou la section de notre mission. Commençons donc ici, supprimez tout cela, et commencez par créer la première ligne. Et ce sera notre titre en fait. Permettez-moi donc simplement de dire que nous avons ici le titre et, et le titre dans notre titre. Nous pouvons créer la ligne. Et laissez-moi juste ajuster ça. À l'intérieur de notre rangée. Nous pouvons créer la colonne. Et bien sûr, à l'intérieur de cette colonne, nous avons la mission. Et comme on peut le voir, nous avons notre mission ici, mais nous devons l'ajuster. Donc, à l'intérieur de notre classe, nous avons l'écran. Et bien sûr, nous avons besoin que le texte soit blanc. Donc impôt blanc et centre de texte pour être au centre que nous pouvons voir nous sommes réunis ici. Maintenant, nous pouvons choisir la couleur grise ou peut-être la couleur foncée. Essayons le noir et nous verrons si nous devons changer. Donc, pour ce faire, nous ajoutons simplement ici. Et au lieu de secondaire. Le texte sombre. Et nous y voilà. Nous avons maintenant notre texte et l'arrière-plan, qui est sombre. Maintenant, nous finissons avec notre division. Et peut-être qu'on peut ajouter un peu de rembourrage ici ou une marge. Donc le module 3, je pense que ce sera bon. Et après avoir terminé la première division, nous pouvons ajouter notre deuxième. Et ce serait le paragraphe. Donc, à l'intérieur de cette division, nous avons le paragraphe qui est de plomb de verre et ce sera essentiellement Lauren 25. Je remarque que c'est beaucoup de Lorin, mais je pense que ça va bien paraître. Et c'est essentiellement pour le titre, nous avons notre mission et ensuite suivi de quelques informations à ce sujet. Et c'est ça. Si j'augmente la taille, je pense que ça va rester agréable. Et maintenant, continuons à créer le meilleur de notre mission. C' est donc la fin de notre titre et le début de notre mission. Donc, la première chose que nous allons créer la ligne, à l'intérieur de cette ligne, nous avons la colonne peut-être après que le médium sera combattu et le texte centré sur les objectifs. Ceci, nous allons créer notre première icône. Et, et je ne vais pas aller et arrière de Font Awesome et de copier l'icône, donc ajuster, les préparer avant. Donc, le premier sera FACS une expédition rapide. Un 5X pour faire un 105 fois plus grand, détecte sera danger ou peut-être vouloir. Voyons voir. Le bas de la marge sera pour. Maintenant, si on y retourne et qu'on a cette expédition. Maintenant, après avoir fini de cela, peut-être que je vais ajouter du texte ici. Donc, H un sera de verre. Permettez-moi de lui donner une certaine marge que le bouton, et ce sera la livraison rapide. Et quelques paragraphes huit. Et si je retourne au paragraphe, ajoutons le texte de la classe en sourdine. Et voyons, est-ce qu'on peut voir que nous avons eu notre premier. Maintenant, le second serait la même chose. Alors laissez-moi juste copier ceci et le coller. Donc, 12. Et bien sûr, nous devons changer les icônes et les titres. Donc, le premier article que je peux entendre est MAS, une main tenant USD. Donc voici F a, S, F a et tenant USD. Et au lieu de la livraison rapide, nous allons le changer aux meilleurs prix. Et puis enfin, le dernier sera FAR FAA flèche alpha, monter et de qualité supérieure. Donc c'est fondamentalement, et comme vous pouvez le voir, c'est notre mission. Si nous allons de l'avant et agrandissons, nous avons nos trois icônes et trois paragraphes sur la même ligne. Et nous avons devant eux la mission et le paragraphe qui en parle. Et comme vous pouvez le voir, nous ne voyons pas la livraison rapide, les meilleurs prix et la meilleure qualité. Peut-être qu'on doit faire quelque chose à leur sujet. Alors retournez ici et voyons. Donc c'est notre H1, peut-être rendre le texte blanc. Et c'est une livraison rapide. Et nous ferons la même chose pour l'autre sous-texte, Blanc et Blanc. Maintenant, retournez en arrière, agrandissez. Et comme on peut le voir, nous avons eu notre mission. Et ce sont nos trois icônes. Comme vous pouvez le voir ici, il y a peu d'espace entre les icônes et ce paragraphe. allons donc ajuster en allant simplement au paragraphe que nous venons de créer et simplement ajouter le BY restant. Et si je reviens, je pense que c'est mieux, mais c'est une bonne idée de le faire plus grand. Et maintenant je pense qu'on est bons. Et c'est essentiellement, nous avons notre paragraphe de mission, livraison rapide, les meilleurs prix et la meilleure qualité. C' est ça pour la mission et la page d'accueil. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 19. Produits: Maintenant que nous avons terminé avec notre section « maison » et « mission », nous pouvons aller de l'avant et commencer avec notre section « produits ». Donc, tout d'abord, laissez-moi aller jusqu'au bout. Et c'est la fin de notre mission. Nous pouvons commencer par créer un commentaire. Et le commentaire dira simplement que c'est la section produit. Et puis nous finirons par un autre gouvernement et des produits. Et maintenant, nous pouvons commencer par créer notre session. Donc c'est la section avec le verre, mais le rembourrage cinq. Et à l'intérieur de la section, comme d'habitude, nous commençons par créer notre récipient, et c'est le fluide continu. Et à l'intérieur de cette division, nous pouvons commencer par créer notre arc. Et jetons un coup d'oeil à ce site web. Je veux que ma section soit divisée en quatre colonnes, et j'ai quatre produits par exemple. C' est donc le premier 1, deuxième, troisième, quatrième. Donc pour faire ça, revenons en arrière. Et à l'intérieur de notre tirage au sort, nous pouvons commencer par créer, tout d'abord commençons par créer le titre et quelques informations, puis nous le divisons en quatre colonnes. Donc, à l'intérieur de la première rangée, nous avons le pollen. Et bien sûr, je veux que mon texte soit centré, donc nous utiliserons le texte centré et la marge inférieure trois. Alors maintenant à l'intérieur de notre modèle, créons notre titre. Comme d'habitude. La classe de la rubrique. Les balises peuvent être un avertissement. Voyons voir maintenant. Et c'est l'esprit aussi. Droit ? Produits. Et maintenant, revenons voir. Donc, ce sont nos produits serrer. Et comme d'habitude, si vous voulez un paragraphe, nous pouvons toujours écrire un peu les charger. Peut-être 15. Et la classe sera en tête, texte et peut-être secondaire. Jetons un coup d'oeil. Et si on économise, comme on peut le voir, ça a l'air sympa. Donc maintenant, après avoir créé la première partie, qui est le titre et le paragraphe, allons de l'avant et créer la deuxième partie qui contiendra nos produits réels. Maintenant, c'est pour l'ETO. Nous pouvons commencer par créer une autre ligne ici. Et cette ligne sera en fait divisée en quatre produits. C' est donc quatre colonnes. Et dans ce cas, j'en ajoute simplement trois. Puisque nous avons déjà dit que notre site Web se compose de 12. Et si nous voulons quatre parties, nous pouvons diviser 12 par 4. On va en avoir trois. C' est pourquoi nous avons ce numéro trois ici. A l'intérieur de cela, nous allons utiliser les images des images. Prenons le premier BEC. Et l'alternative serait le projet ou le produit un. Et ce ne sont pas des images de produits réels. Produits. Nous avons déjà quelques photos ici pour Getz et quelques photos aléatoires. Alors je vais les utiliser. Mais pour l'instant, c'est pour l'instant si vous voulez créer ce projet réel, vous devez changer ces images. Donc, c'est comme pour l'image, laissez-moi ajouter quelques classes. La première classe sera dans la vignette de l'image. Et je voulais être arrondi. Et maintenant, si je commence par notre paragraphe, je peux choisir les classes. Choisissons la classe de texte en sourdine. Et certains apprennent, apprennent Sx égal. Bien. Maintenant, retournez en arrière et comme nous pouvons le voir, nous avons eu notre photo ici avec le dessous. Cependant, comme nous pouvons le voir, cette image semble très petite et elle semble bien quand nous ouvrons la page, quand nous avons une pleine page. Cependant, si nous utilisons un appareil, un appareil mobile, cela ressemblera à ceci et il semble petit. Nous devons donc nous occuper de ça. Une façon de le faire est de spécifier que chaque fois que nous utilisons un petit écran, nous n'avons besoin que de deux images sur la même ligne. Et une façon de le faire est de simplement spécifier que la colonne trois ne sera que pour les grands écrans. Et chaque fois que nous avons un petit, nous allons utiliser une colonne SpaceX. Et cela indique qu'on ne veut qu'une seule photo, sur DES. Et si je reviens au moyen, ça peut contenir deux photos. Et chaque fois que je vais au grand, il conviendra pour les photos. Alors, c'est ça. Maintenant, copions ça quatre fois. Donc, c'est 1234. Change les photos. Donc, ici, nous avons la deuxième, la troisième. Et l'ICANN. Choisissez l'image comme première. Encore une fois. Ainsi, nous pouvons voir ici nous avons nos quatre photos. Et si j'ai fait l'image ou l'écran plus grand, ils auront deux photos sur la même ligne. Et puis si je fais un plein écran, nous aurons des images par défaut ou des guides par défaut sur la même ligne. Donc, comme nous pouvons le voir, nous avons créé un site web complet jusqu'à maintenant. Nous avons nos produits maison Michigan et contact. C' est la page d'accueil, c'est la mission. Et nous avons ces produits. Vous pouvez changer ces photos comme vous l'avez dit, à ce que vous voulez. Et dans la prochaine vidéo, nous allons créer le Contact Us. Et bien sûr, nous pourrions ajouter quelques autres choses qui vous aideront à créer un meilleur site Web. Et gardez à l'esprit que tous ceux-ci sont pur bootstrap peut être à la fin, nous allons ajouter quelques modifications et en utilisant CSS ou JavaScript. Donc, nous allons voir, mais pour l'instant, nous allons construire notre site entier à partir de bootstrap. Donc, fondamentalement, pour cette vidéo, on se voit dans la prochaine. 20. Marques: Bonjour et bienvenue. Et dans la dernière vidéo, nous avons fini de créer notre section produits. Et je pensais que puisque nous avons des produits, pourquoi créer, pourquoi ne pas créer la partie de la marque ? Et dans cette partie de la marque, nous allons créer des cartes. Et allons de l'avant et commençons à les classer. Donc, je vais commencer par écrire le commentaire, qui est la marque. Et bien sûr, et Rand. Et maintenant, nous commençons par créer notre section. Et on va lui donner des cours. Faisons-le sombre pour le moment. Donc VGA sombre et un peu de rembourrage et l'axe Y. Maintenant ouvrez-le, commencez avec notre liquide de récipient. Comme d'habitude. A l'intérieur de cette division, commençons par créer le titre. Donc c'est notre titre. Et voici E et titre. Et bien sûr à l'intérieur de ce titre, nous avons un retrait. Et laissez-nous, puisque nous avons rendu notre fond sombre, rendons notre texte blanc. Et bien sûr, le titre devrait être centré à l'intérieur de cela. Créons notre colonne et une certaine marge. Et bien sûr, c'est notre titre d' affichage en verre pour et puis une certaine marge sur le bouton. Maintenant, nous pouvons écrire n'importe quoi à ces marques qu'un paragraphe. Et à l'intérieur de ce paragraphe, je vais créer la division et je placerai ce paragraphe à l'intérieur de la division. Et la division aura d m avant et les classes sous-jacentes. Le paragraphe sera de verre, de plomb et de Sundaram. Maintenant, si nous revenons, comme nous pouvons le voir, nous avons nos marques et quelques paragraphes qui décrivent quelles sont les marques que nous avons. Et bien sûr, après avoir terminé avec le titre, nous pouvons commencer par créer nos cartes réelles qui contiendront nos marques. Donc, pour l'instant, nous allons créer la ligne, puis créer la colonne. Et comme nous l'avons dit, si nous voulons que nos colonnes soient réactives, nous devons spécifier pour les grands écrans, écrans ce qui va se passer. Donc je pensais avoir trois cartes quand on a grand écran. Donc si nous avons ce grand écran, nous avons 3123. Et au total Jour sera six cartes. Dans ce cas, nous avons deux colonnes et chaque colonne, désolé, deux lignes et chaque ligne nous avons trois colonnes. Et chaque fois que nous aurons l'écran et la taille moyenne, nous aurons trois rangées. Et dans chaque rangée, nous allons avoir deux colonnes comme ça. Alors allons de l'avant et commençons avec Harlem. En général, il sera quatre et à moyen et plus grand que petit pour être sexe. Donc MON F5, et je pense que nous avons pour l'instant à l'intérieur de cette division, nous allons créer notre division tiendra nos cartes. Donc coupé. Je vais ajouter l'ombre actuelle de la classe. Et bien sûr, je ne veux pas de bordures, donc le pointeur sera 0. Alors allons de l'avant et créons. Notre première image sera à partir d'images adultes choisir la même image pour toutes les cartes, mais vous pouvez le changer bien sûr. C' est donc la première classe d'image comme d'habitude, image ou dimension actuelle. Et puis chaque fois que nous créons notre image et que nous voulons du texte sur cette image, nous devons utiliser la classe overlay. Donc, notre nouvelle division sera la superposition d'image de carte. Et puis placez notre paragraphe ici. Donc, je vais utiliser les cinq ajouts. La classe sera taxée en blanc et en majuscules. Et peut-être un peu en herbe. Et je pense qu'on est bons. C' est donc la première marque. Peut-être que je vais écrire d'abord Rand. Et bien sûr, si je vais ici, comme on peut le voir, nous avons notre première marque. Cependant, ce n'est pas si visuel, donc nous pouvons ajouter l'arrière-plan ici. Nous pouvons ajouter pour le titre, un arrière-plan de secondaire. Et comme nous pouvons le voir, c'est maintenant un plus clair. Et bien sûr, quand on finira, on peut copier ça. Voici notre guide et nous devons copier toutes nos colonnes. C' est donc la colonne 123. Maintenant, c'est le deuxième et c'est le troisième. Et comme nous pouvons le voir, chaque fois que nous avons un écran de taille moyenne, nous en avons deux sur la même ligne. Et si je le fais plus grand, vais en avoir trois en même temps. Et bien sûr, si j'ai un écran de petite taille, je vais avoir seulement 11 cartes. Et maintenant, continuons et copions ceci quelques fois. Donc c'est le cas et je pense que nous sommes bons. C' est le quatrième, cinquième, sixième. Et maintenant je mais plein écran, nous pouvons voir que nous avons nos six cartes. Et ceux-ci représentent les six marques que nous vendons ou que nous avons. Et bien sûr, vous pouvez changer les photos et peut-être changer le côté de la carte. Le paragraphe, comment détecte secondaire, désolé, l'arrière-plan. Et vous pouvez faire beaucoup de choses et modifier ce que vous voulez dans ces cartes. 21. Clients: Maintenant que nous avons terminé avec notre produit, nous pouvons commencer par notre section client et la section que nous allons écrire certains clients devraient voir. Alors allons de l'avant et ajoutons un nouveau commentaire ici. Clients et, et clients. Donc, à intérieur de ces commentaires, nous pouvons commencer par créer notre section clients. Et encore une fois, il suffit de l'ouvrir comme une division. Et les clients. Nous avons aussi un peu de rembourrage, donc p5. Et dans la section de ce client, nous pouvons commencer par créer le chargement du conteneur. Et comme d'habitude, nous avons notre titre. Et ce sera, laissez-moi juste ouvrir une nouvelle frontière et un nouveau titre. Comme d'habitude, nous commençons par obtenir notre ligne à l'intérieur du DO, laissez-moi en faire un texte blanc. Et bien sûr, x, division centre et annexe. A l'intérieur de cette division, créons la colonne et une marge. Bien sûr, à l'intérieur de cette division, nous commençons par créer la classe, mais notre rubrique affiche pour la marge inférieure quatre. Et voici les clients. Et peut-être ajouter du texte. Alors classe et abaissez-les. Peut-être 14. Je pense qu'on est bons. Si je reviens maintenant, comme nous pouvons le voir, nous avons notre section clients, cependant, elle est large et nous ne pouvons rien voir depuis que nous avons ajouté le texte large. Donc, permettez-moi de traiter cela en appliquant simplement l'obscurité ici que nous pouvons voir que notre section client. Maintenant, ça n'a pas l'air très agréable après cette troisième section, car ils sont tous les deux Doug. Alors peut-être qu'on peut changer le texte noir et le garder blanc si tu veux. Mais pour l'instant, je vais travailler avec elle comme sombre puisque cette page ne sera qu'à la fin. Et très probablement jeter la page un B à la même page de ceci. Donc, c'est tout le site. Vous pouvez déplacer certains des éléments ou certaines des sections que nous avons créées et vers d'autres pages. Par exemple, si je clique sur la mission ou les produits, cela devrait m'emmener à la mission, tous les produits de la section. Mais pour l'instant, nous les avons tous sur la même page. Si vous sentez que vous pouvez créer. Et chacun d'entre eux à la page différente, puis liez-les ensemble. Ça va aussi. Donc c'est ça essentiellement pour le titre. Retournons ici. Et maintenant, créons notre carrousel qui tiendra l'avis de nos clients. Donc, la première chose que nous allons faire est de créer les indicateurs. Et bien sûr, commençons vraiment créer la ligne et la colonne comme d'habitude colonne et ces sexe. Et je voulais au milieu. Donc j'utilise l'Umax auto. Et puis ouvrons. Bien sûr, nous devons créer le carrousel. Donc tout d'abord, Teresa et moi avions besoin de glisser. Et bien sûr, j'ai besoin de données, essayé d'être égal à caractère. Et nous l'avons déjà implémenté avant. Mais c'est bien de s'en souvenir. Je lui donnerai un numéro d'aérosol ou de client. Il y en a. Et je pense qu'on est bons. Nous pouvons commencer par créer notre propre liste d'indicateurs. Donc c'est le cas, et on va lui donner des cours. Et voici les indicateurs du carrousel. Et bien sûr, l'élément de la liste sera la cible de cela. Ce serait le carrousel du client. C' est ce qu'on a donné à ça. Laisse-moi le faire très vite. Et nous lui avons donné des personnages de casting. Donc, nous allons écrire hashtag. Et puis nous avons besoin de données diapositive 2. Et cela glissera à 0. Chaque fois qu'on appuie dessus. Et je vais lui donner un verre d'actif. Et je pense qu'on est bons. Alors laissez-moi copier ceci et le coller une ou deux fois. Alors 123. Que s'est-il passé ? Laisse-moi revenir en arrière. Donc nous en avons un, nous avons le deuxième et le troisième. Et bien sûr, j'ai besoin de changer certains que j'ai besoin de faire quelques ajustements pour qu'il verra L12 et le deuxième tiers n'a pas besoin de les rendre aussi actifs. Et je pense qu'on va bien maintenant. Nous avons nos indicateurs. Alors revenons en arrière et commençons avec notre entrée en aérosol. Alors, le carrousel entre. A l'intérieur, nous allons créer notre article de carrousel et le premier élément sera comme d'habitude actif. Donc, article de carrousel que actif et il sera. Centre de remerciement. Alors, c'est ça. Maintenant, nous avons notre article. À l'intérieur de cet article, je vais poster une image simple et elle sera arrondie. J' ai déjà des images sur des bébés. Je les utilise pour que l'image soit des images, celle-là. Et les classes seront des images fluides. Et bien sûr, nous avons arrondi cercle. Et la marge sera de cinq. Et je vais ajouter la largeur pour être un 150 pixels. Maintenant, revenons ici et voyons. Comme nous pouvons le voir ici, nous avons nos clients, le paragraphe et l'image avec les indicateurs. Cependant, nous n'avons pas encore d'image suivante ou précédente. Alors attendons. Et bien sûr, nous devons écrire l'interview. Et je vais le mettre dans un code bloc. Donc, le code de bloc aurait le code de blog de classe. Et bien sûr, dans les textes sera blanc et nous avons la classe et lui donner une marge, cinq en bas et un peu d'agneau avocat, longe, 20 peut-être. Maintenant, je pense que nous avons du texte et l'image. Et maintenant, revenons ici et copions cette division et collé quelques fois. Donc, ici, nous avons notre division. Ou peut-être avant de le copier, peut-être ajouter quelques styles ici pour le rendre meilleur. Donc, pour ce faire, nous tapons simplement le nom de la personne et suivi de la rencontre. Donc, cela simplement ajouté ici, peut-être un et H pour la classe seront des textes légers. Voyons, X, en majuscules puisque c'est le nom. Et Margin-bas trois, ce sera, disons. Et maintenant, créons notre liste non ordonnée. Et ce sera une liste et une ligne de cours puisque nous avons besoin que nos élèves soient à la même ligne. Donc la liste en ligne et une certaine marge. Il faudra maintenant créer notre élément de liste, liste, élément, liste et élément de ligne. Et bien sûr, nous avons nos icônes ici. Et l'icône de notre étoile est AS un début, et ce sera une étoile jaune. Donc, nous allons utiliser l'avertissement texte. Et maintenant je pense, bien, bien. Attendons et nous avons notre nom, Hadi et une étoile. Laisse-moi copier ça quatre fois. Donc c'est que je suis désolé. Laisse-moi juste le copier et le coller. 1234. Maintenant, comme vous pouvez le voir, nous avons nos 5 étoiles ici, mon nom, et qu'est-ce que j'ai écrit ? Donc ce n'est pas fondamentalement pour notre première critique. Maintenant, nous devons copier tout cela et collé deux fois de plus. Donc c'est notre carrousel entrer. Copions-le jusqu'à ce que je vérifie. Donc c'est pour la voiture, peut-être que ça revient maintenant. C' est la division que nous devons copier. Alors je l'ai collé trois fois. Et c'est le bon. J' en ai deux et trois. Et c'est, c'est maintenant en cours d'exécution. Et comme vous pouvez le voir, cinq appuyez sur le bureau. Ça me prendra automatiquement deux jours pour arriver au client ou deux. Et c'est le troisième client. Et si je le garde en mode automatique, il continuera automatiquement jusqu'à ce que j'accepte mon site Web. Donc c'est essentiellement pour notre parasol et la section client. étant dit, c'est la fin de cette section. Rendez-vous à la prochaine vidéo. 22. N'hésitez pas à nous contacter et pied de page: Bonjour et bienvenue. Dans cette vidéo, nous allons continuer à construire notre site Web et nous allons construire notre section contact. Donc, pour ce faire, permettez-moi d'aller de l'avant et de commencer une nouvelle section. Et c'est le contact. Contact. Et, et contact. Bien sûr, nous commençons par créer notre section. Et à l'intérieur de cette section de la classe sera rembourrage cinq et il sera aimé. Donc, l'arrière-plan sera principalement léger. Bien sûr, nous commençons par créer notre liquide de récipient. Et comme d'habitude, d rho à l'intérieur de la rangée, nous avons la colonne. Et nous avons besoin que notre texte soit centré. Donc on va utiliser le centre technologique. Et donc marge sur le bouton. Maintenant, après avoir créé notre colonne, nous pouvons commencer par créer notre titre. C' est le contact comme. Donc la classe serait taxée. L' avertissement et l'affichage seraient deux. Et nous dirons simplement contactez-nous. Bien sûr, nous avons un paragraphe et il sera le plomb et les textes secondaires. Donc, nous connaissons déjà la plupart de ces classes, donc pas besoin de s'arrêter sur chacune d'entre elles. Je vais simplement les écrire comme je le fais maintenant. Et voici notre paragraphe. Maintenant, si nous revenons ici, nous avons notre contact avec nous, nous avons un paragraphe et nous en avons fini avec le titre. On peut commencer une nouvelle division maintenant. Donc, cette division sera après la colonne. Donc, c'est la colonne et maintenant, ou peut-être que vous pouvez le démarrer après le rôle aussi. Donc, c'est une nouvelle rangée. Et bien sûr, je veux que le contenu soit centré afin que je l'utilise le centre de contact justifié. Nous avons une colonne et ce sera pour le grand sexe et pour le moyen. Les deux huit et pour les petites dix. Alors laissez-moi l'ouvrir et nous avons la division qui prendra un centre de texte et parfois ajouter secondaire. Donc, les titres seront des questions. Et puis peut-être un paragraphe. Par exemple. Demandez-nous. Et maintenant, après avoir créé cette division, nous pouvons commencer par créer notre téléphone qui inclura les entrées de l'utilisateur. Donc, le téléphone sera de texte muté type arpanet. Et nous n'avons plus d'action maintenant. Maintenant, à l'intérieur de nos quatre, nous pouvons commencer par créer l'étiquette. Et l'étiquette sera à notre nom. Désolé, pour le nom d'utilisateur. Et l'entrée sera de type texte pour le contrôle et le nom de l'identifiant. Maintenant, après avoir créé ceci, voici notre étiquette et notre entrée. Cependant, nous avons oublié de les ajouter à une division. Donc la division sera de classe pour groupe. Et ces étiquettes et entrées, je pourrais simplement les copier et les coller à l'intérieur de ceci. Et maintenant, on est bons. C' est notre division pour le groupe et nous avons notre nom et les commentaires. Et bien sûr, nous créons ensuite un autre groupe de formulaires. Et cela contiendra l'e-mail, donc étiqueté pour l'e-mail. Et il inclura en fait l'e-mail de l'utilisateur, entrée, texte, formulaire, contrôle et e-mail ID. Maintenant, nous avons, nous avons encore la dernière division et comme d'habitude pour le groupe, et ce sera pour le message et le message. Et maintenant, nous n'avons pas besoin d'une entrée, nous avons besoin d'une zone de texte. Donc, je vais utiliser la zone de texte. Il va nommer, je n'ai pas besoin de son nom. L' ID serait le message. Les lancers de la Belgique. Je n'en ai pas vraiment besoin. Donnez-les simplement et la classe serait pour le contrôle. Et ici, nous avons notre zone de texte. En tant que financement de cette division, nous devons ajouter le bouton Soumission afin que la classe soit btn. Btn. L' esquisse de ce serait avertissement et chance BTN. Et je pense que maintenant nous devons encore faire les types de rencontré et de soumettre. Maintenant, si je retourne ici et comme vous pouvez le voir, nous avons créé nos quatre, nous avons des questions. Demandez-nous, l'utilisateur peut entrer ce nom et est ensuite e-mail suivi du message. Et puis ce brevet que de soumettre chaque fois qu'il appuie sur ce bouton et l'action doit être effectuée. Mais puisque nous ne connaissons pas de JavaScript ou de retour et nous allons nous tenir à la connaissance que nous connaissons jusqu'à présent. Donc, c'est fondamentalement pour le. Section de contact, qui ont encore la dernière section qui est le pied de page. Alors allons-y et faisons-le maintenant. Alors ajoutons le pied de page. Et pour créer un pied de page, nous avons en fait la balise de pied de page en HTML. Et nous devons ajouter quelques classes de bootstrap afin que l'arrière-plan soit creusé et nous avons un peu de rembourrage. Sur l'axe des x. Nous pouvons créer notre liquide de récipient. Et puis commencez par créer notre ligne. Et la taxe serait en fait à la lumière avec un peu de rembourrage sur l'axe Y. Maintenant, à l'intérieur de cela, nous pouvons créer notre colonne. Et ce sera pour, pour les grands et six pour les petits et au-dessus. A l'intérieur de ça va écrire notre rubrique. Et ce sera à propos de nous ou peut-être à propos de nous. Je pense que c'est bon. C' est la première partie de notre pied de page et le texte sera petit. Si petit. Et quelques Lauren, Lauren 20. Je pense que nous pourrions F Maintenant, si nous faisons défiler vers le bas, nous pouvons voir que nous avons la section à propos de nous. Et si je le fais plus grand, il sera là. Maintenant, revenons en arrière. Je pense que nous avons tellement de textes ici. Laisse-moi juste le rendre plus petit. Et maintenant, nous allons à la première partie de notre division ou à notre pied de page. Maintenant, puisque nous avons terminé notre première colonne, nous pouvons commencer par la seconde. Et je veux que ce soit à ce jour seulement deux sur 12. Ça a pris quatre. Je rendrai cette cassette trop grande aussi. Et pour ce petit, ce sera le même problème que m 6. Ouvrez-le à l'intérieur. Ce sera le premier serait en route et le sergé dire, nous rendre visite. Et puis nous avons une liste non ordonnée. Et la classe sera liste non stylée. Ainsi pour être déplacé les points de balle. Et maintenant, nous avons l'élément de la liste. À l'intérieur de l'élément de la liste aura un lien. Indique à la cartographie. La classe sera un lien de pied de page. Et puis on est à la maison. On va copier ça. Et peut-être que je vais simplement créer une fois de plus. Et la classe sera le lien de pied de page. Et nous avons la mission. Et enfin, permettez-moi d'en ajouter un de plus. Et il contiendra le, peut-être les produits. Donc lien de pied de page et les produits. Maintenant, si je fais défiler vers le bas, je peux trouver les produits de la machine à la maison du visiteur. Si je le fais plus gros, on l'a comme ça. Et maintenant, nous avons encore comme la moitié de la plage depuis que nous avons consommé du papier d'aluminium. Ici. Et deux ici. Alors revenons vers le bas. Et maintenant, nous allons créer la section d'aide. Et il faudra aussi mettre la colonne en grand aussi et à petit six H5 ouvert. Et ça n'aurait pas besoin d'aide. Donc besoin d'aide. Et puis nous pouvons commencer par créer notre liste non ordonnée. La classe doit être comme d'habitude, liste non stylée, non stylée. Et puis nous pouvons créer notre élément de liste comme avant. Nous avons notre lien de pied de page de référence et les détectes seront en fait majuscules. Et c'est le service à la clientèle. Et puis nous allons copier ceci et le baser une ou deux fois. Donc, nous avons le service à la clientèle, nous avons le support, et nous avons la conductance E. Je pense que maintenant, si on fait défiler vers le bas, on a tout ça. Et comme vous pouvez le voir, nous avons le sujet de nous visiter, besoin d'aide. Maintenant, faisons un peu plus petit et revenons à la dernière section. Et dans cette section, nous allons demander à l'utilisateur d'entrer son email pour rester connecté. Alors ajoutez une nouvelle division. Et ça prendrait la dernière feuille. Donc LNG FOLDOC pour petit outil disant six arpanet H5. Restez connecté. Et bien sûr, le petit paragraphe. Dans ce paragraphe, nous avons entré votre email pour rester connecté avec nous. Et puis on pourra créer notre prochain téléphone. Et sous cette forme, nous allons être un groupe d'entrée D. Donc, sans aucune action, la classe sera la marge inférieure trois. Et bien sûr, nous avons notre division, qui est un groupe d'entrée. A l'intérieur de cette division. Nous avons le texte de type d'entrée. Ensuite, nous avons la classe pour le contrôle et le courriel du détenteur de place. Et puis nous avons une autre division qui contiendra l'ajout de groupe d'entrée plus. Et puis on a le bouton. Et le type sera bouton. Les classes seraient le bouton BT, danger et les détectes aussi seraient blancs. Et maintenant nous pouvons ajouter à l'intérieur de ce bouton, vous voir ou moi ou quelque chose comme ça. Alors, voyez-vous. Et maintenant, si je retourne, comme on peut le voir, on a notre bouton ici. Et c'est fondamentalement nous avons à propos de nous avec la tâche besoin d'aide, rester connecté. Et l'utilisateur peut entrer est e-mail ici et appuyez sur, et il restera connecté avec nous. Nous pouvons également ajouter des liens ou des icônes pour la page Facebook ou la page Instagram, même YouTube. Ainsi, vous pouvez les rechercher dans l'icône, Police, Icônes impressionnantes, et vous pouvez les utiliser. Peut-être après l'email juste ici. Peut-être les ajouter ici, et ensuite tu es bon. Donc c'est ça essentiellement pour notre projet. J' espère que ça vous plaira. Et je vous encourage à aller le vérifier par vous-même et peut-être modifier ou travailler dessus. étant dit, c'est la fin de cette vidéo. On se voit. 23. Projet: Bonjour et bienvenue dans la section projet. Et nous avons déjà implémenté tant de formulaires et de composants qui sont disponibles pour nous dans bootstrap. Et votre projet sera en fait de construire d'autres projets similaires à celui-ci, vous pouvez utiliser n'importe quel composant Bootstrap ou n'importe quelle classe bootstrap que vous pouvez trouver utile et bien sûr, rapide vers le bas. Dans la section du projet, je vais vous fournir ceci. Et ce sera en fait le modèle, le modèle de démarrage avec quelques liens d'objectifs. Cependant, ce lien ne sera pas disponible puisque chacun d'entre vous devrait avoir son propre bien. Et c'est le lien pour Font Awesome. Comme nous l'avons dit, vous devriez aller vous inscrire gratuitement, puis obtenir ceci, obtenir, utiliser dans votre site Web. Donc, c'est que, fondamentalement, vous devriez être capable de faire la plupart de ceux-ci par vous-même. Cependant, si vous ne vous sentez pas, si vous sentez que vous manquez quelque chose, vous pouvez toujours revenir aux conférences vidéo et les vérifier à nouveau. Donc, c'est fondamentalement, j'espère que vous avez apprécié cette section. Et bien sûr, bonne chance dans votre projet. Et n'oubliez pas d'ajouter à la section projet afin que je puisse jeter un coup d'oeil et vous donner mon avis. Alors, c'est ça. J' espère que tu as apprécié toute la classe et que tu te verras.