1
00:00:05,280 --> 00:00:08,820
Welcome back, everyone, in this lecture, we're going to be discussing the nav bar.

2
00:00:08,850 --> 00:00:13,050
This is the navigation top bar you see at the header of a web page.

3
00:00:13,200 --> 00:00:14,100
Let's go ahead and check it out.

4
00:00:14,430 --> 00:00:16,950
OK, here we are inside a visual studio code.

5
00:00:17,010 --> 00:00:21,870
What we're going to do is just briefly explore that documentation, as well as a couple of key ideas

6
00:00:21,870 --> 00:00:24,120
and class calls that have to do with navigation bars.

7
00:00:24,540 --> 00:00:29,880
If you go to get bootstrap dot com, you'll notice that at the top of the page, there's this purple

8
00:00:29,880 --> 00:00:30,300
header.

9
00:00:30,540 --> 00:00:33,870
And this is actually a nav bar on the page.

10
00:00:34,110 --> 00:00:35,280
So what is a nafaa?

11
00:00:35,550 --> 00:00:39,990
It's just the way to navigate to other web pages across the entire website.

12
00:00:40,200 --> 00:00:42,870
For example, when you click docs, this is typically a link.

13
00:00:43,350 --> 00:00:48,750
So the main idea being is that each of these are anchor tax, and sometimes depending on how this is

14
00:00:48,750 --> 00:00:54,630
exactly structured, they can actually be unordered list with different list items in case you wanted

15
00:00:54,630 --> 00:00:57,210
a dropdown inside your navigation bar.

16
00:00:57,720 --> 00:01:03,690
The other really cool part of using bootstrap specific navigation bars is Watch what happens when I

17
00:01:03,690 --> 00:01:05,820
make this window smaller and smaller?

18
00:01:06,090 --> 00:01:09,780
You notice I can read right now home docs, examples, themes, blogs, et cetera.

19
00:01:10,200 --> 00:01:15,870
As I begin to shrink this down until there's less and less room, there's suddenly a breaking point.

20
00:01:16,440 --> 00:01:22,590
And you'll notice that there's this ability to collapse things, and you'll notice that once the screen

21
00:01:22,590 --> 00:01:27,960
is too small to actually fit in all that text, they create what's known as a little hamburger icon,

22
00:01:28,200 --> 00:01:31,950
which is the collapsed version of the actual navigation bar.

23
00:01:32,190 --> 00:01:36,570
And because I'm using a bunch of bootstrap classes here, when you expand this, you get to then see

24
00:01:36,750 --> 00:01:38,250
home examples, et cetera.

25
00:01:38,400 --> 00:01:40,980
And then a different section for their actual social links.

26
00:01:41,220 --> 00:01:42,930
And there's also another download button here.

27
00:01:43,410 --> 00:01:44,720
So hopefully you start to get the idea.

28
00:01:44,730 --> 00:01:48,510
OK, this is some sort of navigation bar HTML element.

29
00:01:48,780 --> 00:01:53,430
Then there's a bunch of anchor tags, and I can also add in things like buttons, and this is a button

30
00:01:53,640 --> 00:01:57,120
that would actually execute some sort of functionality to download something.

31
00:01:57,490 --> 00:02:02,250
And what's nice is it has this ability to hit this kind of breaking point and then collapse.

32
00:02:02,580 --> 00:02:07,020
This is really nice because now you don't need to worry about the actual monitor size that someone's

33
00:02:07,020 --> 00:02:10,740
looking at this, maybe on a tablet or a phone or a laptop, et cetera.

34
00:02:11,550 --> 00:02:15,810
Or if they happen to be really zoomed in, it would adjust as necessary.

35
00:02:16,530 --> 00:02:18,660
Now where can we find out more information about the nav bar?

36
00:02:18,870 --> 00:02:23,550
You just click on docs and then NAV Bar is going to be underneath components.

37
00:02:23,880 --> 00:02:25,980
There's two main things to know about the math bar.

38
00:02:26,400 --> 00:02:30,450
There is NAVs and tabs and then the navar section itself.

39
00:02:30,930 --> 00:02:36,510
So if you click on NAV Bar, this will essentially just give you a bunch of examples of nav bar and

40
00:02:36,510 --> 00:02:37,980
the key classes to remember.

41
00:02:38,580 --> 00:02:44,160
So you scroll down here, and I would suggest you actually read this supported content if you start

42
00:02:44,160 --> 00:02:47,040
getting really into setting up a really nice navigation bar.

43
00:02:47,250 --> 00:02:51,930
But the main thing to note here is that in this example, they pretty much show you the main classes,

44
00:02:52,260 --> 00:02:59,340
and this entire navigation bar is wrapped in a nav element with a bunch of classes on it.

45
00:02:59,350 --> 00:03:02,630
So there's Navar Navarre expand large.

46
00:03:02,640 --> 00:03:04,380
This has to do a little bit with the grid system.

47
00:03:04,680 --> 00:03:07,590
You'll also notice there's Nafaa, Dash Light and then background.

48
00:03:07,590 --> 00:03:08,100
That's light.

49
00:03:08,340 --> 00:03:12,990
These are classes that are just stylistic, so there's different color schemes and that sort of thing.

50
00:03:13,140 --> 00:03:17,640
And if you come to the color scheme section, you would drop down here and see the default color schemes

51
00:03:17,940 --> 00:03:21,180
so you can see, OK, there's nafaa dark and then background dark.

52
00:03:21,420 --> 00:03:27,930
So if you say nav bar dark, that's going to make the actual features be light and then you'd have background

53
00:03:27,930 --> 00:03:28,260
dark.

54
00:03:28,260 --> 00:03:29,820
That's going to make the actual background dark.

55
00:03:29,820 --> 00:03:34,140
So there's some color schemes that you can play around with, and you can actually then say, OK, I

56
00:03:34,140 --> 00:03:37,860
actually want the background color to specifically be this in a certain point.

57
00:03:38,070 --> 00:03:40,620
Maybe you want to overwrite this in your own CIUSSS.

58
00:03:41,520 --> 00:03:43,170
There's also the ability to use containers.

59
00:03:43,500 --> 00:03:47,520
I should point out that's actually not required, but the main thing I want to know is if we come back

60
00:03:47,520 --> 00:03:50,790
to the how it works section and scroll down a little bit.

61
00:03:51,240 --> 00:03:53,460
There's a bunch of different types of supported content.

62
00:03:53,820 --> 00:03:55,370
So what is a supportive content?

63
00:03:55,380 --> 00:03:56,790
There's what's known as a brand.

64
00:03:57,090 --> 00:04:01,110
This is typically going to be an icon or your company or project name here.

65
00:04:01,110 --> 00:04:04,300
They're just calling it NAV Bar B could see on the actual bootstrap page.

66
00:04:04,320 --> 00:04:05,940
It's actually the bootstrap icon.

67
00:04:05,940 --> 00:04:10,770
So if I were to click on this, this is known as a brand icon, and it typically takes you back to the

68
00:04:10,770 --> 00:04:11,160
home page.

69
00:04:11,160 --> 00:04:12,720
You've probably seen this on other sites.

70
00:04:13,050 --> 00:04:14,630
Now, let me go back to the documentation.

71
00:04:15,090 --> 00:04:16,470
So that's known as a brand.

72
00:04:16,709 --> 00:04:21,959
The brand can be either a text and image or image and text, so there's actually examples here.

73
00:04:22,290 --> 00:04:24,240
So brand, this is text brand.

74
00:04:24,570 --> 00:04:29,400
This is image, and here's image and text, and you can see the relevant classes as well.

75
00:04:30,030 --> 00:04:36,660
So then there's the navigation links, so you can see home features, pricing disabled.

76
00:04:36,930 --> 00:04:38,670
These are the classes you'd be using for that.

77
00:04:39,000 --> 00:04:45,510
And then the point to figure out here is when you're actually done with your brand class.

78
00:04:45,660 --> 00:04:50,480
So you have Navar Brand here, then you have this little button that collapses.

79
00:04:50,490 --> 00:04:52,230
That's going to be the hamburger button that shows up.

80
00:04:52,980 --> 00:04:59,340
Once you're done with that, you create other device and you put these items into a class called collapse

81
00:04:59,340 --> 00:05:00,900
nav bar dash collapse.

82
00:05:01,230 --> 00:05:04,740
And this actually allows this to collapse and.

83
00:05:04,850 --> 00:05:09,350
And it shows you the unordered list that holds all those links and items.

84
00:05:09,590 --> 00:05:13,160
So we're actually going to be playing around with this particular example.

85
00:05:13,460 --> 00:05:17,840
But you should also notice you can actually even put forms into the navigation bar.

86
00:05:18,050 --> 00:05:23,480
So putting forms into the navigation bar is typically used for something like a search item where they

87
00:05:23,480 --> 00:05:28,340
search for this, they hit search and maybe it does an automatic search using the back end technology.

88
00:05:28,370 --> 00:05:33,050
You can also just put normal text so you can have a nafaa text with an inline element.

89
00:05:33,050 --> 00:05:34,760
And then, of course, the color schemes.

90
00:05:35,300 --> 00:05:36,710
What I want to show you right now is.

91
00:05:37,850 --> 00:05:42,860
We're going to come back to the supportive content page, and we actually won't use this one.

92
00:05:43,100 --> 00:05:46,280
I should also point out there's the ability to put dropdowns inside a navigation bar.

93
00:05:46,700 --> 00:05:52,460
But we're going to scroll down until we get to the nav section because this is typically how we're going

94
00:05:52,460 --> 00:05:53,240
to use the nafaa.

95
00:05:53,600 --> 00:05:56,150
So we see NAV Bar home features, pricing disabled.

96
00:05:56,150 --> 00:05:56,960
That's the one I want.

97
00:05:57,230 --> 00:05:58,430
It's in their nav section.

98
00:05:58,730 --> 00:05:59,610
Go ahead and copy this.

99
00:06:00,350 --> 00:06:01,370
Copy it to the clipboard.

100
00:06:02,290 --> 00:06:06,100
And then put it inside, and this is actually go inside our body.

101
00:06:06,850 --> 00:06:08,590
So we have this navigation bar.

102
00:06:08,680 --> 00:06:14,770
And you notice that depending on the size of your actual video Visual Studio Code Live Preview, you

103
00:06:14,770 --> 00:06:18,970
may see all the features that is home features, pricing, disabled, all those links.

104
00:06:19,330 --> 00:06:24,010
But if you begin to collapse that too much, you'll actually get this hamburger icon, which is going

105
00:06:24,010 --> 00:06:24,790
to show you everything.

106
00:06:25,180 --> 00:06:29,650
So we're going to briefly explore the different classes that are available to us.

107
00:06:29,980 --> 00:06:32,290
So I mentioned there's the nav bar class.

108
00:06:32,740 --> 00:06:36,190
You'll notice this one is actually not within a collapse call.

109
00:06:37,090 --> 00:06:41,590
So let me zoom in here to the code to actually explain what's going on to you and what the class calls

110
00:06:41,590 --> 00:06:42,490
are doing themselves.

111
00:06:43,060 --> 00:06:50,140
You'll notice there's a div here which puts everything in this class container fluid.

112
00:06:50,650 --> 00:06:52,570
And then there's the NAV Bar brand.

113
00:06:52,900 --> 00:06:58,330
The NAF Bar brand typically doesn't have the collapse attached to it that way.

114
00:06:58,480 --> 00:07:03,700
Whoever's on your site can always see the brand and go back to the home page for everything else.

115
00:07:03,940 --> 00:07:11,890
For example, for home features, pricing disabled, those all get attached with a class called collapse

116
00:07:11,920 --> 00:07:13,420
nav bar collapse.

117
00:07:13,570 --> 00:07:18,600
So you notice this div right here and it goes to all the way down to this div.

118
00:07:18,610 --> 00:07:23,980
So this whole section is within its own division container with collapsed nav bar collapse.

119
00:07:24,250 --> 00:07:30,940
Anything inside this div, once it's collapsed, will go into this little icon.

120
00:07:30,940 --> 00:07:32,530
Home features pricing disabled.

121
00:07:32,920 --> 00:07:36,830
So note what happens if I were to take out one of these?

122
00:07:36,850 --> 00:07:40,540
So let me actually creates another unordered list.

123
00:07:40,720 --> 00:07:43,300
This one's going to be outside this div.

124
00:07:44,630 --> 00:07:47,210
And then I'll create a list item here that just says.

125
00:07:49,820 --> 00:07:53,450
Some text and you'll notice by default, it makes that little bullet point.

126
00:07:53,750 --> 00:07:58,670
But you get the idea that this actually never actually collapses because it's not within this collapse

127
00:07:58,670 --> 00:07:59,240
now far.

128
00:07:59,600 --> 00:08:01,550
Now let's imagine I wanted to make it look good.

129
00:08:01,760 --> 00:08:04,420
What actual item should I use for the class?

130
00:08:04,430 --> 00:08:07,910
I should probably add in nav item there, so I copy this.

131
00:08:09,240 --> 00:08:16,320
Put that inside the class call and then also put inside my unordered list nav bar, dash nav.

132
00:08:18,000 --> 00:08:21,310
So as you begin to add in those classes, look what happened, this starts to look nicer.

133
00:08:21,330 --> 00:08:24,150
It starts actually follow that bootstrap template.

134
00:08:24,450 --> 00:08:29,010
And then there's other classes as far as like aligning it to the left or right can even use text online

135
00:08:29,010 --> 00:08:29,370
for that.

136
00:08:29,700 --> 00:08:36,030
But the main idea here is that in your navigation bar, you typically have your nav bar brand in its

137
00:08:36,030 --> 00:08:41,460
own division, and then you create another division that just contains a really large unordered list

138
00:08:41,460 --> 00:08:45,370
doesn't necessarily need to be really large, but it's an unordered list called nav bar nav.

139
00:08:45,570 --> 00:08:50,550
And then you just have list items for all the links you want to go to on your page and notice.

140
00:08:50,550 --> 00:08:51,540
There's eight reps here.

141
00:08:51,780 --> 00:08:54,900
So they're all just list items with anchor tag items themselves.

142
00:08:55,140 --> 00:08:58,020
And then that's essentially it for NAV Bar.

143
00:08:58,080 --> 00:09:00,750
So again, it's a nav H.M. element.

144
00:09:01,200 --> 00:09:05,280
You have a division, typically some sort of button for your home patchier nav bar.

145
00:09:05,910 --> 00:09:11,010
And then if you want to keep adding more items, you could make an unordered list with list items.

146
00:09:11,060 --> 00:09:12,960
Notice then you just copy the class calls there.

147
00:09:13,410 --> 00:09:18,810
But if you wanted to actually collapsed into the hamburger, you would make that new list item into

148
00:09:18,840 --> 00:09:20,580
the actual collapsed div.

149
00:09:20,610 --> 00:09:26,220
So let's actually practice making for the last thing in this lecture and other unordered list item.

150
00:09:26,220 --> 00:09:28,860
So I have home features pricing the Seybold.

151
00:09:29,040 --> 00:09:30,630
Let's make another a little home here.

152
00:09:31,890 --> 00:09:34,260
So how would I do that inside my unordered list?

153
00:09:34,650 --> 00:09:39,180
I would add in a list item, I would make an anchor tag.

154
00:09:39,600 --> 00:09:45,480
And then here I'm going to call it my own link and then I just need to make sure the classes line up.

155
00:09:45,480 --> 00:09:51,990
We can see that list items have this nav item class and then I can see there's a nav link.

156
00:09:52,020 --> 00:09:53,790
You can also disable it if you want to.

157
00:09:54,660 --> 00:09:56,970
And later on, we'll show you how to add in logic for this labeling.

158
00:09:56,970 --> 00:10:00,930
But then I can just say, OK, this anchor tag, that class is going to be nav link.

159
00:10:01,320 --> 00:10:04,620
So now when I expand this collapsed, I can see my own link here.

160
00:10:04,770 --> 00:10:06,060
Now this link is actually doing it.

161
00:10:06,060 --> 00:10:07,860
There's no rev, but you get the idea.

162
00:10:07,890 --> 00:10:10,830
This is actually just a list inside the navigation bar.

163
00:10:10,860 --> 00:10:13,410
These are just list items, home features, price and disabled.

164
00:10:13,410 --> 00:10:13,920
My own link.

165
00:10:14,220 --> 00:10:17,490
They're just list items with some class calls to make them look nice.

166
00:10:18,060 --> 00:10:18,390
OK.

167
00:10:18,810 --> 00:10:22,410
Last thing I want to point out is up here at the top in navigation bar.

168
00:10:22,650 --> 00:10:25,130
If we want it to actually change this, we could change this to dark.

169
00:10:25,140 --> 00:10:28,470
So let me zoom in here so you can see the changes.

170
00:10:28,830 --> 00:10:32,790
I can say nav bar, dash dark and then background.

171
00:10:32,910 --> 00:10:36,420
There's going to be I think it's dark for dark or background.

172
00:10:36,420 --> 00:10:36,720
Dark.

173
00:10:36,750 --> 00:10:37,170
There we go.

174
00:10:37,620 --> 00:10:40,470
OK, so that's how I could edit the darkness there again.

175
00:10:40,490 --> 00:10:42,270
You can see that in the actual color schemes.

176
00:10:42,450 --> 00:10:46,350
And this is all super easy to use for your benefit with bootstrap.

177
00:10:46,390 --> 00:10:51,090
Notice just how easy it was to make something look super nice and how easy it was to actually understand

178
00:10:51,090 --> 00:10:51,210
it.

179
00:10:51,480 --> 00:10:54,990
After looking at this a little bit, hopefully you're able to tell, OK, it's just an analyst with

180
00:10:54,990 --> 00:10:59,850
list items and specific cost calls, and that's really all a navigation bar is later on.

181
00:10:59,880 --> 00:11:04,500
You just have to figure out what apps to reference for other places on your website.

182
00:11:04,710 --> 00:11:10,630
For example, these could link to other tools like this go to the other that each HTML file and then

183
00:11:10,630 --> 00:11:11,730
it would link to that file.

184
00:11:12,580 --> 00:11:15,910
And in fact, let's do that for one last example.

185
00:11:15,930 --> 00:11:23,850
So remember, I said my own link here, I'm going to call it, go to other and then we're going to have

186
00:11:23,850 --> 00:11:26,520
this ref say other than HTML.

187
00:11:27,750 --> 00:11:29,250
I'm going to create that file.

188
00:11:29,340 --> 00:11:30,390
So create new file called.

189
00:11:30,750 --> 00:11:31,680
Other than HTML.

190
00:11:32,430 --> 00:11:33,630
And let's make a heading one.

191
00:11:33,660 --> 00:11:35,310
Say hello.

192
00:11:37,240 --> 00:11:38,180
Save that change.

193
00:11:38,260 --> 00:11:41,920
And now inside my example, I have my navigation bar.

194
00:11:42,640 --> 00:11:46,120
Open it up, it says, go to other, I click on it and now it says hello.

195
00:11:46,570 --> 00:11:48,820
Just as we would expect for a real web page.

196
00:11:49,270 --> 00:11:50,710
OK, that's it for this lecture.

197
00:11:50,740 --> 00:11:51,520
I'll see it the next one.