1
00:00:00,450 --> 00:00:06,650
In this lesson we're going to develop a bootstrap web page layout using the scrolls by plugging this

2
00:00:06,660 --> 00:00:13,390
plug in allows us to create links that link to content on the same page as shown in this example.

3
00:00:13,650 --> 00:00:17,940
When we click each link the content scores up to our line of view.

4
00:00:19,360 --> 00:00:29,150
So the content corresponding to link 1 link to link 3 and link for to create this layout.

5
00:00:29,170 --> 00:00:38,140
We'll be using many of the concepts we've already covered.

6
00:00:38,150 --> 00:00:43,810
First we need to create a style sheet that defines the appearance of each one of our content areas.

7
00:00:45,130 --> 00:00:49,340
Our page has four content areas.

8
00:00:49,380 --> 00:00:54,340
One is sign in one is yellow.

9
00:00:54,570 --> 00:01:00,120
One has a pink background and the last one has a magenta background.

10
00:01:00,120 --> 00:01:13,640
Each div has a padding of 45 pixels height of 500 pixels so you can see that we've given each style

11
00:01:13,640 --> 00:01:15,200
rule.

12
00:01:15,660 --> 00:01:22,880
Each idea name Section 1 Section 2 Section 3 and section 4 and they're more.

13
00:01:23,090 --> 00:01:23,900
They're identical.

14
00:01:23,900 --> 00:01:30,780
The only difference is the background color tag or definition sorry is is different for each one

15
00:01:35,850 --> 00:01:38,790
next in order for this scroll spy plug in to work.

16
00:01:38,790 --> 00:01:43,730
We need to add the data SPI attribute in our body tag and set it to scroll.

17
00:01:45,800 --> 00:01:55,230
Also create a data target attribute and set it to dot Navarre next create your not barn create the NAV

18
00:01:55,260 --> 00:02:04,930
element and set the class to NAV bar nav bar inverse and that bar fixed top so a lot of this should

19
00:02:04,930 --> 00:02:06,450
already look familiar.

20
00:02:07,370 --> 00:02:10,010
As we worked with it in previous lessons in this section

21
00:02:13,290 --> 00:02:21,030
next create the container it's gonna be a fluid container because as you saw it spans across the entire

22
00:02:21,030 --> 00:02:23,070
content area from left to right

23
00:02:26,160 --> 00:02:32,580
next create the collapse icon so that the browser doesn't show the full navigation bar items on small

24
00:02:32,580 --> 00:02:34,690
handheld devices.

25
00:02:34,690 --> 00:02:41,670
So remember when the when the webpage is viewed on a large screen we should be able to see the links

26
00:02:41,910 --> 00:02:49,260
in the navigation bar but when we look it on on a very small screen we don't want to see all the links.

27
00:02:49,800 --> 00:02:52,630
We want to see the collapsible menu.

28
00:02:53,010 --> 00:03:00,570
So when you click the button that's when you see the links so this is for small handheld devices

29
00:03:05,570 --> 00:03:09,950
this code block should look familiar as we worked with it earlier in the section.

30
00:03:09,950 --> 00:03:12,110
Remember that your data target

31
00:03:14,620 --> 00:03:18,610
will need to match the I.D. of the div containing the nav bar links

32
00:03:22,510 --> 00:03:30,760
and once you finish creating this code block you can go ahead and create the links create each item

33
00:03:30,760 --> 00:03:32,020
in an unordered list

34
00:03:35,170 --> 00:03:41,620
inside this div so you'll see that we have we've given it the same I.D. as the data target value in

35
00:03:41,620 --> 00:03:51,360
our button and in this unordered list we have all our linked items so there's four of them in total.

36
00:03:51,470 --> 00:03:59,050
Link one link to link three and then for each link has to have an H R Yes attribute that links to this

37
00:03:59,050 --> 00:03:59,990
section name

38
00:04:03,260 --> 00:04:06,940
will now go ahead and create those sections.

39
00:04:07,700 --> 00:04:09,420
So after your closing now tag

40
00:04:12,340 --> 00:04:18,780
create each section in a diff element and make sure the I.D. matches the appropriate link.

41
00:04:18,910 --> 00:04:24,650
So for example link one we gave it the H R F or we gave it the link.

42
00:04:24,670 --> 00:04:26,740
Section 1.

43
00:04:26,830 --> 00:04:33,250
So make sure that your I.D. is correctly attached to that first link.

44
00:04:33,250 --> 00:04:35,860
This is the first section to section 1

45
00:04:38,680 --> 00:04:48,910
also make sure to set the div class to container fluid so they did spend the entire viewport in and

46
00:04:48,910 --> 00:04:51,510
now insert your heading in content into the dude.

47
00:04:51,590 --> 00:04:57,470
So we've put the heading into an h1 tag in the content text into paragraph tags

48
00:05:00,600 --> 00:05:03,750
and that's it for each content section.

49
00:05:04,210 --> 00:05:11,360
Well all you need to do is copy in this and paste this code for each one of your sections and rename

50
00:05:11,360 --> 00:05:16,010
the I.D. so it corresponds to your links.

51
00:05:16,370 --> 00:05:21,050
So Section 2 should match Section 2 Section 3 and section 4

52
00:05:24,630 --> 00:05:32,490
and once you've completed your sections all you need to do is save your file and and preview the file

53
00:05:32,490 --> 00:05:34,920
in your web browser and just make sure it works.