Bienvenue dans cette leçon, je vais vous montrer l'un des composants les plus importants et les plus utilisés dans tous les Bootstrap qui est le NFR afin que vous puissiez voir effectivement obtenir Boucek dotcom.
Ils utilisent suffisamment de bar composant ici.
Nous allons aussi en utiliser un sur notre application de camping de Yelp et comme j'ai redimensionné la barre de navigation.
Remarquez comment il est sensible et puis aussi remarquer dès que j'ai touché TAB quelle taille et taille mobile, nous obtenons ce hamburger gentil.
Nous allons donc travailler à tout cela dans cette leçon.
Mais nous allons commencer plus simple.
La première chose que nous devons faire est d'aller à des composants et aller à la barre de navigation et avant d'aller beaucoup plus loin, j'ai créé un nouveau fichier juste parce que nous allons écrire un peu de code.
La vieille était encombrée.
Je l'appelle naff Bar H T M L.
À l'intérieur de tout ce qu'ils ont est le lien à bootstrap pas changer le titre ici.
Je vais juste appeler les barres de navigation bootstrap.
Juste comme ça.
Maintenant, allons à la documentation et jetez un oeil à la barre de navigation par défaut.
Ainsi, cet exemple montre ici toutes les fonctionnalités importantes où nous pouvons avoir un lien de marque.
Nous pouvons avoir d'autres liens sur les menus.
Nous pouvons avoir un formulaire de barre de navigation et un bouton, nous pouvons avoir des choses qui sont sur le côté droit des choses qui sont sur le côté gauche.
Cela montre vraiment tout.
C'est l'évier de la cuisine de bootstrap naff bars et par conséquent le balisage est un peu long.
Nous allons travailler avec tous ces morceaux à la fin de cette vidéo.
Mais je veux commencer plus simple et je vais commencer par vous montrer la façon la plus simple de faire un nombre.
Donc, nous devons faire un élément nav et que l'élément NAV doit avoir deux classes, nous voulons nav bar et barre de navigation et nous pouvons commencer avec Dasch par défaut sauvera.
Et maintenant allons regarder le fichier dans le navigateur et actualiser.
Vous pouvez voir, j'espère qu'il se présente et screencast il ya assez de barre très faible bar traversant le haut de sorte que c'est comme ça que nous avons réellement initialiser NF bar.
Maintenant, nous allons le remplir avec du contenu.
La première chose que nous allons jeter un coup d'oeil est comment nous pouvons ajouter dans cette marque ici.
Fondamentalement le nom de votre entreprise.
Dans la plupart des cas.
Et c'est en utilisant un en-tête de barre de navigation, puis à l'intérieur de l'en-tête NFR, nous utilisons une marque de barre de navigation.
Commençons par ajouter que la classe div est égale à l'en-tête du tableau de bord de la barre de navigation, puis à l'intérieur de celle-ci, nous allons ajouter dans la marque de barre de navigation qui est une balise d'ancrage.
Habituellement, lorsque vous cliquez sur ce nom de société, il vous ramène à la page d'accueil.
Donc, nous allons faire cela ici balise d'ancrage et nous allons commencer avec un trafic égal au Thorpes donc il ne nous emmène nulle part.
La classe sera égale à la marque de tableau de bord de nav et nous allons juste composer un nom d'entreprise.
Voyons voir si j'ai une tasse de café autour de moi alors allons-y avec du café.
Mais pour vraiment faire une véritable startup nous devons changer l'orthographe un peu.
OK Alex.
Suffisant pour moi.
Café avec un K.
Allons jeter un coup d'oeil.
Rafraîchir et nous avons maintenant notre marque NAV barre qui est un lien.
Je clique dessus.
Il ne me mène nulle part maintenant mais finalement nos applications l'auront de sorte que lorsque vous cliquez sur le nom de l'entreprise, il vous ramène à la page d'accueil suivante.
Voyons voir si nous pouvons ajouter dans d'autres liens comme contact about.
Inscrivez-vous pour s'inscrire.
Tous ces liens communs dans le bar.
Commençons par ajouter un lien sur la page ici.
Donc, nous allons revenir en arrière et ensuite à l'extérieur de l'en-tête de barre de navigation, nous allons faire une autre div dans cette div va recueillir tout le contenu au moins sur le côté gauche de notre barre NAV.
Donc, nous avons l'en-tête et puis nous allons avoir un certain contenu et puis si nous voulons quelque chose sur le côté droit, nous aurons un autre div qui a une autre classe.
Alors la classe ici.
En fait, deux, nous voulons nav et nav nav.
Ne m'interrogez pas sur le nom de leur navigation nav nav nav.
C'est l'une des grandes critiques de bootstrap, c'est que c'est un peu laid et il n'est pas très significatif parfois.
Et il ya effectivement un cadre CSSA qui a été créé en réponse à l'absence de signification sémantique de bootstrap si vous appellerez interface utilisateur sémantique.
Et c'est un que j'aime vraiment aussi bien.
Et j'ai débattu de l'enseignement.
Mais à la fin, il n'est tout simplement pas aussi largement utilisé, il n'ya pas encore de grands tutoriels.
Donc, revenons à notre diff ici.
Classe nav nav nav et la classe nav tous les deux.
Et puis pour chaque élément que nous voulons sur ce NFR, nous devons ajouter un allié, puis à l'intérieur de la Y si nous voulons lier, nous venons d'avoir une balise d'ancrage.
Donc, celui-ci ne va nulle part.
Encore une fois et ce sera à la page À propos.
Et si je retourne et de rafraîchir, nous avons maintenant un lien vers environ nous allons ajouter un de plus à contacter sauvegarder revenir.
Maintenant, nous avons deux liens maintenant allons-y et ajouter quelque chose sur le côté droit de la page.
Ajoutons deux liens un pour vous inscrire ou vous inscrire et un autre pour vous connecter sur le côté droit de la barre pour le faire.
Nous avons besoin d'un autre conteneur ici et effectivement au lieu d'utiliser divs, il est plus classique d'utiliser un vous fera fonctionner exactement de la même façon, mais vous voulez avoir des alliés au lieu d'un puits, même si elles fonctionnent très bien avec un div fait un Un peu plus de sens à être au lieu d'un UL.
Donc, nous allons ajouter un autre UL et celui-ci va être Nav. Nav nav de tableau de bord puis nav tableau de bord.
Droite.
Et nous devons nous assurer que nous épeler correctement, sinon cette classe ne prendra pas effet.
Donc ce que cela va faire est de nous faire un nouveau groupe de contenu pour le côté droit de cette barre de navigation.
Et maintenant, il suffit de le remplir.
Donc, je vais ajouter deux liens à la fois en edgewise.
Le premier va nulle part et il dira s'inscrire et puis nous aurons un autre qui dit juste log in.
Nous allons jeter un coup d'oeil.
Actualisez la page et vous pouvez voir que nous avons le contenu sur la droite.
Cependant, il est juste contre le bord et de fixer que nous pouvons ajouter dans un récipient à assez de barre juste comme nous utilisons le conteneur plus tôt pour ajouter un certain espacement à notre contenu principal.
Nous pourrions ajouter un au lieu d'une barre de navigation.
J'ai donc tout mis dans la barre neph au lieu d'un conteneur.
Donc la classe égale le conteneur.
Il suffit de déplacer vers le bas.
Assurez-vous que tout est indent correctement.
Voilà.
Testez-le.
Agréable.
Donc maintenant tout est bien centré et correctement.
Je vais vous montrer si je n'ai ajouter le conteneur à l'extérieur du nav et ils ont mis toute la barre de navigation à l'intérieur.
Nous allons voir ce qui se passe.
Maintenant, si j'étais des barres assez fraîches, j'ai effectivement coupé et ne fait qu'une partie du chemin à travers la rue.
Donc, conteneur fera cela à tout ce que nous mettons à l'intérieur de celui-ci.
Et dans ce cas, nous voulons que le conteneur à l'intérieur de la barre de navigation de sorte qu'il n'est pas contraindre la véritable naff partie auto, mais il est de restreindre le contenu à l'intérieur de celui-ci.
D'ACCORD.
Donc, conteneur, nous avons notre Hetter nous avons les trucs sur la gauche et nous avons un certain contenu sur la droite pour que vous puissiez voir ici.
Maintenant, ce que l'étape un peu plus et aller et prendre cette barre de navigation de base ou la barre de navigation par défaut qu'ils ont dans les documents et copions cette chose entière et je vais juste le mettre ci-dessous sont maintenant loin faire de l'espace.
Beaucoup de commentaires pour le rendre plus clair.
Barre de navigation par défaut.
Et jetez un coup d'oeil à elle rafraîchir.
Donc, c'est ce bar de navigation ici et il ya quelques choses que je tiens à souligner.
L'un d'eux est que nous avons laissé tomber sur les menus, mais ils ne fonctionnent pas réellement.
Et aussi que nous redimensionner la fenêtre, nous obtenons le menu hamburger ici.
Ces liens disparaissent.
La forme disparaît et pour les révéler, nous devons cliquer ici.
Mais ça ne marche pas non plus.
Commençons donc par le faire fonctionner, puis nous allons parler de tous ces différents morceaux et de ce qu'ils font pour le faire fonctionner.
Nous devons aller inclure le fichier javascript bootstrap.
Donc, si nous revenons à la bootstrap docs Nous allons cliquer sur le téléchargement.
Il ya aussi un fichier javascript dont nous avons besoin qui est ici.
Je vais utiliser la version Cdn, mais il vient aussi dans le dossier que vous téléchargez.
C'est juste appelé bootstrap.
Oui.
Ou la version minimisée bootcapé Mencius.
Et ajoutons cela et nous allons le faire au bas de notre corps et sauver.
Et je sais que nous n'avons pas parlé de javascript.
Vous ne savez pas ce qu'est un script et quelle source ici n'a pas d'importance.
Nous allons juste le brancher en bootstrap.
Et maintenant notre rafraîchissement.
Pouvons-nous résoudre un petit problème que je vais vous montrer ici nous dit que bootstraps javascript requiert une requête.
Ne vous inquiétez pas de ce que c'est et comment il est arrivé à ce message.
Mais je veux simplement vous le montrer pour que vous voyiez le message que nous recevons.
Nous devons exiger une requête J dont nous n'avons pas parlé.
Mais il est assez facile d'aller et obtenir.
Nous n'avons pas à écrire de javascript.
Vous n'avez pas besoin de connaître un javascript.
Nous devons simplement l'inclure.
Donc, tout ce que nous devons faire est de rechercher Jay requêtes CDN qui est sur le code que Jay dot com et ici doit sélectionner la version la plus récente et copier cette URL.
Il s'agit du dossier de Querrey et nous reviendrons ici.
Nous allons ajouter une autre de ces balises de script.
Fondamentalement copier ce code exact.
En fait, je vais faire pour rendre plus facile de dupliquer cette ligne exacte et de changer cette url pour être la requête jey vous êtes.
Si tout le reste échoue vous pouvez juste dactylographier ceci.
Ce n'est pas si mauvais si vous êtes l, mais je l'ai obtenu en cherchant Jay queery CDN et sauvera et cela n'a pas besoin de venir avant bootstraps fichier javascript, car il s'appuie sur une requête.
Donc, une fois de plus ne vous inquiétez pas trop sur ce que c'est comment il fonctionne ce que la requête Jay est.
Tout cela se fera dans quelques minutes.
Mais pour tirer le meilleur parti de bootstrap et en particulier les barres de navigation et le menu déroulant.
Nous avons juste besoin d'avoir ces deux lignes à tout moment nous l'utilisons donc nous allons revenir maintenant et actualiser.
Tout d'abord sont supprimés sur les menus fonctionnent maintenant comme vous pouvez le voir, nous avons maintenant des menus déroulants.
Nous n'allons pas en parler dans cette vidéo, mais comme je redimensionne et que je reçois ce hamburger.
Le hamburger fonctionne maintenant quand je clique dessus.
Il bascule ce matériel caché.
Donc, la façon dont il fonctionne ici, il ya ce petit point d'arrêt ici où tout ce contenu se cache et tout ce que nous voyons est l'en-tête et ce bouton.
Et puis quand nous cliquons sur le bouton tout ce contenu précédemment caché réapparaît Let's get que le travail.
Maintenant pour nous.
Mais nous allons faire une version beaucoup moins compliquée où nous voulons simplement cacher ces quatre liens afin que lorsque nous redimensionner ces quatre liens sont masqués et puis très vite ils seront affichés.
Pour faire cela va commencer par jeter un oeil à comment est-il accomplit dans cette version par défaut ce monstre géant d'une barre de navigation.
Et je vais juste souligner la ligne importante ici.
Div classe effondrement nav bar effondrement que nous mettons à l'intérieur de cette div sera effondré lorsque nous avons frappé Mobile taille afin qu'il ne fera pas le bouton pour nous.
Il ne fera pas le basculement dans le réapparition dans la clandestinité, mais il va cacher tout contenu que nous mettons à l'intérieur de celui-ci lorsque nous avons frappé cette tablette et la taille mobile.
Nous allons donc copier ceci et nous avons juste besoin de l'envelopper autour du contenu que nous voulons cacher et nous voulons cacher ceci ici.
Ces deux Juelz Donc les quatre liens que nous voulons cacher quand nous touchons cette taille d'écran plus petite.
Donc ajouter dans la balise de fermeture et d'enregistrer et il ya une ligne ici et c'est important et je vais y arriver dans un instant.
Il ne nous touchera pas encore mais si nous rafraîchissons.
Tu verras.
Maintenant, quand je redimensionner il ya un point ici où tout ce contenu à l'intérieur de la div d'effondrement disparaît.
Maintenant il ne réapparaît pas.
Nous n'avons pas ce hamburger.
Nous n'obtenons pas un clic sur quoi que ce soit, mais il s'est effondré, il est parti.
Et c'est parce que nous avons ajouté dans cette ligne ici la classe div effondrement nav bar effondrement.
La prochaine chose que nous devons faire est d'ajouter dans le hamburger et c'est un peu de code.
Malheureusement, il est encore beaucoup mieux que si nous devions le faire nous-mêmes.
Mais le hamburger est en fait tout cela ici.
Donc, je vais copier cela et le coller sur l'intérieur d'une sieste ou Hetter avant notre café incontact.
Et nous allons économiser je vais revenir à ce qu'il fait.
Il suffit de rafraîchir.
Et maintenant, si je redimensionne, je reçois le hamburger.
Voilà.
Permettez-moi maintenant d'expliquer un peu comment cela fonctionne.
Donc, il ya un bouton et puis à l'intérieur de ce bouton il ya trois travées et chacun est responsable de faire une de ces barres.
Donc, ce n'est pas une image que nous voyons ici, c'est en fait chaque équipe qui fait de cette petite spande qui sont en cours de style dans ces barres étroites pour faire ce hamburger.
Et puis, en ce qui concerne l'affichage et la dissimulation du contenu lorsque nous cliquons sur ce qui est vraiment important, c'est que nous avons cet attribut cible de données et ce que ce soit mis dans notre cas B-S exemple.
Maintenant, pour notre effondrement un exemple de bootstrap net pour notre club donc et nous allons simplement le changer à oui.
Nav. Démo juste comme ça.
Ensuite, nous devons changer l'ID du contenu que nous voulons effondrer réellement que nous voulons montrer et masquer.
Donc, je vais le changer pour correspondre à la démo nav.
Notez une différence importante.
Nous n'ajoutons pas dans l'Arctique Thor Donc, c'est comme CSI s quand nous sélectionnons quelque chose avec C dit que nous avons besoin d'utiliser Octa Thorpe pour cibler un ID de sorte que nous laissons l'ID comme juste le texte du nom.
Maintenant, si la démo ici, nous ajoutons que à Thorpe, il sauvera rafraîchir.
Maintenant, si je redimensionner, nous obtenons le hamburger et ils cliquent sur elle et il fonctionne pour basculer que montrant et se cachant.
Génial.
La dernière chose qui va vous montrer est que si nous déplacer quelque chose en dehors de cet effondrement.
Prenons donc ces liens ici.
Le compte ou le à propos et contact et nous venons de déplacer ceux-ci ici même en dehors de l'effondrement div et je rafraîchir peut voir qu'ils ne s'effondrent réellement ils restent là et puis je clique sur ce et les deux autres qui sont au lieu de l'effondrement Sont basculés.
Maintenant, je ne dis pas que cela semble bon, mais il illustre l'importance de cet effondrement div ..
Donc tout ce qui est arrivé côté de l'effondrement ou ce que nous avons dans notre cas pour différents liens vers qui sont sur la droite à la ou sur la gauche.
Ils vont tous s'effondrer chaque fois que nous touchons cette petite taille mobile.
Et puis pour les faire apparaître de nouveau, nous cliquons sur ce bouton ici et ce bouton a un attribut cible de données et tout ID qui correspond à sera masqué et affiché lorsque nous cliquons sur celui-ci.
Et c'est ce qui se passe ici.
OK si genre de marathon.
Beaucoup de choses qui entrent dans la fabrication d'une barre de navigation bootstrap.
Mais encore une fois la façon dont nous sommes arrivés là était juste en haut en haut copiant ceci dans notre dossier et en disséquant des morceaux de lui.
Et c'est ainsi que nous faisons assez sont à peu près chaque fois que nous prenons juste cet exemple de code et de comprendre ce que les pièces dont nous avons besoin et aller de là.