Welcome back in this lesson I'm going to show you one of the most important and widely used components
in all of Bootstrap which is the NFR so you can see actually on get Boucek dotcom.
They use enough bar component right here.
We're also going to use one on our Yelp camp application and as I resized the nav bar.
Notice how responsive it is and then also notice as soon as I hit TAB what size and mobile size we get
this nice hamburger.
So we'll be working towards all of that in this lesson.
But we're going to start simpler.
First thing we need to do is go to components and go to nav bar and before we go much further I have
created a new file just because we'll be writing quite a bit of code.
The old one was getting cluttered.
I'm calling it naff Bar H T M L.
Inside all they have is the link to bootstrap not change the title here.
I'll just call it bootstrap Nav bars.
Just like that.
Now let's go to the docs and take a look at the default nav bar.
So this example here showcases all of the important features where we can have a brand link.
We can have other links we can have dropped on menus.
We can have a nav bar form and a button we can have things that are on the right side things that are
on the left side.
This really showcases everything.
It's the kitchen sink of bootstrap naff bars and consequently the markup is a little bit long.
We will be working with all of these pieces by the end of this video.
But I want to start simpler and I'll start by showing you the simplest way to make a number.
So we need to make a nav element and that NAV element needs to have two classes we want nav bar and
nav bar and we can start with Dasch default will save.
And now let's go look at the file in the browser and refresh.
You can see I hope it comes across and screencast there's enough bar very faint bar going across the
top so that's that that's how we actually initialize NF bar.
Now let's fill it with some content.
The first thing we'll take a look at is how we can add in this brand here.
Basically your company name.
In most cases.
And that's using a nav bar header and then inside the NFR header we use a nav bar brand.
So let's start by adding that div class equals nav bar dash header and then inside of there we're going
to add in nav bar brand which is an anchor tag.
Usually when you click on that company name it takes you back to the home page.
So we'll do that here anchor tag and we'll start with a traffic equal to the Thorpes so it doesn't take
us anywhere.
Class will equal nav bar dash brand and we'll just make up a company name.
Let's see if I got a coffee cup around me so let's go with coffee.
But to actually make it a true startup we need to change the spelling a little bit.
OK Alex.
Good enough for me.
Coffee with a K.
Let's go take a look.
Refresh and we now have our NAV bar brand which is a link.
I click on it.
It doesn't take me anywhere right now but eventually our applications will have it so that when you
click the company name it takes you back to the home page next.
Let's see if we can add in some other links like contact about.
Sign up for register.
All those common links in the bar.
Let's start by adding in about page link right here.
So we'll go back and then outside of the nav bar header we're going to make another div in this div
will collect all of the content at least on the left side of our NAV bar.
So we have the header and then we'll have some content and then if we want something on the right side
we'll have another div that has another class.
So the class here.
Actually two we want nav and nav bar dash nav.
Don't ask me about the naming their nav bar dash nav.
It's one of the big criticisms of bootstrap is that it's a little bit ugly and it's not very meaningful
sometimes.
And there's actually a CSSA framework that was created in response to the semantic meaninglessness of
bootstrap if you will called semantic UI.
And that's one that I really enjoy as well.
And I debated teaching.
But in the end it's just not as widely used there aren't as great tutorials yet.
So back to our diff here.
Class nav bar nav and the class nav both of those.
And then for each item that we want on this NFR we need to add an ally and then inside the Y if we want
to link we've just had an anchor tag.
So this one will just go nowhere.
Once again and this will be to the About page.
And if I go back and refresh we now have a link to about let's add one more to contact save go back
.
Now we have two links now let's go ahead and add something to the right side of the page.
Let's add two links one for register or sign up and another for log in on the right side of the bar
to do that.
We need a nother container here and actually instead of using divs it's more conventional to use an
you will it will work the exact same way but you want to have allies instead of a well even though they'll
work just fine with a div makes a little more sense to be instead of a UL.
So we're going to add another UL and this one is going to be Nav. nav bar dash nav and then nav bar
dash.
Right.
And we need to make sure we spell that correctly otherwise that class won't take effect.
So what this will do is make us a new group of content for the right side of that nav bar.
And now we just need to fill it.
So I'll add two links both in edgewise.
The first one will go nowhere and it will say sign up and then we'll have another one that just says
log in.
Let's take a look.
Refresh the page and you can see we have content on the right.
However it's right up against the edge and to fix that we can add in a container to enough bar just
like we use the container earlier to add some spacing to our main content.
We could add one instead of a nav bar.
So I put everything in the neph bar instead of a container.
So class equals container.
Just move this down.
Make sure everything is indented properly.
There we go.
Let's test it out.
Nice.
So now everything is centered nice and correctly.
I will show you if I did add the container outside the nav and they put the entire nav bar inside.
Well see what happens.
Now if I were fresh enough bars I actually cut off and only goes part of the way across the street.
So container will do that to whatever we put inside of it.
And in this case we want the container inside of the nav bar so that it's not constricting the actual
naff part self but it is restricting the content inside of it.
OK.
So container we have our Hetter we have the stuff on the left and we have some content on the right
so you can see here.
Now what step it up a little bit and go and take this basic nav bar or the default nav bar that they
have in the docs and let's copy this entire thing and I'll just put it right below are now far make
some space.
A lot of comment to make it clearer.
Default nav bar.
And let's take a look at it refresh.
So it's this nav bar here and there's a few things I want to highlight.
One is that we have dropped on menus but they don't actually work.
And also as we resize the window we get the hamburger menu here.
Those links go away.
The form goes away and to reveal them we need to click here.
But that doesn't work either.
So let's begin by getting it to work and then we'll talk about all these different pieces and what they
do to make it work.
We need to go and include the bootstrap javascript file.
So if we go back to the bootstrap docs We'll click on download.
There's also a javascript file that we need which is right here.
I'll use the Cdn version but it also comes inside the folder that you download.
It's just called bootstrapped.
Yes.
Or the minimized version bootstrapped up Mencius.
And let's add that and we'll do it down at the bottom of our body and save.
And I know we haven't talked about javascript.
You don't know what a script is and what source here does it doesn't matter.
We're just going to plug it into bootstrap.
And now our refresh.
Can we solve one small problem which I'll show you here tells us that bootstraps javascript requires
query.
Don't worry about what this is and how it got to this message.
But I just want to show it to you so that you see the actual message we get.
We need to require J query which we also haven't talked about.
But it's easy enough to go and get.
We don't have to write any javascript.
You don't have to know any javascript.
We just have to include it.
So all we need to do is search for Jay queries CDN which is on code that Jay dot com and down here will
need to select the most recent version and copy this URL.
This is the Querrey file and then we'll go back down here.
We're going to add another one of these script tags.
Basically copying this exact code.
In fact I'll do that to make it easier to duplicate that exact line and change this url to be the jey
query you are.
If all else fails you can just type this out.
It's not that bad if a you are l but I got this by searching for Jay queery CDN and will save and this
does need to come before bootstraps javascript file because it relies on a query.
So one more time don't worry too much about what it is how it works what Jay query is.
That's all coming up a few minutes from now.
But to get the most out of bootstrap and in particular the nav bars and the dropdown menu.
We just need to have these two lines any time we're using it so we'll go back now and refresh.
First of all are dropped on menus now work as you can see we now have dropdown menus.
We're not going to talk about that in this video but as I resize and I get that hamburger.
The hamburger now works when I click on it.
It toggles that hidden material.
So the way that it works right here there's this little breakpoint right here where all of this content
hides and all that we see is the header and that button.
And then when we click on the button all that previously hidden content reappears Let's get that to
work.
Now for us.
But we're going to do a much less complicated version where we just want to hide these four links so
that when we resize these four links are hidden and then really quick they'll be displayed.
To do that going to start by taking a look at how is it accomplishes in this default version this giant
monster of a nav bar.
And I'll just point out the important line right here.
Div class collapse nav bar collapse whatever we put inside of this div will be collapsed when we hit
Mobile size so it won't make the button for us.
It won't do the toggling in the re-appearing in hiding but it will hide whatever content we put inside
of it when we hit that tablet and mobile size.
So we're going to copy this and we just need to wrap it around the content we want to hide and we want
to hide this here.
These two Juelz So the four links we want to hide when we hit that smaller screen size.
So add in the closing tag and save and there is a line here and this is important and I'll get to it
in just a moment.
It won't impact us just yet but if we refresh.
You'll see.
Now when I resize there is a point right here where all that content inside of the collapse div goes
away.
Now it doesn't reappear.
We don't get this hamburger.
We don't get a click on anything but it has collapsed it's gone away.
And that's because we added in this line here div class collapse nav bar collapse.
Next thing we need to do is add in the hamburger and it is quite a bit of code.
Unfortunately it's still much better than if we had to do it ourselves.
But the hamburger is actually all of this right here.
So I'm going to copy that and paste it on up inside of a nap or Hetter before our coffee incontact.
And we'll save I'll come back to what it does.
Let's just refresh.
And now if I resize I get the hamburger.
There we go.
Now let me explain a little bit about how it works.
So there's a button and then inside that button there's three spans and each one is responsible for
making one of these bars.
So it's not an image that we're seeing here it's actually each team that's making this little spand
that are being styled into those narrow bars to make that hamburger.
And then as far as the showing and hiding of the content when we click on it what's really important
is that we have this data target attribute and whatever this is set to in our case B-S example.
Now for our collapse one bootstrap example net for our club so and let's just change it to yes.
Nav. demo just like that.
Then we need to change the ID of the content that we want to actually collapse that we want to show
and hide.
So I'll change it to match vs nav demo.
Notice one important difference.
We're not adding in the Arctic Thor So it's just like CSI s when we select something with C says we
need to use that Octa Thorpe to target an ID so we leave the ID as just the text the name.
Now if demo here we add that to Thorpe it will save refresh.
Now if I resize we get the hamburger and they click on it and it works to toggle that showing and hiding
.
Great.
The last thing that will show to you is that if we move something outside of this collapse.
So let's take these links here.
The account or the about and contact and we just move those right here outside of the collapse div and
I refresh can see that they don't actually collapse they stay there and then I click on that and the
other two that are instead of the collapse are toggled.
Now I'm not saying this looks good but it does illustrate the importance of that collapse div..
So whatever happened side of collapse or whatever we have in our case for different links to that are
on the right to the or on the left.
They all will collapse whenever we hit that smaller mobile size.
And then to make them show again we click on this button here and that button has a data target attribute
and whatever ID this corresponds to will be hidden and shown when we click on that.
And that happens to be this idea here.
OK so kind of a marathon.
A lot of stuff that goes into making a bootstrap nav bar.
But again the way we got there was just by straight up copying this into our file and dissecting pieces
of it.
And that's how we make enough are pretty much every time we just take that example code and figure out
what pieces we need and go from there.