1
00:00:00,750 --> 00:00:06,120
Welcome back in this lesson I'm going to show you one of the most important and widely used components

2
00:00:06,120 --> 00:00:12,290
in all of Bootstrap which is the NFR so you can see actually on get Boucek dotcom.

3
00:00:12,450 --> 00:00:15,980
They use enough bar component right here.

4
00:00:16,200 --> 00:00:21,900
We're also going to use one on our Yelp camp application and as I resized the nav bar.

5
00:00:21,900 --> 00:00:28,980
Notice how responsive it is and then also notice as soon as I hit TAB what size and mobile size we get

6
00:00:28,980 --> 00:00:30,700
this nice hamburger.

7
00:00:30,720 --> 00:00:33,020
So we'll be working towards all of that in this lesson.

8
00:00:33,180 --> 00:00:34,890
But we're going to start simpler.

9
00:00:34,890 --> 00:00:42,480
First thing we need to do is go to components and go to nav bar and before we go much further I have

10
00:00:42,480 --> 00:00:46,290
created a new file just because we'll be writing quite a bit of code.

11
00:00:46,380 --> 00:00:48,150
The old one was getting cluttered.

12
00:00:48,150 --> 00:00:50,620
I'm calling it naff Bar H T M L.

13
00:00:50,820 --> 00:00:56,030
Inside all they have is the link to bootstrap not change the title here.

14
00:00:56,630 --> 00:01:00,980
I'll just call it bootstrap Nav bars.

15
00:01:01,350 --> 00:01:02,910
Just like that.

16
00:01:02,910 --> 00:01:07,580
Now let's go to the docs and take a look at the default nav bar.

17
00:01:08,220 --> 00:01:13,460
So this example here showcases all of the important features where we can have a brand link.

18
00:01:13,560 --> 00:01:15,800
We can have other links we can have dropped on menus.

19
00:01:15,930 --> 00:01:20,940
We can have a nav bar form and a button we can have things that are on the right side things that are

20
00:01:20,940 --> 00:01:22,010
on the left side.

21
00:01:22,020 --> 00:01:23,720
This really showcases everything.

22
00:01:23,790 --> 00:01:30,330
It's the kitchen sink of bootstrap naff bars and consequently the markup is a little bit long.

23
00:01:30,390 --> 00:01:33,530
We will be working with all of these pieces by the end of this video.

24
00:01:33,540 --> 00:01:37,790
But I want to start simpler and I'll start by showing you the simplest way to make a number.

25
00:01:38,040 --> 00:01:46,470
So we need to make a nav element and that NAV element needs to have two classes we want nav bar and

26
00:01:46,470 --> 00:01:51,550
nav bar and we can start with Dasch default will save.

27
00:01:51,550 --> 00:01:54,920
And now let's go look at the file in the browser and refresh.

28
00:01:55,200 --> 00:02:00,690
You can see I hope it comes across and screencast there's enough bar very faint bar going across the

29
00:02:00,690 --> 00:02:04,860
top so that's that that's how we actually initialize NF bar.

30
00:02:04,860 --> 00:02:06,980
Now let's fill it with some content.

31
00:02:07,050 --> 00:02:11,640
The first thing we'll take a look at is how we can add in this brand here.

32
00:02:11,790 --> 00:02:13,180
Basically your company name.

33
00:02:13,230 --> 00:02:14,320
In most cases.

34
00:02:14,900 --> 00:02:20,830
And that's using a nav bar header and then inside the NFR header we use a nav bar brand.

35
00:02:20,850 --> 00:02:32,160
So let's start by adding that div class equals nav bar dash header and then inside of there we're going

36
00:02:32,160 --> 00:02:35,910
to add in nav bar brand which is an anchor tag.

37
00:02:35,910 --> 00:02:39,440
Usually when you click on that company name it takes you back to the home page.

38
00:02:39,660 --> 00:02:44,760
So we'll do that here anchor tag and we'll start with a traffic equal to the Thorpes so it doesn't take

39
00:02:44,760 --> 00:02:45,840
us anywhere.

40
00:02:45,870 --> 00:02:52,890
Class will equal nav bar dash brand and we'll just make up a company name.

41
00:02:52,890 --> 00:02:57,170
Let's see if I got a coffee cup around me so let's go with coffee.

42
00:02:57,270 --> 00:03:02,210
But to actually make it a true startup we need to change the spelling a little bit.

43
00:03:02,400 --> 00:03:03,180
OK Alex.

44
00:03:03,180 --> 00:03:03,990
Good enough for me.

45
00:03:04,020 --> 00:03:05,350
Coffee with a K.

46
00:03:05,760 --> 00:03:07,420
Let's go take a look.

47
00:03:07,590 --> 00:03:11,830
Refresh and we now have our NAV bar brand which is a link.

48
00:03:11,940 --> 00:03:12,880
I click on it.

49
00:03:13,010 --> 00:03:17,250
It doesn't take me anywhere right now but eventually our applications will have it so that when you

50
00:03:17,250 --> 00:03:20,940
click the company name it takes you back to the home page next.

51
00:03:20,940 --> 00:03:24,480
Let's see if we can add in some other links like contact about.

52
00:03:24,510 --> 00:03:25,660
Sign up for register.

53
00:03:25,770 --> 00:03:27,490
All those common links in the bar.

54
00:03:27,660 --> 00:03:31,190
Let's start by adding in about page link right here.

55
00:03:31,500 --> 00:03:37,620
So we'll go back and then outside of the nav bar header we're going to make another div in this div

56
00:03:37,620 --> 00:03:41,600
will collect all of the content at least on the left side of our NAV bar.

57
00:03:41,760 --> 00:03:46,410
So we have the header and then we'll have some content and then if we want something on the right side

58
00:03:46,500 --> 00:03:48,960
we'll have another div that has another class.

59
00:03:48,960 --> 00:03:50,010
So the class here.

60
00:03:50,070 --> 00:03:56,730
Actually two we want nav and nav bar dash nav.

61
00:03:56,850 --> 00:04:00,170
Don't ask me about the naming their nav bar dash nav.

62
00:04:00,210 --> 00:04:05,040
It's one of the big criticisms of bootstrap is that it's a little bit ugly and it's not very meaningful

63
00:04:05,040 --> 00:04:05,940
sometimes.

64
00:04:06,030 --> 00:04:12,030
And there's actually a CSSA framework that was created in response to the semantic meaninglessness of

65
00:04:12,030 --> 00:04:14,630
bootstrap if you will called semantic UI.

66
00:04:14,910 --> 00:04:16,660
And that's one that I really enjoy as well.

67
00:04:16,710 --> 00:04:18,070
And I debated teaching.

68
00:04:18,420 --> 00:04:22,190
But in the end it's just not as widely used there aren't as great tutorials yet.

69
00:04:22,200 --> 00:04:23,550
So back to our diff here.

70
00:04:23,590 --> 00:04:27,600
Class nav bar nav and the class nav both of those.

71
00:04:27,690 --> 00:04:34,710
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

72
00:04:34,710 --> 00:04:36,850
to link we've just had an anchor tag.

73
00:04:37,050 --> 00:04:38,810
So this one will just go nowhere.

74
00:04:38,850 --> 00:04:42,280
Once again and this will be to the About page.

75
00:04:42,500 --> 00:04:53,550
And if I go back and refresh we now have a link to about let's add one more to contact save go back

76
00:04:53,560 --> 00:04:54,120
.

77
00:04:54,570 --> 00:04:58,950
Now we have two links now let's go ahead and add something to the right side of the page.

78
00:04:59,160 --> 00:05:05,340
Let's add two links one for register or sign up and another for log in on the right side of the bar

79
00:05:06,840 --> 00:05:07,630
to do that.

80
00:05:07,690 --> 00:05:13,370
We need a nother container here and actually instead of using divs it's more conventional to use an

81
00:05:13,630 --> 00:05:19,150
you will it will work the exact same way but you want to have allies instead of a well even though they'll

82
00:05:19,140 --> 00:05:23,570
work just fine with a div makes a little more sense to be instead of a UL.

83
00:05:23,620 --> 00:05:32,010
So we're going to add another UL and this one is going to be Nav. nav bar dash nav and then nav bar

84
00:05:32,100 --> 00:05:32,700
dash.

85
00:05:32,760 --> 00:05:33,570
Right.

86
00:05:33,660 --> 00:05:38,280
And we need to make sure we spell that correctly otherwise that class won't take effect.

87
00:05:38,280 --> 00:05:42,960
So what this will do is make us a new group of content for the right side of that nav bar.

88
00:05:43,120 --> 00:05:44,540
And now we just need to fill it.

89
00:05:44,550 --> 00:05:47,750
So I'll add two links both in edgewise.

90
00:05:47,820 --> 00:05:55,510
The first one will go nowhere and it will say sign up and then we'll have another one that just says

91
00:05:55,770 --> 00:05:56,550
log in.

92
00:05:56,940 --> 00:05:58,080
Let's take a look.

93
00:05:58,290 --> 00:06:01,630
Refresh the page and you can see we have content on the right.

94
00:06:01,650 --> 00:06:07,710
However it's right up against the edge and to fix that we can add in a container to enough bar just

95
00:06:07,710 --> 00:06:12,220
like we use the container earlier to add some spacing to our main content.

96
00:06:12,220 --> 00:06:14,190
We could add one instead of a nav bar.

97
00:06:14,400 --> 00:06:17,730
So I put everything in the neph bar instead of a container.

98
00:06:17,740 --> 00:06:20,800
So class equals container.

99
00:06:21,060 --> 00:06:22,430
Just move this down.

100
00:06:22,560 --> 00:06:26,180
Make sure everything is indented properly.

101
00:06:26,190 --> 00:06:27,770
There we go.

102
00:06:27,780 --> 00:06:30,930
Let's test it out.

103
00:06:30,930 --> 00:06:31,430
Nice.

104
00:06:31,440 --> 00:06:33,910
So now everything is centered nice and correctly.

105
00:06:34,140 --> 00:06:41,940
I will show you if I did add the container outside the nav and they put the entire nav bar inside.

106
00:06:42,880 --> 00:06:43,650
Well see what happens.

107
00:06:43,660 --> 00:06:49,950
Now if I were fresh enough bars I actually cut off and only goes part of the way across the street.

108
00:06:50,460 --> 00:06:53,460
So container will do that to whatever we put inside of it.

109
00:06:53,670 --> 00:06:59,640
And in this case we want the container inside of the nav bar so that it's not constricting the actual

110
00:06:59,640 --> 00:07:03,820
naff part self but it is restricting the content inside of it.

111
00:07:04,440 --> 00:07:04,950
OK.

112
00:07:05,060 --> 00:07:11,250
So container we have our Hetter we have the stuff on the left and we have some content on the right

113
00:07:11,990 --> 00:07:13,060
so you can see here.

114
00:07:13,290 --> 00:07:20,050
Now what step it up a little bit and go and take this basic nav bar or the default nav bar that they

115
00:07:20,040 --> 00:07:28,850
have in the docs and let's copy this entire thing and I'll just put it right below are now far make

116
00:07:28,900 --> 00:07:29,670
some space.

117
00:07:29,670 --> 00:07:33,010
A lot of comment to make it clearer.

118
00:07:33,250 --> 00:07:35,510
Default nav bar.

119
00:07:36,060 --> 00:07:40,280
And let's take a look at it refresh.

120
00:07:40,560 --> 00:07:44,580
So it's this nav bar here and there's a few things I want to highlight.

121
00:07:44,580 --> 00:07:48,690
One is that we have dropped on menus but they don't actually work.

122
00:07:48,900 --> 00:07:53,300
And also as we resize the window we get the hamburger menu here.

123
00:07:53,550 --> 00:07:54,740
Those links go away.

124
00:07:54,750 --> 00:07:58,630
The form goes away and to reveal them we need to click here.

125
00:07:58,830 --> 00:08:00,480
But that doesn't work either.

126
00:08:00,960 --> 00:08:05,890
So let's begin by getting it to work and then we'll talk about all these different pieces and what they

127
00:08:05,880 --> 00:08:07,570
do to make it work.

128
00:08:07,590 --> 00:08:10,550
We need to go and include the bootstrap javascript file.

129
00:08:10,830 --> 00:08:15,660
So if we go back to the bootstrap docs We'll click on download.

130
00:08:15,780 --> 00:08:19,800
There's also a javascript file that we need which is right here.

131
00:08:19,800 --> 00:08:24,460
I'll use the Cdn version but it also comes inside the folder that you download.

132
00:08:24,510 --> 00:08:25,700
It's just called bootstrapped.

133
00:08:25,810 --> 00:08:26,220
Yes.

134
00:08:26,250 --> 00:08:29,890
Or the minimized version bootstrapped up Mencius.

135
00:08:30,420 --> 00:08:36,210
And let's add that and we'll do it down at the bottom of our body and save.

136
00:08:36,210 --> 00:08:38,280
And I know we haven't talked about javascript.

137
00:08:38,380 --> 00:08:42,860
You don't know what a script is and what source here does it doesn't matter.

138
00:08:42,900 --> 00:08:44,710
We're just going to plug it into bootstrap.

139
00:08:44,910 --> 00:08:46,550
And now our refresh.

140
00:08:46,710 --> 00:08:52,590
Can we solve one small problem which I'll show you here tells us that bootstraps javascript requires

141
00:08:52,700 --> 00:08:53,470
query.

142
00:08:53,790 --> 00:08:56,180
Don't worry about what this is and how it got to this message.

143
00:08:56,250 --> 00:08:59,970
But I just want to show it to you so that you see the actual message we get.

144
00:08:59,970 --> 00:09:03,240
We need to require J query which we also haven't talked about.

145
00:09:03,580 --> 00:09:05,360
But it's easy enough to go and get.

146
00:09:05,400 --> 00:09:07,140
We don't have to write any javascript.

147
00:09:07,170 --> 00:09:08,830
You don't have to know any javascript.

148
00:09:08,830 --> 00:09:10,180
We just have to include it.

149
00:09:10,230 --> 00:09:18,200
So all we need to do is search for Jay queries CDN which is on code that Jay dot com and down here will

150
00:09:18,200 --> 00:09:23,890
need to select the most recent version and copy this URL.

151
00:09:23,910 --> 00:09:30,150
This is the Querrey file and then we'll go back down here.

152
00:09:30,150 --> 00:09:32,560
We're going to add another one of these script tags.

153
00:09:32,640 --> 00:09:34,410
Basically copying this exact code.

154
00:09:34,410 --> 00:09:40,670
In fact I'll do that to make it easier to duplicate that exact line and change this url to be the jey

155
00:09:40,680 --> 00:09:42,030
query you are.

156
00:09:42,610 --> 00:09:44,530
If all else fails you can just type this out.

157
00:09:44,560 --> 00:09:51,220
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

158
00:09:51,210 --> 00:09:56,290
does need to come before bootstraps javascript file because it relies on a query.

159
00:09:56,560 --> 00:10:00,370
So one more time don't worry too much about what it is how it works what Jay query is.

160
00:10:00,450 --> 00:10:02,150
That's all coming up a few minutes from now.

161
00:10:02,430 --> 00:10:06,550
But to get the most out of bootstrap and in particular the nav bars and the dropdown menu.

162
00:10:06,750 --> 00:10:13,210
We just need to have these two lines any time we're using it so we'll go back now and refresh.

163
00:10:13,230 --> 00:10:18,850
First of all are dropped on menus now work as you can see we now have dropdown menus.

164
00:10:18,880 --> 00:10:24,430
We're not going to talk about that in this video but as I resize and I get that hamburger.

165
00:10:25,050 --> 00:10:26,980
The hamburger now works when I click on it.

166
00:10:26,980 --> 00:10:29,480
It toggles that hidden material.

167
00:10:29,560 --> 00:10:36,850
So the way that it works right here there's this little breakpoint right here where all of this content

168
00:10:36,880 --> 00:10:43,280
hides and all that we see is the header and that button.

169
00:10:43,380 --> 00:10:48,870
And then when we click on the button all that previously hidden content reappears Let's get that to

170
00:10:48,880 --> 00:10:49,120
work.

171
00:10:49,120 --> 00:10:50,650
Now for us.

172
00:10:50,950 --> 00:10:55,930
But we're going to do a much less complicated version where we just want to hide these four links so

173
00:10:55,930 --> 00:11:01,960
that when we resize these four links are hidden and then really quick they'll be displayed.

174
00:11:02,250 --> 00:11:07,830
To do that going to start by taking a look at how is it accomplishes in this default version this giant

175
00:11:07,840 --> 00:11:09,830
monster of a nav bar.

176
00:11:10,380 --> 00:11:13,650
And I'll just point out the important line right here.

177
00:11:13,760 --> 00:11:22,090
Div class collapse nav bar collapse whatever we put inside of this div will be collapsed when we hit

178
00:11:22,090 --> 00:11:24,850
Mobile size so it won't make the button for us.

179
00:11:24,850 --> 00:11:30,040
It won't do the toggling in the re-appearing in hiding but it will hide whatever content we put inside

180
00:11:30,040 --> 00:11:33,470
of it when we hit that tablet and mobile size.

181
00:11:33,650 --> 00:11:38,500
So we're going to copy this and we just need to wrap it around the content we want to hide and we want

182
00:11:38,500 --> 00:11:40,320
to hide this here.

183
00:11:40,330 --> 00:11:49,980
These two Juelz So the four links we want to hide when we hit that smaller screen size.

184
00:11:50,440 --> 00:11:56,800
So add in the closing tag and save and there is a line here and this is important and I'll get to it

185
00:11:56,830 --> 00:11:57,820
in just a moment.

186
00:11:57,850 --> 00:12:01,230
It won't impact us just yet but if we refresh.

187
00:12:01,690 --> 00:12:02,160
You'll see.

188
00:12:02,170 --> 00:12:09,790
Now when I resize there is a point right here where all that content inside of the collapse div goes

189
00:12:09,790 --> 00:12:10,650
away.

190
00:12:10,680 --> 00:12:11,650
Now it doesn't reappear.

191
00:12:11,640 --> 00:12:13,180
We don't get this hamburger.

192
00:12:13,330 --> 00:12:16,940
We don't get a click on anything but it has collapsed it's gone away.

193
00:12:17,050 --> 00:12:24,580
And that's because we added in this line here div class collapse nav bar collapse.

194
00:12:24,630 --> 00:12:29,780
Next thing we need to do is add in the hamburger and it is quite a bit of code.

195
00:12:29,780 --> 00:12:33,010
Unfortunately it's still much better than if we had to do it ourselves.

196
00:12:33,280 --> 00:12:37,220
But the hamburger is actually all of this right here.

197
00:12:37,800 --> 00:12:48,660
So I'm going to copy that and paste it on up inside of a nap or Hetter before our coffee incontact.

198
00:12:48,970 --> 00:12:52,420
And we'll save I'll come back to what it does.

199
00:12:53,320 --> 00:12:54,680
Let's just refresh.

200
00:12:55,140 --> 00:12:57,910
And now if I resize I get the hamburger.

201
00:12:58,120 --> 00:13:00,280
There we go.

202
00:13:00,310 --> 00:13:03,240
Now let me explain a little bit about how it works.

203
00:13:03,250 --> 00:13:09,700
So there's a button and then inside that button there's three spans and each one is responsible for

204
00:13:09,700 --> 00:13:13,000
making one of these bars.

205
00:13:13,210 --> 00:13:18,510
So it's not an image that we're seeing here it's actually each team that's making this little spand

206
00:13:18,670 --> 00:13:21,780
that are being styled into those narrow bars to make that hamburger.

207
00:13:22,030 --> 00:13:26,530
And then as far as the showing and hiding of the content when we click on it what's really important

208
00:13:26,950 --> 00:13:34,310
is that we have this data target attribute and whatever this is set to in our case B-S example.

209
00:13:34,310 --> 00:13:41,700
Now for our collapse one bootstrap example net for our club so and let's just change it to yes.

210
00:13:42,180 --> 00:13:44,330
Nav. demo just like that.

211
00:13:44,470 --> 00:13:48,880
Then we need to change the ID of the content that we want to actually collapse that we want to show

212
00:13:48,880 --> 00:13:49,810
and hide.

213
00:13:49,870 --> 00:13:57,310
So I'll change it to match vs nav demo.

214
00:13:57,340 --> 00:13:59,710
Notice one important difference.

215
00:13:59,710 --> 00:14:05,860
We're not adding in the Arctic Thor So it's just like CSI s when we select something with C says we

216
00:14:05,860 --> 00:14:11,420
need to use that Octa Thorpe to target an ID so we leave the ID as just the text the name.

217
00:14:11,440 --> 00:14:18,120
Now if demo here we add that to Thorpe it will save refresh.

218
00:14:18,120 --> 00:14:24,600
Now if I resize we get the hamburger and they click on it and it works to toggle that showing and hiding

219
00:14:24,610 --> 00:14:25,490
.

220
00:14:26,250 --> 00:14:27,040
Great.

221
00:14:27,070 --> 00:14:32,400
The last thing that will show to you is that if we move something outside of this collapse.

222
00:14:32,470 --> 00:14:35,710
So let's take these links here.

223
00:14:36,070 --> 00:14:44,100
The account or the about and contact and we just move those right here outside of the collapse div and

224
00:14:44,110 --> 00:14:53,310
I refresh can see that they don't actually collapse they stay there and then I click on that and the

225
00:14:53,320 --> 00:14:55,710
other two that are instead of the collapse are toggled.

226
00:14:55,720 --> 00:15:00,390
Now I'm not saying this looks good but it does illustrate the importance of that collapse div..

227
00:15:00,630 --> 00:15:06,480
So whatever happened side of collapse or whatever we have in our case for different links to that are

228
00:15:06,490 --> 00:15:08,160
on the right to the or on the left.

229
00:15:08,160 --> 00:15:12,070
They all will collapse whenever we hit that smaller mobile size.

230
00:15:12,070 --> 00:15:18,250
And then to make them show again we click on this button here and that button has a data target attribute

231
00:15:18,490 --> 00:15:23,570
and whatever ID this corresponds to will be hidden and shown when we click on that.

232
00:15:24,010 --> 00:15:25,930
And that happens to be this idea here.

233
00:15:26,440 --> 00:15:28,230
OK so kind of a marathon.

234
00:15:28,270 --> 00:15:30,750
A lot of stuff that goes into making a bootstrap nav bar.

235
00:15:30,970 --> 00:15:36,940
But again the way we got there was just by straight up copying this into our file and dissecting pieces

236
00:15:36,940 --> 00:15:37,450
of it.

237
00:15:37,540 --> 00:15:42,160
And that's how we make enough are pretty much every time we just take that example code and figure out

238
00:15:42,150 --> 00:15:44,080
what pieces we need and go from there.