1
00:00:02,150 --> 00:00:04,840
Now that we added this navigation bar,

2
00:00:04,840 --> 00:00:07,340
there is one thing you might notice.

3
00:00:07,340 --> 00:00:10,740
This drop-down here doesn't work.

4
00:00:10,740 --> 00:00:12,820
And if we open the developer tools,

5
00:00:12,820 --> 00:00:16,880
we see that we do have responsive behavior out of the box.

6
00:00:16,880 --> 00:00:19,039
We get this side drawer out of the box,

7
00:00:19,039 --> 00:00:22,130
but clicking that doesn't do anything either.

8
00:00:22,130 --> 00:00:23,780
The reason for that is that

9
00:00:23,780 --> 00:00:27,450
Bootstrap is mainly a CSS package,

10
00:00:27,450 --> 00:00:29,924
it adds those CSS classes,

11
00:00:29,924 --> 00:00:31,637
but for some of the features it wants to offer,

12
00:00:31,637 --> 00:00:32,470
like for example,

13
00:00:32,470 --> 00:00:33,397
for this drop-down menu or this responsive navigation,

14
00:00:33,397 --> 00:00:35,587
it also needs a little bit of Java script code

15
00:00:35,587 --> 00:00:36,420
to open that drop-down or to show this mobile menu.

16
00:00:36,420 --> 00:00:38,677
And therefore, we also should go back

17
00:00:38,677 --> 00:00:39,510
to getting started introduction,

18
00:00:39,510 --> 00:00:44,510
and here we learned that we can also include

19
00:00:55,747 --> 00:00:58,890
some JavaScript code to our site

20
00:00:58,890 --> 00:01:02,223
to use all the Bootstrap features we might need.

21
00:01:03,110 --> 00:01:06,410
So even though the focus is on CSS right now,

22
00:01:06,410 --> 00:01:09,140
we now already see how we can also include

23
00:01:09,140 --> 00:01:11,290
some third-party JavaScript code.

24
00:01:11,290 --> 00:01:14,296
In this case, some code which will work in conjunction

25
00:01:14,296 --> 00:01:18,400
with Bootstrap to add more functionality

26
00:01:18,400 --> 00:01:21,010
besides just the styling.

27
00:01:21,010 --> 00:01:22,150
But we'll see more

28
00:01:22,150 --> 00:01:25,090
and other Java script third-party packages,

29
00:01:25,090 --> 00:01:28,330
which are not related to Bootstrap later.

30
00:01:28,330 --> 00:01:31,410
Here for the moment we can just copy this code,

31
00:01:31,410 --> 00:01:34,550
which includes the entire JavaScript code

32
00:01:34,550 --> 00:01:36,910
Bootstrap might ever need,

33
00:01:36,910 --> 00:01:38,670
and add this to our page.

34
00:01:38,670 --> 00:01:41,480
And here we are instructed to include it

35
00:01:41,480 --> 00:01:45,130
right before the closing body tag.

36
00:01:45,130 --> 00:01:48,020
That is done to ensure that the JavaScript code

37
00:01:48,020 --> 00:01:52,612
is only executed after the entire page code has been parsed.

38
00:01:52,612 --> 00:01:54,120
But of course, in this course,

39
00:01:54,120 --> 00:01:57,420
we learned that we can achieve the same behavior

40
00:01:57,420 --> 00:01:59,560
by adding the defer attribute.

41
00:01:59,560 --> 00:02:01,280
And therefore, here I will add it

42
00:02:01,280 --> 00:02:03,483
before the closing head tag.

43
00:02:04,740 --> 00:02:06,800
Press the auto format short cut,

44
00:02:06,800 --> 00:02:11,150
and actually add this defer attribute to this script tag,

45
00:02:11,150 --> 00:02:15,160
which does now load some external JavaScript file,

46
00:02:15,160 --> 00:02:17,670
a file not stored on our machine,

47
00:02:17,670 --> 00:02:20,565
but instead again, stored on some remote servers

48
00:02:20,565 --> 00:02:24,553
that provide us this prebuilt JavaScript file.

49
00:02:25,720 --> 00:02:29,670
And if we now save this and we go back here,

50
00:02:29,670 --> 00:02:31,410
if I reload this page,

51
00:02:31,410 --> 00:02:34,339
clicking this drop-down now opens the drop-down,

52
00:02:34,339 --> 00:02:36,500
and clicking this menu button here

53
00:02:36,500 --> 00:02:38,993
does open this mobile menu.

54
00:02:39,980 --> 00:02:41,000
So this now works,

55
00:02:41,000 --> 00:02:42,650
and now we also saw how we

56
00:02:42,650 --> 00:02:44,893
can add this JavaScript package.

57
00:02:45,890 --> 00:02:47,230
And now with that,

58
00:02:47,230 --> 00:02:51,950
let's dig back into Bootstrap and let's throw more elements

59
00:02:51,950 --> 00:02:54,300
onto this page to practice

60
00:02:54,300 --> 00:02:57,453
using a third party package in greater detail.