Parents have shown you how to install bootstrap into your document here and we'll be using the absolute
path version of our CSSA file and the absolute path for the javascript files here.
But I want to show you is thin and what type of H html editor that you're using.
You may have a generic each HTML file sort of slightly different.
So I want to go through Mycenaeans here real quick make sure on the same page.
I am using each HTML here so I cleared my document is just like type each DML.
I have declared my language to be English and then I open up a header take here my character set is
UTF 8 and everything else.
That's stuff you can keeper remove if that's not important what is important is make sure that our Web
site is responsive.
So what we do is we add a little meditation there.
I'm going to paste it in so just to kind of save time.
Wants we do that together
I teased this guy in there right there with it saying is the viewport I want to make sure that the initials
scale is worn and shrink to fit is no.
This is a very common metal tag across any web site that is responsive.
So you can always do a google search for the response of meditation.
Or you can just can copy and paste what I've typed in there.
Now from my title that is important to have my go ahead and just call a bootstrap.
See here everything else can be the same as with any HGL file.
Just make sure that you close your hand if you've opened up your head.
Open a body tag.
Get a clothes and body tag.
Better opening each time out and are close in age to male and we should be good to go.
All right.
So the first thing I want to do is I want to go through navigation now.
The navigation is a little bit more complex because we're dealing with our normal navigation and just
see across the top as well as when you shrink it down.
It's going to get smaller and turn into what they call the hamburger menu or that little three line
menu there.
And there's a there's a little bit more to this part of it and I break this up in two different videos
here so stay with me on this.
We're going to go and just jump right into it now.
We're going to do is we're going to find using in each team of five tag and call it the nine.
So this will be in the bar that goes straight across the top of our page.
It's going to have our logo over on the left hand side and our text on the right hand side.
Now all these things I can control using the little straps.
SS So nothing new has gone on so far.
We will be now adding some of the bootstrap classes which is what makes bootstrap so amazing.
So within our tank here we're going to go in and start to define some stuff that RSA class equals half
bar.
So that's what I'd do is define that.
This is my navigational bar and within bootstrap it has all sorts of properties built into that.
We're not going to take a look at that right now but if you download the CSSA files you can go ahead
and do a search for Dot NFR because that's a class and you can see that the applied to it.
Now again just to reiterate here bootstrap has its own predefined classes and that's what we're going
to be using here.
This is nothing that I've made up so if I had made it up I'd have to link to either a CSSA file or put
it in my head or up here which again I have now would be working just with CSX going to be working just
with the bootstrap styles.
So I want to Anjuta up a couple of classes here and make a little bit hard to see until we have gone
and added more information to this page which again will get it to completing with the next video as
well.
But it's one to add a couple of things right now.
We want to.
What we want to say we've got our NAV bar here we find that and that's glance at a the square and say
the background is going to be dark.
Now again this is a pre-made bootstrap style in here just kind of give me a dark grey almost black background
to it.
I could just as easily put in a custom style of a specific color.
Right now we're using just the bootstrap information here.
And because I'm have a dark background I need to say any texts on that.
Let's make it light.
So I have to say.
Now bark is dark so Neph are dashed dark.
That's a classic.
You know what that does is allow the fonts to be white on top of that.
So you're not going to see a whole lot here right now if I were to save this and come over here.
You can see I just have a gray bar going across the top.
I don't have any information on my logo.
I don't have any medication items.
It's just starting to set up some of these styles right here right now.
So in the next class rentable hand and the navigational elements when I do a little bit more styling
and then you're going to see how this works in real time.
And responsively.