Bootstrap 4 pour débutants : coder manuellement et rapidement de superbes sites Web réactifs

1. Introduction: Lors de la construction de sites Web ou d'applications, Bootstrap est l'un de ces outils qui peuvent vraiment aider non seulement les débutants, mais aussi les développeurs de tous niveaux de compétences à se lever et fonctionner très rapidement. Nous n'avons connu qu'un peu CSS et HTML. Vous pouvez vraiment créer un projet étonnant juste en ajoutant quelques classes simples à votre HTML. Non seulement vos sites Web seront superbes, mais ils seront également entièrement réactifs, ce qui signifie qu'ils seront optimisés pour toutes les tailles d'écran différentes. Qui suis-je ? Je m'appelle Chris et je suis développeur web et je suis impliqué dans la construction de sites web depuis 20 ans. J' enseigne également ces compétences depuis plus de cinq ans et activement participé à l'utilisation de Bootstrap depuis les premières versions. Bootstrap est un excellent outil pour les débutants qui veulent frapper le terrain en cours d'exécution, vous permettant de construire un superbe site Web, qui sont également vraiment personnalisables. Bootstrap n'est pas seulement sur l'aspect et la sensation maintenant, nous pouvons également ajouter des fonctionnalités telles que des menus déroulants, carousels d' images, aussi la possibilité d'afficher et de cacher du contenu et bien plus encore, tout sans avoir à connaître JavaScript. Tout au long de ce cours, vous apprendrez tous les concepts clés nécessaires à l'utilisation de Bootstrap. Nous commençons par décider de votre faisceau de projet. Ainsi, nous pouvons construire quelque chose qui est entièrement personnalisé pour vous et reflète vos passe-temps ou vos intérêts. Ensuite, passez à regarder toutes les fonctionnalités essentielles de Bootstrap, qui a le système de grille, points d'arrêt, utilitaires, composants et travailler avec des bibliothèques tierces, les icônes d'ajout. Vous n'avez pas besoin d'être un expert en HTML, CSS ou JavaScript pour commencer. Tout ce dont vous avez besoin est une compréhension de base du HTML et du CSS pour aller de l'avant. À la fin de ce cours, vous aurez toutes les compétences et les connaissances dont vous avez besoin pour construire de superbes sites Web réactifs. Merci de vous intéresser et commençons avec ce cours. 2. Pourquoi utiliser Bootstrap ?: Peut-être que vous avez suivi ce cours et pas un 100% sûr de ce qu'est Bootstrap. Ou peut-être que vous en avez déjà entendu parler auparavant, mais ne comprenez pas pleinement le rôle qu'il joue dans un projet web. Eh bien, je vais maintenant vous donner un aperçu de ce que Bootstrap peut faire. Nous n'irons pas trop loin pour le moment, car je pense que certaines choses sont mieux démontrées au fur et à mesure que nous allons. Mais nous pouvons au moins obtenir une compréhension de base. Lorsque nous commençons avec quelque chose de nouveau, en général, la première chose que nous voulons savoir est ce que c'est exactement et comment cela peut-il profiter à nos projets ? Avec Bootstrap, qui est actuellement sur la version quatre. Vous pouvez considérer cela comme une boîte à outils pour construire des projets HTML, CSS et JavaScript. Nous pouvons créer des sites Web et des applications en utilisant nos compétences HTML et CSS existantes. En fait, nous n'avons même pas besoin de connaître JavaScript à l' avance pour commencer et profiter des fonctionnalités Bootstrap. Avec Bootstrap, nous n'avons pas besoin d'apprendre un nouveau langage de programmation. Ce n'est pas un cadre compliqué ou quelque chose comme ça. Il s'agit simplement de construire sur nos compétences existantes et il ajoute quelques fonctionnalités intéressantes, généralement en ajoutant des classes CSS. Donc, nous pourrions penser à Bootstrap comme un coup de main pour nos sites Web ou applications. Nous pouvons simplement le déposer dans nos projets et nous saurons comment le faire très bientôt. Une autre grande fonctionnalité de Bootstrap est qu'il est entièrement responsive par défaut. Ce qui signifie qu'il aura fière allure sur toutes les tailles d'écran. Donc, si nous utilisons un appareil de petite taille mobile, comme nous le voyons ici, nous aurons généralement le contenu empilé de haut en bas ou verticalement sur toute la largeur de l'écran. Une fois que nous avons plus d'espace disponible sur l'écran, comme une tablette ou un ordinateur de bureau, nous pouvons avoir le contenu empilé côte à côte, car vous avez plus de largeur disponible. Une autre grande caractéristique de Bootstrap est qu'il nous permet de développer à un rythme beaucoup plus rapide. Il le fait en nous fournissant un CSS de base et JavaScript, que nous pouvons déposer dans notre projet et utiliser comme un excellent point de départ. Le CSS de base fournit des valeurs par défaut raisonnables dont nous pouvons avoir besoin, comme un espacement, des marges et des marges, des couleurs et des polices par défaut. Tout ce que nous utilisons à partir des fichiers CSS et JavaScript de base peut être entièrement personnalisé aussi. C' est parce que nous ne voulons pas que tous les projets Bootstrap, que nous créons, ou que d'autres personnes créent aussi, la même apparence. Bootstrap nous donne donc la flexibilité de modifier chaque style ou classe que nous appliquons à notre projet et de le faire complètement nôtre. Une autre bonne chose à propos de Bootstrap est qu'il est convivial pour les débutants. Tout ce que nous avons besoin de savoir à l'avance est du HTML et CSS de base. Nous pouvons ensuite implémenter progressivement bootstrap dans notre projet quand nous en avons besoin. En fait, nous n'avons pas besoin de connaître de JavaScript pour commencer avec Bootstrap, le Mobile First Styling dans, et des choses comme un menu déroulant, des carousels, des modaux ou des fileurs de progrès sont tous très simples à ajouter à notre projet . Nous n'avons pas besoin de connaître de JavaScript avant de l'utiliser. C' est donc un aperçu de base de ce qu'est Bootstrap. Bien sûr, plongera beaucoup plus profondément tout au long de ce cours. Je suis actuellement sur la page d'accueil Bootstrap, qui est getbootstrap.com. A l'intérieur de la barre de navigation en haut, nous pouvons voir que nous sommes actuellement sur la version quatre et il y a aussi des références aux versions deux et trois. Avec la version trois encore activement entretenue et utilisée dans de nombreux endroits. Mais pour ce cours, nous allons nous concentrer sur la version 4. Une fois que vous connaissez une version majeure, cependant, pour être honnête, il n'est pas trop difficile d'utiliser une version plus récente si vous avez besoin de travailler sur un projet plus ancien. La plupart des concepts de base sont les mêmes et la documentation est assez bonne aussi. Également dans la navigation est un lien d'exemples. Si nous nous dirigeons vers ici, nous pouvons voir de nombreux exemples tels qu'un album, un prix, une page de paiement, une page de produit et un carrousel par exemple, et si nous voulons profiter de l'un de ces modèles de démarrage, tout ce que nous avons à faire, c'est de cliquer sur l'exemple. Nous pouvons ensuite cliquer avec le bouton droit de la souris, puis aller à Afficher la source de la page et cela s'ouvrira dans un nouvel onglet. Nous pouvons ensuite récupérer tout le code à partir d'ici en copiant et collant et en prendre le relais à notre propre projet. C' est un démarreur utile pour de nombreux types de pages et vous pouvez également modifier le cas échéant. Si nous revenons aux modèles, nous pouvons voir un exemple de certains des composants Bootstrap. Nous avons une navigation supérieure avec nos liens et aussi notre boîte de recherche en haut. Il s'agit d'un composant pré-construit utilisant Bootstrap et il y a aussi beaucoup de nos variétés aussi. Ci-dessous, nous avons un carrousel rotatif où nous pouvons ajouter différentes images et aussi du texte. Nous pouvons faire défiler entre eux en utilisant ces boutons gauche et droit. Sur la page précédente montre de nombreux exemples de ce que Bootstrap peut faire. Je vais également utiliser beaucoup de ces composants au fur et à mesure que nous suivons le cours. C' est donc un regard visuel de ce que Bootstrap peut faire. Mais comment Bootstrap fonctionne-t-il ? Nous commençons par HTML régulier. n'y a donc pas de nouvelles langues ou compétences à apprendre. La plupart de cela est juste un cas d'ajout de classes CSS. Ici sur cette diapositive est juste une liste HTML non ordonnée régulière avec quelques éléments de liste à l'intérieur. Même lors de l'utilisation de Bootstrap, nous commençons avec le même HTML régulier. En bas, nous voyons ce qui est affiché à l'intérieur du navigateur par ce HTML par défaut. Nous avons cinq éléments de liste qui semblent assez simples et avec quelques puces pour chaque article. Voici le même code HTML. Mais cette fois avec quelques classes Bootstrap ajoutées, la liste non ordonnée a deux classes de list-group et list-group-flush avec les éléments de liste qui ont une classe de list-group-item. Encore une fois, en bas, nous voyons quelle sera la sortie dans le navigateur. C' est immédiat qui semble mieux. Nous avons un bel espacement, une ligne entre les deux, et aussi les balles sont enlevées. Ceci est juste un point de départ, donc si nous n'aimons pas quelque chose dans le design, nous pouvons toujours remplacer n'importe quelle partie de celui-ci avec notre propre style personnalisé. Bootstrap nous fait aller avec quelques styles par défaut et les meilleures pratiques, qui semblent généralement bien sur toutes les tailles d'écran. Mais que font ces classes exactement ? Eh bien, la réponse n'est rien de spécial du tout. Tout comme lorsque nous écrivons une classe de nous-mêmes, cela pointe simplement vers du code CSS. En bas à gauche de cette diapositive se trouve le CSS Bootstrap ou la classe list-group-item. Il suffit d'ajouter quelques valeurs pour la position, l'affichage, l'ajout, la couleur de fond et la bordure. Encore une fois, nous pouvons toujours écraser tout ce que nous n'aimons pas. Nous voyons aussi l'effet que bootstrap a, c'est la version finale de mon projet. Si nous allons cliquer avec le bouton droit de la souris et inspecter, cela ouvrira les outils de développement. Nous pouvons voir quand nous étirons le navigateur et aussi le rétrécir. Que sans la boîte Bootstrap est entièrement réactif. Cependant, si nous allons dans la section de tête et supprimez le lien vers le CSS Bootstrap. Je vais supprimer cet élément. Nous pouvons voir tout de suite que Bootstrap est supprimé, nous perdons tout le style et la mise en page ainsi que toute la réactivité qui vient avec Bootstrap et si nous rechargeons, nous pouvons voir que Bootstrap est maintenant en cours de réapplication. Donc, c'est ce qu'est Bootstrap et pourquoi nous l'utilisons. Ensuite, nous allons commencer notre projet en choisissant votre thème. 3. Choisissez le thème de votre projet: Ce projet couvre de nombreuses fonctionnalités et composants essentiels que Bootstrap a à offrir tels que des barres de navigation, des listes, des formulaires, cartes, des images et bien plus encore, tout en se familiarisant avec le système de grille Bootstrap et comment nous pouvons Disposez notre contenu pour qu'il soit entièrement réactif et fière allure sur toutes les tailles d'écran. C' est donc la page d'accueil de la version finale, que je vais intégrer. haut, nous avons également une page de prix, qui va profiter des cartes Bootstrap, ainsi qu'une page de contact pour découvrir comment nous pouvons utiliser les formulaires dans Bootstrap. C' est juste ma version du site. Vous pouvez soit suivre exactement le même projet que je construis, qui est parfaitement bien si vous voulez juste apprendre ce que Bootstrap a à offrir, ou plutôt, si vous avez une certaine idée à l'esprit ou simplement vous sentir un peu créatif, vous pouvez changer complètement le thème et le faire vôtre au fur et à mesure que nous allons. Tout ce dont vous aurez besoin en plus de vos idées, est quelques images à utiliser. Si nous faisons défiler jusqu'à la section, voici maintenant les quatre images que je vais utiliser. Elles ont également été fournies pour être utilisées dans le cadre de ce cours. Si vous choisissez votre propre thème ou design, vous pouvez également aller de l'avant et trouver quelques images que vous souhaitez utiliser pour remplacer ces quatre. Si nous faisons défiler vers le haut, nous avons également quelques icônes dans une section et celles-ci sont fournies par la bibliothèque d'icônes Font Awesome, que nous ajouterons bientôt. Vous pouvez également facilement changer ces icônes pour n'importe laquelle de celles-ci qui conviendront à vos projets. Vous pouvez également changer quoi que ce soit d'autre sur ce site web en utilisant un autre composant ou utilitaire, et nous allons voir comment le faire bientôt. Donc, une fois que vous avez choisi votre thème et que vous avez toutes les images que vous souhaitez utiliser, nous pouvons ensuite passer à la vidéo suivante où nous allons commencer à définir un Bootstrap dans notre éditeur de texte. 4. Configurer un projet sur Bootstrap 4: Comme pour tous les projets de site Web, vous aurez besoin d'un éditeur de texte pour commencer. Je vais utiliser Visual Studio Code, qui est un excellent éditeur et celui que j'utilise quotidiennement. Il est disponible en téléchargement pour Mac, Windows et Linux, et est également disponible gratuitement. Vous pouvez le télécharger à partir de ce lien ici si vous en avez besoin ou vous pouvez utiliser l'une des alternatives si vous préférez. Pour commencer à inclure Bootstrap dans notre projet, il existe différentes options que nous pouvons fusionner. Nous avons un CDN, nous pouvons auto-héberger des fichiers à l'intérieur de nos projets, ou nous pouvons utiliser un gestionnaire de paquets tel que yarn ou mpm. C' est probablement la façon de procéder si vous utilisez un noeud projets ou Ruby on Rails, ou quelque chose qui tire parti d'un gestionnaire de paquets. Cependant, ce ne sera pas quelque chose que nous allons couvrir dans ce cours de début. Au lieu de cela, nous allons nous concentrer sur l'option CDN, qui signifie Content Delivery Network. Bootstrap nous a couverts pour l'utiliser vraiment facilement. Il fournit sur le site Bootstrap un lien pour le JavaScript et les fichiers CSS, que nous pouvons facilement déposer dans notre projet. Il présente divers avantages pour notre utilisateur final, principalement en ce qui concerne la vitesse. Depuis le Bootstrap CDN est situé dans différents centres de données à travers le monde. Cela signifie que nos fichiers et dossiers seront servis plus rapidement à l'utilisateur final, car il est plus que probable qu'un centre de données se trouve à proximité. Cela a également l'avantage que le centre de données peut également avoir une version mise en cache des fichiers pour obtenir un encore plus rapide et des performances. Plusieurs centres de données signifient également que nos fichiers seront généralement plus disponibles car si un centre de données est en panne, il y aura plusieurs emplacements sur lesquels se baser. Les fournisseurs de diffusion de contenu ajoutent souvent des mesures de sécurité, tout en ajoutant éventuellement un certain équilibrage de charge pour les sites Web hautes performances. Une autre option est de s'auto-hébergé. Cela signifie essentiellement que nous téléchargeons une copie de tous les fichiers JavaScript et CSS Bootstrap requis. Ensuite, nous pouvons les héberger à l'intérieur de notre propre projet. Nous faisons cela comme nous le ferions avec n'importe quel autre fichier JavaScript ou CSS, nous allons les télécharger, les inclure dans notre répertoire de projet, puis les lier à l'intérieur de nos fichiers HTML. Cela a l'avantage de nous donner le contrôle total de nos fichiers et dossiers et comment nous aimerions les structurer, où nous aimerions les sauvegarder et les enregistrer dans nos propres centres de données ou services. C' est un moyen vraiment rapide et facile de commencer à. Bootstrap fournit également cela comme une simple utilisation de téléchargement pour déposer à l'intérieur de nos projets. Un autre avantage aussi, c'est que si notre application est destinée à être utilisée hors ligne, nous aurons toujours accès à ces fichiers quand nous en avons besoin. Retour sur la page d'accueil Bootstrap, qui est obtenir Bootstrapped.com. Je vais maintenant commencer avec Bootstrap en cliquant sur le lien « Documentation », puis dans la navigation, puis vers la section « Introduction ». Ce démarrage rapide implique les liens CDN pour les fichiers CSS et JavaScript qui sont nécessaires. Comme alternative, nous pouvons également télécharger Bootstrap nous-mêmes et le placer dans notre projet aussi, comme nous l'avons regardé auparavant. Cela implique de prendre les fichiers CSS et JavaScript, les placer dans notre dossier de projet, puis de les lier en utilisant de belles balises de style et de script comme nous le ferions si nous le lions à nos propres fichiers CSS et JavaScript. n'y a qu'un seul fichier CSS nécessaire, mais comme vous pouvez le voir, il y a trois fichiers JavaScript différents, que nous devons inclure. Bootstrap utilise JavaScript pour certains composants et si vous cliquez sur cette liste déroulante, qui est juste ici, nous pouvons voir exactement quels composants nécessitent ces fichiers JavaScript. Donc, cela nous permettra de laisser certains fichiers JavaScript si nous n'utilisons aucun de ces composants ici, nous pouvons maintenant aller pour inclure tous les fichiers. En quelque sorte, l'utilisation complète de tous les composants. Nous pouvons créer notre propre page d'index et copier tous ces liens ou si nous faisons défiler vers le bas, nous pouvons copier le modèle démarré d'en bas. Alors cliquez sur ceci. Ceci est juste une page d'index de base où nous avons nos liens vers notre CSS et aussi notre bas final gratuit étonné pour inclure notre JavaScript. Donc on va juste copier. Je vais maintenant aller sur le bureau et créer un nouveau dossier pour tous les projets et bien sûr, vous pouvez stocker cela n'importe où sur votre système. Je vais appeler mon projet « Bootstrap productivité ». Ouvrez-le ensuite dans Visual Studio Code en faisant glisser le curseur sur le dossier. Le premier fichier dont nous avons besoin va être notre index.html. Créons un nouveau nom de fichier ce index.html et puis nous pouvons coller dans ces données d'avant. La première chose que nous voulons faire est de changer le titre pour être productivité Bootstrap ou le titre de votre choix et ensuite nous pouvons ouvrir cela à l'intérieur du navigateur. La façon dont nous pouvons le faire est d'aller dans notre dossier de projet et double-cliquer sur la page d'index ou dans Visual Studio Code, nous pouvons faire un clic droit sur le titre, puis aller à « Copier chemin », puis le coller comme un nouvel onglet dans le navigateur. Tout ce que nous avons ici est un titre HTML régulier mettre notre projet est maintenant configuré et prêt à partir. Dans la vidéo suivante, où nous allons découvrir comment Bootstrap utilise des conteneurs et des rangées. 5. Conteneurs et points d'arrêt: Avant de regarder les conteneurs et les lignes, je veux m'assurer que vous avez une compréhension des points d'arrêt et comment ils peuvent changer la mise en page et le style pour les appareils de taille différente. Cela ne sera pas seulement important pour apprendre Bootstrap, mais aussi pour comprendre les conteneurs que nous allons examiner. Voyez-les en action, nous pouvons aller sur la page d'accueil bootstrap, que nous avons ouverte ici, puis réduire le navigateur à une petite largeur. Simulez à quoi ressemblerait le site Web sur un petit appareil mobile. Comme nous le voyons ici, le contenu est généralement empilé verticalement. Seules les sections prennent toute la largeur de l'écran. Si nous allons de l'avant et que le navigateur soit un peu plus large et que le contenu change, tout comme nous les avons là, ce saut soudain dans le contenu est appelé un point de rupture. Une partie du contenu que nous voyons est maintenant côte à côte. Nous avons le texte sur le côté gauche, sur l'icône sur la droite, maintenant avoir plus d'espace disponible à l'écran. Si nous étirons le navigateur encore plus loin, simulons une vue de bureau. De temps en temps, nous verrons un saut dans le contenu et ces points d'arrêt nous permettent d'appliquer différents styles et mises en page à différents appareils d'écran. Les points d'arrêt sont créés en CSS à l'aide d'une requête multimédia. Une requête multimédia est essentiellement un moyen de regrouper les règles CSS. Bootstrap appliquera alors ces règles de style lorsque le navigateur est d'une certaine largeur. Bootstrap adopte également une première approche mobile, ce qui signifie qu'il est généralement conçu pour le petit écran en premier. Nous pouvons ensuite modifier les règles CSS à mesure que la largeur de l'appareil augmente. Bootstrap a également des surtailles auxquelles il utilise comme points d'arrêt et ces points d'arrêt par défaut rendent bootstrap responsive hors de la boîte. Comme nous pouvons le voir ici, Bootstrap appliquera des règles CSS pour différents appareils car ils deviennent une largeur minimale de 576 pixels, 768, 992 et 1200 pixels et plus. Nous avons également libre d'antodies ou de créer nos propres tailles de points d'arrêt à. Notez qu'il n'y a pas de requête média pour les tailles de périphériques de zéro à 576 pixels. Cette taille n'est pas requise car c'est la valeur par défaut Bootstraps et ensuite nous pouvons construire sur elle avec des requêtes de médias plus grandes, où le nom mobile d'abord. Comprendre ces points d'arrêt nous aidera également à comprendre que le système de grille, que nous allons utiliser, en commençant par les conteneurs. Comme une exigence lorsqu'il est utilisé avec des grilles, nous ajoutons un contenu à l'intérieur d'un conteneur. Un conteneur peut être n'importe quel élément HTML tel qu'un div ou une section, mais le nommerait classe conteneur. Nous pouvons utiliser ce conteneur comme emballage principal, sorte que nous pouvons contrôler le contenu à l'intérieur en ajoutant des choses telles que le remplissage et l'alignement. Lorsque vous travaillez avec la version quatre de Bootstrap, il existe trois types de conteneurs différents que nous pouvons utiliser. Nous pouvons ajouter un conteneur en tant que nom de classe à n'importe quel élément HTML tel qu'un div environnant ou une balise de section. Le nom de première classe, que nous allons examiner est simplement conteneur, et un conteneur est utilisé pour ajouter un wrapper de largeur fixe à notre contenu. Par exemple, si nous avons une page Web qui ressemble à ceci, nous voudrions généralement diviser notre page Web en plusieurs sections, donc nous pouvons vouloir une section d'en-tête en haut et ensuite quelques actions de contenu juste en dessous. Nous utilisons la classe conteneur pour ajouter une largeur fixe propre à tout le contenu, comme nous le voyons ici. Sur cette largeur fixe dépend des points d'arrêt actuels, laissant un espace blanc sur le côté gauche et droit. Cependant, maintenant, si nous voulions ajouter un conteneur qui est toute la largeur de la page, nous ferions alors usage d'une classe appelée container-fluid, donc c'est un conteneur-fluides. Ensuite, quelle que soit la taille de l'écran, s'il s'agissait d'un appareil mobile ou d'un ordinateur de bureau ou d'une tablette, le conteneur serait toujours toute la largeur de l'écran, s'étirant à un pourcentage de 100 % sur toutes les tailles vertes. Il y a aussi un troisième type de conteneur que nous pouvons utiliser dans Bootstrap aussi, et c'est un mélange entre ces deux. Nous pouvons le faire en ajoutant une classe de conteneur combinée avec un point d'arrêt, donc nous aurions conteneur, puis tiret, et ensuite nous allons ajouter un point d'arrêt tel que sm ou md. Par exemple, avec container-md aurait une page Web comme avant. Pour la plus petite taille d'écran disponible, c' est-à-dire l'accès, le conteneur représenterait 100 % de la largeur totale. Fondamentalement, pour commencer, il ressemblerait à celui-ci juste ici, ce serait toute la largeur. Ensuite, une fois que l'écran a frappé les points d'arrêt de l'appareil de taille moyenne, il changerait alors pour avoir un peu d'espace dans les deux côtés, sorte qu'il ressemblerait au conteneur normal. C' est ainsi que les conteneurs fonctionnent en théorie, et maintenant nous allons examiner comment nous pouvons les ajouter à nos projets. Si nous retournons dans notre éditeur de texte où nous avons mis en place notre page d'index, je vais supprimer le titre de niveau un de bonjour, monde, puis ajouter du contenu initial pour travailler avec. Je vais ajouter une section comme wrapper. Ici, nous pouvons ajouter un titre de niveau 1 et je vais dire à la liste d'être le contenu de ma version finale. Le texte que je vais ajouter la solution de productivité complète et, bien sûr, vous pouvez le modifier en fonction de vos projets particuliers. Ensuite, en dessous, je vais ajouter du texte de reprendre le contrôle avec nos outils efficaces, dans une interface utilisateur simple à utiliser et personnalisable. Enfin, nous pouvons terminer cette section avec un lien vers un bouton Démarrer. Si nous donnons maintenant à ce fichier une sauvegarde et passez au projet dans le navigateur, si nous rechargeons, nous pouvons maintenant voir le contenu, nous pouvons simplement l'ajouter. La première chose que je vais faire est d'ajouter un conteneur à notre section wrapper et nous pouvons le faire en ajoutant une classe régulière. Le nom de la classe est un chaud qui lie à notre CSS Bootstrap, et c'est le nom de classe du conteneur. Si nous donnons à ce fichier une sauvegarde et vérifions maintenant cela dans le navigateur en rechargeant, nous avons toujours le texte qui a été ajouté auparavant, mais il est difficile de voir exactement quel effet le conteneur a pour le moment, donc je vais ajouter un couleur d'arrière-plan temporaire. Nous pouvons le faire à nouveau avec une classe Bootstrap de bg-dark, et cela nous donnera une couleur de fond sombre. Ce fond sombre nous donne l'occasion de voir le conteneur d'arrière-plan plus en détail. Nous voyons à gauche et à droite nous avons ce rythme blanc, donc ce conteneur est une largeur fixe. Si nous réduisons le navigateur, nous verrons que les points d'arrêt feront changer la taille du conteneur pour s'adapter à l'espace disponible. Nous pouvons également ajouter le liquide contenant et voir à quoi cela ressemble dans la pratique aussi. Rechargez le navigateur, et comme nous l'avons vu auparavant sur le tableau blanc, cela va s'étendre à toute la largeur disponible quelle que soit la taille de l'écran. Le troisième type de conteneur que nous avons examiné est un lien unique vers des points d'arrêt. Si nous avons un container-md, cela changera notre type de conteneur sur les appareils moyens, qui est de 768 pixels et plus. Boues rétrécir le navigateur à la petite taille. Nous pouvons voir que nous avons un conteneur pleine largeur, et une fois que nous arriverons aux appareils de taille moyenne, cela le laissera changer pour être un conteneur régulier. Je vais rétablir cela pour être un conteneur liquide puisque c'est celui que je vais utiliser sur mon projet, mais vous pouvez choisir le conteneur qui convient le mieux à votre projet. Aussi, maintenant nous comprenons ce que fait le conteneur. Je vais aussi changer les couleurs d'arrière-plan pour être léger. Tout ce que nous avons à faire est de le changer pour être bg-light, nous laissant avec une couleur de fond claire comme prévu. La suivante pour découvrir deux autres éléments importants de la grille, et c'est comment utiliser les lignes et les colonnes. 6. Lignes et colonnes: Les prochaines parties du système de grille Bootstrap pour accéder à la largeur des grilles utilisent les lignes et les colonnes. Les lignes et les colonnes sont ajoutées à l'intérieur de nos conteneurs, que nous venons d'examiner et utilisés pour la mise en page d'un contenu. Commençons par jeter un oeil à la façon dont nous pouvons utiliser les lignes à l'intérieur de nos conteneurs. Dans la dernière vidéo, nous avons examiné les principaux types de conteneurs que nous pouvons utiliser. Ici, nous avons une classe de conteneur et puis en dessous, un liquide de conteneur imbriqué à l'intérieur de ces conteneurs, nous pouvons diviser notre contenu en lignes. Ce sont des zones de contenu qui s'étendent sur toute la page. Nous pouvons avoir autant de lignes imbriquées à l'intérieur que nous le voulons. Nous pouvons le faire à la fois sur le récipient et aussi le liquide de tableau de bord de conteneur avec le récipient en utilisant un point d'arrêt standard. Si nous regardons nos lignes plus en détail, sur le côté droit, nous pouvons alors diviser nos lignes en colonnes. C' est une façon de déclarer à quel point nous voulons que notre contenu soit à l'intérieur de notre rangée. Bootstrap utilise un système de grille à 12 colonnes, ce qui signifie que la largeur de la page est divisée en 12 sections. Si nous voulons que le contenu apparaisse toute la largeur disponible, nous déclarons que nous voulons que ce soit 12 colonnes de large. Si nous voulions diviser notre ligne en deux sections égales, comme nous le ferions si nous avions une zone de contenu sur la gauche. Il a un div, puis un sur la droite. Nous pouvons définir ces deux colonnes à six colonnes de large, équivalant à 12 parties. Si nous voulions briser une rangée de bulles en trois parties égales, nous le mettrons en quatre colonnes de large. Ajoutez une ligne séparée juste en dessous de cela. Par exemple, un div sur le côté gauche, un au centre, puis un sur la droite. Nous définirons cela sur quatre colonnes chacune. Rappelez-vous tôt dans le cours, nous avons dit que Bootstrap par défaut est mobile d'abord et cela s'applique également aux colonnes aussi. Lorsque vous traitez avec un appareil mobile qui a un écran étroit comme celui-ci. Pour commencer, les colonnes seront toujours la pleine largeur de la page. Ils couvrent toujours toute la largeur du port de vue. Ensuite, après un certain point de rupture, nous devons alors dire à Bootstrap quand sortir , puis diviser en ces colonnes comme ça. La façon dont nous faisons cela est d'appliquer certaines classes Bootstrap à vos éléments HTML, tout comme nous l'avons fait avec les conteneurs. Ce que nous allons faire maintenant en mettant cela en pratique dans nos projets. Si nous regardons le conteneur que nous avons créé dans la dernière vidéo, nous avons notre contenu à l'intérieur, mais nous n'avons pas de lignes ou de colonnes pour structurer ces contenus. Si nous supprimons ceci de notre section, je vais maintenant ajouter à l'intérieur de notre première ligne. Nous pouvons ajouter ceci en tant que classe à n'importe quel élément, tel qu'un div. Nous pouvons demander à la classe de ligne, et cela va être un wrapper pour nos colonnes pour donner à toutes nos sections un espacement entre les deux, sorte qu'elles ne se touchent pas à travers la page. Imbriquées à l'intérieur de cette ligne, nous pouvons maintenant créer plusieurs sections prenant des parties de notre grille de 12 colonnes. Si nous voulions que cela soit la moitié de la largeur de la page, nous pourrions ajouter une classe qui commence nous col, puisque nous utilisons des colonnes, nous avons alors déclaré une requête média, à laquelle vous voulez que cela s'applique, comme un appareil de taille moyenne. Ensuite, le nombre de colonnes que nous voulons que les sections prennent. Nous avons déjà dit que Bootstrap est conçu pour être mobile d'abord, ce qui signifie que toutes nos sections seraient les 12 colonnes complètes de large par défaut. Ce que nous disons ici en ajoutant cette classe est fondamentalement l'écran 1c est caché. Un dispositif de taille moyenne [inaudible] change pour n'avoir que six colonnes de largeur. Ensuite imbriqué à l'intérieur, nous pouvons ajouter le contenu que nous venons de supprimer avant. Enregistrez ceci, et plus dans le navigateur. Nous voyons maintenant que notre contenu occupe la moitié de la largeur de la page. Si nous réduisons cela pour être une taille mobile, il devient maintenant la pleine largeur de l'écran. Retour à l'appareil de taille moyenne. Cela prendra maintenant six colonnes de l'écran. Généralement, le contenu commence comme pleine largeur. Puisque Bootstrap est d'abord mobile, jusqu'à ce que nous vendions autrement, nous pourrions bien sûr changer ce MD dans le nom de la classe pour être un appareil petit ou grand si nous voulions passer à six colonnes à un moment différent. Maintenant, le haut ici est comment nous avons notre section actuellement. Il est aligné à gauche. Je laisse de l'espace sur le côté droit pour six colonnes de plus. Mais une fois que nous voulions que ce contenu reste la moitié de la largeur de l'écran, poussé au milieu. Il existe plusieurs façons de le faire dans Bootstrap. Certaines façons courantes que vous utilisez la CSS Flexbox, ou nous pouvons utiliser un décalage, comme nous le voyons en bas. Si vous poussez cela par trois colonnes, il centrera le contenu. Encore une fois, nous pouvons affiner le point d'arrêt aussi. Passons à l'éditeur de texte et avant cela. Nous pouvons ajouter un décalage. Encore une fois sur les appareils de taille moyenne, la plupart des trois colonnes. Cela signifie que notre contenu occupe encore la moitié de l'espace, et les trois autres colonnes, un distribué avant et après. Enregistrer et recharger. Maintenant, notre contenu est centré au milieu de la page. Encore une fois, si nous réduisons le navigateur en dessous des appareils de taille moyenne, ce sera toujours toute la largeur de la page. Il y a encore quelques réglages plus fins pour traiter cette section. Nous reviendrons à l'endroit où nous examinerons les classes d'utilité. Ceci est une introduction à l'utilisation de lignes et aussi de colonnes à l'intérieur de nos projets bootstrap. Nous aurons beaucoup plus d'entrainement tout au long de ce cours. Ensuite, nous allons passer à examiner l'utilisation de listes et de groupes de listes. 7. Listes et groupes de listes: Maintenant, nous avons une meilleure idée de la façon dont nous pouvons utiliser le système de grille Bootstrap, nous allons maintenant passer à l'ajout d'un peu plus de contenu à nos projets, et plus précisément, nous allons examiner comment nous pouvons utiliser les listes. Ajouter une liste est juste la même que n'importe quel autre élément HTML régulier, nous ajoutons simplement nos éléments comme nous le ferions normalement, et ensuite nous pouvons l'améliorer en ajoutant des classes bootstrap. Je vais à la version finie qui est ouverte ici. C' est la zone que nous avons ajoutée juste avant, et nous allons le rendre un peu plus agréable comme ça en ajoutant des utilitaires bootstrap plus tard. Mais maintenant, nous allons faire défiler vers le bas jusqu'à la section suivante qui est cette partie juste ici. Sur la gauche, nous allons avoir du texte, puis une liste sur le côté droit. Nous savons déjà comment créer cette mise en page, ce sera deux sections égales, toutes deux six colonnes de large et comme jamais, il sera imbriqué à l'intérieur d'une rangée et d'un conteneur environnant. Bien sûr, si vous créez votre propre version de ceci, vous pouvez ajouter un contenu différent ou des sections de taille différente si vous préférez. Nous allons pousser et créer ce groupe de listes, si vous voulez en savoir plus sur les listes utilisant bootstrap et les différents types que nous pouvons aller à la documentation et ceci est disponible dans les Composants. Ensuite, si nous sélectionnons le groupe List, cela nous donnera quelques exemples tels que des listes avec des bordures, liste avec des couleurs différentes, liste sans bordures, vous pouvez également obtenir des horizontales et ceux-ci sont utiles pour les barres de navigation. Mais maintenant, je vais aller au projet et commencer par créer une nouvelle section juste en dessous de la dernière. Cette section va avoir la classe de conteneur, donc c'est une taille fixe. Puis à l'intérieur, je vais créer un div, qui va être notre ligne, qui est le wrapper pour nos colonnes. Cela va avoir deux sections ces deux avec une classe qui devient égale à la créativité Col-MD-6. Ils apparaissent côte à côte donc encore, juste pour résumer, ces deux sections seraient toute la largeur de la page sur un petit appareil. Ensuite, quand cela atteindra l'appareil de taille moyenne, il sera alors tombé à six colonnes de large. En commençant par la première section, qui est le texte à gauche. Je vais ajouter ceci à l'intérieur d'un p éléments avec la classe de plomb. Lead est une classe bootstrap qui fait simplement le paragraphe se démarquer, que je vais ajouter est toutes ces fonctionnalités, incluses sur tous les plans. C' est une section assez simple. La prochaine sur le côté droit de la page sera la section de notre liste. Comme toujours, avec bootstrap, nous commençons par créer notre balisage HTML standard. Notre liste non ordonnée, puis à l'intérieur, nous pouvons créer nos articles de liste. Pour le wrapper qui est la liste non ordonnée, va recevoir une classe de groupe de liste, que nous allons définir notre liste non ordonnée pour pointer le type d'affichage de flex, flex-direction pour être colonne. Ceux-ci sont empilés verticalement et il réinitialisera également tout rembourrage et marge, jusqu'à notre article de liste. Nous allons ajouter une classe à l'intérieur d'ici pour chaque élément individuel et ceci est list-group-item. Cela va ajouter une bordure et un espace pour chacun de nos éléments de liste. Le premier va avoir le texte de centaines de modèles pré-construits. Bien sûr, personnalisez cela aussi à vos besoins et je vais copier ceci et coller cela dans les temps anciens. Le second, nous aurons le texte du calendrier et de la planification. Le troisième sera pour les rappels et les alertes. Le quatrième élément de liste, que je vais choisir va être des listes illimitées et faire des pages et enfin, le dernier sera le texte d'étiquettes personnalisées impaires à vos tâches. Avant d'aller plus loin, sauvegardons cela et vérifions cela dans le navigateur, nous donne un rafraîchissement. À gauche, nous avons notre texte avec la classe de plomb, puis la section de droite, qui est notre groupe de liste. Si nous faisons un clic droit et inspectons pour aller dans les outils de développement, nous pouvons vérifier les classes qui avaient été appliquées à notre liste. Tout d'abord, utilisons inspecteur pour passer le curseur sur notre liste, allez sélectionner la liste non ordonnée avec la classe du groupe de liste. Comme mentionné précédemment, ce type d'affichage ansi de flex, il définit la flex-direction et aussi notre rembourrage et la marge. Si nous descendons à notre élément de groupe de liste, en cliquant dessus, vous découvrirez tous les CSS qui l'ont été appliqués à nos éléments de liste. Nous pouvons voir l'effet si nous décochons toutes ces cases et nous pouvons voir l'effet qui a, comme nous l'avons déjà vu dans la documentation bootstrap, la direction de la colonne peut également être changée une ligne si nous voulons que ce soit un menu. Revenons à notre liste non ordonnée où nous pouvons appliquer ceci juste après ce groupe. Nous pouvons également changer cela pour être groupe de liste horizontal et cela est utile pour des choses telles que les barres de navigation. Cela semble un peu étrange parce que nous avons quelques éléments de longue liste ici, mais c'est ainsi que nous pouvons mettre à jour horizontalement sur la page. Si nous voulons supprimer les bordures et aussi ces coins arrondis, nous pouvons changer cela pour être listé groupe affleurant. Rafraîchir et je vais laisser cette classe en place pour mon projet puisque c'est quelque chose que j'ai personnellement avant. Mais n'oubliez pas que c'est à vous de décider comment vous voulez styler votre projet. Ensuite, je vais ajouter une coche à côté de chaque élément de liste. Tout comme nous voyons si nous allons à la version finale juste sur le côté gauche ici, nous allons ajouter ceci dans notre liste d'éléments en utilisant une plage. L' espagnol va contenir un code d'entité HTML donc ce n'est rien spécifique à bootstrap, c'est juste du HTML régulier. À l'intérieur de notre élément de liste, juste avant notre taxe, va ajouter une plage et le code d'entité HTML est les esperluettes, le dur qu'une valeur de un, triple zéro quatre, puis un point-virgule. Je vais saisir ceci et le coller dans le reste de notre liste d'articles. Nous avons la coche à côté de chacun de nos éléments de liste dans le navigateur. Si vous voulez modifier une icône différente, ou que vous devez faire est de faire une recherche codes d'entité HTML et vous ne serez pas sûr d'avoir des options à choisir. Arrêter nous fournit également quelques couleurs d'arrière-plan que vous pouvez choisir pour faire ressortir ces éléments de liste. Par exemple, nous pourrions ajouter une deuxième classe à notre élément de liste de list-group-item primaire. C' est l'un des économistes fournis par bootstrap, et c'est une nuance bleue. Si nous actualisons le navigateur et c'est l'une des couleurs prédéfinies définies définies par bootstrap. Il y a aussi plus près de, comme le danger pour le rouge, succès pour le vert, et ne consultez la documentation de bootstrap pour plus de couleurs disponibles. Inclure besoin de couleurs de fond claires et sombres, qui a regardé plus tôt lorsque vous travaillez avec des conteneurs. Je vais maintenant supprimer ces couleurs car cela n'est pas nécessaire par les projets. Nous pouvons, bien sûr, inclure ceci si vous préférez. Donc, je vous encourage à jouer avec ces classes bootstrap en ajoutant et en supprimant différentes pour voir exactement ce qui est possible en utilisant bootstrap. Vous pouvez également consulter la documentation d'amorçage et voir la large gamme de toutes les classes disponibles. Je vous encourage également à plonger dans les outils de développement lors de l'ajout et suppression de classes, puis vous pouvez voir exactement ce qui se passe dans les coulisses. Avec les classes CSS ont été ajoutées ou supprimées pour appliquer le désiré et l'aspect et la sensation. Ensuite, nous allons jeter un oeil à l'utilisation des classes d'utilité pour que je vous y vois. 8. Présentation des utilitaires: Nous passons maintenant aux utilitaires Bootstrap qui nous aide essentiellement à ajouter rapidement CSS à nos éléments. Ici, si nous cliquez sur la Documentation sur accueil Bootstrap, puis descendez aux utilitaires à l'intérieur de la barre latérale. C' est la section où nous trouverons toutes les classes d'utilité que Bootstrap a à offrir. Ceux-ci sont utilisés pour ajouter facilement un style CSS commun. Si nous regardons la barre latérale, nous pouvons les utiliser pour ajouter des éléments tels que les bordures, boîte flexible, le positionnement, les ombres, espacement, et bien plus encore. La plupart d'entre eux sont explicatifs si vous connaissez déjà quelques CSS. Par exemple, si nous allons aux frontières, tout ce que nous devons faire est d'ajouter certaines des classes Bootstrap, telles que la bordure, mettre une bordure tout autour de nos éléments. Nous pouvons ajouter des bordures à un côté particulier tel que le haut ou le bas. Nous pouvons enlever les bordures de certains côtés et aussi jouer avec les couleurs et le rayon aussi. Comme vous pouvez le voir, Bootstrap nous fournit généralement quelques images. Voyez exactement ce que font ces classes. Nous pouvons également cliquer sur les couleurs, et c'est exactement ce que nous avons regardé dans la dernière vidéo. Nous avons utilisé la couleur primaire, et cela est également disponible pour l'utiliser avec du texte aussi. Nous avons aussi la lumière et la couleur foncée que nous avons regardé plus tôt pour nos arrière-plans de conteneurs. Beaucoup de ces utilitaires peuvent également être utilisés sur différents éléments. nous limitons donc pas à apprendre des choses différentes ou des éléments différents. Nous pouvons également utiliser la flexbox CSS dans Bootstrap. Nous pouvons facilement ajouter flexbox à nos éléments avec le nom de classe du flex, qui signifie le type d'affichage de flexbox. faisant défiler vers le bas, nous pouvons définir les directions. Nous avons les colonnes et les lignes habituelles ainsi que l'inverse. Nous pouvons également justifier notre contenu. Alignez nos éléments, et accédez à l'une des propriétés de la boîte flexible que nous avons avec CSS standard, ou en ajoutant un nom de classe à tous les éléments. Nous avons également le dimensionnement si nous cliquons dessus, où nous pouvons définir la hauteur et la largeur de nos éléments. Donc, par exemple, si nous voulions que notre élément soit de 50 pour cent de large, utiliserait la classe de W-50. Nous pouvons remplacer le W par un H pour la hauteur, ce qui définira la hauteur de l'élément à 50 pour cent aussi. Nous avons également d'autres options telles que 100 pour cent et 25 pour cent, et nous en ferons usage tout au long de ce cours. Comme vous pouvez le voir, la plupart de ces noms se rapportent au CSS qu'ils appliquent et sont assez explicites, comme le texte à gauche et la bordure supérieure. Mais il y en a un que je veux vous montrer plus en détail, et c'est l'espace et l'utilité. L' espace et les utilitaires sont marge et rembourrage, et nous devons construire un nom de classe en trois ou quatre parties. Jetons donc un coup d'oeil à la façon dont nous pouvons faire ça maintenant. Nous pouvons appliquer des utilitaires d'espacement en utilisant Bootstrap en construisant le nom de classe opaque. Nous le faisons avec jusqu'à quatre propriétés différentes que nous pouvons combiner pour faire des noms de classe opaques ajoutés à nos éléments. Donc, la première chose que nous devons faire est de décider si nous voulons ajouter un espacement par une marge ou un remplissage. Nous le faisons en ajoutant un M pour marge ou P au début de notre nom de classe. La prochaine chose que nous devons faire est de décider dans quel côté de l'élément nous voulons appliquer l'espace. Nous pouvons l'appliquer au haut de l'élément, au bas, à gauche, droite, comme nous pouvons le voir ici. Ou nous avons aussi le x sur l'axe des y. Si nous l'appliquons au x, cela appliquera l'espacement sur la gauche sur le côté droit. L' axe y est vertical, donc nous allons appliquer cet espace en haut et en bas. N' oubliez pas que Bootstrap est construit et conçu pour être mobile d'abord. Donc, toute marge ou rembourrage que nous ajoutons par défaut, sera automatiquement appliquée aux petits appareils supplémentaires sous les deux. Nous pouvons ensuite ajouter un point de rupture optionnel tel que petit, moyen, grand ou extra large, où nous voulons modifier le réglage de la marge ou du remplissage. La pièce par défaut est à ajouter une taille de 0, 1, 2, 3, 4 ou 5 ou auto. Zero réinitialisera toute marge et rembourrage et supprimera ceci de nos éléments. Nous avons le numéro 3, qui est au milieu. Cela appliquera un espacement d'une RAM. Si nous allons plus bas que cela, c'est une demi-RAM, puis le numéro 1 applique un quart de notre RAM. La valeur de quatre est égale à 1,5 RAMs, puis la valeur de cinq est égale à trois RAM. Nous avons également la possibilité d'auto 2. Tout comme CSS régulier, c'est de cette façon que nous pouvons appliquer une marge zéro auto par exemple, et nous pouvons en faire usage. Donc, pour le premier exemple en haut ici, nous avons une jolie section standard avec un div imbriqué à l'intérieur. La partie orange du haut représente une certaine marge. Donc, comme nous le voyons ici, si nous voulions ajouter une marge à la div de la rangée supérieure, nous pourrions le faire en construisant une classe opaque. Nous pouvons commencer par sélectionner M parce que nous voulons que la marge s'applique. Après cela, nous sélectionnons à l'extérieur. Donc, l'un est de l'appliquer au haut de nos éléments, puis nous pouvons choisir les points d'arrêt facultatifs, ou nous pouvons laisser ce vide si vous voulez que cela s'applique à toutes les tailles d'écran. Après cela, nous sélectionnons ensuite l'espacement que nous voulons à la fin. Si nous voulons une RAM, nous irons pour une valeur de trois. Pour l'exemple suivant, nous avons un même div, je vais appliquer une certaine marge au haut et au bas aussi. Tout comme avant, c'est la marge, donc nous appliquons la valeur de M. Nous voulons que cela s'applique à la fois au haut et au bas. Donc, je peux utiliser l'axe y à l'intérieur ici. Encore une fois, nous n'allons pas utiliser de points d'arrêt spécifiques. Donc, au lieu de cela, nous pouvons ajouter une valeur, vous trucs à ça. Pour l'exemple supplémentaire, nous avons un rembourrage qui est représenté par le vert. Maintenant, puisque le remplissage est ajouté à l'intérieur des éléments, nous ajouterions cela à l'enveloppe principale plutôt que à la div, car cela appliquerait alors l'intérieur de nos éléments div. Donc, pour cet exemple, nous allons choisir P. Puisque nous sommes maintenant affaire de rembourrage. Nous ajouterons ensuite celui-ci à droite pour nous couvrir ici. Ensuite, n'importe quelle valeur que vous voulez choisir. Allons-y pour cinq dans cette affaire. Juste en dessous de cela, nous avons un rembourrage, mais nous voulons aussi l'appliquer sur le côté gauche et droit. Donc, plutôt que d'écrire deux règles distinctes, nous pouvons utiliser le rembourrage sur l'axe X. Donc, cet exemple serait padding sur le x. encore une fois, nous pouvons ajouter n'importe quelle valeur à l'intérieur ici. Nous pourrions également modifier cela pour inclure un point d'arrêt. Donc, si nous voulions que le rembourrage ne s'applique qu'aux appareils de taille moyenne et au-dessus, nous pourrions le faire en ajoutant un troisième argument facultatif. Ainsi, il peut ajouter un rembourrage sur l'axe des x, puis un tiret à un point de rupture de MD, puis la valeur de quatre. En bas, nous avons notre quatrième exemple, qui est de centrer et des éléments au milieu de notre div. La façon dont nous pouvons le faire est de profiter de la propriété auto, tout comme nous le ferions par exemple, dans CSS régulier. Si nous appliquons la marge zéro auto. Comme nous pouvons le faire, nous pouvons centrer cela au milieu de l'axe des x avec la valeur de M, puis x. ensuite définir la valeur pour être auto. Tout comme avec CSS normal lors de l'utilisation de la propriété auto, nous devons être conscients que le type d'affichage doit être réglé sur bloquer, et nous devons avoir une largeur déjà définie, sinon cela ne s'appliquera pas. C' est donc la théorie derrière l'utilisation de l'espace de noms et des utilitaires. Ensuite, passons à notre projet et mettons-en pratique. 9. Les outils en pratique: Revenons à notre projet, la première chose que je vais faire dans la première section en haut est de centrer tout ce texte au milieu. Nous pouvons le faire avec une classe simple. Si nous revenons à notre première section, à l'intérieur de l'enveloppe, tout ce que nous devons faire ici est d'ajouter la classe tout le centre de texte. Cela poussera tout le texte au centre de notre section. En outre, si vous vous souvenez d'un précédent, nous avons aligné la section au milieu en fournissant un décalage de trois colonnes sur le côté gauche. C' est bien et parfaitement correct à utiliser, mais je vais maintenant vous montrer une alternative, en utilisant Flexbox. Si nous supprimons le décalage d'avant, cela signifie que notre section est toujours la même, six colonnes de large, mais nous avons maintenant cela sur le côté gauche. Si nous étirons cela jusqu'à la plus petite taille, ce sera bien sûr toute la largeur sur les appareils plus petits ou moyens. Nous allons le repousser au centre en ajoutant la Flexbox à un conteneur. Le conteneur est la ligne. Nous pouvons définir le type d'affichage pour être flex et également ajouter la propriété de justifier contenu au centre. Enregistrez ceci, et comme prévu, nous ne voyons aucun changement sur le petit écran. Mais si nous étendons cela aux appareils de taille moyenne, c'est maintenant au centre de notre section pour lui donner un peu d'espacement. Nous pouvons également ajouter une marge et un rembourrage, que nous venons d'examiner. En commençant par la marge, nous construisons cela avec m pour marge, l'axe y disparaît seulement en haut et en bas et la valeur de cinq, sur le navigateur. Cela s'appliquera à toutes les tailles d'écran. Une fois que nous arriverons à la vue de l'écran plus grand, comme ici, nous allons surtout ajouter un peu de rembourrage pour le rendre un peu plus grand. Cela ne s'appliquera qu'aux points d'arrêt plus grands sur l'axe des y. Donc lg, la valeur de cinq. Maintenant, en bas de notre texte, qui est l'élément p. Nous allons utiliser la classe de plomb que vous avez déjà examinée. Cela fera ressortir le texte du paragraphe où vous avez juste besoin de la taille de la police et aussi du poids de la police. Bootstrap a également beaucoup de classes d'utilitaires pour les boutons. Nous pouvons ajouter ceci à notre lien. La classe de base que nous avons ajoutée à tous les boutons est btn. Ensuite, nous pouvons définir le type de bouton que nous voulons utiliser, avec la couleur. La couleur est définie avec les utilitaires de couleur que nous avons examinés précédemment, tels que primaire, secondaire, danger et succès. Je vais utiliser la classe d'info, qui est pour une couleur bleue. Nous pouvons appliquer cette couleur comme une couleur d'arrière-plan unie ou un contour de bouton. Tout d'abord, nous avons la couleur unie, qui est btn, suivie du nom de couleur de l'info, nous laissant avec la couleur de fond unie. Si nous voulions que ce soit juste la couleur sur le contour, tout ce qu'il faut faire est de changer cela pour être contour btn, suivi de la couleur juste après. Nous pouvons ensuite lier ces boutons à notre page de prix, que nous allons créer très bientôt. Défilement vers le bas jusqu'à notre section suivante. Nous pouvons également ajouter quelques utilitaires à cette section. Cela suffit avec le conteneur, nous pouvons ajouter la marge sur le haut et le bas comme une valeur de quatre, puis une valeur de remplissage de deux. Cela donnera à notre section avec la liste un peu d'espacement. La prochaine chose que je veux faire est d'aligner ces textes verticalement à l'intérieur de cette section. Nous pouvons le faire en ajoutant le CSS Flexbox, le conteneur. Nous pouvons ajouter le type d'affichage de flex, tout comme nous l'avons fait ci-dessus. Ensuite, la propriété CSS de align-item-center, et cela devrait maintenant pousser notre texte au milieu de la div. Vérifiez cela, semble également bien sur le petit écran. L' espacement a maintenant été appliqué. Ce n'est qu'un premier coup d'œil à l'utilisation des utilitaires Bootstrap et comment nous pouvons les utiliser pour rendre notre site vraiment bon et aussi être pleinement réactif. Nous allons également utiliser beaucoup plus d' utilitaires bootstrap au fur et à mesure que nous progressons dans notre projet. 10. Ajouter des icônes avec Fontawesome: À un moment donné, lors de la construction d'un projet, d'un site Web ou d'une application, vous pouvez ressentir le besoin d'ajouter des icônes pour le rendre plus attrayant visuellement. Dans le passé, j'ai construit mes propres icônes pour les projets, mais je ne suis pas un designer. Donc, pour moi et il peut être beaucoup plus pratique de contacter une bibliothèque tierce pour fournir ces icônes pour nous d'utiliser. Bootstrap n'a pas sa propre bibliothèque d'icônes de polices intégrée dans la version 4. Je vais vous montrer maintenant comment nous pouvons intégrer notre projet avec Font Awesome. Pour mon projet, je vais utiliser Font Awesome, qui est disponible sur fontawesome.com. Cela a des milliers d'icônes disponibles pour nous à utiliser et est aussi un plan gratuit aussi, que je vais utiliser. Nous pouvons commencer en cliquant sur « Commencer gratuitement ». Vous avez besoin d'un compte pour commencer, vous devrez donc ajouter votre adresse e-mail à l'intérieur de cette case, puis cliquer sur « Créer » à droite. Je suis déjà inscrit, donc je ne vais pas passer par le processus. Tout ce que vous devez faire est d'ajouter votre e-mail et vous recevrez également une confirmation par e-mail. Après avoir confirmé cet e-mail et configuré votre compte, vous serez redirigé vers une page qui ressemble à ceci. Une fois mis en place, cela nous donnera accès à un script que nous pouvons copier et ajouter cela dans notre propre projet. Prenons ceci et allons dans notre index.html. En regardant cela en haut de la page dans la section tête, donc je vais juste ajouter ceci au-dessus du CSS Bootstrap et c'est toute la configuration que nous devons faire. Maintenant, nous incluons des icônes dans notre projet, nous l'ajoutons en tant qu'élément HTML. Nous revenons au site Font Awesome, puis cliquez sur « Icônes » dans la navigation. Nous pouvons consulter certaines des icônes disponibles et aussi cliquer sur elles pour savoir comment les inclure. Avec les plans gratuits, il y a les versions solides et régulières de chaque icône avec le code HTML que nous devons inclure dans nos projets. Si nous voyons une police que nous aimons, tout ce que nous avons à faire est de copier le code HTML puis de le coller dans notre page d'index. Tout ce que nous avons ici est un élément AI avec un nom de classe. Tout d'abord, nous avons FAR, qui est pour Font Awesome Regular. Si nous choisissons cette option solide, ce sera FAS suivi du nom de notre icône, qui est actuellement le carnet d'adresses. C' est le nom que nous devons changer pour chaque icône. Maintenant, nous savons comment l'utiliser, je vais aller à notre projet et commencer. C' est la section que je vais créer maintenant en utilisant Font Awesome. Bien sûr, vous pouvez modifier ces icônes en fonction de votre thème particulier. Nous allons commencer avec un conteneur, puis configurer nos lignes et colonnes. Tout en bas juste au-dessus de notre JavaScript, créons notre section. On va avoir un liquide de récipient. Nous allons également définir le texte pour être au centre. Si nous disons la couleur de fond clair avec bg-light et aussi définir une certaine marge sur le haut et le bas, et aussi un peu de podium. Commençons par un titre de niveau trois, qui va être le texte de Power up avec un plan payant. L' étape suivante consiste à créer un div avec la ligne de classe, qui va être le conteneur pour nos sections, aussi une marge en haut et en bas avec une valeur de quatre. Ensuite, nous pouvons aller de l'avant et créer nos sections individuelles. Sur ma version finie, je vais avoir cinq sections côte à côte. Plutôt que d'inclure nos sections avec le nombre de colonnes, nous pouvons également simplement ajouter la classe de col. C' est une alternative simple que nous allons utiliser lorsque nous voulons que toutes les sections soient égales sur les appareils de toutes tailles. À l'intérieur, nous pouvons ajouter l'élément i que nous venons de voir sur Font Awesome. Nous pouvons commencer par le nom de la classe pour faire le solide du FAS. L' icône que je vais utiliser pour commencer est fa_users. Une autre classe qui est disponible en utilisant Font Awesome est la taille. Nous pouvons accéder à la taille avec fa, puis multiplier cela par cinq avec 5x. Ceci est égal à 5m et cette taille est également disponible jusqu'à 10x. Chacune de mes sections contient également quelques textes ci-dessous. Le premier est Multiple users, que je vais ajouter dans un élément p. Ensuite, un peu d'espace ou un peu de rembourrage sur le haut et bas de notre icône pour séparer cela de notre texte. Maintenant, cette première section est terminée. Allons dans le navigateur et rechargeons. Maintenant, comme nous n'avons qu'une seule section de col, c'est maintenant placé au centre. Lorsque nous ajoutons d'autres sections, elles prendront toutes le même espace disponible. Faisons ça. Maintenant, nous avons quatre autres sections à ajouter. Je vais copier cette section col, coller ceci juste en dessous. L' icône que je vais utiliser est la palette avec le texte de thème avancé. Cela devrait maintenant prendre la même quantité d'espace que le premier. Maintenant, nous avons juste besoin d'ajouter trois autres. Collez un autre dans. La troisième icône sera pour le globe et le texte qui est juste en dessous sera un support multilingue. L' icône suivante va être pour la synchronisation. Il s'agit du S-Y-N-C et du texte de synchronisation sur tous les appareils. Puis enfin, le dernier sera pour les modèles personnalisables. Celui-ci va avoir l'icône du fichier Alt. Vérifions cela dans le navigateur. Nous avons nos cinq colonnes égales. Si nous réduisons cela, sections égales essaieront de garder un espacement égal sur tous les périphériques d'écran, moins qu'il n'y ait pas assez d'espace d'écran disponible où elles tomberont sur une nouvelle ligne. Vous pouvez également remarquer une différence dans la couleur de l'icône pour ma version finale et c'est quelque chose que nous pouvons définir dans notre propre feuille de style. Comme pour toutes les finales dans Bootstrap, nous pouvons appliquer notre propre feuille de style pour remplacer l'une des classes. Dans notre projet, je vais créer un nouveau fichier appelé styles.css. Ensuite, dans notre page d'index, nous pouvons lier cela dans la section tête. Ajoutez notre lien sous le CSS Bootstrap. Le chemin d'accès au fichier est simplement styles.css. On peut alors ouvrir ça. Ensuite, tout ce que nous devons faire est de cibler nos icônes qui est l'élément i, puis de définir la couleur. La couleur que je vais choisir est 40b7ad nous donnant la couleur verte tout comme la version finale. L' ajout d'icônes pour un projet ou une application peut avoir un réel impact visuel, et nous n'avons pas besoin d'être un concepteur ou de dépenser beaucoup d'argent pour les rendre beaux non plus. Ensuite, dans la prochaine vidéo, nous allons poursuivre notre projet en regardant l'ajout d'images et d'utilitaires d'images. 11. Travailler avec des images: Si vous avez compris tout ce que nous avons fait jusqu'à présent pendant ce cours, cette vidéo ne devrait pas vous choquer ou vous causer des problèmes. Nous allons créer une nouvelle section, mais cette fois nous sommes concentrés sur l'ajout d'images. Tout comme avec le reste des sections bootstrap que nous avons examinées. Nous allons commencer par ajouter dans notre HTML et ensuite nous pouvons intégrer bootstrap en ajoutant quelques classes CSS. Sur Bootstrap, nous pouvons également ajouter du JavaScript en arrière-plan aussi. Avant de commencer à regarder les images, nous devons ajouter un petit projet avec lequel travailler. Ce cours est fourni avec un dossier d'images, que vous êtes libre d'utiliser. Ou vous pouvez télécharger le vôtre si vous préférez. Ce dossier d'images est sur mon bureau et je veux le faire glisser dans notre dossier de projet. Si nous nous dirigeons vers la version finale et jetez un oeil à cela. C' est la section des icônes que nous venons de créer. Juste en dessous, voici la section que nous allons créer maintenant. Toutes ces quatre images sont fournies avec le cours ainsi qu'un sample.jpg sur appel réel. Cela ne sera pas inclus dans le projet final, mais plutôt pour essayer quelques nouvelles classes que nous pouvons utiliser sur les images et nous pouvons jeter un oeil à cela maintenant. Donc, au projet, tout d'abord dans le cyber-nous avons nos quatre images et ensuite nous avons notre sample.jpg. Nous pouvons vérifier cela dans notre index.html. Nous allons donc inclure cela n'importe où au bas de la page. Nous pouvons inclure une balise HTML standard, donc cela est stocké dans le dossier Images, puis le sample.jpg. Si nous allons maintenant à notre projet, recharger, c'est l'exemple d'image. Si nous réduisons le navigateur à une taille plus petite, vous remarquerez que l'image disparaît du bord du navigateur. Ce n'est généralement pas quelque chose que nous voulons voir. Nous voulons que l'image soit à 100 % de la largeur disponible. Nous pouvons le faire en ajoutant une classe bootstrap appelée fluide d'image, qui va nous aider. Donc, ajoutons ceci à nos éléments d'image. Donc img-fluids et maintenant quand nous rechargeons le navigateur, l'image devrait maintenant être réduite, adapter à la taille de l'écran disponible. Nous ne voyons plus l'image disparaître du bord du navigateur et il y a aussi quelques classes supplémentaires que je veux vous montrer. Beaucoup d'entre eux ne sont même pas spécifiques aux images avec le travail bien avec des images de toute façon, comme définir la largeur d'un élément comme un pourcentage et c'est quelque chose que nous avons examiné auparavant dans les utilitaires. Donc, nous pouvons ajouter la largeur de l'image, largeur w, puis tiret et en pourcentage et nous voulons essayer le numéro 25. Rechargez le navigateur et c'est maintenant 25 pour cent de large. Nous pouvons également changer cela en surévaluation tels que 50,75,100, et auto. En plus de changer le w pour être un h2 et cela affectera la hauteur d'un élément. Ensuite, je vais copier et coller cette ligne, puis jeter un oeil à la classe arrondie. Cette classe arrondie appliquera des coins arrondis à notre image et rendons cela un peu plus grand, afin que nous puissions voir plus clairement. Cela applique le rayon sur les quatre côtés. Si nous voulions l'appliquer uniquement en haut, à droite, en bas ou à gauche. Nous pourrions aussi changer notre classe pour être arrondie en haut, arrondie à droite, et ainsi de suite. Si nous voulions que les coins soient complètement arrondis, plus comme un cercle, nous pourrions changer cela pour être arrondi, -cercle. Ce sera plus comme un cercle si l'image a la même largeur et la même hauteur, mais parce que l'image est plus large, elle semble être plus étirée. Une autre option que nous avons qui est similaire au cercle est la pilule. Cela appliquera des coins arrondis et laissera également un haut et un bas plats. Alors jetons un coup d'oeil à cela en action, rafraîchissons et cela nous donne la forme d'une pilule. Un autre utilitaire d'image que nous pouvons utiliser est la miniature de l'image. Donc, c'est img-thumbnail et cela appliquera une bordure entourant l'image. Rendons cela un peu plus grand, il peut être difficile de voir. Si nous zoomons, nous pouvons voir que l'image a une bordure entourant les quatre côtés avec un coin arrondi. Nous pouvons également utiliser float avec des images aussi et cela vaut également pour d'autres éléments. Donc, par exemple, si nous avons dit flotteur droit. Cette image va désormais circuler à droite du reste du contenu. Ce n'est donc qu'un avant-goût de ce que nous pouvons faire avec les images. Comme mentionné précédemment, certaines de ces classes, ainsi que d'autres, s'appliquent à beaucoup d'éléments différents, donc nous ne sommes pas limités à les utiliser uniquement avec des images. Mettons maintenant cela en pratique à l'intérieur de nos projets en construisant une nouvelle section. Supprimons ces exemples d'images et comme jamais nous allons commencer par une section qui va avoir une classe. Cette fois, je vais juste utiliser la classe de conteneur, donc ce n'est pas la taille du fluide et ensuite aligner le texte au centre. Aussi, comme avec les autres sections, hésitez pas à en faire la propriété et à inclure toutes les images ou textes différents que vous préférez. Imbriqué à l'intérieur, nous avons notre rangée. Cette ligne va être divisée en deux sections égales sur les périphériques moyens. Allons de l'avant et ajoutons nos noms de classe de col-md-6 et nous pouvons dupliquer cela à l'intérieur de notre première ligne. Travaillons avec la première section. Donc, ce sera sur le côté gauche sur les appareils moyens et au-dessus. Un titre de niveau 2, qui est pour le texte du calendrier multi-vues. Donc, ce sera le titre de notre première image de sur le site fini. C' est le texte que vous voyez ici, suivi des éléments AP puis de notre image. C' est également la même chose sur les tailles d'écran plus larges. Mais au lieu de cela, nous avons ces côte à côte. Donc, après notre titre, nous pouvons ajouter un élément p avec une classe que nous avons utilisée avant de plomb. Cela rendra notre texte remarquable et un texte de ne jamais manquer une date à nouveau. En bas, nous pouvons ajouter notre image, qui est stockée dans le dossier images. Sur le premier que je vais utiliser est le calendar.png, l' ancien texte de l'icône de calendrier, puis le nom de la classe va être w 50, pour faire 50 pour cent de large. Donc c'est notre première section, donc je vais copier notre titre, notre paragraphe et aussi notre image, puis descendre à notre deuxième section, à cette fin. Le texte dans celui-ci est flexible pour faire des listes et je vais juste en faire une majuscule, la balise lead va être : des tâches claires comme un pro. L' image, cette fois va être pour notre liste et n'oubliez pas de changer l'ancien texte aussi. Donc avant d'aller plus loin avec notre ligne, vérifions que tout semble bien et c'est notre première rangée, maintenant terminée. De retour à notre éditeur de texte, nous allons créer une deuxième ligne. Commençons par saisir notre premier, puisque la structure sera la même. Nous pouvons coller cela, toujours dans notre section et comme avant, tout ce que nous avons à faire est de changer notre texte et l'image. Donc, le texte est collaborer et ensuite travailler avec tous les membres de l'équipe. L' image est pour le chat et aussi changer l'ancien texte aussi, les cours peuvent rester les mêmes et le pour le téléphone, niveau deux en-tête est la prise de notes. Le texte principal est prendre des notes sur la route et l'image est note avec les anciens textes aussi. Donc tout ça a l'air bien, maintenant nous avons nos deux sections à l'intérieur de nos rangées. Allons dans le navigateur et voyons à quoi cela ressemble. Donc, cela a l'air bien sur les plus grands écrans. Rétrécissons ça. Cela semble bien, peut-être juste un rembourrage sur le haut et le bas de nos sections. Nous pouvons le faire dans nos divs environnants juste après appel-md-6 pudding y. Allons pour une valeur de quatre et nous pouvons rendre cela égal sur les quatre de nos sections. pudding y4 et aussi le dernier aussi, rafraîchir et ce sont nos images maintenant ajoutées à notre projet. Super donc maintenant vous savez comment appliquer le style aux images avec Bootstrap. L' une des grandes choses aussi, ainsi que la plupart des cours que nous venons apprendre s'appliqueront également à d'autres éléments aussi. Nous ne sommes pas limités à les utiliser uniquement avec des images. Enfin, ne vous sentez pas comme si vous deviez mémoriser toutes ces classes au fur et à mesure que nous continuons. Si vous êtes bloqué, tout ce que vous devez faire est d'utiliser la documentation Bootstrap comme référence. 12. Lignes imbriquées et citations en bloc: Lorsque nous travaillons jusqu'à présent avec nos projets, nous avons examiné une structure comme celle-ci. Nous avons ajouté des lignes à l'intérieur de nos projets. Ensuite, nous avons divisé nos lignes en nombres de colonnes. Par exemple, nous avons une section à six parties à gauche et six colonnes à droite. Nous divisons notre ligne en deux parties égales. Et si nous avions une situation où nous voulions aussi diviser l'une de ces sections ? Si on avait une rangée comme ça. Ensuite, notre section de six colonnes sur le côté gauche. Nous avons parfois un cas où nous voulons diviser cette section et aussi utiliser notre système de grille à l'intérieur ici. Les quatre premiers seraient presque exactement les mêmes qu'avant. Nous pourrions ajouter six colonnes à droite, puis six colonnes à gauche à l'intérieur d'un div. Eh bien, ce n'est pas la façon dont nous devrions le faire dans Bootstrap. C' est parce que Bootstrap exige que nos colonnes soient uniquement un enfant direct d'une ligne. La bonne façon d'aborder cela serait de créer une nouvelle ligne imbriquée à l'intérieur de nos colonnes. Par exemple, nous l'aurions comme ça. Où nous allons créer un nouveau div ou de nouveaux éléments avec la classe de ligne. Ensuite, cela nous permettra d'utiliser à nouveau le système de grille à 12 colonnes. Nous pouvons maintenant diviser cette ligne en autant de sections que nous le souhaiterions. Si nous voulions appliquer trois sections différentes à notre ligne, nous pourrions appliquer nos colonnes. Cela pourrait être quatre parties, quatre parties au centre, puis quatre parties sur le côté droit. C' est la bonne façon d'aborder les lignes et les colonnes imbriquées à l'intérieur de Bootstrap. Sur la version finie, nous pouvons utiliser cette configuration de ligne imbriquée ici tout en bas. J' ai limité cette section extérieure à seulement huit colonnes de largeur plutôt que la pleine largeur de 12 colonnes. Puisque nous utilisons des colonnes pour y parvenir, nous ne pouvons pas imbriquer directement ces témoignages en tant qu'espaces de colonnes égaux. Mais au lieu de cela, c'est comme nous l'avons découvert auparavant, nous pouvons créer une deuxième rangée imbriquée à l'intérieur et ensuite nous avons accès à notre système de grille de 12 colonnes, une fois de plus à l'intérieur de cette ligne. Même si ce wrapper externe a huit colonnes de large, la ligne imbriquée interne aura toujours les 12 colonnes complètes disponibles. Passons au projet et créons ceci au bas de notre page d'index. Donc, juste avant notre JavaScript, nous créons notre section. Je vais lui donner un liquide contenant, une marge en haut et en bas, un rembourrage en haut et en bas aussi. J' ai besoin d'une couleur de fond claire. L' étape suivante consiste à ajouter une ligne à l'intérieur ici. Ce sera notre ligne initiale, qui va contenir la div initiale, qui a huit colonnes de large. Cela va être sur les appareils de taille moyenne. Donc, nous utilisons la classe de col-md-8 pour garder cela au centre. Nous pouvons également fournir un décalage sur les appareils moyens, sur la valeur de 2. Enfin, le centre de texte, pour aligner notre texte au milieu de notre section. Tout cela va être à l'intérieur ici est un titre de niveau 3 et cela va avoir la classe de py dash 3, pour vous donner un peu d'espacement sur le haut et le bas. Le texte, comme nous pouvons le voir si nous passons à la version finale, sera ce que nos utilisateurs ont à dire. Ajoutons ceci dans notre rubrique, sauvegardez ceci, et vérifiez ceci dans le navigateur. Au bas de notre page, un bas ne peut pas voir cela à cause de l'arrière-plan. Cette section est large de huit colonnes. Maintenant, pour créer nos deux sections à l'intérieur, nous devons créer une ligne imbriquée. Revenons à notre projet. Nous allons ajouter ceci juste après notre rubrique de niveau 3. Donc, un div avec la classe de la ligne. A l'intérieur d'ici, nous pouvons accéder au système de grille de 12 colonnes. Cependant, gardons cela plus étroit. Je vais créer deux sections, qui sont cinq colonnes chacune. Nous pouvons le faire, puis décaler le reste du contenu avec la flexbox. Donc, tout d'abord, nous pouvons ajouter un div et nous pouvons ajouter une classe de simplement col-5. Cela définira la section sur toujours cinq colonnes de largeur, quels que soient les points d'arrêt. Je vais dupliquer ceci pour ajouter nos deux sections à l'intérieur de notre ligne imbriquée et ensuite nous pouvons les espacer, nous justifions le contenu autour. Cela ajoutera un espacement égal autour de nos deux sections. Puisque nous avons une couleur de fond gris clair, je vais aussi les compenser avec une couleur différente. Nous pouvons utiliser bg white ou nos deux sections imbriquées, et aussi un rembourrage tout autour, ce qui va être une valeur de 4. Je vais copier ces deux-là et les ajouter à notre deuxième section. À l'intérieur de la première section à gauche, nous allons ajouter quelques critiques ou quelques citations. Tout comme nous pouvons le voir ici, nous allons ajouter un exemple de texte et ensuite nous pouvons ajouter un utilisateur qui l'a cité juste en dessous. Nous pouvons le faire avec un blockquote, qui est un élément HTML standard. Mais nous pouvons également ajouter une classe bootstrap de blockquote à l'intérieur d'ici aussi. Imbriqué à l'intérieur en tant qu'élément p. Je vais également ajouter du texte Lorem Ipsum est en tapant lorem, puis appuyez sur Tab. Nous pouvons le faire dans Visual Studio Code. Si ce n'est pas disponible, il vous suffit de taper un exemple de texte ou un devis de votre choix. Quand nous utilisons blockquote, nous pouvons également ajouter un pied de page, qui va être le bas de notre section de citation et Bootstrap a également une classe disponible pour cela, qui est simplement blockquote-pied. Cela va être la source de nos citations. Je vais dire « Utilisateur de plan gratuit » et ensuite nous pouvons utiliser les éléments du site, qui est HTML, pour citer un utilisateur. Je vais dire « Capitaine anonyme ». Passons au navigateur et vérifions cela. On y va. Il y a nos deux sections imbriquées à l'intérieur de notre rangée. Nous avons juste besoin de dupliquer ça pour le côté droit. Donc, nous avons déjà notre div environnant pour cette section. Prenons le blockquote et faisons usage de ces mêmes classes. Je vais juste changer cela pour être un utilisateur de plan Pro. Dans cette section de pied de page, nous avons une nouvelle classe de pied de page blockquote. Ceci est généralement utilisé pour identifier la source du devis et souvent combiné avec les éléments du site, qui est utilisé comme enveloppe pour le nom des sources. Maintenant, sauvegardons ceci et voyons à quoi cela ressemble. Nous avons maintenant nos deux citations, côte à côte. C' est ainsi que nous pouvons imbriquer des lignes en utilisant Bootstrap. Nous pouvons créer autant de colonnes ou autant de lignes imbriquées que nous le souhaiterions. Mais rappelez-vous toujours que lors de la création de nouvelles colonnes, nous avons toujours besoin d'un rappeur parent comme une ligne. Ensuite, nous allons nous concentrer sur la façon de créer une navigation réactive, que nous allons inclure en haut de notre projet. 13. Barres de navigation et boutons à bascules: Nous allons maintenant nous concentrer sur l'un des facteurs les plus importants sur tous les sites web, et c'est la navigation. Pour que notre site soit pleinement réactif lorsqu'il s'agit de navigations, nous avons besoin d'un moyen de veiller à ce que nos liens de navigation soient non seulement bons, les livres soient également entièrement accessibles et réactifs. C' est ce sur quoi nous allons nous concentrer dans cette vidéo, plongons et jetons un coup d'oeil. Lorsque vous traitez des navigations sur des sites Web généraux, une approche commune que vous pouvez voir serait quelque chose comme ceci. Sur la gauche, nous avons une vue de bureau typique où nous aurions une navigation, un logo d'un côté, puis nos liens de navigation de l'autre. Lorsqu' il s'agit de petits écrans mobiles, nous avons souvent besoin d'une approche différente, car il y a moins d'espace disponible pour l'écran. Ce que nous allons généralement voir en haut est une navigation, où nous avons un bouton que nous allons fournir des liens lorsque nous cliquons dessus, est souvent les mêmes liens que nous avons sur la vue complète du bureau, mais juste caché jusqu'à ce que nous cliquons sur le bas . Comment abordons-nous cela en utilisant Bootstrap ? Eh bien, la façon dont ça fonctionne, c'est qu'on crée deux sections. Nous avons une section pour tous les éléments de la liste, puis nous avons une deuxième section pour notre bouton. Nous créons ensuite un lien entre ceux-ci via un ID, et nous allons jeter un oeil à la façon de le faire ensuite. Nous fournissons ce lien avec notre ID, dans les coulisses, Bootstrap gérera également le JavaScript pour que tout cela fonctionne des points séparés. Passons maintenant à notre projet où nous pouvons maintenant appliquer notre navigation. Faire de bons progrès avec nos projets et maintenant nous allons revenir au sommet de notre projet et créer la navigation. Si vous passez à la version finale, nous allons créer quelque chose qui ressemble à ceci. Nous aurons le logo sur le côté gauche, nous aurons également nos liens libres sur le côté droit pour la navigation. Si nous faisons défiler vers le bas jusqu'à un petit écran, nous obtenons un bouton déroulant, qui lorsque vous cliquez sur pour révéler nos liens sur les petites tailles mobiles et tablettes, sorte qu'il semble beaucoup mieux sur les écrans plus petits. Nous allons maintenant créer le projet SNR du haut de notre section carrosserie. Retour à la page d'index, faites défiler jusqu'à notre corps. Regardons l'intérieur ouvert, qui est juste là. Nous allons commencer par un wrapper de barre de navigation, qui va avoir un titre de site et un logo. Je vais utiliser l'élément nav pour le faire. Ce piège nous fournit également quelques classes que nous pouvons utiliser pour la navigation, la première est simplement navbar, que nous allons ajouter flexbox, je suis positionné avec un rembourrage. Ensuite, je vais ajouter navbar, se développe, - LG. Ce qui est le contenu BD vue pleine largeur sur nos grands écrans. Bien sûr, nous pouvons changer le point de rupture pour être autre chose comme MD Si nous préférons et ensuite ajouter un peu de chlore par assister aux lumières de la barre de navigation. Imbriqué à l'intérieur de nos éléments de navigation, nous allons ajouter un lien, qui est pour le titre de notre site, ou nous pouvons avoir un logo à l'intérieur de la si vous préférez. Je vais commencer par un nom de classe. La classe que nous devons ajouter est la marque navbar, que vous allez ajouter notre CSS pour l'espacement et la taille dans le titre de notre site. Nous pouvons ajouter le nom de la productivité bootstrap ou le nom de votre choix. Maintenant, sous le titre de notre site, nous pouvons ajouter nos deux sections que nous avons mentionnées précédemment, qui sont les liens et aussi le bouton, les liens togglese ouverts et fermés. Commençons par notre bouton de base, qui va avoir un type de bouton. Cela va contrôler nos liens, que nous pouvons ajouter à l'intérieur de cette div. Nous allons simplement créer une liste non ordonnée pour l'instant. Ensuite, nous pouvons dire à bootstrap que ce bouton est de contrôler ces éléments de liste en ajoutant d'abord un ID. Ajoutons l'ID à tous les liens. À l'intérieur d'ici, je vais ajouter l'ID en tant que navbar-nav, et ensuite nous pouvons passer cela au bouton en tant qu'attributs de cible de données. À l'intérieur de la balise d'ouverture, nous ajoutons les cibles de données et définissons ceci comme notre ID, donc nous l'utilisons comme un sélecteur CSS. Nous utilisons le hachage car il s'agit d'un ID, puis le nom d'ID de navbar-nav. Ce bouton contrôle maintenant nos éléments de liste, et nous pouvons lui dire d'afficher et de masquer le contenu en définissant bascule de données, réduire. Encore une fois à l'intérieur du bouton, nous configurons notre bascule de données et définissons cela égal à l'effondrement. Avec cela maintenant lié, l'étape suivante consiste essentiellement à ajouter les classes Bootstrap requises et aussi quelques attributs d'accessibilité pour terminer les choses. En commençant par le bouton, nous pouvons également les ajouter sur le site en ligne afin qu'il soit plus lisible. L' attribut suivant sera pour notre classe, et le nom de la classe sera navbar-toggle, qui va ajouter du remplissage, dimensionnement et aussi une bordure. La prochaine fois, nous allons ajouter quelques attributs pour rendre notre site plus accessible. C' est pour les personnes utilisant des lecteurs d'écran ou ayant un handicap. Rendez notre site aussi accessible que possible. Le premier attribut que nous allons ajouter est les contrôles aria, et définissez cela égal à notre ID, qui est navbar-nav. S' assurer que c'est le même nom que nous donnons à l'ID juste en dessous, afin qu'il corresponde à nos liens. Nous devons comprendre où le bouton cible un élément pliable, c'est-à-dire notre liste. Ensuite, nous avons aria élargi. Je vais définir ceci pour être une valeur de false. Cela indiquera aux lecteurs d'écran si notre liste est étendue ou réduite à un moment donné, et nous définissons cette valeur sur false si l'élément pliable va être fermé par défaut, ce qui est parce que nos liens ne vont pas être développés jusqu'à ce qu'un utilisateur clique sur ce bouton. La dernière que nous devons ajouter est l'étiquette aria, qui va être définie pour basculer la navigation. Cette étiquette peut être n'importe quel nom de notre choix, et ceci est un texte fournit à l'utilisateur un nom reconnaissable. La dernière partie de ce bouton est d'ajouter les trois lignes. Toutes ces icônes gratuites que vous voyez sur la vue de petit écran. Ceux-ci peuvent être ajoutés en utilisant un élément span avec une classe Bootstrap. Ajoutons ces éléments de span entre l'ouverture du bouton et la balise de fermeture. Nous n'avons pas besoin d'ajouter de contenu entre notre plage. Tout ce que nous devons faire est d'ajouter la classe de l'icône de toggler navbar. Maintenant, si nous donnons ceci une sauvegarde et aller sur le navigateur à tous les projets, il se recharge, avec notre bouton et aussi le titre de notre site. Ensuite, nous devons ajouter dans nos liens. Revenons à notre navigation et cherchons notre liste non ordonnée, où nous allons commencer par ajouter une classe à ce wrapper. Le nom de classe sera navbar-nav, qui va contrôler toutes les marges et pardon, et aussi supprimer la liste par défaut [inaudible]. Cela fait également usage de la flexbox aussi. Ensuite, nous pouvons créer nos éléments de liste et encore une fois, ceux-ci vont avoir une classe Bootstrap et cela va être nav avec un élément imbriqué à l'intérieur. Cela a aussi une classe, le nom de classe pour les liens va être nav link, qui va supprimer tout chlore de lien par défaut, et définit également toute marge et rembourrage requis. Cela va juste faire un lien vers notre page d'index, donc nous pouvons ajouter dans le index.html. Puisque ce sera le lien d'accueil, prenons cet élément de liste, puisque nous allons l'inclure deux fois de plus. Le deuxième lien sera celui de la tarification. Nous n'avons pas encore créé cette page. Pour cela, vous allez créer un lien vers le pricing.html. C' est juste que notre troisième et dernier lien sera pour les entrepreneurs. Encore une fois, nous n'avons pas créé de page contact.html, mais nous allons le créer très bientôt. Sauvegardons ce fichier maintenant et vérifions cela dans le navigateur, appuyez sur recharger. Sur un petit écran, nous voyons tout le contenu. Nous voyons à la fois le bouton et aussi les liens. Si nous allons à la vue grand écran bouton est en cours de suppression, et nous ne voyons que les liens. Nous pouvons corriger cela et cacher ces liens sur la plus petite vue d'écran en ajoutant des classes de besoin de collapsus et que navbar s'effondre à la div environnante. Retour à notre navigation, nous devons chercher notre div qui entoure nos liens avec l'idée de navbar-nav, et nous devons ajouter une classe d'effondrement et aussi navbar-collapsus aussi. Passons au navigateur et voyons si cela résout notre problème. C' est mieux sur les petits écrans. Si nous développons cela, nous voyons maintenant que le bouton a été supprimé et les liens apparaissent. Nous pouvons essayer de développer cela en cliquant sur le bouton, et nous obtenons nos liens sur la vue à petit écran. La dernière chose à faire est de déplacer nos liens vers le côté droit sur la vue grand écran. Plutôt que d'être contre le titre du site, nous les voulons sur le côté droit. Nous pouvons facilement le faire avec la boîte CSS flex en ajoutant la classe de fin de contenu justifiant dans la même affaire que précédemment, qui entoure les liens. On peut ajouter ça ici. Il pousse maintenant nos liens vers le côté droit de la navigation. Même vous auriez un menu de navigation déroulant entièrement réactif et accessible. 14. Cartes, sets de cartes et jeux de cartes: Nous allons maintenant jeter un oeil à l'utilisation de cartes dans Bootstrap, et vous pouvez penser à une carte comme un conteneur pour quelques informations. Un cas d'utilisation typique pourrait être une mise en vente de produits sur un magasin de commerce électronique, comme nous le voyons ici. Nous pouvons commencer notre liste publique avec une classe de wrapper de code et également utiliser beaucoup de classes, que Bootstrap fournit pour mettre en page notre contenu. À l'intérieur de notre emballage, nous pourrions avoir une image de carte, puis en dessous, nous pouvons également avoir un corps de carte pour envelopper tout le reste du contenu. Selon le cas d'utilisation pour le corps de la carte, peut également contenir un en-tête et une section de pied de page. Toutes les autres informations de notre produit telles qu'un titre de carte, un sous-titre et aussi le contexte de notre description. Parallèlement à cela, nous sommes également libres de fournir n'importe quel balisage HTML, dont vous pourriez avoir besoin, comme le bouton « acheter maintenant ». Nous pouvons donner ce look et sentir exactement comme nous le voulons. Maintenant, nous allons passer à notre projet et appliquer cette structure de carte à notre page de prix des produits. Mentionné pour lors de la création de nos liens de navigation, nous devons maintenant créer une page Prix et Contactez-nous. Nous allons commencer à travailler maintenant sur la page de prix et introduit des cartes Bootstrap. Voici à quoi ressemblera la page de prix finale. Nous allons utiliser les cartes pour créer cette mise en page, qui va contenir nos sections de prix gratuits en utilisant certaines des classes que nous venons de rechercher auparavant. Si vous voulez également en savoir plus sur les cartes Bootstrap, nous pouvons vous rendre à la documentation, et nous pouvons le trouver dans le lien des composants. Bien sûr, n'hésitez pas à jeter un oeil à travers ces documents de carte que je vais sauter dans le projet et travailler avec ces sections de prix. Commençons par créer notre nouveau fichier pour notre page de prix à l'intérieur des racines de notre répertoire. Nous voulons appeler ce code HTML de tarification, car il s'agit d'un fichier HTML. Encore une fois, nous devons remettre tous les liens de boost. Nous allons également utiliser le même en-tête pour être cohérent aussi. Je vais avoir une longueur d'avance en allant à la page d'index, en sélectionnant tous les saisir, puis en collant ceci dans notre page de tarification. Juste au-dessus de notre JavaScript, nous pouvons supprimer les sections non requises, donc nous n'avons pas besoin de la section inférieure avec la ligne imbriquée. Nous n'avons pas besoin des quatre images pour pouvoir les supprimer, nous n'avons pas besoin de la section avec les icônes, cela peut aussi aller, et enfin, nous n'avons pas besoin des éléments de groupe de liste. Donnons à ce fichier une sauvegarde, et si nous passons au navigateur, allons cliquer sur le lien de tarification, et nous restons avec la même section de navigation et d'en-tête supérieure. La prochaine chose à faire est de changer le titre du site, ouvrir la tête. À la fin de cela, je vais ajouter des prix, puisque c'est la page de tarification. Maintenant, faisons défiler vers le bas et nous pouvons créer notre nouvelle section pour toutes les cartes. Au bas de la section du corps, juste au-dessus de notre JavaScript, nous pouvons ajouter notre nouvelle section. Cela va avoir la classe de conteneur, donc c'est une taille fixe imbriquée à l'intérieur ici. Je vais créer un div, qui va être un wrapper pour les sections de cartes gratuites. Cela va avoir une classe qui va être égale à card-deck. Nous examinerons cela plus en détail lorsque nous aurons des cartes à utiliser. Pour l'instant, nous pouvons ajouter une valeur de marge de trois en haut et en bas et aussi aligner le texte au centre. Maintenant, nous pouvons aller de l'avant et créer notre première carte. Cela va avoir un div comme wrapper avec la classe de la carte. La classe de carte définira la position, le type d'affichage à être lin, le mot goutte sur les couleurs générales et les bordures. Puis à l'intérieur, je vais créer de nouvelles sections. Nous allons créer l'en-tête de la carte et aussi le corps de la carte. Commençons par la section d'en-tête en haut, c'est l'en-tête de la carte. A l'intérieur, cela va avoir une rubrique de niveau 4, avec le prix du plan. La rubrique de niveau quatre et le premier prix va être gratuit, cela prend également dans une classe Bootstrap de polices de poids normal. Quels autres sons, nous allons définir les téléphones pour avoir un poids de normal, et ceci est imbriqué à l'intérieur de notre section d'en-tête. Cette classe d'en-tête de carte va ajouter un rayon au haut de la carte, peu d'espacement et aussi toutes les couleurs. Juste après cette section d'en-tête, nous pouvons créer notre section corps. Comme prévu, cela va avoir la classe de corps de la carte qui va définir la flexbox croître et réduire les valeurs ainsi que l'espacement et le dimensionnement. A l'intérieur de notre rubrique de niveau 2, qui va avoir le prix du plan. Une classe de titre de carte, qui ajoutera quelques marges à la boîte de notre titre. C' est un plan gratuit, donc le prix va être nul suivi par les petites étiquettes où nous allons avoir la barre oblique avant puis le mois. Cela a également une classe qui est fournie par Bootstrap et cela va être le texte en sourdine. Si nous disons cela, nous pouvons voir exactement ce que fait cette classe. Rechargeons notre page de prix, ce qui la rend plus petite et une couleur différente. Après le titre de niveau deux, nous pouvons ajouter le texte de la carte à l'intérieur d'un élément p. Cette classe de texte de carte lorsque vous utilisez un Bootstrap est utilisée pour la plupart de nos textes dans la carte, comme une description de produit, et notre description sera « Essayez-le gratuitement pour toujours ». Ci-dessous, nous pouvons créer notre propre liste de commandes. La liste non commandée va avoir certaines fonctionnalités à propos de ce plan de tarification. Ce qui est exactement inclus dans la liste non ordonnée a une classe Bootstrap de liste sur les styles. Cela supprimera toutes les listes d'entrées de styles. Nous pouvons ajouter une marge sur le haut et le bas comme une valeur de quatre, puis créer notre liste d'éléments à l'intérieur. La première fonctionnalité pour le plan gratuit, je vais ajouter un téraoctet de stockage, et nous pouvons dupliquer ce cinq fois de plus, diminuer plus de fonctionnalités. C' est x pour le second va être des centaines de thèmes pré-construits. Comme je vais aller de l'avant et ajouter n'importe quel texte que vous voudriez à l'intérieur de cela pour en faire votre propre. Je vais ajouter ensuite le calendrier et la planification. Si tout le point va être des rappels et des alertes, deuxième à dernier sera la liste et les pages illimitées. Puis enfin, des étiquettes personnalisées. Rappelez-vous que nous avons déjà dit que lors de l'utilisation d'une carte, nous sommes libres d'ajouter tout autre HTML personnalisé que nous aimons, nous ne sommes pas limités à utiliser les classes de cartes et la mise en page que Bootstrap suggère. Sur la liste non ordonnée, nous pouvons également ajouter des choses telles que des boutons, et ce sera un lien pour commencer. Ce bouton va également avoir le type de bouton. La base met en classe de btn, puis btn bloc, ce qui en fera la pleine largeur de la page. Nous pouvons voir cela si nous sauvegardons cela et actualisons, cela fera le bouton étirer toute la largeur de la carte. Nous pouvons voir cela plus clair si nous ajoutons un contour de bouton. Je vais ajouter ceci comme l'info de contour du bouton, et on y va. Puisque Bootstrap est d'abord mobile, c'est toute la largeur de la page, puisque nous n'avons qu'une seule carte. Mais maintenant je vais aller de l'avant et répéter ceci pour la carte numéro 2, et 3 et nous pouvons voir quel effet cela aura. Prenons notre carte, la div environnante. Nous pouvons copier ceci, en nous assurant que nous gardons la div environnante avec la classe de jeu de cartes. On peut y coller deux fois de plus. Pour le milieu, je vais changer cela pour être le plan Pro plutôt que gratuit. On peut le changer pour être pro. Votre prix peut être de 10$ par mois. Les mises à niveau de texte de carte accès aux fonctionnalités Pro. Je ne vais pas aller de l'avant et changer tous ces éléments de liste parce que cela fera pour une vidéo assez ennuyeuse. Mais bien sûr, allez-y et changez-les si vous souhaitez voir vos projets. Tout ce que je vais faire ensuite est de changer le bouton de « Démarrer » à « Mettre à niveau ». Le troisième, ça peut être pour l'entreprise. Nous pouvons changer le prix une fois de plus, allons-y pour 29, le texte, les utilisateurs illimités, et le stockage supplémentaire, puis changer le bouton à la fin d'une petite mise à niveau b. Puisque ce sont tous les deux des plans payés sur le deuxième et le troisième, je vais aussi changer le bouton pour être légèrement différent. Plutôt que d'utiliser le contour du bouton, je vais changer cela pour être simplement des informations sur le bouton. Voici une couleur de fond solide. Ce sera sur le dernier, et aussi sur celui au milieu. Rechargez et maintenant avoir nos cartes gratuites côte à côte sur la vue plus large. Si nous réduisons cela à un appareil mobile, ceux-ci sont maintenant empilés verticalement. Vous remarquerez que sur la vue Bureau, ces cartes ont un peu d'espace entre elles. C' est à cause de l'emballage de la carte. Au début, nous avons ajouté ce wrapper de carte et la classe de card-deck. Si nous regardons cela, cette classe fournit la marge autour des cartes que nous voyons. Si nous voulions supprimer cela et n'avons pas d'espace entre eux, nous pourrions changer cela pour être un groupe de cartes à la place, et aller dans le navigateur. Cela va maintenant supprimer tout l'espace entre nos cartes, en les rapprochant les unes des autres. C' est une autre option, mais je vais rétablir le jeu de cartes de l'espace entre ceux-ci, puis pour terminer cette section et aussi cette page, je vais ajouter un en-tête juste au-dessus de cette section de carte. Retour à tous les conteneurs de cartes, nous devons ajouter ceci juste au-dessus de notre conteneur. On va juste l'ajouter. Ajoutons un div, la classe de remplissage avec une valeur de 3 pour ajouter un peu d'espacement tous les tours, et aussi la classe du centre technologique. À l'intérieur de cette div, nous pouvons ajouter un titre de niveau 2 de prix, et aussi quelques textes juste en dessous de gratuit à utiliser pour plupart des utilisateurs ou mettre à niveau votre plan pour accéder aux fonctionnalités pro. Nous pouvons également le faire ressortir en ajoutant n'importe quelle classe de plomb à notre texte, que nous avons déjà examiné dans ce projet. plus de notre page de prix, section [inaudible] très agréable pour nos projets. C' est ainsi que nous pouvons utiliser les cartes Bootstrap pour disposer rapidement nos contenus. Le vrai utile pour les cas d'utilisation juste comme ça. choses [inaudibles] comme les offres de produits que nous avons examinées plus tôt. C' est maintenant pour les cartes et je vous verrai dans la prochaine vidéo où nous allons jeter un oeil à l'utilisation des formulaires Bootstrap. 15. Formulaires et données: formulaires et les entrées sont quelque chose que nous utilisons tout le temps lors de la visite de sites Web ou de l'utilisation d'applications. Ils utilisent pour capturer des informations ou des données telles que notre nom, notre e-mail, nos mots de passe ou même un message. C' est ce que nous allons regarder dans cette vidéo. Nous avons maintenant terminé avec notre page de prix, nous avons maintenant ce lien Contactez-nous pour maintenant un lien vers une nouvelle page. On va construire quelque chose qui ressemble à ça. Si nous passons à la version finale, il va partager la même section de navigation et de tête. Ensuite, nous allons créer un formulaire juste en dessous en utilisant bootstrap. Cela va être créé en utilisant le balisage HTML et un sever, nous allons utiliser quelques classes Bootstrap nous donner un bon timing d'espace pour travailler avec. Après le projet, nous pouvons créer un nouveau fichier dans la barre latérale. Une fois de plus, cela va être à l'origine de nos projets. C' est le contact de notre HTML. Puisque nous allons partager la même navigation et aussi la section d'en-tête, je vais copier le fichier pricing.HTML. Copions tout cela, puis collez-le dans nos contacts. Bien sûr, nous n'avons pas besoin de ces sections que nous venons de créer dans la dernière vidéo. On n'a pas besoin de la section des cartes. Je fais défiler encore plus loin. Nous n'avons pas non plus besoin de la section des prix. Tout ce que nous avons est le JavaScript vers le bas. Ensuite, j'entête la section en haut. Nous pouvons changer le titre de la page et nous dirons nous contacter. Maintenant, nous allons travailler sur notre formulaire. Juste en dessous de notre section d'en-tête. Au-dessus du JavaScript, nous voulons créer un élément de formulaire. Cet élément de formulaire va avoir une classe Bootstrap. Sous ce niveau, nous pouvons passer à la documentation Bootstrap. C' est à l'intérieur des composants. Ensuite, nous allons descendre à la section du formulaire pour obtenir plus d'informations. Il y a beaucoup de différents types de formulaires que nous pouvons utiliser, tous par rapport aux entrées sur lesquelles nous les utilisons. Mais la plupart d'entre eux ont généralement un groupe de formulaires comme wrapper. Ensuite, à l'intérieur, nous plaçons nos étiquettes et entrées, ainsi que quelques options différentes pour la mise en page de nos formulaires, y compris une mise en page en ligne aussi. Revenons à nos projets. Nous pouvons commencer à l'intérieur de notre formulaire. Ajoutons une classe de conteneur à notre formulaire, puis donnons-lui une marge sur le dessus avec une valeur de quatre. Ensuite, à l'intérieur ici, nous allons envelopper chaque étiquette et entrées à l'intérieur d'un div. Cette div va avoir la classe bootstrap du form-group. Ce groupe de formes classiques va nous donner l'espace nécessaire entre chacune de nos entrées. Ensuite, à l'intérieur, nous allons commencer par ajouter une étiquette, qui va être pour notre nom pour détecter à l'intérieur de votre nom. Après cela, mais quand même à l'intérieur de notre groupe de formulaires, nous pouvons ajouter notre première entrée. Encore une fois, c'est juste du HTML régulier avec certaines classes Bootstrap. Cela va avoir le type d'entrée de texte. La classe bootstrap du contrôle de formulaire, qui va contrôler la taille dans le rembourrage, les couleurs sur la bordure. Avec une belle transition à l'intérieur et à l'extérieur. Laissez-moi cliquer sur les entrées. Après cela, nous allons créer un deuxième groupe de formulaires. Celui-ci va être assez similaire. Et bien celui-ci va être pour notre email. La classe environnante ou le groupe de formulaire, je l'étiquetterai nicher à l'intérieur. Il s'agit de l'étiquette de l'e-mail et du texte de l'adresse e-mail. Ensuite l'entrée avec le type d'e-mail. Tout comme les deux vont être ajoutés à la classe de contrôle de formulaire à l'élément d'entrée, l'id des e-mails. Cela correspond à notre label. C' est le cas, lorsque l'utilisateur clique sur le texte de l'adresse e-mail, l'entrée devient active afin qu'il puisse taper dedans. Nous devons également le faire juste au-dessus. L' identifiant du nom afin que cela corresponde à notre étiquette de nom. Après cela, nous pouvons ajouter le texte de l'espace réservé d'entrer votre e-mail pour répondre à. Avant d'aller plus loin, vérifions que cela fonctionne bien dans le navigateur. Vérifions que nos liens sont là. Nous avons notre lien dans la page de prix vers le contacts.html. Examinons la page d'index et ouvrons la navigation supérieure. Notre lien de contact fonctionne aussi. Pour le navigateur, et dans le projet. Cliquez sur le bouton de contact. Nous avons maintenant notre nom et aussi notre adresse. Vous pouvez voir l'effet de transition lorsque vous cliquez dessus. Nous pouvons également ajouter du texte d'espace réservé à notre nom aussi. Revenons à notre formulaire de contact. Nous pouvons ajouter cela à notre entrée. Entrons le texte de votre nom. Nous avons maintenant nos deux groupes de formulaires. Le suivant va être une sélection d'entrées. Cela va être pour que nous puissions cliquer dessus et sélectionner le plan sur lequel l'utilisateur est actuellement sur. Ceci encore une fois, a le div avec une classe de groupe de formulaires. Imbriqué à l'intérieur, nous commençons par notre étiquette. Ça va être pour l'identifiant du plan. Seules les prises de quel plan utilisez-vous. Nous ajoutons ensuite nos entrées sélectionnées. Cela va également avoir la classe de contrôle de formulaire. Tout comme les autres entrées. La carte d'identité va être planifiée. Cela correspond à notre étiquette juste au-dessus. Ensuite, imbriqués à l'intérieur de nos éléments sélectionnés, nous pouvons demander à nos options de choisir. Le premier va être libre. Nous pouvons ajouter le texte gratuitement à l'intérieur ici. Nous pouvons ajouter des options d'automne. Ce second sera pour pro avec le texte de pro. Le troisième concerne les affaires et le dernier concerne une enquête générale sur la question de savoir si vous n'êtes pas inscrit. Nous allons dire question non générale. Voyons comment cela regarde à l'intérieur de nos projets, rafraîchir. Il y a aussi des entrées sélectionnées avec nos quatre options. L' entrée suivante sera pour la zone de message ou la zone de texte. En dehors de notre groupe de formulaires, ajoutons une nouvelle div. Cette fois encore la classe ou le groupe de formulaires. L' étiquette, qui va être pour tous les messages, seulement un message texte aussi. Ensuite, nous pouvons ajouter une zone de texte avec plusieurs lignes. Nous pouvons ajouter nos éléments de zone de texte. La classe va être formulaire contrôle l'identifiant du message pour correspondre à notre étiquette. Nous pouvons définir le nombre de colonnes si nous le voulons. Mais je vais juste définir le nombre de lignes à cinq. La dernière partie de ce formulaire consiste à ajouter un bouton de soumission. Vous devez avoir le type de soumission, puis quelques classes Bootstrap. Le style de base du bouton, puis la couleur des informations sur le bouton, et un texte d'envoi de message. Essayons cela dans le navigateur. Nous avons maintenant une zone de message que nous pouvons également élargir. Je vais envoyer un bouton de message aussi. Le genre de cours, n'hésitez pas à personnaliser ce formulaire en fonction de vos besoins. Nous pouvons créer des formulaires en ligne, nous pouvons créer des configurations plus complexes comme ça, où nous pouvons inclure des boutons radio, cases à cocher, des champs d'adresse, et bien plus encore. Comme vous pouvez le voir, les formulaires ont de nombreuses options et variétés différentes et Bootstrap a couvert la plupart de nos besoins. Cependant, même si nous aurions des formulaires ou d'autres composants que nous utilisons dans, que faire si nous avons besoin de les personnaliser en fonction de notre projet. Eh bien, c'est ce que nous allons regarder dans la prochaine vidéo. 16. Remplacer le style par défaut de Bootstrap: Bootstrap par défaut est destiné à nous donner une belle apparence styles et fonctionnalités hors de la boîte. Mais il y a parfois quand nous pouvons avoir besoin de remplacer ces valeurs par défaut, non seulement pour rendre notre site plus comme nous le voulons, mais aussi pour que notre site ne ressemble pas à tous les projets Bootstrap là-bas. C' est assez facile à faire et pas plus difficile. Maintenant, je vais appliquer dans un CSS régulier. Si nous allons à notre projet, nous avons déjà notre propre fichier styles.css personnalisé, que nous avons créé plus tôt. Je vais également avoir plusieurs options quand il s'agit de personnaliser les paramètres par défaut Bootstrap. Si nous allons à notre index.html, puis jusqu'à la section supérieure de la tête. Une chose importante à noter ici est, notre lien vers nos feuilles de style personnalisées. Cela doit toujours être placé comme le dernier fichier CSS ci-dessous l'un des fichiers Bootstrap et l'un des fichiers CSS que vous pouvez avoir à partir de bibliothèques tierces. Cela garantit que son dernier chargement, et donc le contenu remplacera n'importe quel style des deux fichiers. Donc, une façon de personnaliser cela est d'utiliser une classe personnalisée. Par exemple, si vous vouliez changer la barre de navigation, nous pourrions simplement ajouter notre propre classe personnalisée à l'intérieur d'ici. Allons-y pour la productivité nav. Nous pouvons prendre ce cours et nous pouvons le prendre en charge à nos styles personnalisés. Alors sauvegardez notre fichier d'index. Ouvrez notre styles.css. Puisque c'est une classe, nous avons besoin du point. Nous pouvons ensuite cibler notre classe personnalisée avec toutes les propriétés CSS que nous aimerions. À titre d'exemple, nous pouvons simplement changer l'arrière-plan pour être une valeur. Allons pour DDD. Enregistrez cela, ajoutez sur le navigateur, allez à la page d'accueil et maintenant nous pouvons voir notre couleur d'arrière-plan personnalisée. Une autre façon de remplacer n'importe quel style Bootstraps est de cibler simplement le nom de l'élément, ou une approche plus générale. Par exemple, plutôt que d'ajouter une classe, nous pouvons utiliser un CSS régulier en ciblant l'un de ces éléments HTML. Si nous voulions appliquer un arrière-plan personnalisé à l'un de nos développeurs sur la page. Nous pourrions simplement ajouter un sélecteur de dev pour un champ personnalisé, recharger le navigateur, et cela est maintenant appliqué à tous les développeurs sur notre site. Donc, ce n'est pas un bon exemple, mais c'est un moyen que nous pouvons remplacer l'une des valeurs par défaut, et une autre façon de le faire est d'utiliser l'une des classes Bootstrap existantes et ensuite nous pouvons ajouter ou remplacer. Par exemple, si nous allons à notre contacts.html, toutes les entrées que nous avons ajoutées ont eu cette classe de contrôle de formulaire. Ensuite, prenez ceci et utilisez ceci à l'intérieur de notre propre styles.css. Supprimons cela, nous ciblons ensuite dans la classe de contrôle de formulaire de Bootstrap. Lors de cette opération, tous les styles de contrôle de formulaire existants s' appliqueront toujours puisque nous utilisons les feuilles de style Bootstrap. Mais puisque notre feuille de style est incluse en dernier, tout ce que nous ajoutons à l'intérieur d'ici va soit ajouter ou remplacer l'une de ces valeurs par défaut Bootstrap. Par exemple, si toutes nos entrées de formulaire nécessitaient un remplissage supplémentaire, nous pourrions ajouter 30 pixels en haut et en bas et zéro à gauche et à droite, et nous pouvons également vouloir supprimer tous les rayons de bordereaux sur notre et nous pourrions facilement le faire en définissant cela comme une valeur de zéro. Enregistrez cet ajout sur notre page Contactez-nous. Nous avons maintenant les coins carrés pointus sur nos entrées et un petit rembourrage sur le haut et le bas. Si nous allons dans les outils de développement, nous ferions un clic droit et inspecterons. C' est comme un de nos intrants. Nous pouvons voir notre styles.css personnalisé a notre rembourrage et border-rayon appliqué en haut. De plus, le contrôle de formulaire, qui est appliqué par les feuilles de style Bootstrap, a toujours toutes ces propriétés prenant effet. Cependant, si nous regardons le rembourrage et aussi le rayon de bordure, ces deux propriétés ont été rayées puisque nous utilisons maintenant un style personnalisé juste au-dessus. Cela signifie que même si nous utilisons Bootstrap comme base pour notre projet, nous ne sommes pas limités par celui-ci. Nous pouvons également créer toutes les fonctionnalités personnalisées et aussi un look et une sensation entièrement personnalisés. 17. Réflexions finales: Félicitations pour avoir atteint la fin de cette classe. J' espère que vous avez aimé suivre ce cours autant que j'ai aimé le construire aussi. J' ai hâte de voir ce que vous créez. Espérons que vous partagerez votre projet dans la zone du projet pour que tous les autres puissent le voir. Espérons que vous pouvez utiliser vos nouvelles compétences Bootstrap trouvées. Mettez cela en pratique, construisant des projets futurs. Merci d'avoir suivi ce cours et j'espère que je vous reverrai à l'avenir.