1
00:00:01,380 --> 00:00:10,460
Hello, in this video, I am going to cover the nav, both boys and that ball we first code on the floor.

2
00:00:10,800 --> 00:00:14,510
So another is one of these that you would get the top of your website.

3
00:00:14,760 --> 00:00:17,190
It may span the entire with the website.

4
00:00:17,220 --> 00:00:18,150
It may not.

5
00:00:18,150 --> 00:00:20,040
It depends on its position.

6
00:00:20,040 --> 00:00:23,940
You will make use of it similar to this which spans the entirety.

7
00:00:24,720 --> 00:00:27,590
So not Boston for navigation bar and keyboard.

8
00:00:27,700 --> 00:00:28,380
Guess so.

9
00:00:28,380 --> 00:00:36,330
If we go to our code, if it was to put it within the container itself, it will be limited by the containers

10
00:00:36,330 --> 00:00:45,260
width and with a regular container class on a big screen like this, you will have empty space on side.

11
00:00:45,330 --> 00:00:49,290
And that even then may be what you want to eBay.

12
00:00:50,070 --> 00:00:56,760
They actually have sort of two nabarlek, but this one here with this full horizontal line.

13
00:00:57,240 --> 00:01:00,480
And then we have, well, just this part here.

14
00:01:00,490 --> 00:01:04,600
So this is also kind of like a novel, as is this.

15
00:01:04,620 --> 00:01:08,490
So now both are useful to put it outside.

16
00:01:09,330 --> 00:01:15,750
Here we are, four with one print here is limited by the container contained as fluid as all the way.

17
00:01:15,750 --> 00:01:22,230
But remember, there is some padding on the side and if you want to put it in a column, then you would

18
00:01:22,230 --> 00:01:28,320
actually just demand a column, column spaces that it is spanning and you can do that's totally up to

19
00:01:28,320 --> 00:01:28,500
you.

20
00:01:28,500 --> 00:01:33,090
You may not want to put it at the top of the website, may just be at one little section of the website.

21
00:01:33,510 --> 00:01:46,310
The way you want to do is call a nav tag and this requires a class of Nabal NAV bar to expand that out.

22
00:01:46,590 --> 00:01:51,450
So this means once it hits the large screen large breakpoint, then it expands.

23
00:01:51,600 --> 00:01:58,040
Otherwise it goes more compact and you feel free to experiment with this now.

24
00:01:58,050 --> 00:02:04,030
Bardash dark and bija dash dark as well.

25
00:02:04,530 --> 00:02:06,770
OK, so you can do light as well.

26
00:02:06,780 --> 00:02:13,680
So this now Bardash Dark refers to the actual items in there, like a text, the buttons.

27
00:02:13,890 --> 00:02:19,770
They're going to be there if it's dark, if we use the dark left they're going to be light colored because

28
00:02:19,770 --> 00:02:22,200
they need to show up on the dark background.

29
00:02:22,200 --> 00:02:26,280
And if this is light and they'll be dark colored, they need to show up on the light background, the

30
00:02:26,280 --> 00:02:27,530
feel free to experiment with that.

31
00:02:27,720 --> 00:02:32,970
Plus all will provide a link to the now for link in the description.

32
00:02:32,970 --> 00:02:36,300
I mean, there you can see it, ad images you can see in there.

33
00:02:36,300 --> 00:02:41,460
How do you know we're going to cover quite a lot of it, but you can see how to do also stuff like colour

34
00:02:41,460 --> 00:02:42,260
schemes as well.

35
00:02:42,260 --> 00:02:44,130
Obviously, we're covering this one, right?

36
00:02:44,270 --> 00:02:44,660
Yeah.

37
00:02:45,360 --> 00:02:49,560
OK, so what we ought to know.

38
00:02:52,330 --> 00:02:56,020
Is positive, positive and.

39
00:02:58,210 --> 00:02:59,240
When I put a.

40
00:03:02,990 --> 00:03:03,680
Uh.

41
00:03:07,960 --> 00:03:16,180
Of container dust from the wind, you see one of the rare instances it's alright to have more than one

42
00:03:16,180 --> 00:03:20,510
container because you may not want your content to be in a fluid container.

43
00:03:20,530 --> 00:03:22,390
You may want more like this.

44
00:03:23,290 --> 00:03:30,340
Now, in here, we're going to have all of the contents of the book, will have an eight tag.

45
00:03:30,550 --> 00:03:35,310
And again, you can format this however you want of no dust.

46
00:03:38,710 --> 00:03:45,070
Now, I'm going to have a hatred just for hash so it doesn't actually go anywhere.

47
00:03:45,340 --> 00:03:48,010
But, you know, you can go wherever you want.

48
00:03:48,020 --> 00:03:49,570
And I'm going to put the text now.

49
00:03:49,690 --> 00:03:54,120
People can think of this as the logo or let the text name of your website.

50
00:03:54,640 --> 00:03:56,920
And now we're going to put a button.

51
00:04:02,130 --> 00:04:10,990
I'm going to have a class now that's going to be called bottom.

52
00:04:13,550 --> 00:04:18,310
They told us Torgau equals collapse.

53
00:04:19,310 --> 00:04:21,680
They told us it.

54
00:04:24,010 --> 00:04:31,960
Calls epic novel, this is the novel that it's part of which will be creating just after this bottom

55
00:04:33,300 --> 00:04:47,820
and an area that controls the you just the same of the ideas that we've just put the area and quotes

56
00:04:49,030 --> 00:04:50,650
folks like so

57
00:04:55,320 --> 00:04:58,050
area that's Nable.

58
00:04:59,350 --> 00:05:01,700
You called total navigation.

59
00:05:01,840 --> 00:05:02,610
We all see this.

60
00:05:02,610 --> 00:05:06,040
This is just all the attributes.

61
00:05:06,050 --> 00:05:20,000
And now and here we're going to put a spine and we're going to put a glass of Knuble toggle dash.

62
00:05:20,500 --> 00:05:21,460
So this is.

63
00:05:32,180 --> 00:05:36,110
OK, I am back, so I just had to restart the computer a bunch of things.

64
00:05:36,410 --> 00:05:42,010
This one not doing it, those other ways that are so good in the hood now.

65
00:05:42,480 --> 00:05:45,960
OK, so I was doing the.

66
00:05:45,990 --> 00:05:48,220
But that's all done for the button.

67
00:05:48,230 --> 00:05:54,080
Now you're going to have the sort of main area that can collapse depending on the size of the screen.

68
00:05:54,590 --> 00:05:57,810
This is going to be a day of class

69
00:06:01,040 --> 00:06:08,240
Hilux Nabob Dash and already already.

70
00:06:08,630 --> 00:06:13,650
And the idea will be what we put here.

71
00:06:13,760 --> 00:06:20,780
So this is basically referring to this button is OK, so that's it for this.

72
00:06:20,780 --> 00:06:25,580
Inside of here is where we're going to have a bunch of content.

73
00:06:25,580 --> 00:06:31,190
So we're going to throw on that list and look for a class.

74
00:06:32,990 --> 00:06:36,860
No, that's not them.

75
00:06:36,890 --> 00:06:43,880
And all that sort of auto margin on the right at the bottom will put to a margin bottom.

76
00:06:43,880 --> 00:06:49,550
Does knowledge put it's just, you know, just makes it look a lot more pleasing, aesthetically speaking.

77
00:06:50,030 --> 00:07:05,060
OK, so let's add some items to do that for a list item class and Naved item, and we're going to need

78
00:07:05,570 --> 00:07:09,470
to have a total of four of these and they're going to have different stuff inside.

79
00:07:09,470 --> 00:07:12,410
But with this duplicate, this can have as many as you want.

80
00:07:12,410 --> 00:07:13,470
Just totally up to you.

81
00:07:13,970 --> 00:07:16,100
If you have too many can look a bit too cluttered.

82
00:07:16,250 --> 00:07:19,360
And if some small screen size, it may not look very good.

83
00:07:19,650 --> 00:07:25,220
Better than mine, but other other than how it looks, not a limitation on how many items you can bring

84
00:07:25,220 --> 00:07:27,680
that there isn't a restriction, for example.

85
00:07:28,370 --> 00:07:36,480
OK, so first I'm going to have a class now and I put this on active.

86
00:07:36,480 --> 00:07:45,520
So it's almost like we're on this Web page, this page on the website ARIAD Dash Current and we say

87
00:07:45,530 --> 00:07:51,940
the printing is the page page ralfe the hash and home here.

88
00:07:51,980 --> 00:08:02,750
So that's very common to have some sort of link inside and then have a class link.

89
00:08:02,780 --> 00:08:04,820
It probably only one one that's active.

90
00:08:04,820 --> 00:08:10,430
The only one really is a page, if this is what they're referring to would ever be you would ever be

91
00:08:10,430 --> 00:08:13,500
on the photograph.

92
00:08:16,700 --> 00:08:24,620
And for the text of something like keep it simple now to this one, we're going to make a lot more a

93
00:08:24,620 --> 00:08:26,090
lot more complex, a little bit.

94
00:08:26,630 --> 00:08:30,380
It's going to make this into a dropdown just to show you how you can add other items in.

95
00:08:30,380 --> 00:08:36,230
There was also a class equal now link.

96
00:08:37,420 --> 00:08:43,240
And we need a class of dropdown, Tuggle dropped down dush tongo.

97
00:08:45,520 --> 00:08:59,700
I think we have and we need an I.D. now locked down and we have a role and the role will be Brookton.

98
00:09:00,760 --> 00:09:08,140
And the data does toggle the are you toggling this toggle or dropped down to feel free to check out

99
00:09:08,140 --> 00:09:13,210
my separate video drop downs and all, there's nothing that you can do with that.

100
00:09:13,760 --> 00:09:16,660
So I'm glancing over it for the most part.

101
00:09:17,020 --> 00:09:20,410
It dropped down below quick posts

102
00:09:23,230 --> 00:09:29,480
in here when they actually have the text drop that now when you talk actually have the dropdown itself.

103
00:09:29,510 --> 00:09:42,760
So this is going to be an on all the list and it's going to have a class locked down menu area that's

104
00:09:42,770 --> 00:09:46,900
enabled by now, by dropdown.

105
00:09:46,900 --> 00:09:52,150
Basically what we've put here, we're going to put up there and they're in here.

106
00:09:52,150 --> 00:10:02,860
We need if you just dropped an item through the link, I mean, the next item linking next item was

107
00:10:03,010 --> 00:10:03,160
to.

108
00:10:05,190 --> 00:10:10,010
I class again.

109
00:10:10,040 --> 00:10:15,840
Feel free to check out the dropdown video on the dropdown page for the AP Guide on Bootstrap for more

110
00:10:15,840 --> 00:10:16,530
information.

111
00:10:16,830 --> 00:10:20,840
Obviously, you can organize and put whatever elements you want in there.

112
00:10:20,860 --> 00:10:27,990
This is just a example that I think looks pretty good and demonstrates the feature that I'm trying to

113
00:10:27,990 --> 00:10:30,210
showcase in this video, which is a

114
00:10:34,620 --> 00:10:35,190
case.

115
00:10:35,820 --> 00:10:37,230
So we're going to have in the vault.

116
00:10:38,150 --> 00:10:40,610
And coldness and no action

117
00:10:44,360 --> 00:10:44,810
there.

118
00:10:46,220 --> 00:10:53,980
But a separate story turn each time.

119
00:11:00,330 --> 00:11:02,520
Having clothes, clothing, one is not necessary.

120
00:11:02,560 --> 00:11:06,170
I know a lot of people have asked me, why do I put it in there?

121
00:11:06,540 --> 00:11:09,020
You know, honestly, it's just a habit.

122
00:11:09,240 --> 00:11:15,900
One, if you use something like X amount, which is like X amount of the amount, then in X amount of

123
00:11:15,900 --> 00:11:20,490
the very strict with the tax, all tags have to be close, even if they do not have a corresponding

124
00:11:20,670 --> 00:11:29,340
no separate clothes tag the way list items or less or Dave will spend the most dmg tags do so again

125
00:11:29,340 --> 00:11:35,070
it doesn't break, it is just I think one on the look of it and two I this is a good habit to be in

126
00:11:35,070 --> 00:11:35,620
good clothing.

127
00:11:35,620 --> 00:11:36,960
The type is better.

128
00:11:37,850 --> 00:11:43,490
If you don't need closer than knuckler, the time when you do need to close it, so it's almost like

129
00:11:43,500 --> 00:11:44,840
insurance almost.

130
00:11:45,290 --> 00:11:51,910
OK, so can I have one of these items again?

131
00:11:51,920 --> 00:11:53,840
Is it going to keep the same?

132
00:11:53,840 --> 00:11:56,300
And this puts something

133
00:11:59,060 --> 00:12:01,070
else, something like that.

134
00:12:01,730 --> 00:12:10,610
OK, so now we're going to do it, implement the final item in here and I'll make this one like a disabled

135
00:12:10,610 --> 00:12:14,230
one so you can see you can use know disabled items in there as well.

136
00:12:14,240 --> 00:12:21,350
So depending maybe if there are certain of user or a certain pay, they can't use this particular item,

137
00:12:21,650 --> 00:12:21,770
though.

138
00:12:22,140 --> 00:12:26,810
Now, that name Saboor, that is what makes it so good.

139
00:12:27,080 --> 00:12:35,160
And it has a part time index as negative ones that you can't tap onto it.

140
00:12:35,720 --> 00:12:38,360
An area disabled

141
00:12:43,220 --> 00:12:44,750
and will put disabled.

142
00:12:45,110 --> 00:12:48,110
So this is what it's showing in terms of text.

143
00:12:48,560 --> 00:12:55,970
Now we're going to do is a form for search, but in a lot of research, that's very common to have enough

144
00:12:55,970 --> 00:12:56,300
balls.

145
00:12:56,700 --> 00:12:57,130
Wow.

146
00:12:57,290 --> 00:13:02,150
I certainly would like especially if you own an e-commerce platform or social media platform, they'll

147
00:13:02,150 --> 00:13:12,110
have something like this deduction for the class and input class.

148
00:13:18,090 --> 00:13:33,600
To us, who does control and dash to operate type of search placeholder.

149
00:13:36,540 --> 00:13:37,470
Skoch.

150
00:13:40,640 --> 00:13:44,300
Area you to because

151
00:13:49,400 --> 00:13:55,400
and will put a button here as well, which is what you would essentially click on to search using this

152
00:13:55,400 --> 00:13:56,000
input.

153
00:13:56,030 --> 00:13:57,200
You can always click enter.

154
00:13:57,770 --> 00:14:00,260
Well, you can disable that if you don't want that.

155
00:14:00,950 --> 00:14:09,920
So beating beating this alone does feel free to modify this however you want and put whatever type of

156
00:14:09,920 --> 00:14:17,030
button you want to submit, search, save, and which we are ready to have a look.

157
00:14:22,650 --> 00:14:28,430
OK, so this little button is not showing up properly.

158
00:14:32,620 --> 00:14:33,870
I see what's wrong with.

159
00:14:35,160 --> 00:14:38,070
Because he shouldn't actually be showing up then.

160
00:14:42,260 --> 00:14:43,310
Folsom's.

161
00:14:44,750 --> 00:14:46,430
It along with its bottom.