1
00:00:01,090 --> 00:00:07,600
Hello in the studio, I am going to show you how to implement a nap, so what is a nap?

2
00:00:07,620 --> 00:00:13,750
So let's just flick over to the bootstrappers official website, and this essentially allows you to

3
00:00:13,750 --> 00:00:16,000
show some flaw in navigation by system.

4
00:00:16,010 --> 00:00:19,960
So you could have, you know, in here they just cachets and that's what we're going to do.

5
00:00:19,960 --> 00:00:24,190
So they don't go to another page of websites, but they you go to a different page, a different website.

6
00:00:24,430 --> 00:00:34,000
You can make them into a tab system with JavaScript allows you to do stuff I put down in the like this.

7
00:00:34,030 --> 00:00:35,920
So we showed you different content.

8
00:00:35,920 --> 00:00:41,590
So instead of having all the content displayed, which can be overwhelming to the user, you can make

9
00:00:41,590 --> 00:00:42,690
your website look cluttered.

10
00:00:42,700 --> 00:00:43,660
You're going to show a little bit.

11
00:00:43,810 --> 00:00:47,740
And if they want to see the profile of the conflict that you don't want to see contain information,

12
00:00:47,980 --> 00:00:54,040
they can click, that someone's going to show you some basic ones and you can see the rest of it like

13
00:00:54,040 --> 00:00:54,340
this.

14
00:00:54,340 --> 00:01:01,160
For example, using dropdown on the official Bistrot website, which I will provide in the description.

15
00:01:01,570 --> 00:01:11,950
OK, so to implement what you want to do is create an arm for that list and it's going to have a class

16
00:01:13,300 --> 00:01:14,290
of now

17
00:01:17,650 --> 00:01:24,040
have a list item of a class of nav item

18
00:01:30,520 --> 00:01:31,350
class.

19
00:01:32,020 --> 00:01:41,260
And that's an active activity that specifically Starlee in any way on a regular.

20
00:01:42,400 --> 00:01:45,580
Now I've always good to have it to show the one that is active.

21
00:01:45,790 --> 00:01:53,090
Plus it's useful for a different type of nav, like a table one, which will show you in a second one.

22
00:01:53,700 --> 00:01:55,420
OK, so the area.

23
00:01:56,350 --> 00:01:57,940
Danesh current

24
00:02:00,730 --> 00:02:11,490
Ducos page page ref has and stay active, so the first one is active.

25
00:02:12,150 --> 00:02:16,300
OK, so let's copy and paste this and we'll just need a few different changes.

26
00:02:16,690 --> 00:02:20,600
OK, so that we live another thing we don't want active anymore.

27
00:02:20,950 --> 00:02:25,060
You only ever want one active so we can get rid of this as well.

28
00:02:26,080 --> 00:02:26,760
And that's it.

29
00:02:26,770 --> 00:02:28,420
And they just change from the text.

30
00:02:28,420 --> 00:02:29,290
You want it to be so.

31
00:02:29,340 --> 00:02:29,920
Think

32
00:02:34,810 --> 00:02:35,030
so.

33
00:02:35,170 --> 00:02:36,310
And I'll show you one more.

34
00:02:36,310 --> 00:02:38,530
And this will be a disabled one.

35
00:02:38,710 --> 00:02:40,270
So you can't actually selected.

36
00:02:40,310 --> 00:02:42,100
So you put disabled here

37
00:02:45,430 --> 00:02:50,590
because you don't want to be at the top to believe that this is just some housekeeping I want to put

38
00:02:50,740 --> 00:02:53,590
into one and then one safe area.

39
00:02:53,830 --> 00:02:56,720
Does Seybold you?

40
00:02:59,290 --> 00:03:02,860
I don't think so.

41
00:03:03,560 --> 00:03:04,040
Go back.

42
00:03:04,060 --> 00:03:04,620
Refresh.

43
00:03:04,640 --> 00:03:05,080
There we go.

44
00:03:05,410 --> 00:03:08,070
And the obviously we call click down.

45
00:03:08,440 --> 00:03:14,710
They don't do anything at the moment, but they could potentially take you to a different page or website.

46
00:03:15,220 --> 00:03:18,640
Now, let me show you provisioning with the.

47
00:03:21,050 --> 00:03:30,370
NAMS Thoms duplicate today and what you can do is on the item now, so the on the list you can say justify,

48
00:03:31,640 --> 00:03:38,870
justify the content, the center, the bloody photos all the way to the left of the parent container

49
00:03:39,380 --> 00:03:42,170
that is now in the center, which is pretty darn cool.

50
00:03:42,410 --> 00:03:48,520
And only to figure out just look at the website how to do it all the way to the right.

51
00:03:49,590 --> 00:03:53,700
OK, now let me show you a system.

52
00:03:56,000 --> 00:03:59,720
And the term system is pretty simple.

53
00:04:00,690 --> 00:04:06,690
Not only one thing that you got to add the class now, that tops, you know, the beauty of using something

54
00:04:06,700 --> 00:04:12,330
like bootstrap what you set up the initial lesson in this case, A, not to manipulate him, make it

55
00:04:12,330 --> 00:04:14,910
look different at different features.

56
00:04:15,120 --> 00:04:17,380
It's usually just a class or two that you have to add.

57
00:04:17,400 --> 00:04:23,960
So the developers of Bootstrap have a lot of time and effort into making this as easy as possible to

58
00:04:24,010 --> 00:04:25,950
save up, go back refreshed.

59
00:04:25,980 --> 00:04:26,430
There you go.

60
00:04:26,640 --> 00:04:35,160
The more tabloid system and this that looks like the active one is based on this acting class, because

61
00:04:35,160 --> 00:04:37,500
if you were to remove it, you would no longer be active.

62
00:04:37,590 --> 00:04:42,930
So this is one of the knives where the active clusters actually have some style.

63
00:04:42,930 --> 00:04:44,580
And it's good to put that there.

64
00:04:44,760 --> 00:04:51,640
And the area that's current for Paige as well, for any form, whichever one is currently active.

65
00:04:51,890 --> 00:04:52,480
So that is it.

66
00:04:52,560 --> 00:04:54,960
If you have any questions, feel free to call me a message.

67
00:04:55,170 --> 00:04:58,530
And as usual, I look forward to seeing you in the next video.