1 1 00:00:00,880 --> 00:00:01,960 Hi and welcome back. 2 2 00:00:01,960 --> 00:00:03,620 In this video we're going to be building our 3 3 00:00:03,620 --> 00:00:07,130 navigation bar so that we can navigate a bit more 4 4 00:00:07,130 --> 00:00:09,120 easily through our application without having 5 5 00:00:09,120 --> 00:00:12,050 to remember all of the end points. 6 6 00:00:12,050 --> 00:00:15,280 Before we create a navbar we're going to need 7 7 00:00:15,280 --> 00:00:19,260 the javascript script from Bootstrap. 8 8 00:00:19,260 --> 00:00:20,146 If you go over to the getting started section 9 9 00:00:20,146 --> 00:00:24,470 on the Bootstrap page and then just scroll down to the 10 10 00:00:24,470 --> 00:00:29,470 javascript block, copy that, go over to baseline html 11 11 00:00:30,530 --> 00:00:33,690 and before the end of the body tag, 12 12 00:00:33,690 --> 00:00:36,060 but after everything else 13 13 00:00:36,060 --> 00:00:37,010 just paste them in. 14 14 00:00:37,890 --> 00:00:41,210 We'll need them because the Bootstrap navigation bar 15 15 00:00:41,210 --> 00:00:45,280 will actually change depending on the size of our screen. 16 16 00:00:45,280 --> 00:00:47,543 And you'll know what I mean in just a moment. 17 17 00:00:48,740 --> 00:00:51,930 What we're going to do is start here 18 18 00:00:51,930 --> 00:00:54,340 on top of the flashed messages. 19 19 00:00:54,340 --> 00:00:57,670 And we're going to put in a nav component. 20 20 00:00:57,670 --> 00:01:00,530 A nav component is one of those semantic html 21 21 00:01:00,530 --> 00:01:03,930 components that tell accessibility tools 22 22 00:01:03,930 --> 00:01:06,093 that this is for navigation. 23 23 00:01:08,300 --> 00:01:11,160 When you use Bootstrap, there are a bunch of classes 24 24 00:01:11,160 --> 00:01:13,120 that you can use for this navigation 25 25 00:01:13,120 --> 00:01:15,850 so that it is styled as a navigation bar. 26 26 00:01:15,850 --> 00:01:18,460 The first one is navbar. 27 27 00:01:18,460 --> 00:01:21,290 There's more, navbar dash light, 28 28 00:01:21,290 --> 00:01:23,860 will give the text the correct colours 29 29 00:01:23,860 --> 00:01:27,480 for a light navigation bar as opposed to a dark one. 30 30 00:01:27,480 --> 00:01:31,240 bg-light, will give the navbar background colours 31 31 00:01:31,240 --> 00:01:34,323 for a light navigation bar as opposed to a dark one. 32 32 00:01:35,177 --> 00:01:39,210 We're also gonna add mb dash three for some margin 33 33 00:01:39,210 --> 00:01:41,750 between the navigation bar and components that come 34 34 00:01:41,750 --> 00:01:42,583 below it. 35 35 00:01:43,800 --> 00:01:46,810 There's also one more class that we're going to add 36 36 00:01:46,810 --> 00:01:51,770 and that's navbar dash expand dash lg. 37 37 00:01:51,770 --> 00:01:54,080 What this is going to do is it's going to show 38 38 00:01:54,080 --> 00:01:59,080 our full navigation bar when there is a large screen. 39 39 00:01:59,750 --> 00:02:02,840 In smaller screens it's actually going to collapse 40 40 00:02:02,840 --> 00:02:05,690 the navigation bar so that it doesn't take up 41 41 00:02:05,690 --> 00:02:06,763 too much space. 42 42 00:02:07,630 --> 00:02:10,020 This is also useful because if the navigation bar 43 43 00:02:10,020 --> 00:02:13,370 has a lot of links it'll make it quite long. 44 44 00:02:13,370 --> 00:02:16,330 And in small screens you may not be able to see 45 45 00:02:16,330 --> 00:02:18,160 all of the text very clearly 46 46 00:02:18,160 --> 00:02:21,253 so collapsing it can sometimes make more sense. 47 47 00:02:22,640 --> 00:02:25,300 Inside the navbar we're gonna put a couple of things. 48 48 00:02:25,300 --> 00:02:27,880 The first thing is we're going to put in something 49 49 00:02:27,880 --> 00:02:30,720 that Bootstrap calls a navbar brand. 50 50 00:02:30,720 --> 00:02:35,320 This is just a piece of text that is the most important 51 51 00:02:35,320 --> 00:02:37,580 title in the navigation. 52 52 00:02:37,580 --> 00:02:42,580 Here we can put in some sort of href, or when we click it 53 53 00:02:43,150 --> 00:02:44,860 it can take us somewhere. 54 54 00:02:44,860 --> 00:02:48,093 And the text is going to be Pricing Service. 55 55 00:02:49,640 --> 00:02:52,440 Let's run our app and see what this looks like just now. 56 56 00:02:53,700 --> 00:02:55,370 I'm gonna go over to Price Alerts 57 57 00:02:55,370 --> 00:02:59,360 refresh, and you can see we've got Pricing Service here. 58 58 00:02:59,360 --> 00:03:03,010 This is that brand when you click it, it takes you to 59 59 00:03:03,010 --> 00:03:05,770 the homepage of our application which doesn't exist yet. 60 60 00:03:05,770 --> 00:03:07,520 But we will be adding one later on. 61 61 00:03:09,460 --> 00:03:11,913 Then we're going to add a button. 62 62 00:03:12,750 --> 00:03:16,220 This button is what's going to allow our users 63 63 00:03:16,220 --> 00:03:18,820 to expand our navigation, 64 64 00:03:18,820 --> 00:03:20,930 should it be collapsed. 65 65 00:03:20,930 --> 00:03:23,463 So the class has to be navbar-toggler, 66 66 00:03:24,520 --> 00:03:26,430 the type has to be button 67 67 00:03:26,430 --> 00:03:28,840 and then we've got a couple more 68 68 00:03:28,840 --> 00:03:30,950 pieces of information that Bootstrap uses 69 69 00:03:30,950 --> 00:03:34,750 in order to identify this button as exactly the button 70 70 00:03:34,750 --> 00:03:38,710 that will expand the navigation bar when clicked. 71 71 00:03:38,710 --> 00:03:41,140 That's data dash toggle 72 72 00:03:41,140 --> 00:03:43,790 which should have the value of collapse. 73 73 00:03:43,790 --> 00:03:47,040 Data dot target, which should have the value 74 74 00:03:47,040 --> 00:03:51,240 of the element that it should expand. 75 75 00:03:51,240 --> 00:03:54,037 So that's gonna be navbarNavAltMarkup. 76 76 00:03:55,750 --> 00:03:58,430 Then we're gonna add some accessibility label 77 77 00:03:58,430 --> 00:03:59,980 to tell Bootstrap 78 78 00:03:59,980 --> 00:04:04,840 that this button controls the navigation bar. 79 79 00:04:04,840 --> 00:04:07,793 Aria dash controls navbarNavAltMarkup 80 80 00:04:10,250 --> 00:04:13,670 We're gonna tell it that this is initially not expanded, 81 81 00:04:13,670 --> 00:04:15,600 we're gonna give it a label, 82 82 00:04:15,600 --> 00:04:18,523 which is gonna be Toggle navigation. 83 83 00:04:19,380 --> 00:04:23,270 Inside this button we're going to put a icon. 84 84 00:04:23,270 --> 00:04:28,063 That's gonna be span class navbar-toggler-icon. 85 85 00:04:29,500 --> 00:04:31,080 Just like that. 86 86 00:04:31,080 --> 00:04:34,480 Finally, we do need a div that has the class 87 87 00:04:34,480 --> 00:04:35,980 of navbarNavAltMarkup 88 88 00:04:38,450 --> 00:04:42,380 and it's also gonna have a couple of classes collapse. 89 89 00:04:42,380 --> 00:04:44,680 Oh sorry, this should be the id not the class. 90 90 00:04:46,460 --> 00:04:49,773 Collapse and navbar dash collapse. 91 91 00:04:52,140 --> 00:04:55,300 All right, let's go back to our Google Chrome 92 92 00:04:55,300 --> 00:04:56,420 and see what this looks like. 93 93 00:04:56,420 --> 00:04:57,640 So I've just refreshed the page 94 94 00:04:57,640 --> 00:04:59,640 and you can see nothing's changed. 95 95 00:04:59,640 --> 00:05:02,450 But if this becomes small enough, 96 96 00:05:02,450 --> 00:05:07,000 this navbar toggler icon appears on the right 97 97 00:05:07,000 --> 00:05:08,560 and when you click it, 98 98 00:05:08,560 --> 00:05:10,920 the navbar will be expanded. 99 99 00:05:10,920 --> 00:05:12,960 But we don't have anything in the navbar at the moment 100 100 00:05:12,960 --> 00:05:14,410 so there's nothing to expand. 101 101 00:05:15,260 --> 00:05:19,770 So inside this navbarNavAltMarkup element 102 102 00:05:19,770 --> 00:05:21,570 we're gonna add another div 103 103 00:05:21,570 --> 00:05:23,850 with the class of navbar-nav. 104 104 00:05:23,850 --> 00:05:25,833 This is the actual navigation now. 105 105 00:05:27,300 --> 00:05:31,220 And inside this div we're gonna have a couple a tags. 106 106 00:05:31,220 --> 00:05:34,610 Each one is going to link away to one of our pages. 107 107 00:05:34,610 --> 00:05:39,500 And these have the class of nav-item and nav-link 108 108 00:05:39,500 --> 00:05:41,683 and these href away to someplace. 109 109 00:05:44,110 --> 00:05:48,210 We're gonna have our Stores and then we're also gonna have 110 110 00:05:48,210 --> 00:05:51,063 our Alerts, a Log in and a Sign up. 111 111 00:05:52,359 --> 00:05:55,359 (keyboard clicking) 112 112 00:05:57,400 --> 00:05:59,170 Let's save that, go back to Chrome 113 113 00:06:00,560 --> 00:06:03,020 and now when you click this, you can see that it expands 114 114 00:06:03,020 --> 00:06:04,660 and it shows our menu. 115 115 00:06:04,660 --> 00:06:06,410 But if we make this large enough 116 116 00:06:06,410 --> 00:06:08,680 then the menu just shows up there. 117 117 00:06:08,680 --> 00:06:10,920 Bootstrap does all of this for you 118 118 00:06:10,920 --> 00:06:12,620 but that's the reason for this slightly 119 119 00:06:12,620 --> 00:06:15,173 complicated structure for the navigation bar. 120 120 00:06:16,060 --> 00:06:17,680 And it's also the reason 121 121 00:06:17,680 --> 00:06:20,290 why we require all of this javascript. 122 122 00:06:20,290 --> 00:06:24,960 Remember, on the web, if you wanna move things about 123 123 00:06:24,960 --> 00:06:27,090 and change elements, 124 124 00:06:27,090 --> 00:06:29,120 after the page has loaded, 125 125 00:06:29,120 --> 00:06:30,620 you need javascript. 126 126 00:06:30,620 --> 00:06:32,340 CSS can do a couple of things as well 127 127 00:06:32,340 --> 00:06:33,803 but it's not as powerful. 128 128 00:06:36,000 --> 00:06:38,870 Now we need to href away into our pages, 129 129 00:06:38,870 --> 00:06:43,163 so we will do url for stores dot index. 130 130 00:06:44,680 --> 00:06:48,163 We will also do url for alerts dot index. 131 131 00:06:49,480 --> 00:06:51,653 Users dot login user. 132 132 00:06:55,010 --> 00:06:57,440 Users dot register user. 133 133 00:06:57,440 --> 00:07:00,260 Do make sure not to forget any brackets or curly braces, 134 134 00:07:00,260 --> 00:07:02,363 they'll be pretty necessary. 135 135 00:07:03,380 --> 00:07:05,210 We can refresh this and have a look 136 136 00:07:05,210 --> 00:07:07,480 and now it starts working. 137 137 00:07:07,480 --> 00:07:11,163 Including our log in requirement that we've already done. 138 138 00:07:12,520 --> 00:07:15,410 And there we go, we've got our navigation bar. 139 139 00:07:15,410 --> 00:07:18,020 It looks really complicated, I appreciate that. 140 140 00:07:18,020 --> 00:07:20,210 When I started using Bootstrap, I thought 141 141 00:07:20,210 --> 00:07:24,190 why do you need all of this, all of this stuff 142 142 00:07:25,030 --> 00:07:27,450 in the class and why is it so complicated? 143 143 00:07:27,450 --> 00:07:30,200 But everything here has a purpose. 144 144 00:07:30,200 --> 00:07:33,130 I would recommend you go through the Bootstrap documentation 145 145 00:07:33,130 --> 00:07:36,840 for navbars because they have a lot of examples and it can 146 146 00:07:36,840 --> 00:07:39,940 make it much clearer, exactly why everything 147 147 00:07:39,940 --> 00:07:41,510 is where it is. 148 148 00:07:41,510 --> 00:07:45,020 Also, Bootstrap has some quirky behaviours depending on 149 149 00:07:45,020 --> 00:07:48,027 which elements are here and which elements not there 150 150 00:07:48,027 --> 00:07:50,880 and so the elements can end up moving about 151 151 00:07:50,880 --> 00:07:53,420 depending on how you structure this navbar. 152 152 00:07:53,420 --> 00:07:55,250 So it's important to read through the docs 153 153 00:07:55,250 --> 00:07:59,583 if you have the chance because they are quite helpful. 154 154 00:08:01,120 --> 00:08:02,990 I'm also gonna do something else 155 155 00:08:02,990 --> 00:08:05,620 which is that I'm going to add a div 156 156 00:08:05,620 --> 00:08:08,134 around our content block. 157 157 00:08:08,134 --> 00:08:10,880 I'm gonna give it a class of mt dash three. 158 158 00:08:10,880 --> 00:08:13,420 Again that's a margin top 159 159 00:08:13,420 --> 00:08:14,840 and the reason I'm giving this 160 160 00:08:14,840 --> 00:08:16,340 is because 161 161 00:08:16,340 --> 00:08:17,970 sometimes when our alert shows up 162 162 00:08:17,970 --> 00:08:19,530 it can be a bit close to the content 163 163 00:08:19,530 --> 00:08:22,180 so we just wanna give it a bit more space to breathe. 164 164 00:08:23,970 --> 00:08:24,803 But that's it, 165 165 00:08:24,803 --> 00:08:28,600 this is the way we add a navbar using Bootstrap. 166 166 00:08:28,600 --> 00:08:29,500 I hope you've learned something 167 167 00:08:29,500 --> 00:08:30,670 and I hope you've enjoyed it. 168 168 00:08:30,670 --> 00:08:33,420 And I hope you'll find use for this in your own apps. 169 169 00:08:33,420 --> 00:08:36,120 Thanks for joining me, I'll see you in the next video.