1 00:00:00,630 --> 00:00:01,720 Hello and welcome. 2 00:00:01,740 --> 00:00:11,450 In this show we are going to use put strap to add some basic styling to our form. 3 00:00:12,360 --> 00:00:17,460 So let's go and get this see the end for us drop see. 4 00:00:17,520 --> 00:00:20,330 Basically see content delivery network. 5 00:00:20,610 --> 00:00:24,670 So are we going to get a link for bootstrap. 6 00:00:24,690 --> 00:00:30,640 So I'm just going to click on this one this is quick start bootstrap on that. 7 00:00:30,860 --> 00:00:32,470 And that will take of this. 8 00:00:32,510 --> 00:00:34,640 I'm just going to just copy this link here. 9 00:00:34,650 --> 00:00:37,610 This is complete here Seth. 10 00:00:37,770 --> 00:00:39,130 Copy that. 11 00:00:39,400 --> 00:00:41,600 Rightly copy. 12 00:00:41,690 --> 00:00:48,730 Are we going to open up our project on The View. 13 00:00:49,080 --> 00:00:54,290 We are going to look for the application template. 14 00:00:54,300 --> 00:00:57,070 So click on use. 15 00:00:57,750 --> 00:01:04,640 So the views there on The View there's an application top tier mobile ERP. 16 00:01:04,860 --> 00:01:05,710 This one here. 17 00:01:05,750 --> 00:01:13,290 So all these here's been pre populated by the res applications so we are going to that link have just 18 00:01:13,290 --> 00:01:15,210 copied a quote from the see the. 19 00:01:15,450 --> 00:01:20,200 I'm going to add that in this area here. 20 00:01:20,460 --> 00:01:30,600 So what I'm going to do is just use the tag here and then copy this opta that it is on the underneath 21 00:01:30,600 --> 00:01:34,790 here just tap down and paste. 22 00:01:35,130 --> 00:01:36,410 I don't need this bit. 23 00:01:36,410 --> 00:01:39,220 I'm just going to get rid of all this. 24 00:01:39,570 --> 00:01:42,860 And on the other hand a bit scary that. 25 00:01:44,310 --> 00:01:45,080 Okay. 26 00:01:45,250 --> 00:01:49,780 And while I go back to the CBN link and just grab that link again 27 00:01:52,980 --> 00:01:57,390 copy for this to work on your application. 28 00:01:57,390 --> 00:02:03,990 You must be connected to the Internet not eCard referenced the bootstrap content delivery network is 29 00:02:03,990 --> 00:02:09,030 gaire allows you to access this resources but you must be online in order to access it. 30 00:02:09,030 --> 00:02:14,340 So if you haven't got internet access then you wondering why the styling doesn't work because you're 31 00:02:14,340 --> 00:02:16,130 not connected to DC. 32 00:02:16,140 --> 00:02:21,950 So that's one of the disadvantages of you only see the Mosby connected to the Internet. 33 00:02:22,020 --> 00:02:28,080 The plus side of it is that he done it install anything on your computer and you've got access to the 34 00:02:28,080 --> 00:02:31,050 latest updates. 35 00:02:31,050 --> 00:02:33,220 So is macleay Copy. 36 00:02:33,840 --> 00:02:37,650 Go back to my template and just copy that. 37 00:02:37,680 --> 00:02:38,910 Copy that there. 38 00:02:39,150 --> 00:02:49,200 Just put a quote in there single quotes an all school single quote at the end of the theosis and just 39 00:02:49,200 --> 00:02:51,210 bring that last bit. 40 00:02:51,330 --> 00:02:53,200 So that's it. 41 00:02:54,300 --> 00:02:56,130 Let's bring this in a bit. 42 00:02:56,170 --> 00:03:03,200 So be a gap there and then see that save all. 43 00:03:03,300 --> 00:03:07,570 Now let's open up ah block refresh. 44 00:03:07,580 --> 00:03:12,820 If you see some changes to this good refresh you can see changes. 45 00:03:12,910 --> 00:03:21,630 Okay will also change some so you can notice this is a bit too close to the edge so organo amend the 46 00:03:21,660 --> 00:03:27,570 theosis to refer to do some changes so moved that they were a bit from the edge. 47 00:03:27,790 --> 00:03:34,950 But for now we know we've got access to bootstrap because we can see reflected in the langhorn peak 48 00:03:34,950 --> 00:03:35,970 here. 49 00:03:35,970 --> 00:03:44,870 Also want to create some basic navigation so to do that I'm going to go to the get bootstrap website. 50 00:03:45,390 --> 00:03:49,750 So if it's ipn GET PULLED strap Dr. Khan in your search engine. 51 00:03:49,840 --> 00:03:58,950 You take it to this page and click on it get in started option here and just scroll down to the templates. 52 00:03:59,300 --> 00:04:03,220 I just going to look for a starter template. 53 00:04:03,220 --> 00:04:07,310 All right so going to use this one click on this one where it says start a template. 54 00:04:07,320 --> 00:04:08,500 Click on that. 55 00:04:08,730 --> 00:04:10,150 You can't see the content. 56 00:04:10,260 --> 00:04:16,100 So to suit the content you either click what you do quantrell and you. 57 00:04:16,590 --> 00:04:20,150 Okay and that is show he sold just one copy. 58 00:04:20,490 --> 00:04:22,600 The navigation from here. 59 00:04:22,600 --> 00:04:30,960 Some one copy from here all the way to their way of the navigation so make sure you get all that copied 60 00:04:31,850 --> 00:04:36,680 and up brightly brightly and call copy. 61 00:04:36,790 --> 00:04:43,590 So open up your template where you've got the style sheet and one place that will just copy the navigation 62 00:04:43,670 --> 00:04:45,590 and pasted in here. 63 00:04:45,650 --> 00:04:51,950 I am just going to make a few edits so that it can work with our application. 64 00:04:51,950 --> 00:04:57,060 All right person will it us get rid of this now Bart fix up we'll on that. 65 00:04:57,060 --> 00:05:03,110 Get rid of that and we gain changes to this inversed said darker colour. 66 00:05:03,320 --> 00:05:06,400 I'm going to change that to default. 67 00:05:09,400 --> 00:05:11,840 You can always play around with your values. 68 00:05:11,920 --> 00:05:12,450 Okay. 69 00:05:12,530 --> 00:05:18,280 There are good values and see what works for you so you can live the inversed one if you want that gives 70 00:05:18,280 --> 00:05:20,080 you a darker colour. 71 00:05:20,380 --> 00:05:24,510 And then the default is a lighter colour. 72 00:05:25,210 --> 00:05:32,210 And then Wes got the projet name here I'm just going to change that to the name of my blog. 73 00:05:32,590 --> 00:05:33,820 I'll see two 74 00:05:36,420 --> 00:05:41,610 blogs if we scroll down here and just have a look. 75 00:05:41,620 --> 00:05:42,090 Okay. 76 00:05:42,100 --> 00:05:46,720 KING get rid of this class here for Lily. 77 00:05:46,720 --> 00:05:55,040 We actually can't get rid of all the earth and quadling so we can use a link help instead of all this 78 00:05:55,090 --> 00:05:56,250 here Reff. 79 00:05:56,300 --> 00:06:01,600 So let's get rid of all that and we'll use a link help instead. 80 00:06:01,980 --> 00:06:04,720 So get rid of all the links I've got rid of the other link. 81 00:06:04,720 --> 00:06:10,620 We should only have the one yes one going to do I'm going to add a link Harper. 82 00:06:10,930 --> 00:06:17,720 So to do that each has to tack that to percent you say that too. 83 00:06:17,720 --> 00:06:24,180 He wants to set that two course to link on the score. 84 00:06:24,460 --> 00:06:29,280 Thus a link helper so when you link it to somewhere. 85 00:06:29,310 --> 00:06:38,380 Got to specify where we're linking it to a link to the index page and I'm going to call that home. 86 00:06:38,710 --> 00:06:52,970 So I wanted to display home on the navigation and I want to go to home on this call path. 87 00:06:52,990 --> 00:06:59,870 So that's the link-up not this has not been created yet so this path to the link will not work. 88 00:06:59,870 --> 00:07:03,190 I'll need to add that to the rolls. 89 00:07:03,580 --> 00:07:11,740 I want to add a link to the right hand side of the navigation so to do that I'm just going to copy this 90 00:07:11,740 --> 00:07:20,420 here and just rename it modify it copy paste and also just change it. 91 00:07:20,550 --> 00:07:33,050 Some want to add another class here and then just tab here and just say now bar dash writes referendum 92 00:07:33,150 --> 00:07:34,080 in that bar. 93 00:07:34,120 --> 00:07:35,250 That's on the right. 94 00:07:35,590 --> 00:07:43,180 And what I want this link to refers to is to create pull some going to get rid of that and those taiping 95 00:07:43,240 --> 00:07:45,770 Create. 96 00:07:45,880 --> 00:07:52,780 So when you click on the link it will take you to create a new post and I need to direct it to a new 97 00:07:52,780 --> 00:07:57,130 part so that the path I want direct to it will be new. 98 00:07:58,260 --> 00:08:06,670 On the score post on this core PAFF for this will be a part. 99 00:08:06,680 --> 00:08:10,560 It would be redirected to so was he done that. 100 00:08:10,560 --> 00:08:13,800 Just click on File Save all. 101 00:08:13,830 --> 00:08:18,140 Now we need to make this path work we need to add it to our rout. 102 00:08:18,360 --> 00:08:21,420 So let's go to our out for that. 103 00:08:21,420 --> 00:08:22,630 So we got here. 104 00:08:22,630 --> 00:08:24,740 His inside are none. 105 00:08:24,740 --> 00:08:26,340 Occasion. 106 00:08:26,580 --> 00:08:30,220 Scroll down. 107 00:08:30,520 --> 00:08:32,350 Okay. 108 00:08:33,240 --> 00:08:42,890 Too many tabs open so inside the config directory we click on the routs are a B. 109 00:08:43,170 --> 00:08:49,070 So we need to do we need to amend the raut here to accomodate that entry. 110 00:08:49,200 --> 00:08:55,870 So what we need to do is come to the index or key ways. 111 00:08:56,060 --> 00:09:10,740 The route we do come up and then type in as column space single quotes form by doing it this way. 112 00:09:10,740 --> 00:09:13,690 It will recognize the path. 113 00:09:14,010 --> 00:09:18,170 Now this should work quick save all. 114 00:09:18,460 --> 00:09:23,350 I just grab my site refresh. 115 00:09:23,550 --> 00:09:32,140 We should have a link fully everything's wattana a key so you can see here we now have a link to create 116 00:09:32,150 --> 00:09:33,730 posts of quick on this link. 117 00:09:33,730 --> 00:09:39,920 It should take me to the cripple's excellent click that that takes me back to the. 118 00:09:40,530 --> 00:09:47,480 So if you notice this is too close to the edge to the top side going to wrap things around. 119 00:09:47,490 --> 00:09:50,520 It did some someone open the template here. 120 00:09:50,520 --> 00:09:57,460 Application to his team a B and when to come to the field here was quite a yield. 121 00:09:57,480 --> 00:10:05,380 I'm just going to wrap that in a div So I'm going to come here and create a deal. 122 00:10:05,520 --> 00:10:10,230 T I ve a div class. 123 00:10:11,190 --> 00:10:12,320 I said that to you. 124 00:10:12,320 --> 00:10:16,420 Course to contain. 125 00:10:19,950 --> 00:10:20,600 Okay. 126 00:10:20,750 --> 00:10:26,950 Just bringing that close a bit on our close today. 127 00:10:27,120 --> 00:10:30,920 And come here and close the deal. 128 00:10:30,940 --> 00:10:36,740 So the Phi refresh now you should see the difference. 129 00:10:39,250 --> 00:10:41,500 You can see that it's moved away from the edge. 130 00:10:41,500 --> 00:10:48,480 Now another thing I want to do quickly is make the form look a bit decent so factually Creole post at 131 00:10:48,480 --> 00:10:52,170 the moment the form doesn't look too attractive. 132 00:10:52,170 --> 00:10:57,680 So I just want to add a bit of flavour to it to make it look more presentable. 133 00:10:57,880 --> 00:11:05,770 So let's go to the views and then the post and then we'll go to dinner you Hugh. 134 00:11:05,770 --> 00:11:13,960 So this is where we have some bootstrap classes now will make one more presentable. 135 00:11:13,960 --> 00:11:21,550 So to add a bootstrap class well we need to do we need to make some modification to the form. 136 00:11:21,550 --> 00:11:29,650 So what we need to do here we just need to add a combat and then put some curly braces in between the 137 00:11:29,650 --> 00:11:30,460 collar braces. 138 00:11:30,460 --> 00:11:44,150 We're going to add a strap class and say class and we're going to send that to you course to form that 139 00:11:44,530 --> 00:11:45,790 control. 140 00:11:46,330 --> 00:11:53,050 So this is a bootstrap class that we're going to do the same for the body as well. 141 00:11:53,190 --> 00:12:07,060 When do come out here and then put curly braces and on low class and we go out and we want that to direct 142 00:12:07,060 --> 00:12:09,020 too. 143 00:12:09,040 --> 00:12:11,380 So I've completed the other classes. 144 00:12:11,560 --> 00:12:16,460 So here where I have added a class and make sure the parran THIS IS YOUR add. 145 00:12:16,660 --> 00:12:18,490 Don't leave any gaps between the band. 146 00:12:18,490 --> 00:12:20,030 This is if not it will not work. 147 00:12:20,040 --> 00:12:23,210 So make sure there's no gap between the apprentices. 148 00:12:23,310 --> 00:12:24,840 And this is here. 149 00:12:25,060 --> 00:12:30,850 And that includes impound says have done the same here with the body thus the opaline. 150 00:12:30,940 --> 00:12:35,050 That's the closing with the submit button also. 151 00:12:35,440 --> 00:12:37,900 That's the opening parenthesis closing. 152 00:12:38,410 --> 00:12:42,950 So make sure you wrap it round because we add in a class. 153 00:12:43,030 --> 00:12:51,970 So for this meet about Bonton space button dashed primary and I've used the same classes for put the 154 00:12:52,000 --> 00:12:56,680 title on the body so that should be it. 155 00:12:56,700 --> 00:13:01,910 So fine just click fast save or my form should refresh. 156 00:13:02,730 --> 00:13:03,210 Yeah. 157 00:13:03,540 --> 00:13:05,680 So the form should look like this. 158 00:13:05,730 --> 00:13:06,440 It looks like it. 159 00:13:06,460 --> 00:13:11,470 That means you have successfully implemented the boot strap classes. 160 00:13:11,830 --> 00:13:13,730 So that's it for this lecture. 161 00:13:13,750 --> 00:13:15,870 Apologies is taking so long. 162 00:13:15,970 --> 00:13:18,960 I just wanted to get everything in to this lecture. 163 00:13:19,150 --> 00:13:20,220 Thanks for watching.