1 00:00:04,040 --> 00:00:07,460 Hello everyone and welcome back to our bootstrap course for beginners. 2 00:00:07,460 --> 00:00:12,720 Now in this lecture we're going to be setting up at the NAV for our Web site. 3 00:00:12,720 --> 00:00:19,490 Now make sure whenever you want to save you click file and save snapshot or command control as here 4 00:00:19,760 --> 00:00:22,850 to save the bin at its current state. 5 00:00:22,850 --> 00:00:29,540 So let's go ahead and start building this nav element with bootstrap classes of course so we can go 6 00:00:29,540 --> 00:00:35,870 ahead and click on outputs that we'll see a bit of output as soon as something begins to appear on the 7 00:00:35,870 --> 00:00:36,650 screen. 8 00:00:36,650 --> 00:00:41,850 So we're gonna take this nav tag that we have here and add a class to it. 9 00:00:41,900 --> 00:00:45,290 And typically when you're just coding with vanilla each commands yes. 10 00:00:45,320 --> 00:00:52,310 As the class refers to some class you're going to use to style and CSX but bootstrap is different because 11 00:00:52,340 --> 00:00:58,190 a class does not need to be styled if it is a bootstrap class and bootstrap classes have their own reserved 12 00:00:58,190 --> 00:01:03,720 keywords that will automatically be applied because we imported bootstrap down here with the CDO in 13 00:01:03,920 --> 00:01:05,210 this code. 14 00:01:05,450 --> 00:01:10,440 So therefore see what happens when you type in a class like nav bar. 15 00:01:10,460 --> 00:01:18,950 Now this means that we're now making an element of type nav bar not just of the normal class nav bar 16 00:01:19,190 --> 00:01:24,470 but of the bootstrap class Navarre because this is a reserved word. 17 00:01:24,470 --> 00:01:32,300 Similarly we can go ahead and make it a Navarre expand large number expand large means that this nav 18 00:01:32,300 --> 00:01:36,410 bar will expand when there is a large screen size. 19 00:01:36,440 --> 00:01:39,230 But before that the now bar will be toggled. 20 00:01:39,230 --> 00:01:43,060 This is another one of the bootstrap classes you can use for nav bar. 21 00:01:43,070 --> 00:01:44,940 I can imagine there are very many. 22 00:01:45,050 --> 00:01:49,400 Now we're gonna be designing mobile first which means we're going to be considering how the Web site 23 00:01:49,400 --> 00:01:53,240 looks on a mobile screen about this big first. 24 00:01:53,270 --> 00:01:53,750 Why. 25 00:01:53,750 --> 00:01:57,710 Well because mobile users are increasing in terms of web users. 26 00:01:57,770 --> 00:02:04,680 It was a 50 percent and now it's climbing to 60 percent of web users being on mobile. 27 00:02:04,790 --> 00:02:08,350 So that's why mobile first is increasing in popularity. 28 00:02:08,350 --> 00:02:08,540 OK. 29 00:02:08,570 --> 00:02:14,720 Let's go ahead and also make this now bar light and we can make the background light and we can make 30 00:02:14,720 --> 00:02:17,120 it rounded and fixed top. 31 00:02:17,120 --> 00:02:20,780 Now all of these classes I don't have to style myself in CSF. 32 00:02:20,780 --> 00:02:22,680 They're all part of bootstrap now. 33 00:02:22,690 --> 00:02:27,920 Bar light will make it a light color background light will make the background a light color rounded 34 00:02:27,920 --> 00:02:34,610 we'll round the now but this is optional and fixed top means that the NAB bar will be fixed at the top 35 00:02:34,640 --> 00:02:38,700 no matter how much the user scrolls down the page. 36 00:02:38,870 --> 00:02:46,070 Now fixed top will also give this element the position absolute automatically which means that it will 37 00:02:46,070 --> 00:02:52,610 now be outside of the Dom side of the document object model and it will be treated as though it was 38 00:02:52,610 --> 00:02:57,680 on top of them all on its own you'll see how this looks at once we actually get more code written and 39 00:02:57,680 --> 00:03:00,570 this output will change to include aren't little now. 40 00:03:01,310 --> 00:03:06,860 OK so those are all the classes we need for the NAF I'm going to toggle the output for now because you're 41 00:03:06,850 --> 00:03:08,350 going to have to add a bit more here. 42 00:03:08,390 --> 00:03:11,270 So what we need next is an icon. 43 00:03:11,270 --> 00:03:13,910 Now this icon all represent our logo. 44 00:03:13,910 --> 00:03:20,060 No we're building a company Web sites you can either add an image that is an actual company logo or 45 00:03:20,060 --> 00:03:21,440 you can use an icon. 46 00:03:21,620 --> 00:03:23,830 Now bootstrap has many different icons. 47 00:03:23,840 --> 00:03:24,860 You can use. 48 00:03:24,860 --> 00:03:30,680 First there is the bootstrap icon library which is a library that you don't have to import yourself 49 00:03:30,710 --> 00:03:33,210 because it is automatically included with bootstrap. 50 00:03:33,380 --> 00:03:39,340 Then there are external libraries that bootstrap supports which you'll have to add or import in here. 51 00:03:39,410 --> 00:03:45,020 We are going to go ahead and use the default bootstrap library of icons because that way we don't have 52 00:03:45,020 --> 00:03:48,680 to add any more code down here to import icons as well. 53 00:03:48,680 --> 00:03:50,390 We don't have to import any library. 54 00:03:50,390 --> 00:03:51,950 Of course you can also use an image. 55 00:03:51,950 --> 00:03:59,570 So we're going to use a diamond icon to represent our logo here just for the template of this project. 56 00:03:59,570 --> 00:04:08,060 Now in order to do that go ahead and google bootstrap icons and copy in or search for the diamond icon 57 00:04:08,330 --> 00:04:10,940 and you'll find this code that looks like this. 58 00:04:11,350 --> 00:04:13,340 And it's quite a lot of code for one icon. 59 00:04:13,340 --> 00:04:17,970 That's because it is an SPG which is a file type STV. 60 00:04:18,410 --> 00:04:23,960 It is a vector graphic and it will automatically create an icon for you. 61 00:04:23,960 --> 00:04:26,710 Now in this case it is a bootstrap icon. 62 00:04:26,780 --> 00:04:32,500 You have been I bootstrap icon and this specifies the actual icon diamond. 63 00:04:32,570 --> 00:04:37,460 Now the width by default will be one and one for the height as well. 64 00:04:37,460 --> 00:04:41,750 But I've already changed it to two because we're going to need it a little bit bigger than that one 65 00:04:41,750 --> 00:04:42,470 is quite small. 66 00:04:42,470 --> 00:04:49,940 You'll see then we have the view box class and we have the fill which will allow you to change the colour. 67 00:04:50,150 --> 00:04:55,580 Then we have the reference to where this icon is located. 68 00:04:55,940 --> 00:05:00,410 In terms of its source and then we have a bunch of code here that is creating the icon. 69 00:05:00,410 --> 00:05:05,720 So if we toggle the here goes slicing it but it'll show up soon. 70 00:05:05,720 --> 00:05:09,650 This will make an SPG that will pop up here for the output. 71 00:05:09,650 --> 00:05:13,430 OK so now we have an SPG. 72 00:05:13,760 --> 00:05:21,800 Let's go ahead and make the rest of our NAV here so or what do next is make a little toggle button. 73 00:05:22,010 --> 00:05:27,920 So when the screen is about this big we're gonna have a toggle that we can click on in order to show 74 00:05:28,400 --> 00:05:31,610 the show the NAV blinks. 75 00:05:32,120 --> 00:05:37,630 However when the screen is much larger than the navigation it's going to expand. 76 00:05:37,650 --> 00:05:38,320 Okay. 77 00:05:38,600 --> 00:05:45,290 So let's go ahead and make that toggle toggle symbol bootstrap actually has a class that will make a 78 00:05:45,290 --> 00:05:46,220 target for you. 79 00:05:46,220 --> 00:05:46,660 So what. 80 00:05:46,670 --> 00:05:53,780 How to make it is you open a new button element because it is a button after all and it's going to be 81 00:05:53,780 --> 00:06:01,210 of class nav bar toddler and the type is going to be button as well. 82 00:06:01,220 --> 00:06:04,450 And the class data toggle to be collapse. 83 00:06:04,490 --> 00:06:12,380 This means that it will cut perhaps any data associated with the toddler another class we need. 84 00:06:12,380 --> 00:06:14,240 This is the data target. 85 00:06:14,240 --> 00:06:21,740 So this button needs to know what it should collapse what is the target of the data to collapse and 86 00:06:21,740 --> 00:06:26,150 the target is going to be our NAV bar element. 87 00:06:26,180 --> 00:06:32,510 So we haven't made this yet but we're gonna need to make an element with an I.D. nav bar and this will 88 00:06:32,510 --> 00:06:35,850 contain all of our links to different pages of the website. 89 00:06:36,140 --> 00:06:43,640 And by assigning the target to that element damage that will collapse that element. 90 00:06:43,640 --> 00:06:50,080 We also need to set the RBA controls to now bar so that we know what kind of controls to use and we're 91 00:06:50,080 --> 00:06:59,420 gonna set expanded to false because when the toddler is toggling the NAV that means that it should not 92 00:06:59,420 --> 00:07:00,260 be expanded. 93 00:07:00,380 --> 00:07:06,110 The data should not be expanded and we're gonna set a label something like toggle navigation which is 94 00:07:06,110 --> 00:07:08,240 typically the default. 95 00:07:08,240 --> 00:07:08,510 OK. 96 00:07:08,540 --> 00:07:17,330 So now let's go ahead and close that button class and that is set up for it. 97 00:07:17,380 --> 00:07:24,060 You can see in the output hit run with J.S. we now have our icon that we can see here. 98 00:07:24,380 --> 00:07:27,080 Sometimes it might take a while for the preview to load on the first run. 99 00:07:27,080 --> 00:07:28,070 So that's fine. 100 00:07:28,070 --> 00:07:32,080 But now we can see it quick one with us and make sure you have auto run Jason. 101 00:07:32,120 --> 00:07:38,030 So you run with JavaScript and this is that icon that we put it in for the now bar and as you can see 102 00:07:38,120 --> 00:07:44,510 there is a slightly lighter color for the NAV because you made it light as part of our bootstrap class. 103 00:07:44,510 --> 00:07:45,710 And then the rest of the page is white. 104 00:07:45,890 --> 00:07:46,300 OK. 105 00:07:46,430 --> 00:07:48,130 Let's go ahead and highlight a little bit more. 106 00:07:49,310 --> 00:07:52,250 And now let's set up the rest of this toddler. 107 00:07:52,250 --> 00:07:58,270 So what we need here we have almost all of its setup for the toggling but we also need to add an icon. 108 00:07:58,280 --> 00:08:02,780 So we're going to open a new span element span is another element type. 109 00:08:02,810 --> 00:08:05,180 However it is very vague and general. 110 00:08:05,210 --> 00:08:12,350 So whereas button is specific and div is a little bit more general but still more specific than a span 111 00:08:12,650 --> 00:08:17,510 span just represents an element that has styling. 112 00:08:17,570 --> 00:08:22,750 So we're going to give it the class nav bar toddler icon. 113 00:08:22,820 --> 00:08:28,420 This is another bootstrap class and it will immediately make a toggle icon for you. 114 00:08:28,430 --> 00:08:32,420 So as you can imagine you can see you can start to see why bootstrap is very helpful. 115 00:08:32,420 --> 00:08:36,440 It helps you increase your efficiency because it comes with all these default classes that you don't 116 00:08:36,440 --> 00:08:40,100 have to style yourself so click on output Quick run. 117 00:08:40,100 --> 00:08:41,670 And we should see this soon. 118 00:08:41,690 --> 00:08:41,860 OK. 119 00:08:41,880 --> 00:08:43,670 So this will make that tiger. 120 00:08:43,670 --> 00:08:49,370 But for the target we also have to set up what it has to toggle which in this case is going to be those 121 00:08:49,460 --> 00:08:51,100 links that we have to make. 122 00:08:51,200 --> 00:08:53,320 It's going to toggle our actual page links. 123 00:08:53,370 --> 00:08:58,010 So let's go ahead and make those next just below the button we're going to set up a div. 124 00:08:58,010 --> 00:09:07,190 And this is going to be a list because toggling works best with lists and this would be a list of page 125 00:09:07,250 --> 00:09:07,850 elements. 126 00:09:07,850 --> 00:09:13,520 So go ahead and open a new div and you're gonna make the class collapse. 127 00:09:13,550 --> 00:09:20,900 That means that this data will be associated with the collapsing as you can see we have your data toggle 128 00:09:20,900 --> 00:09:27,380 collapse and so we have to match that here with the class collapse because this is what is going to 129 00:09:27,380 --> 00:09:31,150 be collapsed when we click that toggle as well. 130 00:09:31,170 --> 00:09:32,790 It needs the class now. 131 00:09:32,880 --> 00:09:39,020 Bar collapse and we're gonna give it the I.D. of the exact same I.D. we use as the target which is nav 132 00:09:39,020 --> 00:09:40,100 bar. 133 00:09:40,290 --> 00:09:41,760 So I.D. equals now Bar. 134 00:09:41,870 --> 00:09:47,450 Make sure you don't have a hashtag here because we are setting the I.D. We're not calling an I.D. so 135 00:09:47,450 --> 00:09:54,770 it must be set directly and go ahead and close that div for now and add a closing div tag. 136 00:09:54,770 --> 00:09:59,570 Now in this div is where we're going to have a list that will represent our links. 137 00:09:59,570 --> 00:10:06,940 So first we're going to make an unordered the class is going to be a now bar NAV and we're also going 138 00:10:06,940 --> 00:10:09,380 to add an extra class called M.L. auto. 139 00:10:09,420 --> 00:10:14,980 This is going to set the justification of the class. 140 00:10:14,990 --> 00:10:21,200 Now you can find more classes on the blue stripe documentation because as you can imagine there are 141 00:10:21,200 --> 00:10:27,080 many different classes so we're just showing you how to work with the most common ones. 142 00:10:27,200 --> 00:10:30,070 And of course you can look up more as you need them. 143 00:10:30,110 --> 00:10:33,300 You don't have to study all them but you can study them as you need them. 144 00:10:33,320 --> 00:10:40,700 So project based approach M0 auto means that the links are going to be justified to the right of the 145 00:10:40,700 --> 00:10:41,410 page. 146 00:10:41,480 --> 00:10:48,830 So that means we have here the page and this logo is justified to the left but then the rest of the 147 00:10:48,830 --> 00:10:50,600 navigation will be here on the right. 148 00:10:50,600 --> 00:10:54,450 That's a pretty typical design for websites. 149 00:10:54,870 --> 00:10:58,030 OK so right now we have the unordered list set up. 150 00:10:58,130 --> 00:11:01,480 If you do want it to align to the left you just use and are auto. 151 00:11:01,490 --> 00:11:10,780 You can also look up some more different justifications but M.L. be justifying it to the right. 152 00:11:10,780 --> 00:11:11,010 OK. 153 00:11:11,020 --> 00:11:18,820 Now in this U L tag we actually want to set up a list item for each link so to open a list item we type. 154 00:11:19,130 --> 00:11:22,900 L I am not going to give it the class nav item. 155 00:11:22,900 --> 00:11:24,840 So this again is a bootstrap class. 156 00:11:24,840 --> 00:11:31,360 That means that we're going to be treating this as a navigation item. 157 00:11:31,390 --> 00:11:34,630 Make sure you close that list tag as well. 158 00:11:34,660 --> 00:11:37,870 Typically it's useful to close a tag as soon as you open it. 159 00:11:37,870 --> 00:11:39,450 Otherwise you could forget. 160 00:11:39,700 --> 00:11:48,340 If you're using an idea so an environment like an application like Eclipse or brackets atom then it 161 00:11:48,340 --> 00:11:54,460 will automatically create these closing tags for you and it will also have collapsible divs which are 162 00:11:54,460 --> 00:11:55,300 quite useful as well. 163 00:11:55,330 --> 00:12:01,960 But James Bean is useful because it's an online editor but it doesn't have these kinds of auto generations. 164 00:12:01,960 --> 00:12:03,770 So make sure you don't really do it yourself. 165 00:12:03,800 --> 00:12:09,190 Okay so the first item we set up that it's a list item and we said it's class. 166 00:12:09,190 --> 00:12:15,760 Now we're going to set the actual link so a link is open with an anchor tag a stands for anchor and 167 00:12:15,760 --> 00:12:22,750 the class here is going to be nav link so navigation link and the H ref is the reference to where the 168 00:12:22,750 --> 00:12:24,350 link links to. 169 00:12:24,640 --> 00:12:29,320 And it just putting a hash tag here means that it will link to the top of the homepage. 170 00:12:29,360 --> 00:12:34,080 Make sure you close that tag and then give the name home. 171 00:12:34,120 --> 00:12:38,830 So that means that whenever someone clicks on the word home we will link them back to the top of the 172 00:12:38,830 --> 00:12:39,750 page. 173 00:12:39,830 --> 00:12:45,520 We go ahead and run with JavaScript and we should see this pop up soon but we can add more code in the 174 00:12:45,520 --> 00:12:47,440 meantime. 175 00:12:47,440 --> 00:12:52,080 OK so we have a home and we've closed that. 176 00:12:52,210 --> 00:12:55,620 Let's go ahead and make the rest of the links as well. 177 00:12:56,530 --> 00:13:04,750 So we're going to need a list class going to separate us a list class again now. 178 00:13:04,790 --> 00:13:10,330 Item so we're following the exact same structure to make the second list item. 179 00:13:10,820 --> 00:13:17,410 And this time it's going to be another anchor of class nav link. 180 00:13:17,510 --> 00:13:22,080 But the H ref so the link anchor it's going to be different. 181 00:13:22,130 --> 00:13:27,920 The target is now going to be a different area of the page and in order to send the user to a different 182 00:13:27,920 --> 00:13:32,600 area of the page you can call the element that you want to go to by its ideas. 183 00:13:32,780 --> 00:13:40,250 So we're gonna send them right here to this next section here which is services overview and we're just 184 00:13:40,250 --> 00:13:43,040 calling it by its ideas with the hash tag here. 185 00:13:43,160 --> 00:13:49,070 Then we can close that anchor tag and write the text associated with the anchor tag which is going to 186 00:13:49,070 --> 00:13:55,560 be overview and then close the anchor tag right after the text. 187 00:13:55,820 --> 00:13:58,670 Go ahead and hit run and we should be seeing as soon 188 00:14:02,500 --> 00:14:04,370 OK. 189 00:14:04,860 --> 00:14:07,470 Now we have the list item set up. 190 00:14:07,530 --> 00:14:10,070 Let's also go ahead and set up some more. 191 00:14:10,140 --> 00:14:15,330 This item so we're going to have one for each of the sections here for our featured products for our 192 00:14:15,330 --> 00:14:17,310 services and for our contact. 193 00:14:17,310 --> 00:14:20,910 So we're going to use the exact same format to set that up. 194 00:14:20,920 --> 00:14:26,320 This class equals now item a class equals. 195 00:14:26,330 --> 00:14:33,990 Now link you reference is going to be featured products carousel which is the idea of that second item 196 00:14:33,990 --> 00:14:40,500 we have and the text to click on will be featured and we'll go ahead and close that list item and we'll 197 00:14:40,500 --> 00:14:48,450 have another list item of the same class now item number classes can be reused for multiple items and 198 00:14:48,870 --> 00:14:57,030 the anchor class will be nav link and the reference will be the services element that we have on our 199 00:14:57,030 --> 00:14:58,680 single page Web site. 200 00:14:58,770 --> 00:15:01,450 We can go ahead and close that list item as well. 201 00:15:01,570 --> 00:15:04,390 Then we're gonna have a list item called nav item. 202 00:15:04,810 --> 00:15:07,410 We're going to open up its NAV link the exact same way. 203 00:15:07,440 --> 00:15:12,390 So as you can see there's a pattern here because we're using the same bootstrap classes for each of 204 00:15:12,390 --> 00:15:14,320 the navigation elements. 205 00:15:14,430 --> 00:15:18,220 So each of these represents a different link item for the user on screen. 206 00:15:19,280 --> 00:15:19,870 OK. 207 00:15:20,040 --> 00:15:25,530 So those are all of the different link items we have we have home overview featured services and contact. 208 00:15:25,560 --> 00:15:29,650 So every time the user clicks on one they will be scrolled to that part of the page. 209 00:15:30,900 --> 00:15:37,440 OK go ahead and hit run with JavaScript and should be seeing this on your page soon but otherwise that 210 00:15:37,440 --> 00:15:42,050 is all that we need for this section of the page. 211 00:15:42,060 --> 00:15:52,200 Now make sure that you're closing navigation tag is outside of the button for the toddler and the actual 212 00:15:52,200 --> 00:15:52,640 links. 213 00:15:52,650 --> 00:15:55,990 So that could be why we're not seeing it in the console. 214 00:15:56,430 --> 00:16:04,170 So make sure it's just outside here because the navigation should contain the logo and all the navigation 215 00:16:04,170 --> 00:16:05,730 links. 216 00:16:05,730 --> 00:16:08,000 So go ahead and test that again and yes that was the problem. 217 00:16:08,000 --> 00:16:10,110 Now we can actually see all this. 218 00:16:10,110 --> 00:16:14,940 I'm going to go ahead and just toggle close each gimbal and show you what we've built so far. 219 00:16:14,970 --> 00:16:18,360 We have here the logo. 220 00:16:18,360 --> 00:16:24,150 We have a home page an overview a featured and a services and a contact. 221 00:16:24,420 --> 00:16:31,470 And if we bring back the issue e-mail here you'll notice the output got smaller the window got smaller 222 00:16:32,490 --> 00:16:33,990 and this toggle button appeared. 223 00:16:34,080 --> 00:16:39,130 So when we click on this we'll see our navigation in this beautiful list here. 224 00:16:39,180 --> 00:16:43,910 And as you can see it's associated with a different link for each one. 225 00:16:44,100 --> 00:16:46,560 And when you toggle it toggles closed. 226 00:16:47,670 --> 00:16:48,830 So congratulations everybody. 227 00:16:48,830 --> 00:16:53,580 As you can see bootstrap makes it really fast to make these beautiful designs. 228 00:16:53,670 --> 00:16:57,540 So in the next lecture we are going to be continuing with our project and we are going to be building 229 00:16:57,810 --> 00:16:58,730 the second div here. 230 00:16:58,740 --> 00:17:00,110 The services overview. 231 00:17:00,630 --> 00:17:02,760 Other than that that is everything for this lecture. 232 00:17:02,850 --> 00:17:04,400 And we will see you in the next lecture.