1 00:00:05,400 --> 00:00:11,550 Welcome back in this lecture we're going to talk about navigation bars with bootstrap navigation bars 2 00:00:11,580 --> 00:00:14,000 are present on almost all major Web sites. 3 00:00:14,070 --> 00:00:18,840 They allow us to quickly links to other pages on our web applications through a convenient bar at the 4 00:00:18,840 --> 00:00:19,770 top. 5 00:00:19,770 --> 00:00:26,940 We can create a nav bar through the nav HVM tag bootstrap classes can then be added to the NF element 6 00:00:26,940 --> 00:00:29,650 to add styling and functionality. 7 00:00:29,650 --> 00:00:34,000 Bootstrap also allows us for the easy creation of collapsing nav bars. 8 00:00:34,000 --> 00:00:39,940 This means if the nav bar is viewed on a different size monitor than maybe your desktop computer such 9 00:00:39,940 --> 00:00:46,390 as a mobile device the smaller screen size will readjust the nav bar to produce a dropdown menu in order 10 00:00:46,390 --> 00:00:51,070 to add on that functionality when you actually link in some query code. 11 00:00:51,070 --> 00:00:52,700 In addition to the bootstrap. 12 00:00:52,840 --> 00:00:57,750 So let's go ahead and learn about all of this by heading over to the text editor as well as our browser. 13 00:00:57,880 --> 00:01:00,120 Look a here I am at my HMO. 14 00:01:00,310 --> 00:01:02,790 Let's go ahead and start getting set up for the HMO. 15 00:01:02,860 --> 00:01:08,590 I'm going to type the team L and notice that we have this head and body I need to grab an ad in the 16 00:01:08,590 --> 00:01:13,600 bootstrap blinks for the time ahead as well as the Jake wheelings so I'll show you how to do that as 17 00:01:13,600 --> 00:01:14,370 well. 18 00:01:14,770 --> 00:01:18,190 Come back to the bootstrap home page get bootstrapped dot com. 19 00:01:18,460 --> 00:01:21,130 Scroll down until you see the C S S only. 20 00:01:21,190 --> 00:01:24,770 Go ahead and grab this link here to make sure we grab that tag as well. 21 00:01:25,590 --> 00:01:28,380 Copy and paste it just as we've done before. 22 00:01:29,710 --> 00:01:31,420 And then we're also going to grab. 23 00:01:31,490 --> 00:01:32,560 Come down here. 24 00:01:32,680 --> 00:01:35,620 This javascript links. 25 00:01:35,620 --> 00:01:38,710 So copy all that come all the way forward. 26 00:01:38,950 --> 00:01:41,230 Copy and then paste those in as well. 27 00:01:41,230 --> 00:01:44,450 Now there's a small issue with the query that's shown here. 28 00:01:44,590 --> 00:01:46,540 It's both slim and men. 29 00:01:46,720 --> 00:01:50,280 Basically that means it's been slimmed down and minimized. 30 00:01:50,320 --> 00:01:56,440 So it's a kind of Jake wearier javascript file that has gotten rid of a lot of spacing that sometimes 31 00:01:56,440 --> 00:01:59,620 causes issues of certain browsers for the extra functionality. 32 00:01:59,620 --> 00:02:06,100 So what we're going to do is we're going to add in the uncompressed version of this directly from the 33 00:02:06,100 --> 00:02:08,280 actual Jay queery Web site. 34 00:02:08,500 --> 00:02:15,700 So in order to do this we're going to come over here back to our browser and go to code that Jake queery 35 00:02:15,700 --> 00:02:20,840 dot com that C O D E dot JQ e r y dot com. 36 00:02:20,890 --> 00:02:23,580 And you'll notice we have Jay queery three point X.. 37 00:02:23,620 --> 00:02:26,850 This is the one we need the one on the bootstrap. 38 00:02:26,890 --> 00:02:32,100 It's slim and modified and we only want the one that is magnified. 39 00:02:32,320 --> 00:02:36,680 So we don't want any slim or slim in a find we either want uncompressed or minute fine. 40 00:02:36,700 --> 00:02:39,920 So if you click on the manifold link we get the script right here. 41 00:02:39,970 --> 00:02:43,800 You can go ahead and copy it sort of copy that. 42 00:02:44,060 --> 00:02:44,410 OK. 43 00:02:44,430 --> 00:02:45,630 And upon pasting it in. 44 00:02:45,660 --> 00:02:50,270 Now I see this the source and notice now is just men. 45 00:02:50,400 --> 00:02:52,140 So go ahead and save those changes. 46 00:02:52,140 --> 00:02:55,050 This is going to allow us to have that collapse functionality. 47 00:02:55,050 --> 00:02:58,410 There are sometimes issues in certain browsers when you're using the one from bootstraps since it's 48 00:02:58,410 --> 00:02:59,640 slim and men. 49 00:02:59,730 --> 00:03:02,690 We just wanted to be men OK. 50 00:03:02,910 --> 00:03:06,530 So again go to Kodachi query and copy that path. 51 00:03:06,810 --> 00:03:09,480 Let's now come back to bootstrap. 52 00:03:09,480 --> 00:03:18,270 So we'll come to the documentation page click on components and then check out navs and nav bar. 53 00:03:18,530 --> 00:03:23,870 So navs just gives you a basic instructions on how to use navigation components things like little links 54 00:03:23,930 --> 00:03:24,740 at the top. 55 00:03:24,740 --> 00:03:29,690 They can see all the various styles here available such as adjusting the vertical adjusting them to 56 00:03:29,690 --> 00:03:36,140 the right aligning them to the middle et cetera and then for the basics on actual navigation bars and 57 00:03:36,320 --> 00:03:38,210 there's also tabs available here. 58 00:03:38,360 --> 00:03:43,850 If you come to nav bar right below navs This is where you actually get the main documentation of how 59 00:03:43,850 --> 00:03:45,670 basic navigation bars work. 60 00:03:45,680 --> 00:03:51,050 And there's really powerful support here for branding navigation and the collapse plug in in order for 61 00:03:51,050 --> 00:03:52,390 that class plug in to work. 62 00:03:52,400 --> 00:03:55,320 That's where we had to add in that Jake Query code. 63 00:03:55,430 --> 00:04:03,110 So here we get this nav home link dropdown disabled search bar etc. all in an avocation bar and we can 64 00:04:03,110 --> 00:04:05,370 see the code that supported with it here. 65 00:04:05,390 --> 00:04:13,990 Let's go ahead and copy this code to our clipboard and let's put it in the body so going to zoom out 66 00:04:14,080 --> 00:04:16,660 a little bit so we can see everything that's going on here. 67 00:04:16,720 --> 00:04:18,430 All of this is in between. 68 00:04:18,490 --> 00:04:23,410 This open nav tag and this closing tag. 69 00:04:23,440 --> 00:04:26,590 So that's the very basic nav tag that each team already has. 70 00:04:26,770 --> 00:04:30,360 And then the rest is really just adding classes and divisions. 71 00:04:30,370 --> 00:04:33,170 So I noticed this big class call here nav bar. 72 00:04:33,260 --> 00:04:34,720 Now Barbash expand. 73 00:04:34,750 --> 00:04:38,450 LG now are like B.G. light etc.. 74 00:04:38,620 --> 00:04:40,470 Save all of that and just check it out. 75 00:04:40,480 --> 00:04:41,790 Now in our Web site. 76 00:04:41,950 --> 00:04:44,970 So going to refresh my page is linked to the HTML file. 77 00:04:45,160 --> 00:04:51,540 And if I zoom in now I get to see this nice nav bar with Home link a link a dropdown menu. 78 00:04:51,670 --> 00:04:54,430 This disabled link for the styling and then even a search bar. 79 00:04:54,420 --> 00:04:56,070 So I don't even at forms here. 80 00:04:56,070 --> 00:04:57,200 And then search something. 81 00:04:57,310 --> 00:05:01,480 Obviously when I submit that nothing is actually going to occur because none of these links are actually 82 00:05:01,480 --> 00:05:02,980 connected. 83 00:05:02,980 --> 00:05:04,810 Let's break down what's actually happening here. 84 00:05:04,810 --> 00:05:06,330 For the major components. 85 00:05:06,460 --> 00:05:11,080 So typically if we zoom in here the very first component you're going to have in your navigation bar 86 00:05:11,170 --> 00:05:18,370 is your brand and that's going to be some either larger font that matches up with the site name. 87 00:05:18,370 --> 00:05:24,000 So here it's called nav bar but typically it's going to link kohm so we can say something like home 88 00:05:24,000 --> 00:05:27,370 here save that change in between these two anchor tags. 89 00:05:27,380 --> 00:05:31,920 And if I refresh now I see home notice how it's a little larger than this other home link. 90 00:05:31,950 --> 00:05:35,110 That's because it has this nav bar brand. 91 00:05:35,160 --> 00:05:35,770 OK. 92 00:05:35,880 --> 00:05:37,230 So we have this home link. 93 00:05:37,260 --> 00:05:42,420 And often people call it brand and you can go places with an image of your web site as well. 94 00:05:42,420 --> 00:05:43,350 So I'll refresh this. 95 00:05:43,350 --> 00:05:48,930 Now we see brand here and this is the nav bar dash brand class and it's typically the first thing that 96 00:05:48,930 --> 00:05:50,510 goes in your nav bar. 97 00:05:50,550 --> 00:05:54,540 And here we've also added this button with this haggler. 98 00:05:54,570 --> 00:05:55,930 So what does this actually mean. 99 00:05:56,160 --> 00:06:03,930 So if we keep scrolling down eventually you'll see a div that has collapse nav bar collapse and our 100 00:06:03,930 --> 00:06:07,100 brand link is outside of that division. 101 00:06:07,110 --> 00:06:13,140 Basically what this means for this device is that everything inside of this division is going to be 102 00:06:13,140 --> 00:06:16,480 able to collapse upon changing the size of the browser. 103 00:06:16,530 --> 00:06:21,880 So let's experiment with that a bit right now I can see the entirety of the nav bar but as I move this 104 00:06:21,930 --> 00:06:28,740 down and begin to get less and less space suddenly they'll collapse into this hamburger icons have a 105 00:06:28,740 --> 00:06:30,000 click on the MBR icon. 106 00:06:30,000 --> 00:06:31,380 Now I get to see everything. 107 00:06:31,510 --> 00:06:33,040 I begin to expand this again. 108 00:06:33,390 --> 00:06:40,680 I get to see everything on the nav bar so collapsed with the expansion that I can close off or I get 109 00:06:40,680 --> 00:06:42,470 to see the entirety of the nav bar. 110 00:06:42,480 --> 00:06:48,330 This is basically detecting how big your browser screen size is and then showing the appropriate method 111 00:06:48,330 --> 00:06:49,030 of the nav bar. 112 00:06:49,050 --> 00:06:55,380 So for smaller screens we're going to want to be able to collapse here but for larger screens we're 113 00:06:55,380 --> 00:06:57,010 going to want to show everything. 114 00:06:57,030 --> 00:07:01,660 Now you may be wondering well why isn't brand collapsing into that actual hamburger icon. 115 00:07:01,680 --> 00:07:04,950 So as it begins collapse this notice branch still stays there. 116 00:07:04,980 --> 00:07:06,910 It doesn't go inside this hamburger icon. 117 00:07:07,110 --> 00:07:13,800 Well that's because recall that this brand anchor tag is not inside the div which has this collapse 118 00:07:14,160 --> 00:07:14,860 glass. 119 00:07:14,970 --> 00:07:21,630 If I wanted it to collapse as well all I would need to do is grab everything relates to this brand cut 120 00:07:21,630 --> 00:07:25,810 it out and then stick it inside that collapsed div.. 121 00:07:25,920 --> 00:07:33,300 Save those changes and then if I refreshed my site so I refreshed it and I'm going to begin to collapse 122 00:07:33,300 --> 00:07:34,070 again. 123 00:07:34,080 --> 00:07:36,060 Notice now everything goes to collapse. 124 00:07:36,120 --> 00:07:38,180 However that can cause issues depending on how you do it. 125 00:07:38,190 --> 00:07:41,940 Because now we've also collapsed the button onto itself. 126 00:07:41,940 --> 00:07:46,670 So this button that's actually representing that hamburger icon all the way on the right. 127 00:07:46,740 --> 00:07:50,490 So it's probably a good idea to have this one outside of the collapse itself. 128 00:07:50,490 --> 00:07:53,760 Otherwise you'll be saying collapse into the collapse. 129 00:07:53,760 --> 00:07:55,200 So save that change. 130 00:07:55,260 --> 00:07:58,340 Refresh our Web site and now we get to see this hamburger icon. 131 00:07:58,440 --> 00:07:59,730 That also includes the brand. 132 00:07:59,940 --> 00:08:02,560 And since it's by itself now it just goes to the left. 133 00:08:02,760 --> 00:08:08,640 So I get to see the entirety of the nav bar and as it begins to collapse everything including the brand 134 00:08:08,910 --> 00:08:10,960 now goes into this button. 135 00:08:11,070 --> 00:08:14,350 So again that button is right here in the HVM L. 136 00:08:14,400 --> 00:08:19,200 That's something you're not going to want to have go into the collapse otherwise you won't see anything 137 00:08:19,200 --> 00:08:21,550 in the nav bar when you collapse. 138 00:08:21,570 --> 00:08:22,090 OK. 139 00:08:22,380 --> 00:08:27,180 So again that's defined by this data toggle collapse right here. 140 00:08:27,210 --> 00:08:35,310 So a lot of times we're going to want this brand to go outside of the collapse that we always see something. 141 00:08:35,540 --> 00:08:40,250 So if I refreshed this now it gets to the brand including the collapse button and if I expand this I 142 00:08:40,250 --> 00:08:41,630 could see everything else. 143 00:08:41,700 --> 00:08:47,690 And as far as adding links to your navigation bar the way it works is essentially an unordered list 144 00:08:48,120 --> 00:08:52,820 with class calls list items and then anchor tags for them. 145 00:08:52,820 --> 00:08:59,110 So here we see this giant unordered list which is nav bar Barbash now of M are auto. 146 00:08:59,450 --> 00:09:00,500 Here's a list item. 147 00:09:00,500 --> 00:09:02,930 Again if a specific class call from Bootstrap. 148 00:09:02,930 --> 00:09:05,400 These are things we're going to look up in the documentation. 149 00:09:05,420 --> 00:09:07,720 You don't ever have to worry about memorizing these class calls. 150 00:09:07,730 --> 00:09:08,450 Nobody does. 151 00:09:08,450 --> 00:09:12,710 Everyone just always or first the documentation for them and then we have an anchor tag here. 152 00:09:12,710 --> 00:09:16,270 So it's experiment by adding in a new link on our nav bar. 153 00:09:16,280 --> 00:09:22,460 Right now we have home link dropdown and disabled when I'm going to do is inside of this an ordered 154 00:09:22,460 --> 00:09:29,110 list or add list item we'll give it the class similar to the one that's right below it. 155 00:09:29,270 --> 00:09:37,050 Nav. item space active and you'll notice that there's other classes you can do such as just that item 156 00:09:37,050 --> 00:09:40,970 or drop down and then we can see the dropdown menus there as well. 157 00:09:41,220 --> 00:09:46,620 But here's just my simple list item and I'm going to have just be new item. 158 00:09:46,620 --> 00:09:53,660 So I'm saving that change of the list item coming back here doing a refresh and now I see that new item. 159 00:09:53,670 --> 00:09:57,180 Notice how it looks a little off compared to these other ones. 160 00:09:57,420 --> 00:10:00,330 And that's because we did an ad in this class of NAV link. 161 00:10:00,480 --> 00:10:01,890 So let's add that in as well. 162 00:10:03,870 --> 00:10:06,870 Save it refresh. 163 00:10:06,870 --> 00:10:09,550 And now it's going to be lined up with the rest of them. 164 00:10:09,570 --> 00:10:14,100 Now typically for nav links those are going to be inside Achor tags since you want this new item to 165 00:10:14,130 --> 00:10:16,200 link to somewhere else on your page. 166 00:10:16,200 --> 00:10:23,540 So instead of just having a list item like this or we're going to do is inside of that list provide 167 00:10:23,560 --> 00:10:31,160 an anchor tag with some sort of reference we'll put the class call here. 168 00:10:31,280 --> 00:10:40,910 So we'll say now have link dash link and then we can have this say something like brand new link. 169 00:10:41,180 --> 00:10:44,100 Save those changes come back here. 170 00:10:44,150 --> 00:10:45,300 I want to refresh this. 171 00:10:45,320 --> 00:10:49,550 I get to see brand new link right next to home link and dropdown. 172 00:10:49,610 --> 00:10:51,200 You'll notice that some of these look a little different. 173 00:10:51,200 --> 00:10:55,790 Home looks a little darker linked looks a little lighter and that's just the different class style calls. 174 00:10:55,790 --> 00:10:59,100 And we can even see here the sable looks even more faint. 175 00:10:59,150 --> 00:11:03,700 So those are all defined by the class style calls so we see item drop down. 176 00:11:03,770 --> 00:11:09,110 In the case they wanted to be a drop down and then inside of that dropdown you can see we have another 177 00:11:09,110 --> 00:11:15,980 list item with a div with the class dropdown menu and then various tags there and we can also have dropdown 178 00:11:15,980 --> 00:11:17,130 dividers. 179 00:11:17,180 --> 00:11:21,890 So if you come here and take a look at the drop down I see action and other action some sort of divider 180 00:11:21,980 --> 00:11:25,900 and then something else here that's being defined by this dropdown divider. 181 00:11:25,960 --> 00:11:33,320 So we have action in other action the dropdown divider division there and then another dropdown item 182 00:11:33,860 --> 00:11:38,090 and hopefully are able to link in your mind what you see in the browser versus what you're actually 183 00:11:38,090 --> 00:11:42,140 seeing in the bootstrap example documentation. 184 00:11:42,140 --> 00:11:44,760 So then here's another list item It's a nap item. 185 00:11:44,780 --> 00:11:50,000 Notice the classes change slightly Navesink disabled and that's the styling call if you want it to appear 186 00:11:50,000 --> 00:11:52,190 like it's disabled a little lighter. 187 00:11:52,250 --> 00:11:55,430 We can also put in forms directly into this nav bar. 188 00:11:55,430 --> 00:12:00,080 Again all this is going in between those nav tags and we can see here the various classes available 189 00:12:00,240 --> 00:12:02,950 form in line form control and so on. 190 00:12:03,050 --> 00:12:08,200 And typically you're going to use that to add a search bar to your actual navigation bar. 191 00:12:08,210 --> 00:12:08,900 All right. 192 00:12:08,900 --> 00:12:13,280 Now I know that seems like a ton of stuff but I really want to emphasize here you shouldn't have to 193 00:12:13,280 --> 00:12:14,950 memorize any of this. 194 00:12:14,990 --> 00:12:20,570 You should be skilled in being able to come to the documentation looking at the example that reflects 195 00:12:20,570 --> 00:12:22,080 what you want in your web site. 196 00:12:22,100 --> 00:12:27,080 For example if we just scroll down here maybe you want some sort of text of an inline element or you 197 00:12:27,080 --> 00:12:28,470 like this nav bar. 198 00:12:28,520 --> 00:12:35,480 So then you just copy the actual HTL code here and then realize what class calls you need to make and 199 00:12:35,480 --> 00:12:38,890 adjust as necessary for your own web site. 200 00:12:38,930 --> 00:12:43,910 So if it keeps scrolling down you can see there's different color schemes such as color navigation bars 201 00:12:43,910 --> 00:12:49,790 or blue navigation bar light blue and so on and all you have to know is that you just change the actual 202 00:12:49,790 --> 00:12:50,600 calls. 203 00:12:50,600 --> 00:12:58,190 So a nav bar and then you just say nav Barbash dark B.G. dark or you say primary or you say style background 204 00:12:58,190 --> 00:13:01,030 color and then add your own hex code for your background color. 205 00:13:01,040 --> 00:13:05,860 It's all just class calls that you add in when you reference the documentation. 206 00:13:05,990 --> 00:13:10,030 You can put everything inside of container to not have it stretch all the way out. 207 00:13:10,280 --> 00:13:12,600 So lots and lots of different options here. 208 00:13:12,620 --> 00:13:17,300 Again we want to become masters at looking up the information for the documentation not memorizing all 209 00:13:17,300 --> 00:13:19,370 these bootstrap class calls. 210 00:13:19,370 --> 00:13:19,980 OK. 211 00:13:20,180 --> 00:13:22,400 So that's really it for bootstrap. 212 00:13:22,400 --> 00:13:27,230 Again the whole idea of it is just referencing the documentation for bootstrap and then implementing 213 00:13:27,230 --> 00:13:28,890 it in your own projects. 214 00:13:28,910 --> 00:13:33,310 Well we're going to do next is we're going to have a quick bootstrap project so you can get comfortable 215 00:13:33,320 --> 00:13:37,410 were referencing the bootstrap documentation and then building something new. 216 00:13:37,700 --> 00:13:38,060 All right. 217 00:13:38,060 --> 00:13:41,080 If you have any questions feel free to post the Kewney forums. 218 00:13:41,090 --> 00:13:41,900 We'll see you there.