1 00:00:05,580 --> 00:00:11,250 Parents have shown you how to install bootstrap into your document here and we'll be using the absolute 2 00:00:11,250 --> 00:00:17,290 path version of our CSSA file and the absolute path for the javascript files here. 3 00:00:17,490 --> 00:00:21,150 But I want to show you is thin and what type of H html editor that you're using. 4 00:00:21,270 --> 00:00:25,290 You may have a generic each HTML file sort of slightly different. 5 00:00:25,290 --> 00:00:28,440 So I want to go through Mycenaeans here real quick make sure on the same page. 6 00:00:29,370 --> 00:00:35,230 I am using each HTML here so I cleared my document is just like type each DML. 7 00:00:35,400 --> 00:00:40,320 I have declared my language to be English and then I open up a header take here my character set is 8 00:00:40,320 --> 00:00:43,120 UTF 8 and everything else. 9 00:00:43,140 --> 00:00:47,720 That's stuff you can keeper remove if that's not important what is important is make sure that our Web 10 00:00:47,720 --> 00:00:48,870 site is responsive. 11 00:00:48,870 --> 00:00:51,310 So what we do is we add a little meditation there. 12 00:00:51,420 --> 00:00:53,870 I'm going to paste it in so just to kind of save time. 13 00:00:55,700 --> 00:00:57,350 Wants we do that together 14 00:01:02,070 --> 00:01:08,650 I teased this guy in there right there with it saying is the viewport I want to make sure that the initials 15 00:01:08,650 --> 00:01:11,210 scale is worn and shrink to fit is no. 16 00:01:11,380 --> 00:01:15,350 This is a very common metal tag across any web site that is responsive. 17 00:01:15,370 --> 00:01:19,710 So you can always do a google search for the response of meditation. 18 00:01:20,140 --> 00:01:23,250 Or you can just can copy and paste what I've typed in there. 19 00:01:24,310 --> 00:01:30,790 Now from my title that is important to have my go ahead and just call a bootstrap. 20 00:01:30,910 --> 00:01:34,660 See here everything else can be the same as with any HGL file. 21 00:01:34,660 --> 00:01:37,750 Just make sure that you close your hand if you've opened up your head. 22 00:01:37,750 --> 00:01:39,130 Open a body tag. 23 00:01:39,130 --> 00:01:40,670 Get a clothes and body tag. 24 00:01:40,850 --> 00:01:45,020 Better opening each time out and are close in age to male and we should be good to go. 25 00:01:45,040 --> 00:01:45,300 All right. 26 00:01:45,310 --> 00:01:48,280 So the first thing I want to do is I want to go through navigation now. 27 00:01:48,400 --> 00:01:54,300 The navigation is a little bit more complex because we're dealing with our normal navigation and just 28 00:01:54,300 --> 00:01:57,060 see across the top as well as when you shrink it down. 29 00:01:57,060 --> 00:02:00,970 It's going to get smaller and turn into what they call the hamburger menu or that little three line 30 00:02:00,970 --> 00:02:02,030 menu there. 31 00:02:02,200 --> 00:02:06,340 And there's a there's a little bit more to this part of it and I break this up in two different videos 32 00:02:06,340 --> 00:02:09,940 here so stay with me on this. 33 00:02:10,090 --> 00:02:12,640 We're going to go and just jump right into it now. 34 00:02:12,780 --> 00:02:18,820 We're going to do is we're going to find using in each team of five tag and call it the nine. 35 00:02:19,290 --> 00:02:23,670 So this will be in the bar that goes straight across the top of our page. 36 00:02:23,680 --> 00:02:27,870 It's going to have our logo over on the left hand side and our text on the right hand side. 37 00:02:27,880 --> 00:02:31,340 Now all these things I can control using the little straps. 38 00:02:31,340 --> 00:02:35,290 SS So nothing new has gone on so far. 39 00:02:35,290 --> 00:02:41,360 We will be now adding some of the bootstrap classes which is what makes bootstrap so amazing. 40 00:02:41,740 --> 00:02:49,840 So within our tank here we're going to go in and start to define some stuff that RSA class equals half 41 00:02:50,100 --> 00:02:50,670 bar. 42 00:02:50,920 --> 00:02:53,620 So that's what I'd do is define that. 43 00:02:53,620 --> 00:02:59,620 This is my navigational bar and within bootstrap it has all sorts of properties built into that. 44 00:02:59,620 --> 00:03:04,390 We're not going to take a look at that right now but if you download the CSSA files you can go ahead 45 00:03:04,390 --> 00:03:09,730 and do a search for Dot NFR because that's a class and you can see that the applied to it. 46 00:03:10,970 --> 00:03:16,250 Now again just to reiterate here bootstrap has its own predefined classes and that's what we're going 47 00:03:16,250 --> 00:03:17,450 to be using here. 48 00:03:17,450 --> 00:03:23,000 This is nothing that I've made up so if I had made it up I'd have to link to either a CSSA file or put 49 00:03:23,000 --> 00:03:29,930 it in my head or up here which again I have now would be working just with CSX going to be working just 50 00:03:29,930 --> 00:03:32,230 with the bootstrap styles. 51 00:03:32,780 --> 00:03:38,330 So I want to Anjuta up a couple of classes here and make a little bit hard to see until we have gone 52 00:03:38,330 --> 00:03:45,260 and added more information to this page which again will get it to completing with the next video as 53 00:03:45,260 --> 00:03:45,620 well. 54 00:03:45,620 --> 00:03:48,340 But it's one to add a couple of things right now. 55 00:03:49,210 --> 00:03:50,440 We want to. 56 00:03:50,740 --> 00:03:58,570 What we want to say we've got our NAV bar here we find that and that's glance at a the square and say 57 00:03:58,570 --> 00:04:01,630 the background is going to be dark. 58 00:04:01,630 --> 00:04:08,500 Now again this is a pre-made bootstrap style in here just kind of give me a dark grey almost black background 59 00:04:08,500 --> 00:04:09,090 to it. 60 00:04:09,250 --> 00:04:14,150 I could just as easily put in a custom style of a specific color. 61 00:04:14,310 --> 00:04:18,050 Right now we're using just the bootstrap information here. 62 00:04:18,340 --> 00:04:24,430 And because I'm have a dark background I need to say any texts on that. 63 00:04:24,460 --> 00:04:25,860 Let's make it light. 64 00:04:25,930 --> 00:04:28,210 So I have to say. 65 00:04:28,960 --> 00:04:32,710 Now bark is dark so Neph are dashed dark. 66 00:04:32,710 --> 00:04:33,570 That's a classic. 67 00:04:33,580 --> 00:04:37,270 You know what that does is allow the fonts to be white on top of that. 68 00:04:37,380 --> 00:04:41,890 So you're not going to see a whole lot here right now if I were to save this and come over here. 69 00:04:42,100 --> 00:04:45,370 You can see I just have a gray bar going across the top. 70 00:04:45,370 --> 00:04:47,440 I don't have any information on my logo. 71 00:04:47,440 --> 00:04:49,510 I don't have any medication items. 72 00:04:49,600 --> 00:04:53,550 It's just starting to set up some of these styles right here right now. 73 00:04:53,860 --> 00:04:58,960 So in the next class rentable hand and the navigational elements when I do a little bit more styling 74 00:04:59,230 --> 00:05:03,550 and then you're going to see how this works in real time. 75 00:05:03,610 --> 00:05:04,570 And responsively.