Le design web simplifié : Maîtriser Bootstrap Studio en 12 heures

1. Introduction: Salut là et bienvenue à ce cours. Dans ce cours, nous allons tout apprendre sur le logiciel de bureau nommé bootstrap Studio. Bootstrap Studio est un concepteur frontal ou de site web par glisser-déposer. Nous pouvons l'utiliser pour créer facilement des sites web beaux et réactifs sans avoir besoin d'écrire de code. Dans ce cours, nous allons créer un site web réactif comme celui-ci. Nous commencerons le cours en apprenant les bases mêmes du HTML et du CSS. Avoir une compréhension de ces bases rendra les chapitres restants beaucoup plus faciles à suivre. Ensuite, nous allons nous familiariser avec l'interface utilisateur, appris à ajouter du contenu simple et le formatage. Et après cela, nous allons apprendre à ajouter des composants plus avancés comme la barre de navigation et un carrousel et plus encore. Nous allons apprendre à utiliser des lignes et des colonnes pour créer une grille réactive. Et nous allons en apprendre davantage sur le style personnalisé. Nous allons également en apprendre davantage sur la tache noire, et nous allons apprendre à créer notre propre composant personnalisé, et nous allons apprendre à ajouter des composants interactifs. Enfin, nous apprendrons à publier notre site Web sur un domaine Bootstrap studio gratuit pour suivre ce cours, tout d'abord, assurez-vous que vous avez un bootstrap Studio installé sur votre ordinateur. Vous pouvez le logiciel à partir de ce site Web. Ce cours est conçu pour être accessible aux personnes qui n'ont aucune expérience de conception web ni aucune expérience de codage. Si vous avez déjà une certaine expérience, c'est génial et vous serez probablement en mesure d'accélérer le cours. Mais même si vous êtes un débutant complet, ce cours est accessible pour vous. Vous avez juste besoin d'un peu de patience et de persévérance et vous ferez de beaux sites réactifs en un rien de temps. Donc, que vous souhaitiez créer un site Web pour votre petite entreprise ou que vous souhaitiez simplement créer quelque chose pour votre passe-temps. Ou même si vous êtes simplement intéressé à apprendre une nouvelle chose, alors commençons. 2. Projet de cours et comment suivre ce cours de suivi de ce cours: Ce cours est structuré en 12 chapitres commencent simplement et deviennent progressivement plus avancés. En règle générale, chaque chapitre devrait prendre, très grossièrement, environ une heure à compléter. Mais bien sûr, chaque individu est différent et il est préférable d'étudier à votre propre rythme. Si vous êtes un apprenant lent et stable qui aime bien comprendre tout comme moi, vous pourriez prendre un peu plus de temps et vous êtes, si vous êtes un de ces apprenants qui zooment simplement fluide, vous êtes probablement un peu plus rapide. façon dont vous suivez le cours est entièrement à vous de décider. Mais je vous recommande de le suivre dans l'ordre donné. Et je vous recommande de suivre avec tous les exemples pour obtenir une expérience pratique. Lorsque vous suivez, il est préférable de ne pas me copier précisément, mais d'utiliser votre propre créativité et votre ingéniosité pour donner votre propre flair aux choses. Expérimenter et jouer avec les choses est un excellent moyen d'apprendre de nouvelles choses. En tant que projet de classe, vous devriez utiliser les outils que nous avons appris pour créer votre propre site Web simple ou élaboré. Ou bien, vous pouvez construire votre propre composant personnalisé. Par exemple, vous pouvez concevoir votre propre pied de page ou en-tête, ou une horloge, ou un modèle pour un CV ou un CV ou tout ce que vous voulez pendant que vous travaillez pour le cours . Il est conseillé de garder à l'esprit ce que vous pourriez vouloir créer comme un projet de classe. Selon combien vous souhaitez sortir de ce cours, vous pouvez rendre votre projet aussi simple ou aussi élaboré que vous le souhaitez. Mais je recommande fortement que vous partagiez au moins un projet, parce que la création de votre propre projet nécessite beaucoup d'apprentissage actif, ce qui est une bien meilleure façon d'apprendre que l'apprentissage passif, obtenir de seulement regarder les explications. Et en plus, j'ai hâte de voir ce que tu as trouvé. Lorsque vous avez terminé avec le projet. Publiez-le sur un domaine Bootstrap studio gratuit. Publiez un lien en tant que projet. En fait, n'hésitez pas à télécharger un projet chaque fois que vous avez besoin de commentaires ou même si vous voulez simplement montrer ce que vous avez créé. Alors impatient de voir votre projet, rendez-vous dans la prochaine vidéo. 3. Hour 1 - HTML Explained: Html signifie Hypertext Markup Language. Un fichier HTML est simplement un fichier texte brut, qui peut facilement être écrit par un être humain et peut également être facilement compris par n'importe quel navigateur Web. Pour créer un fichier HTML simple. Suivez les deux étapes suivantes. Démarrez un éditeur de texte simple et créez un nouveau fichier. Par exemple, sous Windows, vous pouvez utiliser le Bloc-notes. Je suis sur Linux, donc je vais utiliser g edit, enregistrer le fichier en tant que simple page point HTML dans un dossier pratique sur votre disque dur. Ajoutez le texte suivant. Trouvez le fichier et ouvrez-le avec votre navigateur Web préféré. Tile cet éditeur de texte et un navigateur web côte à côte sur le moniteur, vous devriez obtenir un résultat similaire à celui-ci. Vous avez probablement remarqué quelques choses intéressantes. Le feu commence par un crochet, un crochet HTML et se termine par le même, sauf par une barre oblique inverse devant la partie HTML. Ce sont des exemples de balises. La première balise sans barre oblique inverse est une balise de départ. La balise avec la barre oblique inverse est la balise de fin. Tout entre ces deux balises est du code HTML. Premièrement, nous avons utilisé une spirale avec le navigateur. Nous ne voyons que le texte entre les deux balises, et nous ne voyons pas les deux balises elles-mêmes. Ensuite, modifiez le texte en ajoutant une autre paire de balises. Ensuite, actualisez le navigateur. Pouvez-vous voir ce que les balises p et la barre oblique B ont fait ? C' est vrai. Ils ont fait le texte entre eux en gras. Ensuite, c'est modifié. Le dossier comme ça. Voyez si vous pouvez repérer toutes les balises que nous utilisons et voir si vous pouvez deviner ce qu'elles font. Je les ai tous eus. Voici une tête de résumé. Tout entre ces deux balises est des informations sur la page Web sans faire partie de la page Web elle-même. Toutes sortes d'informations peuvent être mises ici. Par exemple, dans ce cas, j'ai mis le titre de la page Web. Les navigateurs mettent généralement le titre de la page Web ici dans l'onglet. Nous avons aussi ces deux étiquettes de corps. Tout entre ces deux balises fait partie du corps ou de la partie principale de la page Web, qui contient le contenu de la page Web. L' un signifie que les textes entre ces deux balises sont un titre. 1 est le type de position le plus important, mais vous avez également des rubriques moins importantes comme la rubrique PRE, etc. P signifie que le texte est un paragraphe. Vous signifiez que le texte doit être souligné et je signifie que le texte doit être en italique. Et fondamentalement, c'est tout ce qu'il y a, au HTML. Tout ce qu'il est vraiment est un simple fichier texte avec des balises spéciales pour informer le navigateur sur le formatage spécial. En fait, il y a un grand nombre de balises en HTML et vous pouvez faire toutes sortes de choses comme changer la couleur de fond, ajouter des images et des liens Web et d'autres choses comme ça. Mais si vous utilisez un outil de création Web glisser-déposer comme Bootstrap studio. Vous n'avez pas besoin de les connaître. Si vous êtes curieux cependant, si vous avez un esprit curieux, vous, je recommande le site www w preschools.com. Il a quelques leçons interactives assez utiles qui vous aident à en apprendre plus sur HTML. 4. Hour 1 - CSS Explis expliqué: En utilisant HTML, il est possible d'ajouter beaucoup de formatage à une page Web, mais cela peut être assez inefficace. La plupart des sites Web se composent de plusieurs pages, de nombreux paragraphes et de nombreux titres. Donc, si vous deviez définir le format pour chaque page, chaque titre individuel, et chaque paragraphe , etc. Cela prendrait beaucoup de temps. Sans oublier que si vous ou votre client vouliez apporter une modification, vous devrez revenir à chacun individuellement, modifier la mise en forme de chaque élément. Donc, c'est là que CSS entre en jeu. Css signifie Cascading Style Sheets. Et essentiellement, ce n'est rien de plus qu'un moyen de définir le format pour tous les animaux d'un style particulier en une seule fois. Jetons un coup d'oeil au fichier HTML suivant. Sur la gauche, nous avons le fichier ouvert dans un éditeur de texte. Et sur la droite, nous l'avons ouvert dans Firefox. On peut voir quelques choses. Tout d'abord, nous avons appris que je suis un terrible cuisinier, mais ce n'est pas vraiment le but en ce moment. Deuxièmement, nous constatons qu'il était assez facile d'utiliser paragraphes et des rubriques pour mettre en place le contenu de ce site Web. Cependant, il pourrait toujours utiliser beaucoup de formatage. Alors ajoutons une feuille de style à cela. Ajoutez un élément de style à l'en-tête du document. Nous pourrions également ajouter cela dans un document séparé, mais pour rester simple, gardons juste dans la tête du même document, tapez p pour montrer que nous n'affectons que les paragraphes en ce moment. Et utilisez des supports bouclés. Et entre les crochets bouclés, nous mettons la couleur au bleu comme ceci, et nous mettons la police à sans serif. La lettre P permet au navigateur de savoir que nous devrions appliquer ce cadran ou ce format à chaque paragraphe de la page. Donc, sauvegardons le fichier texte et actualisons le navigateur. Et comme vous pouvez le voir, tous les paragraphes sont devenus bleus. Ensuite, définissons la couleur d'arrière-plan du corps du document sur bleu clair. Et nous allons définir la police de la rubrique aussi pour envoyer serif. Le problème est, bien sûr, que vous ne voulez pas nécessairement que tous les paragraphes soient identiques. Peut-être aimeriez-vous différents types de paragraphe. Dans ce cas. Par exemple, peut-être aimeriez-vous un type spécial de format pour le test d'introduction et un type spécial pour spécifiquement pour les recettes. Pour ce faire, nous ajoutons un attribut de classe aux balises pertinentes. Ensuite, nous modifions le code CSS pour créer un format spécifique pour les balises qui ont cet attribut de classe. Vous pouvez penser à une classe comme une sorte d'identifiant pour laisser le navigateur savoir quel type de formatage donner à chaque élément. abord, nous modifions le code HTML pour ajouter une classe nommée instructions à chaque paragraphe contenant une instruction de recette. Pour ce faire, ajoutez la classe de texte égale aux instructions. Ensuite, nous ajoutons une entrée de style spécifique pour formater n'importe quel élément avec la classe d'instructions. Comme vous pouvez le voir dans l'exemple ajouté texte retrait 40 pixels. Cela signifie que tous les textes, qui a l'attribut de classe instructions, seront indentés vers la droite de 40 pixels, hauteur de ligne, cinq pixels, définissez l'interligne entre ces paragraphes à cinq pixels. La couleur rouge définit la couleur du texte sur rouge. Et c'est vraiment tout ce qu'il y a à lui un code CSS simple dans l'élément de style dans la tête de votre document HTML est un moyen simple d'ajouter un formatage élaboré, mais cohérent à votre page. Et plus important encore, il est également facile de modifier et d'expérimenter le style sans avoir à changer le style et la mise en forme de chaque élément individuellement. 5. Hour 1 - Bootstrap -: Pendant longtemps, HTML et CSS ont été plus que suffisant pour créer de très bons sites Web. Mais tout cela a changé lorsque les téléphones et les tablettes sont devenus monnaie courante. Un site Web clair et facile à utiliser sur un grand écran doté d'un clavier et d'une souris peut ne pas être facile à utiliser sur un petit écran tactile. C' est alors que les sites réactifs sont devenus populaires. Avec les sites Web réactifs, la conception et la mise en page du site Web changent en fonction du type d'appareil que vous utilisez pour afficher le site Web. Jetez un oeil à cette page Web. Lorsque je vois la page Web dans une large fenêtre, alors j'ai trois paragraphes disposés en trois colonnes. Mais quand je rends la fenêtre plus étroite, par exemple, si je la regardais sur un téléphone, alors les paragraphes sont empilés verticalement. Je n'avais pas besoin d'écrire deux sites Web distincts pour implémenter cela. Je viens d'utiliser le framework Bootstrap. Ce code vous montre comment j'ai écrit cette page web. Nous n'avons pas besoin de regarder trop dans un aspect technique des choses en ce moment. Mais comme vous pouvez le voir, j'ai un lien vers le framework Bootstrap en tête du document. Et j'ai un certain nombre d'attributs de classe dans mes éléments, qui disent au framework Bootstrap comment je veux que ces éléments se comportent. Par exemple, j'ai une classe nommée conteneur et une classe nommée ligne, et une classe nommée Call for. Comme je l'ai dit, nous n'avons pas besoin d'entrer dans les détails techniques pour l'instant. Nous allons en apprendre plus sur la façon dont cela fonctionne dans une prochaine vidéo. Alors c'est quoi Bootstrap Studio ? Bootstrap Studio est un éditeur de site par glisser-déposer. L' interface utilisateur est utilisée pour créer la mise en page et la mise en forme du site Web la même manière que l'on utiliserait un traitement de texte pour écrire un rapport. Nous cliquons et faisons glisser des éléments tels que des en-têtes, des paragraphes , des images, des liens, des barres d'outils, etc., en place. Le logiciel d'amorçage créera alors tout le code HTML, CSS et Bootstrap nécessaire pour vous. Et c'est toutes les informations de fond dont nous avons besoin pour commencer à apprendre sur Bootstrap studio dans les prochains chapitres. On se voit alors. Au revoir. 6. Hour 2 - Interface de l'utilisateur: Donc, enfin, nous sommes prêts à commencer à apprendre sur Bootstrap studio. Ensuite, nous allons nous familiariser avec l'interface utilisateur et apprendre à créer une page simple. Mais d'abord, créons notre premier projet. Lorsque vous ouvrez Bootstrap Studio pour la première fois, vous avez la possibilité de créer un nouveau design ou d'en charger un existant. En cliquant sur un nouveau design, nous voyons qu'il y a beaucoup de modèles prêts à l'emploi à choisir. Pour garder les choses simples, choisissons un modèle vide. Définissez le nom de votre projet, choisissez la dernière version du framework Bootstrap et cliquez sur Créer pour continuer. Et puis l'interface utilisateur apparaît. Voyons ce qu'on peut voir. Tout d'abord, au milieu, nous avons la toile. C' est là que nous allons créer un site Web. Sur la gauche, nous avons une colonne. La colonne contient le panneau Composants, où nous pourrons trouver toutes sortes d'éléments. Les simples comme le paragraphe et le titre, et aussi les plus complexes comme une galerie ou un diaporama ou des choses comme ça. Et ci-dessous, nous avons un aperçu de la structure du document. Ce panneau donne un aperçu pratique des éléments et composants qui ont été ajoutés à la page. Vous ne voyez peut-être pas cette colonne, mais vous voyez peut-être une liste d'icônes. Si c'est le cas, vous pouvez simplement redimensionner cette colonne en cliquant et en faisant glisser sur la bordure ici. Si nous regardons ici, nous voyons une rangée d'icônes. Ces icônes sont un moyen rapide de basculer d'une vue à l'autre. Par exemple, vue téléphone, vue tablette, vue Bureau. Sur le côté droit, nous avons aussi une colonne. Encore une fois, si vous voyez cela comme une liste d'icônes, il suffit de cliquer et de faire glisser pour agrandir la taille de la colonne. Et en haut, nous avons trois onglets qui peuvent être utilisés pour formater différents éléments, apparence, options et animations. Et ici, nous avons du design. Dans cet onglet, nous voyons les ressources associées à la page. Cela inclut les fichiers HTML, les fichiers CSS, les fichiers JavaScript, les polices et les images. 7. Hour 2 - Ajouter et mise en page de composants simples de la mise à jour: Ensuite, nous allons ajouter du contenu de base à la page. Accédez à l'onglet Studio dans la colonne de gauche et recherchez l'en-tête. Cliquez et faites glisser l'erin sur le canevas. Vous verrez que le titre apparaît à la fois sur le canevas et dans le panneau d'aperçu en bas de la colonne de gauche. Répétez les deux dernières étapes pour ajouter un paragraphe sous l'en-tête. Sélectionnez un paragraphe. Un certain nombre d'icônes apparaissent au-dessus du paragraphe. Déplacer pour déplacer le paragraphe vers un autre emplacement. Sélectionnez Parent. Le parent d'un élément est l'élément dans lequel il est contenu. Vous pouvez facilement le trouver dans le panneau de présentation. Dans ce cas, l'élément body est apparent du paragraphe et l'élément HTML est apparent de la partie à elle modifie le texte du paragraphe. Dupliquer, fait une copie de l'élément sélectionné. Hyde rend l'élément sélectionné invisible et supprime, supprime les éléments sélectionnés. Modifiez le paragraphe. Vous pouvez également le faire en double-cliquant sur l'élément dans Canvas. Tapons le texte suivant. Une simple barre de mise en forme de texte s'affiche. Et faisons la même chose avec le mal de tête. Lorsque vous sélectionnez l'en-tête, vous remarquez une option supplémentaire que nous pouvons utiliser pour définir le niveau de l'en-tête. Gardez-le sur un pour l'instant, et modifions le texte pour accueillir. Maintenant que nous savons comment ajouter quelques éléments de base, Apprenons également comment faire un composant électrique de formatage de base et aller dans le panneau d'apparence. Nous voyons ce qui suit. En haut du panneau, nous voyons l'élément actuellement sélectionné en bleu, ainsi que ses parents. dessous de cela, nous avons un menu déroulant avec l'attribut de style d'option. L' attribut Style nous permet de formater le bloc actuellement sélectionné. Ci-dessous, nous avons toutes sortes d'options de mise en forme classées sous différents titres, y compris la mise en page, la police, etc. Vous pouvez cliquer sur les triangles pour ouvrir ou réduire les catégories. Donc, tout d'abord, nous sélectionnons le paragraphe et assurez-vous que attribut de style est sélectionné dans la liste déroulante sur la couleur de la police, nous pouvons définir la couleur du texte. On m'a dit la couleur de ma police au bleu. Vous pouvez choisir n'importe quelle couleur que vous aimez. Ensuite, nous allons définir la couleur de fond de la fête. Sélectionnez un corps dans le panneau Vue d'ensemble. Sous fond couleur BG. Cliquez sur le carré blanc pour sélectionner une couleur non standard. Je vais également définir la couleur de fond de mon arrière-plan. Écusson lumineux. Il y a beaucoup d'autres choses que nous pouvons formater ici. La plupart de ces choses sont évidentes et celles qui ne sont pas si évidentes, vous pouvez facilement trouver des informations à leur sujet en les recherchant sur Google. Dans ce cours, nous aborderons beaucoup de ces options, mais aucune, toutes. Comme vous le savez, le site Web que nous avons créé sera éventuellement exploité pour des fichiers HTML et CSS. Ces fichiers peuvent être inspectés assez facilement dans les studios Bootstrap. En bas de la fenêtre, vous verrez un panneau contenant deux onglets, HTML et styles. Cliquez et faites glisser le haut de la bordure du Panopto, tirez-le vers le haut. Dans l'onglet HTML, le code HTML du document s'affiche. Cliquez sur les triangles pour ouvrir et réduire différents éléments. Il n'est pas nécessaire de comprendre trop ici, mais j'espère que vous reconnaîtrez au moins certaines des balises. Lors de l'ajout de nouveaux composants au canevas, le code HTML sera automatiquement mis à jour. Sous le panneau HTML, il y a un panneau d'attributs ici vous pouvez ajouter une inspection les classes d'ID et d'autres attributs. L' onglet Styles affiche toutes les mises en forme pertinentes pour l'élément sélectionné. En sélectionnant le paragraphe, vous voyez que l'élément hérite d'un style du parent. Et aussi la marge a été définie par le framework Bootstrap. Nous voyons aussi où nous avons colorié la police en bleu. Donc, une bonne chose à propos de travailler de cette façon est qu'il est super facile d'en apprendre plus sur HTML et CSS. Donc, si vous êtes d'humeur curieuse, il suffit de faire glisser et déposer un peu catégorique, entrez votre page et voyez comment cela affecte le code. Donc je pense que c'est assez pour une vidéo. Dans la vidéo suivante, nous en apprendrons plus sur les marges et le rembourrage. On se voit alors, au revoir. 8. Hour 2 - Marges et rembourrage: Bonjour tout le monde. Dans cette vidéo, nous allons en apprendre davantage sur les marges et le rembourrage. Marges et rembourrage, nos propriétés CSS de base de contour HTML, que nous pouvons utiliser pour modifier la mise en page des éléments et de leur contenu. Chaque élément occupe une certaine place sur notre page. Pour visualiser la quantité d'espace, nous pouvons facilement ajouter une bordure et une couleur d'arrière-plan à chaque élément. Faisons ceci pour le paragraphe, premier paragraphe élu, soit sur le canevas ou dans le panneau de présentation, dans la colonne sur le côté gauche. Dans le panneau d'apparence sous l'arrière-plan, nous pouvons choisir une couleur d'arrière-plan. Je choisirais du vert. Suivant à la frontière. Vous pouvez définir le style de la bordure, la couleur, le faire, etc. Je vais définir le style de bordure sur une ligne solide et il était à la couleur au bleu. Par conséquent, nous voyons que la bordure et la couleur du champ ont changé. Nous voyons que la largeur de l'élément occupe toute la page et la hauteur de l'élément est fondamentalement aussi grande que son contenu. Le schéma ci-dessus donne un aperçu rapide des marges actuelles et du remplissage. La largeur est actuellement définie sur la même largeur qu'une page. La valeur par défaut de la hauteur dépend de la taille de la police et du nombre de lignes de texte ou R. Et ici, nous avons la marge et le remplissage. Alors, quelle est la différence entre marge et rembourrage ? Marge spécifie la distance externe. En d'autres termes, jusqu'où l'élément est éloigné des autres éléments. Nous voyons que le paragraphe est poussé vers l'intérieur et vers le bas de 10 pixels, la taille de l'élément doit diminuer pour fournir plus d'espace pour les marges. rembourrage, d'autre part, est la distance intérieure. Il spécifie la distance entre la bordure et le contenu. Comme vous pouvez le voir, le texte est poussé vers la droite et la hauteur de l'élément augmente pour fournir suffisamment d'espace pour le remplissage. Si vous souhaitez définir des marges et un remplissage spécifiques pour les bords supérieur, inférieur, gauche et droit. Vous pouvez cliquer sur la flèche ici et définir les valeurs ici. Incidemment, si vous êtes intéressé à définir la largeur et la hauteur maximale ou minimale, vous pouvez cliquer sur les flèches ici. En passant, une chose utile dans CSS est que vous pouvez définir la marge sur auto. Les marges gauche et droite seront automatiquement définies pour centrer l'élément au milieu de la page. Dans cet exemple, j'ai défini la marge sur 10 pixels de la barre d'espace auto. Cela signifie que les marges verticales sur les marges supérieure et inférieure, en d'autres termes, sont définies sur 10 pixels. Pourquoi les marges gauche et droite sont définies automatiquement pour vous assurer que l'élément est centré au milieu de la page. Donc c'est tout pour l'instant. Merci d'avoir regardé. Dans la vidéo suivante, nous allons explorer comment ajouter un composant plus complexe, la barre de navigation. On se voit là-bas. Au revoir. 9. Hour 3 - Ajouter le Navbar: Jusqu' à présent, nous avons travaillé avec des éléments très simples. Vers le haut est un élément plus complexe, la barre de navigation. Nous allons ajouter une barre de navigation de base. Nous allons ajouter une liste déroulante à la barre de navigation, et nous allons explorer les options de base de la barre de navigation. Ensuite, dans la vidéo suivante, nous allons ajouter plusieurs pages à un projet et les lier dans la barre de navigation. Nous allons également copier la barre de navigation sur les autres pages et nous allons tester la page en utilisant l'aperçu. Commençons donc à ajouter la barre de navigation dans le panneau Composants. Recherchez la barre de navigation. Cliquez sur le composant et faites-le glisser vers le haut du canevas ou vers le panneau Vue d'ensemble. La barre de navigation est beaucoup plus complexe que ce que nous avons utilisé jusqu'à présent. En regardant dans le panneau de présentation, nous voyons que la barre de navigation contient la marque navbar. Je vais nommer le mien. Pause de la page. Le basculement de la barre de navigation correspond à l'icône Menu. Lorsque la largeur de la page est assez petite, la barre de navigation affiche l'icône de menu au lieu des éléments de navigation. L' élément navbar-collapse contient un air, qui à son tour contient les éléments nav. Chaque élément de navigation contient à son tour un lien. Nous pouvons facilement ajouter sur plus d'éléments nav en dupliquant et nous pouvons facilement les supprimer en les supprimant. Vous verrez dans la barre de mise en forme que vous pouvez définir ces éléments étroits sur actifs ou inactifs. Pour l'instant, pour éviter toute confusion, laissez les désactiver tous. Dans mon cas, je vais ajouter éléments de navigation gratuits et je vais les mettre à la galerie de la maison et à mon sujet. Parfois, il est utile d'ajouter une liste déroulante à la barre de navigation. Il y a plusieurs façons de le faire. Une façon est de l'ajouter à partir de la colonne du composant. Accédez au panneau Composants et recherchez la liste déroulante. Cliquez et faites glisser le composant vers le panneau d'aperçu, en vous assurant qu'il est placé entre les deux éléments de navigation. Le composant déroulant contient un lien et un menu. Et le menu contient trois éléments de menu. Modifions le texte de la liste déroulante et des éléments de menu. À titre d'exemple, j'ajouterai les téléchargements de texte, les logiciels et les ressources. Et je supprimerais le troisième élément de menu. La barre de navigation est livrée avec quelques options spécifiques. Jetons un coup d'oeil. Le haut du panneau. Nous avons les options spécifiques à la barre de navigation. Nous pouvons définir l'arrière-plan et la couleur du texte. Nous pouvons le garder par défaut, ou nous avons un choix de nombreuses couleurs de thème différentes. Nous pouvons également définir la position, y compris par défaut, fixé au haut, fixer le bas et le haut collant. J' ai envie de vendre le mien trop collant. Fluide signifie que la largeur du contenu de la barre de navigation changera progressivement à mesure que la largeur de la fenêtre change. Si le fluide est désactivé, la largeur du contenu changera également en fonction de la largeur de la fenêtre. Mais par étapes discrètes. Avec expanded, nous pouvons définir quand nous préférons voir l'icône de menu ou les éléments de navigation. Dans ce cas, il affichera les éléments de navigation pour les fenêtres de taille moyenne et au-dessus. Et nous allons afficher l'icône de menu pour les tailles d'écran qui sont plus petites que moyennes. Enfin, l'état actif intelligent détermine si la barre de navigation indique quelle page est actuellement active. En d'autres termes, le lien de l'élément de la barre de navigation vers la page active sera défini comme actif. Avec les setters restants inactifs. Je mettrai mon bras comme ça. L' utilisateur sera en mesure de voir en un coup d'œil quelle page utilise actuellement l'affichage. Donc, c'était un aperçu rapide de leur barre de navigation. Dans la prochaine vidéo, nous allons ajouter d'autres pages et nous allons les lier. Nous allons également copier ce composant de barre de navigation sur les autres pages d' une manière que lorsque nous changeons l'un d'eux ou les éléments de la barre de navigation changeront. Alors on se voit dans la prochaine vidéo. Au revoir pour l'instant. 10. Hour 3 - Relier d'autres pages et tests: Dans cette vidéo, nous allons prendre éléments de lien de la barre de navigation que nous avons créés dans la vidéo précédente. Et on va les relier. Mais avant de le faire, faisons d'abord les nouvelles pages. Vous verrez en haut à droite que nous travaillons actuellement sur une page nommée index.html. Index.html est ce que nous appelons la page d'accueil. Cliquez sur la flèche à côté de index.html et cliquez sur nouvelle page, une nouvelle page nommée point HTML sans titre apparaît. Allez dans le panneau de conception dans la colonne inférieure droite et trouvez la page Web sous l'en-tête de la page. Cliquez avec le bouton droit de la souris ou appuyez sur F2 pour renommer le fichier. Je vais renommer le mien à propos de moi, ce HTML. Je vais répéter le processus pour créer un certain nombre de nouvelles pages Web. Un pour chaque élément de barre de navigation. Je vais créer une galerie que HTML. Télécharger le logiciel HTML, et télécharge les ressources que HTML. Ensuite, revenons à index.html. Sélectionnez le lien dans l'un des éléments de la barre de navigation et accédez à l'onglet Options dans la colonne à droite. Sous les options de lien de titre, nous pouvons définir l'URL. Url est un autre terme pour lien. Plus précisément, il est abrégé pour le lien de ressource universel. Vous pouvez ajouter n'importe quelle adresse web ici, y compris des sites externes comme le site de vos frères ou sœurs ou le site de vos partenaires commerciaux ou autre. Dans ce cas, nous voulons choisir à partir de pages Web internes. Nous les choisissons en cliquant sur notre triangle ici, puis nous pouvons les choisir dans cette liste déroulante. Ajoutons un lien pour chacun des éléments de la barre de navigation. Ensuite, nous allons copier cette barre de navigation en haut de chaque page de notre site Web. Pour ce faire, allez dans le panneau d'aperçu et sélectionnez un composant Navbar, puis cliquez avec le bouton droit de la souris et choisissez Copier et Coller. Copier. Ensuite, allez à chaque page une par une, et faites un clic droit sur un canevas et choisissez Copier et Coller, Coller lié. De cette façon, si nous voulons plus tard apporter un changement à la barre de navigation, nous pouvons faire le changement à une seule des copies et il sera mis à jour dans toutes les copies. Enfin, nous aimerions tester pour nous assurer que nous n'avons pas commis d'erreurs. Ou en ajoutant les liens. Tout le monde fait des erreurs après tout. C' est pourquoi le test est une partie très importante d'un développement web. façon la plus simple de tester ces liens est de créer un aperçu. En haut à droite, cliquez sur le bouton d'aperçu, une fenêtre apparaît, cliquez sur Basculer pour activer l'aperçu. Cliquez sur ouvrir dans le navigateur pour l'afficher. Et c'est tout pour l'instant. Merci d'avoir regardé. Dans la vidéo suivante, nous allons apprendre à personnaliser le format de la barre de navigation. 11. 4 - Carousel de Carousel: Salut tout le monde et bienvenue au prochain chapitre. Dans ce chapitre, nous allons ajouter quatre composants avancés à notre site Web. Ces composants sont le carrousel, galerie, Google Map, et la liste d'articles. Donc, dans cette vidéo, Commençons avec le carrousel. Carrousel est essentiellement un diaporama qui peut être utilisé pour parcourir une série de photos, de diapositives ou d'infographies. Ajouter un carrousel dans Bootstrap Studio est une question simple. Enfin, carrousel parmi les composants et faites-le glisser vers le panneau de présentation. Le carrousel se compose de diapositives et de commandes. Comme d'habitude, vous pouvez facilement ajouter et supprimer ces éléments en dupliquant ou en supprimant. Les contrôles incluent les boutons suivant et précédent, ainsi que l'indicateur pour illustrer l'image en cours d'affichage. Nous aimerions ajouter des images à ce carrousel, mais nous devons d'abord les importer. Pour démontrer que je vais choisir des images de Paxos et que je vais les importer dans Bootstrap studio en cliquant et en faisant glisser les fichiers dans le panneau de conception. Ils apparaissent sous les images de titre. Ensuite, sélectionnez l'image dans l'une des diapositives et double-cliquez. Il est plus facile d'utiliser le panneau de présentation pour cela. Une fenêtre apparaît avec une liste d'images importées. Sélectionnez l'image souhaitée et appuyez sur, OK, répétez les étapes précédentes pour ajouter les autres images au carrousel développez automatiquement pour prendre toute la largeur de la page. Pour changer cela, dans le panneau d'apparence, définissez les marges gauche et droite sur 50 pixels. Le curseur est livré avec quelques options. Nous pouvons modifier ces options en utilisant le panneau d'options. Ici, nous pouvons définir toutes sortes d'options comme l'intervalle, pause sur le vol stationnaire, type de transition, etc. Et c'est vraiment tout ce qu'il y a. Ensuite, apprenons à propos de la galerie. 12. Hour 4 - Gallery: Une galerie est un moyen utile de mettre en valeur votre portfolio. Il se compose d'une grille d'images sur laquelle l'utilisateur peut cliquer pour la voir dans une vue plus grande. Suivez ces étapes simples pour ajouter une galerie à votre page Web. Ajoutons un composant de galerie phare à la page. Nous pouvons éditer tout le texte de la manière habituelle. En regardant le panneau de vue d'ensemble, nous voyons que la galerie est un bloc, qui contient un conteneur. Le conteneur contient un div et une ligne. Un div est court pour la division, et il peut être utilisé pour regrouper différents éléments ensemble. Un conteneur est simplement un div avec l'attribut de classe conteneur. Nous en apprendrons plus sur la classe de conteneurs à l'avenir. Nous avons également une ligne qui contient un certain nombre de colonnes. lignes et les colonnes sont très utiles pour créer des grilles réactives comme celle-ci, nous allons apprendre comment les lignes et les colonnes fonctionnent dans un futur chapitre. Pour changer l'une des images, suffit de double-cliquer dessus et de sélectionner l'image. Assurez-vous que vous avez importé l'image que vous souhaitez importer en premier, il vous suffit de cliquer et de faire glisser l'image de votre gestionnaire de fichiers vers le panneau de création du studio d'amorçage. Ajoutons une info-bulle pour chaque image. Sélectionnez une image, accédez au panneau Options et accédez aux infobulles. Activer les infobulles Enfin, ajoutons une animation. Accédez au panneau Animation dans la colonne supérieure droite. Sous les déclencheurs, sélectionnez le survol. De cette façon, l'animation sera déclenchée chaque fois que l'utilisateur passe au-dessus d'elle avec une souris, vous pouvez sélectionner le type d'animation à. Par exemple, sélectionnons swing. C' est assez amusant. Vous pouvez obtenir un aperçu de l'animation à l'aide du bouton Lecture et vous pouvez la tester dans l'aperçu. Donc, comme vous pouvez le voir, ajouter une galerie dans Bootstrap studio est super facile. Ensuite, ajoutons une liste d'articles. 13. Hour 4 - Cartes de cartes: Alors bienvenue. Dans cette vidéo, nous allons explorer un composant plus avancé que nous pouvons faire glisser et déposer sur notre site Web à l'aide de Bootstrap studio. Nous allons explorer Google Maps. C' est super utile lorsque nous essayons d'aider les clients à nous trouver. Commençons par simplement glisser-déposer le composant Map sur notre canevas. Nous voyons qu'avant de pouvoir activer ce composant, nous devons définir la clé API. Une clé API est simplement un numéro d'identification. Google Maps utilise ce numéro d'identification juste pour suivre la fréquence à laquelle vous utilisez son service. Avec une clé API gratuite, votre projet peut charger 25 000 cartes par jour. Si tu as besoin de plus que ça, alors tu vas devoir payer. Mais pour 99 % des gens normaux, c'est beaucoup, non ? Créer une clé est assez facile. Assurez-vous simplement que vous avez la carte sélectionnée, puis n'importe quel panneau d'options, cliquez sur Créer une clé API. Nous sommes redirigés vers Google Cloud Platform. Vous devez vous connecter avec votre compte Google si vous n'êtes pas déjà connecté comme ion, nous devons d'abord créer ou sélectionner un projet. C' est simplement pour que Google sache quel projet essaie d'accéder à Google Maps. Puisque je n'ai qu'une seule clé, c'est peu pertinent dans quel produit je vais le stocker. Et en fait, je n'ai pas de projets sérieux en cours d'exécution dans Google Cloud Platform, donc je vais juste en choisir un au hasard. Nous pouvons définir le nom de la clé ici et nous pouvons ajouter une restriction. Il y a toujours un léger risque que quelqu'un obtienne le code série sur votre clé et utilise ensuite toutes vos charges cartographiques. Il est donc préférable de le restreindre à votre site Web. Je vais simplement utiliser cette clé pour démontrer Google Maps, mais après cela, je vais la supprimer tout de suite. Donc pour moi, je peux juste garder la clé comme illimitée. Rends-moi une faveur et rappelle-moi de le supprimer plus tard. Merci. Ok, passer à autre chose. Cliquez sur Créer. Et une fois que nous le faisons, cela génère les détails de notre clé. Cliquez sur copier ici pour copier le numéro de série d'une clé et collez-le dans ce champ. Et comme vous pouvez le voir, nous recevons automatiquement une mise à jour en direct dans notre Canvas. Il est actuellement réglé sur les marques parisiennes, mais je vais le vendre à mon emplacement actuel, à Tombouctou, au Mali. Nous pouvons changer le type de carte ici, par exemple, feuille de route ou satellite. Nous pouvons définir la largeur et le terme de hauteur ici. Nous pouvons définir le levier de zoom par défaut ici. instant, je n'ai pas d'adresse exacte sur la carte. Dans la plupart des endroits, google Maps supporte facilement l'ajout d'adresses exactes, mais dans des endroits comme Tombouctou, cela ne fonctionne pas toujours. Ou, par exemple, si vous hébergez un événement au milieu d'un champ, vous ne pourrez pas non plus indiquer votre adresse exacte. Il vaut mieux mettre les coordonnées. Vous pouvez facilement rechercher les coordonnées sur Google Maps et les copier coller dans bootstrap studio. Et maintenant, nous avons ce petit marqueur rouge avec mon emplacement exact. Bien compris. Au fait, je n'ai pas de direct à Tombouctou. Ok, faisons un peu de rangement. Ça a l'air sympa. Potentiellement, il peut sembler assez professionnel sur votre site Web. Mais quant à moi, je vais l'enlever parce que je n'ai pas vraiment clients qui ont besoin de trouver mon adresse. Donc, je ne dois pas oublier de supprimer ma clé API. Merci de me l'avoir rappelé. Je vais me connecter à nouveau dans le cloud de ma console. Et je vais cliquer sur ce bouton pour le supprimer. Donc c'est ça de moi pour l'instant. se voit dans la vidéo suivante. 14. 4 - Liste des articles: Une liste d'articles est un excellent moyen d'orienter les internautes vers des contenus plus spécifiques de votre site Web. Il combine des vignettes, des descriptions et des liens dans une grille réactive. Comme d'habitude, il vous suffit de trouver la liste des articles dans le panneau Composants et de le faire glisser dans la page ou dans le panneau de présentation. Tout comme pour la galerie, nous obtenons une mise en page flexible par laquelle la grille des images réorganise en fonction de la largeur des pages. Mais dans ce cas, nous avons aussi une description et un lien. En regardant le panneau de vue d'ensemble, nous voyons que la liste d'articles se compose d'un div et d'une ligne. Le div contient le titre et l'introduction. La ligne contient des colonnes. Chaque colonne contient un lien avec une image, un trait d'en-tête, un paragraphe et un lien avec une icône. Pour changer l'image, il suffit de double-cliquer sur l'image, sélectionner l'image souhaitée, mais assurez-vous d'abord que l'image a été importée dans Bootstrap Studio. Éditons ce texte. Et nous pouvons définir les liens URL en sélectionnant le lien et en allant dans le panneau Options. Enfin, modifions ces icônes. Il suffit de double-cliquer sur l'icône. Nous voyons que toutes sortes d'icônes sont disponibles dans différentes catégories. Je vais définir les icônes pré en cherchant le masque, l'avion et le cœur. Donc c'est tout pour ce chapitre. J' espère que ce chapitre vous a montré à quel point il est facile d'ajouter des composants assez avancés à votre site Web. Dans le prochain chapitre, nous allons en apprendre un peu plus sur leur fonctionnement. En commençant par les lignes et les colonnes expliquées. Si vous avez une compréhension approximative de leur fonctionnement, vous serez facilement en mesure de personnaliser ces composants et même de créer vos propres composants. 15. Hour 5 - Rows et Colonnes expliqués: La manière standard dans Bootstrap de créer une grille réactive consiste à utiliser des lignes et des colonnes. La grille est définie pour être réactive car la mise en page dépend de la largeur de l'écran avant de commencer, une explication de leader serait très utile ici. Les termes ligne et colonne sont un peu trompeurs dans ce cas, car cela suggère que le nombre de colonnes dans la grille est statique et que les lignes et les colonnes sont égales et équivalentes. En fait, ce n'est pas le cas. Et cela peut être une avance vers le haut, confuse à rose les choses en termes de lignes et de colonne. En fait, vous pouvez penser à une rangée plus comme une boîte. Et vous pouvez penser à une colonne plus comme un élément qui est disposé dans cette boîte. Donc, une ligne est comme une boîte contenant un certain nombre d'éléments. Chaque article a une certaine largeur et préfère être disposé horizontalement de gauche à droite. Tant qu'il y a suffisamment d'espace, tous ces éléments seront disposés en une seule ligne. S' il n'y a pas assez d'espace, tous les articles ultérieurs seront jetés à la ligne suivante. Ainsi, par exemple, si vous avez une boîte contenant un élément qui a une largeur de 25 pour cent de la page, il s'adapterait facilement. En fait, vous pourriez placer quatre de ces éléments et ils seraient tous disposés en une seule ligne. Mais si nous devions ajouter un cinquième élément, il n'y aurait pas assez d'espace dans la ligne, sorte que cet article devrait être pompé vers la ligne suivante. Dans le cadre Bootstrap, ce développeur peut choisir la largeur de chaque élément en fonction de la largeur de l'écran. Ainsi, par exemple, le développeur peut définir la largeur de chaque colonne à 100 % pour les petits écrans, à 33 % pour les écrans de taille moyenne et à 25 % pour les cris de grande taille et de grande taille. Cela signifie qu'un seul pourrait tenir proline dans de petits écrans. Les articles gratuits s'adapteraient côte à côte dans les verts de taille moyenne. Et quatre crachaient côte à côte dans des écrans très grands. Ensuite, créons un exemple simple pour rendre l'explication un peu plus intuitive et un peu moins abstraite. Dans cet exemple, nous allons utiliser des lignes et des colonnes pour créer une grille réactive simple sur la page à propos de moi. abord, allons à la page et faites glisser une ligne sur le canevas. Ensuite, ajoutons trois colonnes à la règle. Nous pouvons voir que les trois colonnes sont disposées l'une à côté de l'autre. Lorsque nous attendons le HTML généré, nous voyons que les lignes et les colonnes sont des divs simples, mais avec la ligne des attributs de classe et col ajoutés. Sélectionnez la première colonne sous Options, vous pouvez définir la largeur de la colonne. Régler la largeur à un, définit la largeur à 1 12e de la largeur disponible. Cela laisse plus d'espace pour les deux autres colonnes. Et ils vont s'étendre. Régler la largeur sur 12, définit la largeur à 100% de la largeur disponible. Avec. Cela pousse les deux autres colonnes vers le bas. La définition de la largeur à six définit la largeur disponible à 50 %. Cela laisse beaucoup moins pour les deux autres colonnes. Incidemment, il est assez intéressant de voir comment changer la largeur de la colonne affecte le code HTML. Ensuite, définissons la largeur pour différentes tailles d'écran. Tout d'abord, réglez la largeur de la colonne à zéro. Lorsque nous élargissons ces options, nous voyons que nous pouvons définir la largeur de la colonne pour différentes tailles d'écran. Pour les petites tailles d'écran, Réglons la largeur de chaque colonne à 12. Cela signifie que chaque colonne occupera 100 % de l'espace disponible. Écrans de taille moyenne. Nous aimerions organiser les deux premières colonnes côte à côte. Et nous aimerions pousser la troisième colonne vers le bas. Réglons donc la largeur à 66 et 12 respectivement. Et enfin, pour les grands et les très grands écrans, nous aimerions que les colonnes pré soient disposées les unes à côté des autres. Mais nous aimerions que la largeur de la troisième colonne soit plus large que la largeur des deux premières. Réglons donc la largeur à Bree, Bree et six respectivement. Donc, maintenant, nous avons une grille réactive de base qui a une couche différente en fonction de l'appareil sur lequel vous êtes. Ensuite, ajoutons du contenu et du style. Commençons par ajouter un titre et un paragraphe à chaque colonne. Ensuite, ajoutons une bordure à chaque colonne. Vous pouvez maintenir le bouton Contrôle enfoncé pour sélectionner plusieurs éléments en même temps. Comme vous pouvez le voir, les colonnes sont si proches qu'elles touchent. Nous pourrions ajouter un peu d'espace entre eux en augmentant la marge, mais cela pose un problème. L' espace supplémentaire occupé par les marges pousse la deuxième colonne à la ligne suivante. Et ça gâche la couche que nous voulions. Une meilleure solution serait de grouper le contenu de la colonne dans un div et d'ajouter une bordure à la div à la place. De cette façon, nous pouvons facilement changer la marge sans se soucier de gâcher la mise en page. Nous aimerions également ajouter un peu d'espace entre les bords de la page et le contenu des colonnes. Un moyen simple d'y parvenir est d'utiliser un conteneur. Un conteneur est un élément très utile. C' est un élément div simple avec des propriétés spéciales. Le conteneur est toujours centré au milieu de la page. Glissons et déposez un conteneur dans le corps. Et puis il suffit de faire glisser et déposer la ligne dans le conteneur. Enfin, nous allons ajuster chaque colonne pour ajouter la touche finale. Tout d'abord, je vais ajouter un peu de rembourrage à chaque div. Et notre mise en place d'un rayon de frontière de 20 pixels. Après tout, je pense que je vais supprimer la bordure de ces divs et plutôt changer la couleur de fond. À la place. J'ajouterai une image de profil à la première colonne au lieu du texte. Je vais éditer le texte et les colonnes. Vous pouvez appuyer sur Maj Entrée pour ajouter une nouvelle ligne dans un élément de paragraphe. Enfin, je vais définir la hauteur de chaque div manuellement pour m'assurer que la hauteur reste la même pour chaque colonne. Et c'est comment faire une réponse de base créée en utilisant des lignes et des colonnes dans Bootstrap. Ensuite, je vais faire un autre exemple dans lequel je crée un pied de page comme celui-ci. 16. Hour 5 - Exemple de Lignes et colonnes (Créer un pied de page): Comme deuxième exemple, nous allons utiliser des lignes et des colonnes pour créer un pied de page simple. Le pied de page contiendra deux colonnes, qui seront toujours disposées côte à côte. La deuxième colonne contiendra sa propre grille réactive. Il sera disposé verticalement si la largeur de la page est assez petite et les icônes seront disposées côte à côte si la largeur de la page est assez large. Ajoutez d'abord les éléments suivants. Ajoutez un pied de page. Ajoutez un conteneur dans le pied de page et une ligne dans le conteneur. Et ajouter deux colonnes dans une ligne de l'élément de pied de page est juste une étiquette. Nous pourrions l'oublier et utiliser un div à la place, mais le garder rend simplement le code HTML plus facile à lire. Nous avons déjà vu le conteneur. Il ajoute automatiquement des marges appropriées au flottement. À côté de la première colonne, ajoutons deux icônes et deux paragraphes. Nabr cliquez sur la première icône et le changer en carte, que nous pouvons trouver dans Font Awesome Five. Double-cliquez sur la deuxième icône et le changer en mâle, que nous pouvons trouver des éléments CSS. Modifier le texte des paragraphes. En passant, vous pouvez appuyer sur Maj Entrée pour accéder à une nouvelle ligne dans le même paragraphe. Ajoutons maintenant du contenu à la deuxième colonne. Ajoutez une ligne et une colonne. Ajoutez un lien à la colonne. Déposez une icône, supprimez le texte dans le lien. Dupliquez la colonne deux fois. Nous pouvons changer l'icône pour certaines icônes de médias sociaux comme Twitter, Snapchat, ou tout ce que vous voulez. Je changerais le mien en YouTube, Facebook et LinkedIn. Vous pouvez définir l'URL de chaque lien dans le panneau Options. Ces icônes sont un peu sur le petit côté. Nous pouvons les agrandir en augmentant la taille de la police. Ensuite, définissons la largeur des colonnes. Je veux pousser un peu les icônes des médias sociaux vers la droite. Donc, je vais définir la largeur de la première colonne 29 pour m'assurer que les icônes des médias sociaux restent sur le côté droit de la page et ne sont jamais descendues à la ligne suivante. Je définirais la largeur de la deuxième colonne 2. Nous voulons empiler les icônes des médias sociaux verticalement pour les petits écrans. Et nous voulons les organiser côte à côte pour des écrans moyens et plus grands. Donc, pour les trois colonnes, définissez la partie d avec 212. Ensuite, définissez la largeur MD 24. Enfin, nous avons remarqué que les icônes sur le côté droit et vers le haut un peu plus bas que le texte sur le côté gauche. Nous pouvons résoudre ce problème en sélectionnant la première ligne et en définissant l'alignement y au centre dans le panneau Options. Nous avons donc fait une belle grille réactive à utiliser comme pied de page. C' est simple de le copier sur les autres pages. N' oubliez pas d'utiliser le collage lié afin que les modifications apportées à l'une des copies soient automatiquement appliquées aux autres. Et c'est à peu près tout pour ce chapitre. Dans le chapitre suivant, nous allons créer un style personnalisé pour formater ce pied de page ainsi que d'autres éléments sur la page. Rendez-vous dans le chapitre suivant. Au revoir. 17. Hour 6 - Importer des thèmes: Jusqu' à présent, nous avons utilisé les couleurs Bootstrap par défaut, les polices, et cetera. Et nous avons modifié manuellement le format des éléments individuels. Il est cependant possible modifier l'aspect général et le style du site dans son ensemble sans avoir à modifier manuellement chaque élément. Nous pouvons y parvenir en changeant le thème ou nous pouvons modifier le style en utilisant CSS. Les thèmes sont les styles, mises en page et formats prédéfinis d'une page. L' utilisation de thèmes préexistants peut être un moyen rapide de modifier l'aspect général du site Web. Pour démontrer, d'abord notre barre de navigation sélectionnée. Dans le panneau d'options, nous voyons que nous avons un certain nombre d'options différentes pour la couleur d'arrière-plan. Je vais le mettre en primaire. Ensuite, je vais sélectionner le paragraphe et aller à l'arrière-plan de l'apparence. J' ai actuellement un vert non standard sélectionné. Cliquez sur le carré coloré à côté de la zone de saisie et choisissez la conception de l'onglet. Le survol de ces couleurs donne le nom de la variable. Je vais choisir le vert avec le succès du nom de variable. Maintenant que nous avons lié la couleur de la barre de navigation et la couleur du paragraphe au thème qui change le thème. Cliquez sur Paramètres. Et sous les thèmes Bootstrap, vous pouvez choisir n'importe quel nombre de faisceaux dans la liste. Je vais choisir obscur et sauver. Comme vous pouvez le voir, la barre de navigation et un paragraphe, ainsi que la couleur du texte ont changé en fonction du nouveau thème. Notez que la couleur de l'arrière-plan de la page a été définie manuellement et qu'elle n'est pas liée à une couleur de thème. Sauf si nous réinitialisons la couleur de l'arrière-plan, cela ne changera pas quoi que ce soit. Tu choisis. 18. Hour 6 - Styles personnalisés personnalisés: Comme nous l'avons vu, il est simple de définir les couleurs de la police, des marges, etc, de chaque élément en utilisant le panneau d'apparence. Mais cela signifie que si nous voulons changer l'apparence globale et le style, nous aurions besoin de revenir en arrière et a dit le formatage pour chaque élément et chaque élément. Cela peut évidemment être très aléatoire et prendre beaucoup de temps. Une meilleure façon serait de créer un style CSS et lier le style aux éléments pertinents en utilisant des attributs de classe. Dans ce qui suit, nous allons créer un blog de style CSS qui définit la couleur de fond à patch. Nous appliquerons ensuite ce style à tous les éléments pertinents. Allez dans index.html, sélectionnez le corps et tirez l'inspecteur de code. Dans le panneau CSS UTILISER un certain nombre de blocs CSS. Le premier bloc est un style point d'élément. Ce spectacle à la mise en forme directe que nous avons fait en utilisant le panneau d'apparence. Certains blocs ont un cadenas indiquant qu'ils ne peuvent pas être modifiés. Dans le panneau HTML. Tirez l'onglet Attributs, ajoutez une nouvelle classe nommée Elément d'arrière-plan. Cette classe, nous allons identifier tous les éléments où nous voulons définir la couleur d'arrière-plan. Ouvrons le fichier styles.css. Allez dans le panneau de conception, double-cliquez sur styles.css pour ouvrir le fichier, un onglet nommé styles.css apparaît dans le panneau Styles. Cliquez sur Créer, un nouveau bloc CSS apparaît. J' ajouterai la même couleur de fond ici. Donc maintenant, la numérotation directe que nous avons appliquée à l'aide du panneau d'apparence est devenue sans importance. C' est le code que nous pouvons voir un élément de ce style. Nous pouvons le supprimer en cliquant sur les trois points dans le coin supérieur droit du bloc et en sélectionnant Effacer. Ensuite, allez à la page sur moi ce HTML. Sélectionnez le corps et ajoutez l'élément d'arrière-plan de texte aux noms de classe. Comme vous pouvez le voir, la couleur d'arrière-plan est appliquée à cette page 2. Ajoutons le même nom de classe aux corps de toutes les autres pages. Lorsque nous l'ajoutons à la page, télécharger des ressources point HTML, nous voyons un petit problème. Nous voyons qu'une grande partie de la page reste blanche. Cela est dû au fait que la liste des articles a un fond blanc par défaut. Nous pouvons résoudre cela en sélectionnant le bloc, puis en ajoutant l'élément d'arrière-plan de classe à cet animal aussi. Comme vous pouvez le voir dans ce cas, le bloc a plus d'une classe. Donc, en résumé, dans ce cas, j'ai simplement créé un bloc CSS nommé élément d'arrière-plan, qui définit simplement la couleur d'arrière-plan ou les animaux qui contiennent cet attribut d'élément d'arrière-plan. Nous avons le jeu de couleurs de fond. Si jamais je veux changer la couleur de l'arrière-plan, tout ce que je dois faire est de changer la couleur ici et elle sera modifiée pour tous les éléments pertinents. Comme une amende de payer. Je voudrais juste mentionner que même si j'ai tapé tout le code CSS dans cet exemple, nous n'avons pas besoin de taper, mais nous pouvons également utiliser le panneau d'apparence. Pour faire ça. Tout d'abord, assurez-vous que vous avez sélectionné un élément qui contient cet attribut. Ensuite, vous pouvez le sélectionner dans cette liste déroulante en haut du panneau d'apparence. De là, nous pouvons modifier le bloc CSS de n'importe quelle façon nous le jugeons bon. Donc c'est tout pour l'instant. Merci d'avoir regardé. Dans la prochaine vidéo, nous allons parler de style réactif. Autrement dit, nous allons créer différents styles pour différents appareils. En d'autres termes. 19. Hour 6 - Styles réagissant réactifs: Nous pouvons également ajouter un style, qui dépend de la taille de l'écran. Par exemple, nous pouvons appliquer de petites marges si le site Web est consulté sur un téléphone, et de grandes marges si le site Web est consulté sur un ordinateur de bureau. Nous y parvenons en utilisant une requête média. Commençons par ajouter le style par défaut. Ajoutez un attribut de classe nommé pied de page à la première ligne de la photo. S' assure que le fichier styles.css est ouvert. Créez un nouveau bloc en cliquant sur Créer et renommez-le en pied de page. Ici, nous allons ajouter le style par défaut. Donnons-lui une bordure solide. Rayon de 10 pixels, remplissage de 20 pixels et marge de cinq pixels. En utilisant cette valeur par défaut, le style semble bien pour les écrans moyens et grands, mais sur les écrans plus petits, il semble un peu écrasé. Et nos plus grands écrans, c'est un peu trop espacé. Donc, augmentons le rembourrage pour les plus grandes cryptes. Tout d'abord, dupliquez le bloc de style de pied de page de points en cliquant sur les points rouges et en sélectionnant Dupliquer. Ensuite, dans un bloc de départ dupliqué, ajoutez une requête multimédia en cliquant sur les trois points et choisissez ajouter une requête multimédia. Le texte ajouter le média, largeur minimale, cent, deux cents pixels apparaît. Cela signifie appliquer le style uniquement lorsque la largeur de la fenêtre est d'au moins cent deux cents pixels. Bootstrap studio a choisi une personne, 200 pixels, parce que nous regardons actuellement l'écran à une personne à un 100 pixels. Changons le bloc de style pour changer le rembourrage, la gauche, le rembourrage, le haut de rembourrage droit et le bas de rembourrage. Rappelez-vous, vous pouvez également le faire en utilisant le panneau d'apparence si vous préférez. Ensuite, supprimons la bordure et diminuons la marge et le rembourrage pour les écrans plus petits. Dupliquez le bloc CSS une fois de plus et modifiez la requête à lire. Ajouter le média largeur maximale 768. Modifiez le style dupliqué pour définir la marge et remplissage sur 0 et supprimez la bordure. Et nous l'avons là. Maintenant, nous avons un pied de page qui n'a pas de bordure et très peu de rembourrage lorsqu'il est vu sur de petits écrans. Et qui a beaucoup de rembourrage lorsqu'il est vu sur de grands écrans. Dans notre prochaine vidéo, nous allons utiliser des variables pour définir et appliquer une nouvelle palette de couleurs pour notre site Web. A bientôt. Au revoir. 20. Hour 6 - Définir les styles de définition: Lorsque nous définissons la couleur d'arrière-plan, nous l'avons choisie directement. Si nous voulons utiliser cette couleur plus souvent, c'est une bonne idée de donner la couleur et facile à retenir le nom. Dans cette vidéo, nous définirons un certain nombre de couleurs que nous utiliserons sur notre site Web. Et nous allons les lier aux différents éléments. Avoir les couleurs principales de notre site Web en un seul endroit facilite choix des couleurs roses et la modification de la conception générale du site plus tard. Tout d'abord, assurez-vous que le fichier styles.css est ouvert. Créez un nouveau bloc en cliquant sur Créer et renommez-le en racine deux-points. Et ce bloc racine, nous définissons une nouvelle couleur nommée couleur d'arrière-plan. Maintenant que nous avons défini la couleur, utilisons-la dans le bloc CSS nommé points éléments d'arrière-plan. Modifiez le code pour inclure un var, des crochets ouverts, une couleur d'arrière-plan, des crochets fermés. De cette façon, nous appliquons la couleur que nous avons définie en route à tous les éléments contenant l'élément d'arrière-plan de classe, nous pouvons définir n'importe quel nombre de couleurs de cette façon. Par exemple, définissons certaines des couleurs que nous utiliserons dans les chapitres suivants. Maintenant, ajoutons les couleurs suivantes. Avait la couleur du pied, la couleur de fond de l'en-tête, et le pied de page, la tête pied planer couleur. Cela va être la couleur des éléments d'en-tête et de pied de page. Lorsque la souris survole. Avait mis la couleur du texte. La couleur du texte de l'en-tête et du pied de page avait la couleur du pied de texte, la couleur du texte de l'en-tête. Lorsque nous survolons, avait mis l'ombre, ce sera la couleur de l'effet d'ombre que nous allons utiliser. Nous pouvons définir ces valeurs de couleur ici manuellement, ou nous pouvons cliquer sur ce carré coloré pour choisir la couleur. Maintenant que nous avons défini notre palette de couleurs, Appliquons les nouvelles couleurs à la barre de navigation et au pied de page. Créez un nouveau bloc de style nommé point head foot. Ce bloc contiendra notre style personnalisé pour la barre de navigation et la photo. Définissez la couleur d'arrière-plan sur la couleur du pied de tête, définissez la couleur du texte sur la couleur du texte du pied de tête et définissez l'abri fiscal pour lire p x dx, ombre du pied de tête. Encore une fois, nous pouvons soit le taper manuellement ou nous pouvons utiliser le panneau d'apparence pour ajouter le style. Maintenant que nous avons créé ce bloc CSS, nous pouvons le lier à la barre de navigation et au pied de page en ajoutant le CSS BlockName dans le panneau d'attributs. Vous avez probablement remarqué que la couleur du texte dans la barre de navigation et les icônes et le pied de page ont toujours leur couleur par défaut. C' est parce que ces couleurs ont déjà été définies dans un autre bloc CSS. Nous pouvons résoudre cela en remplaçant ces blocs CSS. Mais c'est un sujet pour le prochain chapitre. Pour l'instant, finissons ce chapitre en faisant un peu de nettoyage rapide dans le pied de page. Je n'aime pas vraiment l'apparence de cette bordure quand elle est en jaune. Alors retirez-le entièrement et remplaçons-le par une ombre portée. Sélectionnez l'attribut pied de page dans le panneau d'apparence , puis utilisez le panneau d'apparence pour apporter les modifications nécessaires. Nous pouvons voir les changements tels qu'ils se produisent d'une manière sérieuse ici. Nous devons également créer un peu plus d'espace dans le pied de page. Donc, sélectionnons le pied de page et augmentons le rembourrage inférieur, ainsi que le rembourrage supérieur. Donc c'est tout pour ce chapitre. J' espère que tu t'es amusé et je te verrai dans le prochain chapitre. Au revoir. 21. Hour 7 - Styles équations surélevées: Salut tout le monde, comment ça va ? Dans cette vidéo, nous allons parler de la substitution. Vous aurez sans doute remarqué que beaucoup des blocs de style sont verrouillés. En théorie, il est possible de les éditer, mais ce n'est pas une bonne idée. C' est parce que lorsque le framework Bootstrap est mis à jour, vous perdrez toutes les modifications que vous avez apportées à ces fichiers Bootstrap. Mieux vaudrait les remplacer. Pour nous remplacer ici dit plug, nous devons d'abord déterminer quel bloc CSS à remplacer. Commençons donc par remplacer la marque navbar, qui détermine le formatage de cet élément. Sélectionné. Et tirez l'inspecteur HTML et tirez vers le haut l'onglet attributs. Nous voyons que la marque navbar a un attribut de classe nommé marque navbar. En passant par cet onglet de diode, nous obtenons un aperçu de tous les blocs CSS qui affectent la marque navbar. Nous recherchons celui qui définit la couleur de la police. faisant défiler, on voit que c'est celui-là. Nous ne pouvons pas éditer ce bloc, nous devons donc le remplacer. Cliquez sur les trois points dans le coin supérieur droit et sélectionnez Copier dans styles.css. Un doublon apparaît dans le fichier styles.css. Éditons le doublon. Répétons cela avec les éléments restants. Le lien actif a un ClassName, lien nav actif. Encore une fois, nous recherchons le bloc CSS qui définit une couleur. C' est celui que nous aimerions remplacer. Impact pour le lien actif, Non seulement changé la couleur de la police, mais nous allons également changer la couleur de fond. Nous aimerions également remplacer les liens de navigation. Nous aimerions également remplacer l'élément déroulant. Et nous aimerions changer la couleur d'arrière-plan du menu déroulant. Vous vous demandez peut-être pourquoi il y a tant d'attributs dans ces blocs CSS. Cela est dû au fait que non seulement les attributs mentionnés ici, mais aussi les attributs des parents et des grands-parents, etc. Vous pourriez donc être tenté de modifier cette ligne pour la rendre un peu plus simple. Mais il y a une très grande chance que ça gâche le style que vous avez appliqué. C' est à cause de ce qu'on appelle la spécificité. C' est un peu au-delà de la portée de ce cours de vous enseigner la spécificité. Mais si vous êtes intéressé, vous pouvez consulter quelques lectures supplémentaires sur ce site. Si vous êtes intéressé. Si ce n' est pas le cas, continuez à suivre avec moi. Ensuite, nous voyons que nous devons toujours remplacer cette couleur bleue dans les icônes et le pied de page. En faisant défiler les styles associés à cet élément, nous voyons que la couleur est définie par un bloc CSS appelé a. En CSS, c'est en fait le style qui est appliqué à tous les liens. Et l'icône hérite de cet attribut car le parent de l'icône est un lien. Si nous devions remplacer ce bloc css, cela changerait la mise en forme de tous les liens de la page. Ce n'est évidemment pas ce qu'on veut. Donc, dans ce cas, il est préférable d'ajouter un attribut de classe supplémentaire nommé icône de pied de tête et de définir la couleur de police dedans. Et ajoutons cet attribut à chacune des icônes. Donc, dans cette leçon, nous avons appris à remplacer les éléments CSS verrouillés qui viennent avec le framework Bootstrap. Dans la vidéo suivante, nous allons définir le style de ces éléments lorsque nous survolons avec une souris. Et nous allons également changer le style de cette icône de menu, qui semble être très têtu et nécessite une attention particulière. 22. Hour 7 - Remplacer la pause de la hover: Ok, ensuite, nous voulons définir notre style de vol stationnaire. Ce style sera appliqué chaque fois que la souris survolera l'élément en question. Définir un style Harvard revient exactement à définir un style normal. La seule chose est que nous devons ajouter un survol deux-points à la fin du nom de l'attribut. Ainsi, par exemple, dans la vidéo précédente, nous avons créé un style pour ces icônes et le pied de page. Copions ce bloc de numérotation. Et à la fin du nom de l'attribut, ajoutez le survol à double point. Et pour le vol stationnaire, nous allons définir la couleur de l'icône sur le blanc. Lorsque nous regardons les autres éléments, comme la marque navbar, nous voyons que le style de vol stationnaire a déjà été défini. Donc, pour mettre à jour ces basculements, nous devons remplacer ces boîtes CSS, comme nous le savons dans la vidéo précédente. Pour ce faire, tout ce que nous devons faire est de les copier dans le bloc styles.css et de les mettre à jour avec le formatage dont nous avons besoin. Enfin, nous voyons que cet élément de menu n'est toujours pas la couleur que nous voulons. Pour résoudre cela, supprimons l'image et remplacons-la par une icône. Lorsque nous regardons le CSS, nous voyons que l'URL de l'image de fond SVG, remplacer ce bloc en le copiant dans styles.css et remplacer l'URL SVG par aucun pour supprimer l'image. Ensuite, nous ajoutons une icône à sa place. Faites glisser une icône dans la plage. Double-cliquez sur l'icône et trouvez la barre nommée dans Font Awesome 4. Trouvons le bon bloc pour remplacer et changer la couleur de police en jaune. Et enfin, augmentons la taille de l'icône en augmentant la taille de la police. C' est donc tout pour le style et le formatage. J' espère que c'était intéressant pour vous et j'espère que vous vous êtes amusé à en apprendre davantage. Dans le chapitre suivant, nous allons aller de l'avant avec quelque chose de complètement différent. On va parler de Flexbox. Alors je te verrai dans le prochain chapitre. Au revoir pour l'instant. Au revoir. 23. Hour 8 - Flexbox Expliqué: Salut tout le monde et bienvenue au prochain chapitre de Bootstrap Studio. Dans ce chapitre, nous allons tout apprendre sur Flexbox. Flexbox est un moyen facile de spécifier l'espacement entre les différents éléments d'une grille. Dans cette première vidéo, nous allons avoir une explication rapide. Et puis dans la vidéo suivante, nous allons mettre à profit cette connaissance en élaborant un exemple dans lequel nous distribuons des icônes gratuites sur une colonne. Dans la troisième vidéo, nous allons utiliser flexbox pour nous assurer que nous avons poussé le pied de page vers le bas de la page. Alors commençons. Tout d'abord, installons les choses. Commençons par ajouter un div simple à la page. Et dans ce div, Ajoutons trois paragraphes. Et nous allons éditer le texte pour les nommer paragraphes 1, 2 et 3. Pour aider à visualiser les choses, ajoutons une petite marge à la div. Augmentez la hauteur de la div et ajoutez une bordure. Et aussi, définissons l'arrière-plan des paragraphes sur rouge, vert et bleu. Accédez à Options. Ici, nous voyons ce titre, Flexbox. Et nous voyons un certain nombre de listes déroulantes. Nous pouvons utiliser ces listes déroulantes pour définir l'une ou l'autre des propriétés de la boîte, qui est dans ce cas la div. Ou nous pouvons définir les propriétés des éléments dans la boîte, qui est, dans ce cas, les trois paragraphes. Jetons un coup d'oeil à certaines des propriétés de la boîte que nous pouvons définir. Donc, tout d'abord, assurez-vous que le div est sélectionné. Et recherchez la zone flexible d'en-tête dans le panneau Options. Commençons par définir le conteneur flex sur flex. Ensuite, définissons la direction à la ligne. Comme vous pouvez le voir, les paragraphes sont maintenant disposés côte à côte plutôt que verticalement. Nous pouvons également définir la direction à la ligne inverse. Donc, toutes les colonnes inversent pour changer l'ordre des paragraphes. En utilisant la liste déroulante justifier le contenu, nous pouvons modifier la disposition de ces paragraphes dans son conteneur. Nous pouvons utiliser start et uncentrered pour mettre les paragraphes au début, la fin et au centre de la ligne. Nous pouvons utiliser entre, ce qui met le premier paragraphe au tout début et le dernier paragraphe à la toute fin. Et entre les paragraphes également espacés entre eux. Et nous pouvons utiliser autour avec des espaces ou des éléments également. Notez que justifier fonctionne également lorsque nous définissons la direction à colonne. Mais dans ce cas, la justification fonctionne verticalement plutôt que horizontalement. Il peut être amusant de jouer avec ceux-ci juste pour avoir une idée pour elle. Nous pouvons également définir l'alignement. L' alignement fonctionne exactement de la même manière que justifier, mais il fonctionne dans la direction perpendiculaire à la direction que nous avons définie ici. Par exemple, si nous le définissons au centre, les paragraphes sont envoyés au milieu de la div. Certaines de ces listes déroulantes ne s'appliquent pas au conteneur, mais appliquées aux éléments du conteneur, les paragraphes dans ce cas, par exemple, nous pouvons définir si l'élément doit grandir ou non pour remplir l'espace disponible. Voici un aperçu rapide du paramètre flexbox. Il y a encore plus à apprendre sur Flexbox. Mais pour le bien de ce cours, je pense que nous allons le laisser pour l'instant. Si vous êtes intéressé à en savoir plus, je recommande le site suivant. Mais pour moi, pour l'instant, je vais te dire au revoir. Dans la vidéo suivante, nous allons appliquer ce que nous avons appris à cet exemple simple dans lequel nous utilisons flexbox pour appliquer un espacement cohérent entre ces icônes pré dans chaque colonne. Alors on se voit dans la prochaine vidéo. Au revoir pour l'instant. 24. Hour 8 - Exemple Flexbox - Disposition des icônes: Bonjour, tout le monde a une chance. J' espère que vous passez une belle journée et bienvenue à la prochaine vidéo. Dans cette vidéo, nous allons appliquer ce que nous avons appris sur flexbox dans la vidéo précédente pour assurer un espacement égal entre ces trois icônes dans chacune de ces colonnes. Alors, allons commencer. Aller à la page, télécharger le logiciel que HTML, glisser-déposer l'article est à la page entre l'en-tête et le pied de page. Supprimer l'introduction et supprimer deux des articles. Glisser-déposer et div dans l'article restant juste après le paragraphe. Supprimez le lien contenant l'icône. Faites glisser et déposez un nouveau lien dans la div. Éditez le texte, faites glisser et déposez une nouvelle icône dans le lien. Réglons la taille de police du lien à 32 pixels. Et dupliquons le lien deux fois. Nous avons mis mes icônes sur le pingouin Linux, le logo Windows. Et pour coder. Enfin, nous allons configurer la div sélectionnée flexbox et aller dans le panneau Options. Définissez le conteneur flexible sur flex, définissez, justifiez le contenu autour. Maintenant, nous avons un modèle pour notre article. Nous pouvons facilement dupliquer cela pour remplir la liste des articles. Ensuite, nous pouvons éditer les détails de chaque entrée. Donc, dans cet exemple, nous utilisons flexbox pour montrer comment nous pouvons facilement ajouter un espacement réactif entre ces trois icônes afin que les icônes soient réparties uniformément quelle que soit la taille de l'écran que nous utilisons. Dans l'exemple suivant, nous allons utiliser flexbox pour pousser ce pied de page jusqu'au bas de la page, encore une fois, quelle que soit la taille de la fenêtre. Alors on se voit dans la prochaine vidéo. Au revoir pour l'instant. 25. Hour 8 - Exemple Flexbox - pousser le pied de pied au pied de la page: Bonjour à tous et bienvenue à la prochaine vidéo. Vous avez peut-être remarqué que le pied de page n'atteint pas toujours le bord inférieur de la page. Un moyen facile de résoudre ce problème est d'utiliser flexbox. Tout d'abord, définissons la hauteur de l'élément de corps à cent. Cent vh signifie en fait 100% de la hauteur verticale disponible. Cela garantit que l'élément body est aussi grand que l'espace disponible sur une page Web. Ensuite, définissez les propriétés flexbox du corps ont été dit conteneur flex pour flex définira la direction à colonne et nous sommes définis justifiés à entre. Et maintenant, nous avons le pied de page fermement envoyé au bas de la page. Assez facile, non ? Appliquons ceci aux éléments du corps des autres pages aussi. Parfois, il gâche la mise en page des autres éléments sur la page cependant. Par exemple, et la page d'index, il semble un peu trop direct. Dans ce cas, nous pouvons mettre l'en-tête et un paragraphe dans un div ensemble afin qu'ils soient regroupés ensemble. Et la flexbox les traite comme un seul élément. Nous pouvons même les regrouper avec la barre de navigation pour les pousser jusqu'au haut de la page, juste en dessous de la barre de navigation. Donc tout ça vient de moi pour l'instant. Dans la prochaine vidéo, nous allons parler de la création de nos propres composants personnalisés. On se voit alors, au revoir. 26. Hour 9 - Ajouter des composants personnalisés à la bibliothèque: Salut tout le monde, comment ça va ? J' espère que tu t'amuses bien. Jusqu' à présent, nous avons vu un certain nombre d'éléments simples et élaborés dans la bibliothèque du studio. Mais nous n'avons pas besoin de nous limiter aux composants que nous pouvons trouver dans une bibliothèque. Dans ce chapitre, nous allons tout apprendre sur la fabrication nos propres composants personnalisés et la recherche de composants personnalisés en ligne. Nous avons également appris à code HTML personnalisé sur le site Web. Mais commençons par ajouter l'un de nos propres composants personnalisés existants à la bibliothèque. Peut-être avons-nous fait un élément que nous aimons vraiment et nous voulons l'utiliser aussi dans d'autres projets. La façon la plus simple d'y parvenir est de l'ajouter à la bibliothèque. Prenons par exemple le pied de page que nous avons créé et ajouté à la bibliothèque. Dans le panneau de présentation, cliquez avec le bouton droit sur le pied de page et sélectionnez Ajouter à la bibliothèque. Une fenêtre apparaît. Nous pouvons définir le nom du composant, et nous pouvons également sélectionner les ressources qui doivent être incluses. Bootstrap Studio peut comprendre certaines des ressources qui doivent être incluses. Par exemple, les blocs CSS qui sont directement liés aux éléments du pied de page seront automatiquement inclus ici. Nous pouvons également ajouter des blocs supplémentaires et JavaScript qui doivent être liés. Dans ce cas, il y avait un bloc que nous n'avons pas directement lié, qui est le bloc racine du deux-points. C' est un bloc où nous avons défini les couleurs du palais. Nous devons donc collecter ce bloc spécifiquement. Dans la bibliothèque. Nous pouvons trouver notre nouveau composant dans l'utilisateur du dossier. Essayons-le pour voir si cela fonctionne sur d'autres projets. Pour créer un nouveau projet vide. Et faites glisser et déposez le nouveau pied de page sur la page. Ça fonctionne très bien. Nous pouvons également être gentil et télécharger ce composant. Espérons que cela sera utile à d'autres personnes aussi. Nous pouvons également trouver beaucoup de composants très utiles qui sont les utilisateurs ont téléchargé ici. Nous pouvons donc faire beaucoup en combinant des composants dans le panneau de présentation. Mais parfois, il peut être utile d'ajouter notre propre code HTML et bootstrap Studio nous permet de le faire aussi. Nous utilisons le bloc de code personnalisé. Le bloc de code personnalisé est un bloc très utile. C' est simplement un bloc vide dans lequel vous pouvez taper ou coller votre propre code. Cela peut être très utile car de nombreux sites Web et plateformes vous offrent la possibilité de générer du code que vous pouvez ensuite intégrer dans votre propre site Web. Ensuite, servons à YouTube. Je veux trouver une vidéo que je souhaite intégrer sur mon site Web. Une autre vidéo, vous avez extrait le bouton de partage, cliquez dessus, et cliquez ensuite sur intégrer. Une fenêtre avec du code, apparaît, sélectionnez le code et copiez-le dans le presse-papiers. Back et Bootstrap studio, double-cliquez sur un élément de code personnalisé et collez le code dans l'espace disponible. Malheureusement, le code personnalisé n'apparaît pas sur un canevas. Pour tester le résultat, nous devons créer un aperçu. Pour rendre les choses un peu plus statiques. Au centre de la vidéo. Donc, comme vous pouvez le voir, il est assez simple d'intégrer du code personnalisé dans notre site Bootstrap studio. Nous pouvons également ajouter du code SVG en ligne de la même manière. Pour ceux d'entre vous qui ne le savent pas, SVG signifie Scalable Vector Graphics. Et c'est un très bon moyen d'inclure des graphiques sur votre site Web. Nous allons en apprendre plus à ce sujet dans la prochaine vidéo. Donc je vais voir la cellule bipolaire. 27. Hour 9 - Inline SVG: Bonjour tout le monde, comment ça va ? Bienvenue de retour. Dans cette vidéo, nous allons tout apprendre sur SVG en ligne. Inline SVG nous donne la possibilité d'intégrer des graphiques vectoriels directement dans notre site Web. Svg est un exemple de format graphique. En ce qui concerne les graphiques, vous pouvez choisir des graphiques raster tels que PNG ou JPEG ou bitmap, par exemple. Graphiques vectoriels. Les images raster sont essentiellement une grille de pixels et chaque pixel a une valeur de couleur. graphiques vectoriels, d'autre part, sont un ensemble d'instructions de forme et de couleur. Le type le plus courant de format de fichier graphique vectoriel est appelé SVG. Svg signifie Scalable Vector Graphics. En général, en ce qui concerne le web, il est préférable d'utiliser des graphiques vectoriels plutôt que des graphiques raster. En effet, en général, les graphiques vectoriels ont une taille de fichier plus petite. Ils sont indépendants de la résolution, sorte que vous n'avez pas à vous soucier de la taille de l'écran que vous utilisez. En outre, tout type de texte inclus dans l'image sera identifié comme texte, ce qui signifie qu'il peut facilement être récupéré par le moteur de recherche, par exemple. Et un dernier avantage du type de fichier SVG est qu'il est raisonnablement facile, pour un être humain de le lire. Comme HTML. Il se compose d'éléments et de balises et de propriétés. Il peut donc être plus ou moins compris par les êtres humains et peut également être interprété sans ambiguïté par un ordinateur. Pour les besoins de ce tutoriel, j'ai créé un logo simple dans Inkscape. Inkscape est un logiciel libre et open source qui peut être utilisé pour créer des graphiques vectoriels. C' est l'un de mes logiciels absolument préférés. Et il se trouve aussi que j'ai des cours sur Inkscape auxquels vous pouvez trouver sur Udemy Skillshare. Ou vous pouvez trouver certains de mes tutoriels gratuits sur YouTube. Quand il s'agit d'importer des images SVG, nous pouvons les glisser et les déposer comme nous le faisons pour d'autres images. Une meilleure façon cependant, serait de copier le code SVG dans un bloc personnalisé. De cette façon, nous avons un accès direct au contenu de l'image. Pour ce faire, nous ouvrons d'abord le fichier SVG dans un simple éditeur de texte. Après avoir ouvert le fichier SVG, nous voyons qu'il y a beaucoup que nous comprenons. Je veux dire, ne vous méprenez pas. Il y a beaucoup d'abracadabra dans les cheveux. Mais nous pouvons voir à première vue beaucoup, ce qui est clair pour tout le monde. Une fois un éditeur de texte ouvert, sélectionnons tout le texte en appuyant sur Ctrl a et copiez-le dans le presse-papiers en appuyant sur Ctrl C. Ensuite, revenez au studio d'amorçage et collez-le dans un composant de code personnalisé que nous appris à faire dans une vidéo précédente. Maintenant, nous avons ce code SVG intégré dans notre HTML. C' est ce qu'on appelle SVG en ligne. Malheureusement, bootstrap studio ne peut pas interpréter ce code en direct en ce moment, nous devons donc créer un aperçu pour voir à quoi il ressemble. Donc, une bonne chose à propos de l'utilisation de SVG en ligne est que le texte est incorporé dans le site Web. Ainsi, par exemple, quand il s'agit d'Optimisation des moteurs de recherche, c'est le grand avantage. Et un autre grand avantage est que nous pouvons faire manuellement des modifications simples au texte assez facilement. Par exemple, nous allons changer le texte sur le logo, juste cherché pour trouver un texte et édité. Il est également assez simple de changer la couleur de l'un des objets du logo. Nous avons juste besoin de changer la propriété de remplissage. Nous pouvons même lier ces couleurs aux couleurs variables, que nous avons définies dans une vidéo précédente. De cette façon, si nous décidons de changer notre palais, le logo sera mis à jour. Et un autre paiement vraiment cool à propos de SVG en ligne est que nous pouvons même utiliser JavaScript pour contrôler les propriétés des éléments SVG. Si vous êtes intéressé par JavaScript, nous en apprendrons plus sur JavaScript dans un prochain chapitre. Une chose que nous devrions être conscients, c' est que parce qu'il s' agit d'un code personnalisé, nous ne pouvons pas utiliser le panneau d'apparence pour définir le style. Mais il y a un moyen rapide de contourner ça. Nous pouvons facilement définir la classe manuellement, puis commencer le style. Donc c'est tout pour l'instant. Merci d'avoir regardé. Dans le chapitre suivant, nous allons tout apprendre sur l'ajout de formulaires. Et nous allons en apprendre davantage sur l'ajout de formulaires intelligents, dans lesquels l'utilisateur peut envoyer le formulaire rempli directement à notre adresse e-mail. Donc c'est tout pour l'instant. Merci d'avoir regardé. Je te verrai là-bas. Bonne journée. Au revoir. 28. Hour 10 - Forms: Bonjour tout le monde. J'espère que tu t'amuses bien. Bienvenue dans la prochaine vidéo. Dans cette vidéo, nous allons créer un formulaire simple en utilisant les éléments de formulaire du studio bootstrap. Alors commençons. Tout d'abord, faisons glisser un conteneur sur la page. Et faisons glisser un formulaire dans le conteneur. Nous mettons un titre à l'intérieur et renommons le hareng en bon de commande. Commençons par donner à ces formulaires un formatage de base. Par exemple, ajoutons une bordure et une ombre portée juste pour rendre un peu plus agréable à regarder. Cela signifie également utiliser quelques lignes et colonnes pour créer une mise en page simple. Et nous allons remplir nos lignes et colonnes largeur, boutons radio et étiquettes. Donc, à la fin, nous avons deux colonnes avec chacune quatre boutons radio. Le premier est la taille, et le second est la couleur. Ok, nous avons une forme très, très basique. Voyons si ça marche. Démarrage de l'aperçu. Cela fonctionne plus ou moins, mais nous avons un problème. Nous pouvons sélectionner n'importe quel nombre de boutons radio que nous voulons. Habituellement, les boutons radio fonctionnent de telle sorte que lorsque vous sélectionnez un, il en désélectionne automatiquement un autre. Nous pouvons le faire dans le panneau Options en donnant un nom aux boutons radio. Les boutons radio portant le même nom appartiennent au même groupe. Et vous ne pourrez en sélectionner qu'un au sein d'un groupe à la fois. Maintenant, nous avons deux groupes, un pour la taille et un pour la couleur. Essayons ça. Oui, beaucoup mieux. Ok, ensuite, ajoutons une autre ligne et deux colonnes. Et remplissons les colonnes avec une étiquette et une entrée e-mail. Nous pouvons également définir la largeur relative 2, 3 et 9. Puisque nous avons ajouté une entrée e-mail dans le formulaire, n' acceptera qu'une entrée sous la forme d'une adresse e-mail. En d'autres termes, il doit avoir ce symbole d'ajout. Dupliquons la ligne. Dans cette ligne, nous donnerons à l'utilisateur une option pour ajouter un logo personnalisé. Remplaçons l'entrée de courrier électronique par le champ de saisie de fichier. Maintenant, l'utilisateur a la possibilité de joindre un fichier. Ajoutons un div et faisons cela div en bas. Nous pouvons définir l'alignement pour aligner, écrire, pour nous assurer que le bouton est poussé vers la droite. Et nous allons changer le texte du bouton à soumettre. Ok, donc maintenant on a un bouton qui fonctionne. On peut cliquer dessus, mais ça ne fait rien. Mais on peut cliquer dessus. Donc c'est l'essentiel, non ? Et je plaisante, je plaisante. Non, nous allons faire en sorte que lorsque l'utilisateur clique sur ce bouton, toutes les données que l'utilisateur a renseignées ici soient envoyées à notre adresse e-mail. Nous allons utiliser des formulaires intelligents pour y arriver, ce qui est assez facile, mais nous ne le ferons pas maintenant. On va le faire dans la prochaine vidéo. En attendant, nous allons juste rendre le formulaire un peu plus agréable en nettoyant juste un peu à l'aide du panneau d'apparence. Nous avons donc une forme de base. Nous avons examiné les boutons radio et la saisie d'e-mail et une entrée de fichier, mais il y a plus d'éléments de formulaire disponibles. Il suffit de regarder sous l'en-tête du formulaire dans la bibliothèque. Nous avons également un certain nombre de formulaires préfabriqués disponibles, que vous pouvez trouver sous Formulaires d'assurance-chômage. Comme je l'ai mentionné dans la vidéo suivante, nous allons transformer ce formulaire en une forme active. Merci d'avoir regardé, et je te verrai dans la prochaine vidéo. 29. Hour 10 - Smart Forms: Bonjour tout le monde. Comment ça va ? Dans la vidéo précédente, nous avons créé une forme plus agréable comme celle-ci, ce qui a l'air agréable, mais cela ne fait rien. Donc, dans cette vidéo, nous allons utiliser formulaires intelligents pour que l'utilisateur puisse remplir ce formulaire et cliquer sur le bouton Soumettre. Lorsque l'utilisateur clique sur ce bouton, un e-mail contenant toutes les données sera envoyé à notre adresse e-mail. Dans Bootstrap Studio. C' est en fait assez simple de mettre en œuvre cela. Alors commençons. Tout d'abord, allez dans le panneau de présentation et sélectionnez un formulaire. Ensuite, allez dans le panneau Options. Et les formes intelligentes de Togas. Ici, nous pouvons sélectionner l'adresse e-mail où les données du formulaire seront envoyées. J' ai déjà une adresse e-mail ici. Mais si vous n'en avez pas, vous devez cliquer sur gérer pour en ajouter un. Entrez l'adresse ici, et cliquez sur Créer. Vous devez vérifier l'adresse e-mail à l'aide du code de vérification que Bootstrap Studio vous enverra. Depuis que j'ai déjà ajouté un destinataire, notre étape a été ignorée. Une fois que vous avez ajouté le destinataire, revenez au panneau d'options et choisissez-le dans cette liste déroulante. Pour vous assurer que l'utilisateur ne laisse aucun des champs vides. Nous pouvons utiliser ce champ de validation. Si nous l'avons défini sur requis, l'utilisateur recevra un message d'erreur. S' ils le laissent vide. Sélectionnez tous ces boutons radio à l'aide de la touche de contrôle pour sélectionner plus d'un à la fois et aller à la validation et sélectionner requis. Et faisons la même chose avec le champ de saisie e-mail. Enfin, il est important pour nous de définir le type de modèle à soumettre. Ok, maintenant on est prêts. Voyons l'inaction du smartphone en créant un aperçu. Comme vous pouvez le voir lorsque nous avons essayé de soumettre sans remplir les champs appropriés, nous obtenons un message d'erreur. Nous devons même nous assurer qu'il s'agit d'une adresse e-mail valide. Nous pouvons télécharger un fichier. Lorsque nous cliquons sur le bouton Soumettre, nous obtenons cette capture pour prouver que nous ne sommes pas des robots essayant de prendre le contrôle du monde naturellement. Ok, notre email est arrivé. Vérifions notre boîte de réception pour voir plus précisément ce qu'elle dit. Le courriel contient trois informations et la pièce jointe. Nous avons dit les noms de ces boutons radio à la taille et à la couleur. C' est pourquoi nous voyons la taille et la couleur ici. Quand nous regardons la valeur, nous voyons que cela n'a pas vraiment de sens. On a S pour la taille et la couleur. En outre, le nom de l'adresse e-mail n'a pas de sens. Revenons donc au studio bootstrap pour réparer cela. Définissons une valeur appropriée pour chaque bouton radio. Et pour l'adresse e-mail. Définissons le nom. Ok, essayons-le dans un aperçu. Super, comme vous pouvez le voir, maintenant il est beaucoup plus facile de comprendre la soumission du nouveau formulaire. Ainsi, comme vous pouvez le voir, Bootstrap Studio facilite l'ajout d'un formulaire intelligent à notre site Web. Nous pouvons l'utiliser pour créer nos propres formulaires de contact sont sur les formes orales, et cetera, et cetera. Mais si nous voulons créer une fonctionnalité plus avancée, nous devrons utiliser JavaScript. Et c'est le sujet du prochain chapitre. Nous allons commencer par désactiver cette adresse e-mail et ajouter une case à cocher opt in. Beaucoup de gens se sentent intimidés par le codage, mais je vous assure qu'il n'y a absolument pas besoin. codage est en fait très amusant, mais nous n'en aurons pas besoin pour le reste du cours. Donc, si vous pensez que JavaScript ne va pas être utile pour vous, ou si vous connaissez déjà le script Java, ou même si vous ne vous sentez pas comme ça ou quelle que soit la raison pour laquelle epi a envie de sauter le chapitre suivant, alors allez-y et sauter. Et je vous verrai dans le dernier chapitre sur l'exportation et l'édition. Si d'un autre côté, vous êtes enthousiaste à apprendre un peu sur JavaScript, alors je vous verrai dans le prochain chapitre. Si longtemps pour l'instant, au revoir. 30. (Facultatif) 1 : 1 : Javascript: : Conseils pour les Noobs: Dans cette vidéo, nous allons apprendre un peu sur JavaScript. Dans ce chapitre, vous serez en mesure de suivre les étapes pour créer cette case à cocher opt in, qui peut activer et désactiver cette entrée e-mail. Dans ce chapitre, je vais supposer que vous êtes un débutant complet. Donc nous allons être très méticuleux. Mais avant de commencer, je voudrais rapidement couvrir les conseils pour les codeurs débutants. pointe numéro un est précise, très précise. Il s'avère que les ordinateurs ne sont pas très intelligents. Même ce qui semble être une faute de frappe insignifiante pourrait potentiellement casser votre code. Donc, si votre code ne fait pas ce que vous attendez, il est très possible que cela simplement parce que vous avez fait une faute de frappe, cela peut être très frustrant pour les débutants. Mais je crains que ce ne soit qu'une des réalités du codage. Et à mesure que vous devenez plus expérimenté, vous vous habituerez à être précis tout le temps. Astuce numéro deux, testez le code. Très, très souvent pour les débutants, il n'est pas exagéré de tester le code pour chaque ligne que vous ajoutez. Après tout, il est beaucoup plus facile de trouver une faute de frappe dans une seule ligne de code plutôt que dans une centaine de lignes de code. Et pourboire numéro trois, pensez comme un robot. En d'autres termes, essayez de penser très logiquement et systématiquement. codage est un excellent exercice pour le cerveau. Plus vous codez, plus vous vous entraînez à penser logiquement et systématiquement. Parce que c'est la meilleure façon de comprendre pourquoi votre code ne fait pas ce que vous vouliez faire. Et le pourboire numéro 4, soyez en ligne tout le temps. codage n'est pas comme apprendre une langue où vous devez apprendre beaucoup par cœur. Il s'agit plus de comprendre les vêtements et les structures. Et c'est plus sur le fait de pouvoir chercher comment faire des choses. Et le meilleur endroit pour chercher des trucs, c'est Internet. Ok, donc avec ces quatre conseils en tête, commençons. 31. (Facultatif) 1 : 1 : Javascript : onclick: Bienvenue à tout le monde. Dans cette vidéo, nous allons ajouter cette case à cocher et nous utiliserons JavaScript pour détecter, chaque fois que quelqu'un clique sur une case à cocher. Déposez une case à cocher avec une étiquette et ajustez le travail à lire. S' il vous plaît envoyez-moi des newsletters, du matériel promotionnel et tout ça. Ensuite, sélectionnez l'entrée du courrier électronique. Et sous l'état dans le panneau Options. Basculer désactivé. Dumb pour ajouter le fichier JavaScript dans le panneau de conception, allez à la rubrique JavaScript. Cliquez avec le bouton droit sur l'en-tête et choisissez Nouveau et choisissez Fichier JS. Prévoyez seulement d'utiliser un fichier JavaScript. Donc soyons très imaginatifs et nommez-le java script.js. Donc, le but pour l'instant est de créer une fonction simple qui s'exécute chaque fois que l'utilisateur clique sur une case à cocher, double-cliquez sur un fichier JavaScript pour l'éditer. Et la fonction suivante, cocher de fonction cliqué sur le support ouvert, fermer les parenthèses, crochets bouclés, alerte, crochets ouverts, bonjour, fermer les parenthèses. Laissez-moi juste expliquer celui-ci rapidement. Nous venons de définir une fonction et le nom de cette fonction est appelé case cliqué chaque ping entre les crochets bouclés est ce que la fonction fait. Dans ce cas, nous n'avons qu'une seule ligne dans notre fonction. Il crée une boîte d'alerte avec le texte Bonjour. Nous avons donc créé une fonction qui fait quelque chose, mais nous n'appelons jamais cette fonction. Donc, ce que nous aimerions faire est que nous voudrions déclencher cette fonction parfois, disons que chaque fois que quelqu'un clique sur une case à cocher, cela déclenche un dysfonctionnement. Pour ce faire, cochez la case et ouvrez le panneau attributaire. Ajoutons un onclick avec la case à cocher valeur cliquée. Donc, chaque fois que nous cliquons sur cette case à cocher, il va déclencher la case à cocher de fonction cliquée. Notez que la valeur de cette clé doit être exactement la même que le nom de la fonction. S' il y a même une petite faute de frappe, ça ne marchera pas. Créons un aperçu pour le tester. Ça marche, super. Maintenant que nous savons que cela fonctionne, nous pouvons passer à l'étape suivante. L' étape suivante consiste à savoir si cette case est cochée ou non. On va le faire dans la prochaine vidéo. On se voit là-bas. 32. (Facultatif) Hour 11 : Javascript : Javascript: id's, s'il s'est et si vous avez besoin de la bouée de element (Optional): Bonjour tout le monde et bienvenue. Dans la vidéo précédente, nous avons créé une fonction simple et nous utilisons l'attribut sur clic pour déclencher la fonction chaque fois que quelqu'un clique sur une case à cocher. Dans cette vidéo, nous allons étendre cette fonction afin que la fonction nous dise si la case à cocher a été cliquée non pas dans le fichier JavaScript. Créez une nouvelle variable nommée check. Utilisez Document.GetElementById pour lier la case à cocher à la variable. Cette fonction getElementById lie l'élément avec cet ID et stocke toutes les informations dans cette variable de vérification. Ajoutons une alerte pour voir si la case à cocher est cochée ou non. Dans ce cas, coché est l'une des propriétés de la vérification de variable. Et cela peut être vrai ou faux. Créons un aperçu. Et comme vous le voyez, lorsque nous cliquons sur la case à cocher, le résultat est vrai. Et lorsque nous décochons la case, le résultat est faux. Ensuite, ajoutons une condition simple. Nous utiliserons une clause dite IF. En passant, nous pouvons utiliser deux barres obliques inverses comme ceci pour commenter le code. Cela signifie que le navigateur ignorerait simplement le code. Nous pouvons utiliser ces commentaires pour garder quelques conseils et explications pour nous-mêmes quand nous regardons ce code à nouveau plus tard ou pour d'autres personnes quand elles examinent notre code, je vais juste garder cette ligne de code comme un commentaire parce que je suis susceptible oubliez comment configurer une boîte d'alerte et je ne veux pas avoir à la rechercher plus tard en ligne. Donc je vais juste le laisser ici pour rappel. Commencez par le mot-clé if, suivi de quelques crochets. Entre ces deux crochets de groupe, nous avons une expression qui peut être vraie ou fausse. Dans ce cas, coché ou non coché peut être vrai ou faux. Et ajoutons une alerte. L' alerte n'apparaîtra que si le point de contrôle de l'expression coché est égal à vrai. Donc, en d'autres termes, si la case à cocher a effectivement été cochée, et nous allons la tester. Donc maintenant, nous avons la situation où la case à cocher est couverte. Qu' en est-il si la case à cocher n'est pas cochée ? Pour cela, nous pouvons utiliser le mot-clé else. Else est toujours utilisé en combinaison avec if. Dans ce cas, nous avons si la case à cocher est cochée, puis faites-le dans tous les autres cas à cela. Et testons-le pour voir si ça marche. Donc maintenant, nous avons une structure claire qui peut déterminer si la case à cocher a été cliquée ou non. Mais nous aimerions non seulement envoyer des alertes, mais aussi activer et désactiver la boîte de saisie des e-mails. Et c'est ce qu'on va faire dans la prochaine vidéo. Mais pour nous, il est temps de faire une pause. Alors allez-y et faites une courte ou longue pause. Et je vais te voir dans la prochaine vidéo. Au revoir. 33. (Facultatif) 1 : Javascript : Déactiver le champ d'entrée des messages par e-mail: Bonjour tout le monde. Dans la vidéo précédente, nous avons ajouté un simple JavaScript qui détecte chaque fois que quelqu'un clique sur une case à cocher et détermine également si oui ou non la case est actuellement cliquée. Nous avons appris à écrire des fonctions et à les déclencher avec le mot-clé onclick. Nous avons appris à trouver un élément par son ID en utilisant une fonction appelée get element by ID. Et nous avons appris à créer des conditions simples en utilisant les mots-clés if et else. Dans cette vidéo, nous allons étendre le script pour activer et désactiver le champ de saisie e-mail en fonction de la valeur de la case à cocher. Alors commençons. Nous devons d'abord mettre toutes les informations de cette boîte de saisie dans une variable devrait être plus précise. Nous avons besoin d'une variable qui pointe vers la boîte de saisie e-mail. Donc, donnons la boîte de saisie et l'ID e-mail et utilisez document.getElementById pour créer une variable qui pointe vers cette boîte de saisie e-mail. Et maintenant que nous avons une variable pointant vers cette boîte de saisie spécifique, nous pouvons définir ses propriétés. Nous avons dit que la propriété handicapée de forcer au cas où la case à cocher est active. Et nous le définissons sur true si la case à cocher n'a pas été cochée. Et nous l'avons là. Nous avons ajouté une fonctionnalité simple à ce formulaire. Si je coche la case à cocher, il active l'entrée EMA. Et si je décoche la case, elle la désactive. Nous devrions donc être fiers de nous-mêmes. Cependant, nous avons un effet secondaire involontaire. Le formulaire réinitialise automatiquement la case à cocher après l'envoi, mais il ne réactive pas le champ de saisie de l'e-mail trop désactivé. Pour résoudre ce problème, nous pouvons écrire un script qui réinitialise le formulaire comme nous le voulons. Et nous pouvons déclencher ce script chaque fois que quelqu'un clique sur le bouton d'envoi, créer une nouvelle fonction nommée soumise et le lier au bouton d'envoi en ajoutant un attribut onclick. Rappelez-vous, il doit être exactement le même que le nom de la fonction. Essayons ça. Ok, ça marche, mais malheureusement, ça se traduit par un autre problème involontaire. Lorsque nous désactivons le champ, nous avons également désactivé la validation. Cela signifie que nous avons créé une situation dans laquelle quelqu'un pourrait entrer une adresse e-mail non valide. Pour résoudre ce problème, nous allons écrire notre propre fonction de vérification des e-mails. Cela semble difficile, mais ne vous inquiétez pas avec un peu d'aide d'Internet, c'est en fait assez facile. Alors j'espère que vous vous joindrez à moi dans la prochaine vidéo où nous finirons notre formulaire. A bientôt. Au revoir. 34. (Facultatif) 1 : Javascript : Vérifiez que l'adresse de messagerie valide pour obtenir une adresse de messagerie de messagerie e-mail valide : l'adresse de l'heure de (Optional) 11 à Hour de la: Salut tout le monde et bienvenue. Dans les deux dernières vidéos, nous avons créé ce formulaire et nous avons créé cette case à cocher qui active ou désactive ce champ de saisie. Mais nous avons un petit problème. Longue histoire courte, nous devons écrire un script court qui vérifie si c'est un email valide ou non. Le seul problème est que je n'ai aucune idée de comment faire ça. Mais c'est bon bas, c'est à ça que sert Internet. Nous allons donc faire une recherche rapide en ligne et rechercher Java Script, vérifier e-mail valide. Assez vite. Nous trouvons le site Web suivant. Écrémage à travers. Nous voyons cet extrait de code dont nous avons besoin. Si vous êtes intéressé, vous pouvez lire l'article entier. C' est assez court, et c'est aussi instructif. Mais pour l'instant, copions et collez cet extrait de code dans notre fichier JavaScript. Examinons rapidement le code et vérifions les choses les plus importantes. Tout d'abord, c'est une fonction nommée e-mail est valide. Deuxièmement, nous voyons ici que nous devons lui donner une seule contribution. Nous devons fournir une adresse e-mail. Et enfin, nous voyons que la fonction renvoie quelque chose. En d'autres termes, il y a une sortie à cette fonction. La sortie est true ou false, true s'il s'agit d'un e-mail valide et false s'il ne s'agit pas d'un e-mail valide. Donc, il permet d'utiliser cette fonction pour déterminer s'il y a un e-mail valide à ce sujet. Et dans notre propre fonction soumise, nous allons combiner cela avec une clause if. Nous ne désactiverons le champ e-mail que si l'e-mail fourni est un e-mail valide. Jetons un coup d'oeil à ce que nous avons fait ici. Tout d'abord, nous avons le mot-clé if. Pour évaluer l'état du mot-clé if, nous appelons d'abord la fonction email est valide. Rappelez-vous que l'email de la fonction est valide, nécessite une entrée. Dans ce cas, nous utilisons l'une des propriétés du champ de saisie e-mail. Plus précisément, nous utilisons la propriété de valeur. fonction E-mail est valide renvoie true si l'entrée est un e-mail valide et elle renvoie false si l'entrée n'est pas un e-mail valide. Donc, dans le cas où nous avons découvert qu'il s'agit d'un e-mail valide, nous pouvons aller de l'avant et désactiver le champ de saisie e-mail. Si ce n'est pas un e-mail valide. Dans ce cas, rien ne se passera. Et depuis maintenant, le champ de saisie e-mail n'a pas été désactivé. Le processus de vérification d'amorçage était resté en vigueur. Et nous l'avons là. Essayons ça. Oui, ça marche enfin. Donc, tout ça vient de moi à propos du codage. Si vous êtes intéressé à apprendre plus de codage, je recommande ce site Web. Quant à nous, nous allons passer au dernier chapitre, qui porte sur l'exportation et l'édition. A bientôt. Au revoir. 35. Hour 12 - Exporter et publier des paramètres: Bien joué. Nous sommes parvenus au dernier chapitre. Dans ce chapitre, nous allons en apprendre davantage sur l'édition et l'exportation. Nous commencerons par certains paramètres de publication et d'exportation. Commençons par jeter un oeil à certains des paramètres. Cliquez sur l'icône Paramètres dans la barre supérieure. Sous la rubrique SEO, nous voyons que nous pouvons définir le titre et la description. Le titre et la description sont visibles sur la page des résultats de recherche. écriture d'un titre et d'une description utiles est donc très importante pour amener votre public cible à cliquer sur votre site. Nous pouvons créer un sitemap pour. Le sitemap aide le moteur de recherche à obtenir une vue d'ensemble de la structure de votre site. Nous pouvons utiliser les icônes fav pour créer une icône pour notre site Web. Dans l'aperçu, nous voyons comment l'icône et le titre ont été ajoutés à l'onglet du navigateur. En regardant dans le code HTML, nous pouvons le trouver dans la tête du document. Et nous pouvons également ajouter des balises Meta. Les balises Meta fournissent simplement des informations sur le site Web et cette information est très utile pour les moteurs de recherche. Nous voyons que nous avons déjà la description parmi nos balises Meta. Ajoutons quelques mots clés. Et je vais également ajouter une balise auteur. Nous pouvons également ajouter d'autres types de balises Meta, par exemple, la langue de la page Web et d'autres. Si vous voulez en savoir plus sur les différents types de balises Meta qui existent, je recommande ce site Web. En ce qui concerne le code HTML généré, nous pouvons trouver toutes ces informations dans la tête de notre HTML. Ok, ensuite, publions le site web. 36. Hour 12 - Édition de publications: Ok, ensuite, publions le site web. Nous allons le publier via Bootstrap studio. C' est assez bon parce que de cette façon, nous n'avons même pas besoin de nous soucier du tout de l'hébergement. Pour publier, nous devons d'abord configurer un nom de domaine. Cliquez sur Publier, cliquez sur le bouton, gérez le site Web et cliquez sur Ajouter un site Web. Nous pouvons utiliser soit un sous-domaine bootstrap studio, soit nous pouvons lier un domaine existant. Si nous choisissons un sous-domaine, notre site Web se terminera par point bss dot design. Nous devons également choisir la durée de conservation du domaine. Si on veut le garder indéfiniment, on ne pourra jamais choisir. Mais peut-être que vous avez déjà un domaine pour télécharger le site Web avec un domaine existant, vous pouvez d'abord exporter tout ce que nous allons apprendre dans la prochaine vidéo. Vous pouvez également utiliser Cloudflare pour créer un nouvel enregistrement DNS. Cliquez sur le bouton Vérifier et suivez les instructions fournies. Nous pouvons trouver des instructions plus détaillées sur ce site Web. Donc, que vous utilisiez le sous-domaine Bootstrap studio ou que vous utilisiez un domaine existant. Après ça. Cliquez sur Fermer. Maintenant que nous avons un domaine configuré dans le menu déroulant, choisissez le domaine que nous venons de créer et cliquez sur Publier. Là, nous l'avons. Notre site Web est maintenant disponible en ligne. Assez facile, non ? Certaines personnes, cependant, préfèrent exporter le site Web d'abord , puis le télécharger sur un serveur si vous préférez le faire. C' est ce que nous allons apprendre dans la prochaine vidéo. On se voit là-bas. Au revoir pour l'instant. 37. Hour 12 - Exporter: Exporter le projet en HTML, CSS et JavaScript dans Bootstrap Studio est une question simple. Cliquez simplement sur Exporter. Si vous souhaitez inclure un plan du site, assurez-vous d'inclure l'URL de votre site Web. Sélectionnez le répertoire de destination et cliquez sur le bouton Exporter. Allons dans le dossier d'exportation pour inspecter nos résultats. Nous pouvons voir tous nos fichiers HTML et nous pouvons tester les fichiers HTML en les ouvrant dans un navigateur. Ou nous pouvons inspecter le code HTML généré en les ouvrant dans un simple éditeur de texte. Nous avons également un dossier d'actifs. Le dossier assets contient toutes les ressources du site, y compris les images, les fichiers CSS, JavaScript, etc. Mais maintenant, nous aimerions mettre ce site en ligne. Pour ce faire, nous avons besoin d'un hôte web. J' ai moi-même un hôte web appelé cloud BAA. D' autres hôtes Web populaires incluent Host, Gator, Bluehost et bien d'autres. Assurez-vous que l'hôte que vous choisissez inclut au moins voir le panneau C para est ce que nous utilisons pour télécharger le site Web exporté sur le serveur être un Cloud offre FTP. Nous pouvons utiliser FTP avec un client comme FileZilla pour partager facilement des fichiers entre un serveur et votre ordinateur. Mais tous les hôtes n'offrent pas le FTP. Donc, dans cette vidéo, je vais montrer comment nous pouvons télécharger notre site Web à l'aide de panneaux C ou Gestionnaire de fichiers. Cpanel est un gestionnaire de fichiers assez basique. C' est un peu compliqué de charger plusieurs structures de dossiers. Pour simplifier cela, je vais d'abord zip mon site exporté. Et puis je n'ai besoin que de télécharger un fichier. Et une fois téléchargé, extrayez les fichiers ici. Et maintenant notre site Web est en ligne. C' est tout pour l'instant. se voit dans la prochaine et dernière vidéo, mon Bye. 38. Conclusion et réflexions finales: Bon travail tout le monde. Nous sommes arrivés à la fin de ce cours. J' espère que ça vous a plu. N' oubliez pas que lorsque vous apprenez un nouveau ping, c'est généralement une bonne idée d'acquérir une expérience pratique pour consolider ce que vous avez appris. En tant que projet, créez votre propre site Web ou page Web et publiez-le. Ou bien, vous pouvez créer votre propre composant avancé. Lorsque vous avez terminé, affichez un lien pour l'afficher. De cette façon, je peux vous donner quelques commentaires et vous pouvez partager votre création avec d'autres. Dans ce cours, nous avons beaucoup appris. Nous avons appris presque tout ce que bootstrap studio a à offrir. Mais rappelez-vous, il y a encore beaucoup de choses utiles et amusantes à apprendre là-bas. Comme les apprenants tout au long de la vie ne sera probablement jamais à court de choses utiles et intéressantes à LA. Donc tout ça vient de moi pour l'instant. Bonne chance et bon apprentissage. Au revoir.