1 00:00:00,080 --> 00:00:07,110 You guys in this tutorial we're looking at Holy global customizing our views and our applications is 2 00:00:07,110 --> 00:00:13,230 statics to you look more like or application as opposed to the auto generated application rental space 3 00:00:13,240 --> 00:00:14,180 speed up net. 4 00:00:14,310 --> 00:00:21,190 We can redesign or landing page scene on the screen here and we'll also look at boats. 5 00:00:21,300 --> 00:00:24,620 What bootstrap has to offer to expedite this process. 6 00:00:24,670 --> 00:00:31,650 Before I move on I need to remind you guys that we're using Bootstrap 3 defaults bootstrap that came 7 00:00:31,650 --> 00:00:34,530 with our project is bootstrap 3. 8 00:00:34,560 --> 00:00:36,110 We can upgraded to 4. 9 00:00:36,150 --> 00:00:43,320 But if we do that and we run the risk of having to redo a lot of the work so I recommend that we continue 10 00:00:43,320 --> 00:00:54,710 using Bootstrap or bootstrap documentation we can go to their website which is get bootstrap dot com 11 00:00:55,350 --> 00:00:58,980 or you can just look for bootstrap 3 and Google as suggested 12 00:01:02,990 --> 00:01:10,530 and here will be given all of the documentation behind all of the goodies the bootstrap has to offer. 13 00:01:10,530 --> 00:01:16,290 You don't have to start from scratch but I just take you through a quick tour to help you appreciate 14 00:01:16,290 --> 00:01:16,410 it. 15 00:01:16,410 --> 00:01:17,880 We'll start brings to the table 16 00:01:21,330 --> 00:01:23,900 now bootstrap is. 17 00:01:24,040 --> 00:01:33,570 This framework in a nutshell the developers observed web development patterns over years and came up 18 00:01:33,570 --> 00:01:44,070 with a bunch of classes or CSA stars that they think people need further to that they had a mobile first 19 00:01:44,610 --> 00:01:45,270 agenda. 20 00:01:45,450 --> 00:01:53,070 So using Bootstrap helps you to accomplish a mobile first and clean design as they would have packed 21 00:01:53,070 --> 00:01:57,050 it up with commonly used assess styling. 22 00:01:57,270 --> 00:01:59,340 And I keep on seeing this but let me. 23 00:01:59,340 --> 00:02:06,420 For instance the cat tables people always long tables people always want their tables to not look quite 24 00:02:06,420 --> 00:02:13,560 like tables so bootstrap gave us a table to us all we have to do when creating a table is the class 25 00:02:13,640 --> 00:02:20,400 it was table to or table code and then it starts looking something like this. 26 00:02:20,500 --> 00:02:28,710 And if we recall that's how our student and our courses tables look out of the box. 27 00:02:28,960 --> 00:02:32,550 You can also add strength to properties you can make it ordered. 28 00:02:32,680 --> 00:02:38,530 But the fact is that bootstrap is making this very easy because you don't have the right of see to accomplish 29 00:02:38,530 --> 00:02:41,420 all of these the add on classes. 30 00:02:41,440 --> 00:02:43,130 Let's take a look at buttons. 31 00:02:43,180 --> 00:02:46,550 Last time we looked at changing whole buttons look. 32 00:02:46,620 --> 00:02:50,150 So we saw that one skin was beaten and then eaten. 33 00:02:50,150 --> 00:02:51,450 BASH something. 34 00:02:51,880 --> 00:02:56,620 So you have each end dash defaults to get this equal looking woman. 35 00:02:56,670 --> 00:02:58,240 Have you gender primary. 36 00:02:58,280 --> 00:03:00,360 It's a blue wooden success. 37 00:03:00,360 --> 00:03:02,300 These are green button and everything. 38 00:03:02,320 --> 00:03:06,720 So it's all clearly outlined right here on their website. 39 00:03:06,720 --> 00:03:14,380 They give you the example and they give you the code for this example and you need only translate that 40 00:03:14,440 --> 00:03:20,500 into your need and your specification so that you can go ahead and start using it. 41 00:03:20,550 --> 00:03:24,730 This support for sponsored images because I am the best responsive. 42 00:03:24,730 --> 00:03:31,650 That means that your image will start to resize and flex according to your screen size. 43 00:03:31,690 --> 00:03:36,010 All right so you can peruse. 44 00:03:36,550 --> 00:03:43,270 I wouldn't recommend that you try committing it all to memory because it can be overwhelming. 45 00:03:43,420 --> 00:03:50,620 But as you have a need if you want something to be red or blue or something you can come on over you 46 00:03:50,620 --> 00:03:57,790 can go through the C assist category or you can go to the components category which has even more things 47 00:03:58,090 --> 00:04:01,380 you have space for other Earths. 48 00:04:01,540 --> 00:04:05,580 You have your danger alert versus your success alert. 49 00:04:05,590 --> 00:04:17,480 You have labels that you can add to text in the javascript section you have stuff for more details if 50 00:04:17,480 --> 00:04:20,710 you want to pop up it looks attractive. 51 00:04:20,870 --> 00:04:27,950 You have four tabs if you want tub experience on a browser and they give you the javascript and if you 52 00:04:27,950 --> 00:04:33,110 recall part of the scripts that would have been given to you with the project include a bootstrap GSA 53 00:04:33,170 --> 00:04:41,810 you don't have any additional work to do but to incorporate this code with years and utilize it to your 54 00:04:42,350 --> 00:04:42,920 benefit. 55 00:04:43,040 --> 00:04:48,870 So I advise you to look through see what you need and use this on the bottom. 56 00:04:49,400 --> 00:04:54,830 So for this section we're going to actually re style our landing page. 57 00:04:54,830 --> 00:05:03,380 We're going to truly add a few images and bootstrap slider to our homepage section right here. 58 00:05:03,380 --> 00:05:08,270 So we're going to report this entire area section and then we're going to replace it with a bootstrap 59 00:05:08,310 --> 00:05:09,460 slider. 60 00:05:09,530 --> 00:05:14,270 I went ahead and got some pictures from fix data. 61 00:05:14,300 --> 00:05:21,590 That's my go to site for free high quality pictures and I've selected three pictures that I want to 62 00:05:21,590 --> 00:05:24,170 use and we'll use this one back to school. 63 00:05:25,160 --> 00:05:34,820 This one never stop learning and this one so speak to me you need only go there click free download 64 00:05:35,060 --> 00:05:42,320 download and then it will ask you to sign up and just verify that you're not a robot. 65 00:05:42,540 --> 00:05:47,910 And once you click download it will initiate the download for you somewhere to go ahead and do that 66 00:05:47,910 --> 00:05:49,190 with the other two. 67 00:05:49,330 --> 00:05:52,930 Now having done that I need to get them all into the project. 68 00:05:53,020 --> 00:05:59,950 I would have downloaded them to my desktop and no I need to get them into my project for further use 69 00:05:59,950 --> 00:06:01,630 in my web site. 70 00:06:01,660 --> 00:06:08,320 I recommend you create a folder and you put all your images in that folder as you can see they give 71 00:06:08,320 --> 00:06:14,910 you a folder structure for all types of files one file type that they may not have cater for as images. 72 00:06:14,920 --> 00:06:21,100 So I'll just go ahead and content I think content is the best place to put images based on what's in 73 00:06:21,100 --> 00:06:27,850 there and I see content add and new folder quality images 74 00:06:30,780 --> 00:06:37,770 and then I can right click images click Add go to existing item. 75 00:06:37,770 --> 00:06:43,800 So if the item exists meaning you're not going to use Visual Studio to create the item but it's something 76 00:06:43,800 --> 00:06:50,010 that's already out there like in this case an image file and you want to bring it over into your project 77 00:06:50,290 --> 00:06:55,240 and you click existing item and then you find it on your piece. 78 00:06:55,260 --> 00:06:58,420 So I put mine on my test desk top 79 00:07:02,660 --> 00:07:11,020 so I'll scroll through and find my image and I found one here scroll and find the other two and I changed 80 00:07:11,020 --> 00:07:13,730 my mind was one of the images. 81 00:07:15,040 --> 00:07:17,920 And there they are added to my project. 82 00:07:17,920 --> 00:07:22,630 You can tow the plus sign that they're now being incorporated into the project. 83 00:07:22,630 --> 00:07:31,930 And when you hover over each one you'll see a mini preview of what this image is best practice or for 84 00:07:31,930 --> 00:07:32,770 ease of use. 85 00:07:32,770 --> 00:07:37,540 You wouldn't use this long auto generated name calling from the Web site. 86 00:07:37,570 --> 00:07:41,810 Now you want your image to be easy to use. 87 00:07:41,830 --> 00:07:47,790 So you want to rename it to something that's more appropriate for the purpose that you have it wanted 88 00:07:47,800 --> 00:07:59,060 for sliders so call this one slide dash one and the extension is that CPG and I rename Delta to accordingly. 89 00:07:59,210 --> 00:08:03,800 I know we have all three images that we need or a slide show. 90 00:08:04,880 --> 00:08:11,630 So like I said earlier the objective now is to change that gray area which would have been depicted 91 00:08:11,630 --> 00:08:13,090 by this JumboTron. 92 00:08:13,100 --> 00:08:20,770 Div and we want to put in bootstrap slider in that section. 93 00:08:20,850 --> 00:08:27,420 We can just head over to the bootstrap website to see the documentation and get guidance as to how we 94 00:08:27,660 --> 00:08:29,940 do that. 95 00:08:29,940 --> 00:08:36,530 So go to the javascript section and look for carousel. 96 00:08:36,810 --> 00:08:39,360 That's what bootstrap calls its carousel. 97 00:08:40,050 --> 00:08:41,510 And then they give you an example. 98 00:08:41,520 --> 00:08:43,800 First slide second slide. 99 00:08:43,830 --> 00:08:51,140 Third slide as you can see the clicking works and then as you scroll down you'll see that they give 100 00:08:51,140 --> 00:08:56,560 you mount enough code that is required to have something looking like this. 101 00:08:56,560 --> 00:09:01,700 What they didn't give you are all the images but you just need to look at this. 102 00:09:01,700 --> 00:09:02,720 Appreciate it. 103 00:09:02,900 --> 00:09:06,270 And then modify it for your own purpose. 104 00:09:06,320 --> 00:09:11,940 So I'm going to just copy out all of this section of code. 105 00:09:12,310 --> 00:09:15,080 Go back to your project. 106 00:09:15,100 --> 00:09:21,350 Paste it here and then it may look a bit overwhelming but if you take the time out to appreciate it 107 00:09:21,380 --> 00:09:24,530 if you know HMO you see exactly what's going on here. 108 00:09:24,920 --> 00:09:34,430 But before anything else let us take a preview of what the result is. 109 00:09:36,320 --> 00:09:39,860 So this is a preview of what we get. 110 00:09:40,040 --> 00:09:44,260 As you can see it is much less attractive than what we had before. 111 00:09:44,260 --> 00:09:46,580 And we still have a bit of work to do. 112 00:09:46,610 --> 00:09:52,910 What we can see that we have our arrows and actually clicking the IRA's actually animates something 113 00:09:53,030 --> 00:09:54,470 that is visible. 114 00:09:54,470 --> 00:10:00,710 So let's go ahead and go back to visual studio and see what additional changes need to happen to make 115 00:10:00,710 --> 00:10:04,030 our castle look presentable. 116 00:10:04,250 --> 00:10:13,490 So back in visual studio looking at the code you will see a break home for each section that should 117 00:10:13,490 --> 00:10:14,980 produce an image. 118 00:10:15,670 --> 00:10:15,940 All right. 119 00:10:16,370 --> 00:10:26,120 So firstly you'll see that you have this ordered list which has allies and it has some data targets 120 00:10:27,330 --> 00:10:30,300 and then you'll see that it has data that slide two. 121 00:10:30,350 --> 00:10:31,820 One two three. 122 00:10:31,850 --> 00:10:40,850 This one is tagged as active so zero will always be the default one but then for the actual slides you 123 00:10:40,850 --> 00:10:44,690 see that each slide appears in its own div. 124 00:10:45,050 --> 00:10:49,860 That's item number one and this item number two. 125 00:10:49,860 --> 00:10:51,580 And we know we have three items. 126 00:10:51,830 --> 00:10:58,550 So we just need to build on all of this some code according to what we need. 127 00:10:58,880 --> 00:11:04,850 And then down here you see that they give us a section for the controls which are two tags using some 128 00:11:04,850 --> 00:11:09,260 bootstrap classes here to looked like arrows. 129 00:11:09,530 --> 00:11:13,310 And these are the arrows that go to the side for next and previous. 130 00:11:14,420 --> 00:11:17,420 So the first thing I'm going to do is 131 00:11:19,690 --> 00:11:24,340 modify the code for our first slider. 132 00:11:24,460 --> 00:11:32,710 So image I'm going to set the source change it from ellipses and I can just his countries space to get 133 00:11:33,070 --> 00:11:35,780 that intelligence hidden thing. 134 00:11:35,890 --> 00:11:39,100 I remember my images folder inside of content. 135 00:11:39,250 --> 00:11:48,790 And then my images inside the images folder and I see a slide one for the alternative text code. 136 00:11:49,630 --> 00:12:04,290 We can for the caption I can use a spun tag and see we learn for the second section as to a very similar 137 00:12:04,350 --> 00:12:10,140 modification of genes as I see the slide to 138 00:12:14,960 --> 00:12:23,780 change that to never stop Mark Q I'm just putting in some random captions and alternative texts you'd 139 00:12:24,320 --> 00:12:32,110 fill in years more appropriately when you have your chance to do so and then we have three sliders. 140 00:12:32,130 --> 00:12:41,810 I'm just going to duplicate this one move this this and change this to Slide 3. 141 00:12:43,140 --> 00:12:49,860 I will come back and change these to more appropriate captions and alternative text what I just want 142 00:12:49,860 --> 00:12:58,690 to show you guys how you go about putting in a bootstrap slider and we don't have to modify much else. 143 00:13:01,170 --> 00:13:03,230 And then we can preview that. 144 00:13:08,080 --> 00:13:09,370 And here we go. 145 00:13:10,450 --> 00:13:20,410 So now we have a slider in the space where we had that generated text a few things that we can observe 146 00:13:20,470 --> 00:13:24,430 would be the varying heights for each image. 147 00:13:24,970 --> 00:13:30,430 So that causes the carousel to push and pull the content on the page. 148 00:13:30,430 --> 00:13:39,550 So you'd want to be mindful of that to ensure that your images are of the same dimensions and so your 149 00:13:39,550 --> 00:13:43,770 content will look fairly consistent with each slider. 150 00:13:43,780 --> 00:13:52,350 So that is a preview of how you go both incorporating bootstrap component into your website. 151 00:13:52,420 --> 00:13:57,920 You do so at will and as you need to you may not use a curve so that's up to you. 152 00:13:58,010 --> 00:14:02,160 Well you have quite a few options available to you. 153 00:14:02,190 --> 00:14:10,180 Can a tool tips you get a touch and drop tones and all of this comes out of the box with bootstrap and 154 00:14:10,180 --> 00:14:13,450 is that it comes out of the box with bootstrap. 155 00:14:13,480 --> 00:14:21,190 So unless you're going to find another framework that you may prefer as you have a few out there you 156 00:14:21,220 --> 00:14:27,870 can invest some time in experimenting with bootstrap and seeing what it has to offer. 157 00:14:27,890 --> 00:14:28,300 No. 158 00:14:28,300 --> 00:14:36,910 Another thing that we want to accomplish is to modify this section to only have two options one for 159 00:14:36,910 --> 00:14:39,640 courses and one for students. 160 00:14:40,150 --> 00:14:42,610 So as we can see we have three columns. 161 00:14:42,610 --> 00:14:51,490 And if we look in our code we will see that we are using Bootstrap to divide or rule. 162 00:14:51,490 --> 00:14:58,810 So bootstrap would you view construct call a role similar to a table and as you know each table has 163 00:14:58,810 --> 00:14:59,980 columns. 164 00:14:59,980 --> 00:15:08,410 So bootstrap has a grid system that once you have a rule you can divide it into up to twelve columns 165 00:15:08,860 --> 00:15:14,500 and then further and as you can specify how many columns should be present or how big a column should 166 00:15:14,500 --> 00:15:17,680 be based on the size of the screen. 167 00:15:17,680 --> 00:15:25,130 So the typical screen on any laptop or computer would be in the end the region. 168 00:15:25,150 --> 00:15:33,420 So they're giving you three columns once you're viewing it on this one two and three. 169 00:15:33,430 --> 00:15:36,550 Now we only want to so on when to remove the third one 170 00:15:39,310 --> 00:15:45,850 ones quantify this one bearing in mind that we have up to 12 columns that we can use some winds to change 171 00:15:45,850 --> 00:15:51,230 this one to six to six. 172 00:15:51,280 --> 00:15:56,770 And once again I know that I can do this because it was already outlined in the documentation so you 173 00:15:56,770 --> 00:16:02,200 can always look to the documentation and read up on the grid system to have a better understanding of 174 00:16:02,440 --> 00:16:10,510 what is happening here and then I go boats changing the title or the caption that is being used here. 175 00:16:10,510 --> 00:16:17,540 So forces and students 176 00:16:20,160 --> 00:16:25,850 also change out this paragraph I really don't need to be advertising it speed on it on my school management 177 00:16:25,850 --> 00:16:26,910 system site. 178 00:16:27,320 --> 00:16:30,680 So I will write a nice paragraph 179 00:16:38,100 --> 00:16:49,490 and then I don't need to be linking to a tariff all the way outside of my purview someone to change 180 00:16:49,520 --> 00:17:02,660 this to a button that welding to my courses H so I can use my action links some words that I sign and 181 00:17:02,660 --> 00:17:06,830 call for my issue of helper maps and links. 182 00:17:08,820 --> 00:17:10,940 And then I want to print the text. 183 00:17:10,950 --> 00:17:17,670 Learn more I want this action link to go to index 184 00:17:21,310 --> 00:17:25,880 and this index would be in my horses. 185 00:17:26,050 --> 00:17:31,410 Controller and then I'm going to repeat that point the student section. 186 00:17:31,410 --> 00:17:38,220 All right so I made the adjustments I added the students caption a paragraph for that section and action 187 00:17:38,270 --> 00:17:42,390 link and then we can go ahead and preview this. 188 00:17:42,480 --> 00:17:48,630 So we see here that our changes have been put into effect and we can see that we have an even split 189 00:17:48,750 --> 00:17:49,470 between the two. 190 00:17:49,470 --> 00:17:54,300 So remember I was saying we that twelve of the twelve Spears's twelve columns that we're able to use. 191 00:17:54,360 --> 00:18:01,880 And I said I wanted either one to be six of those twelve so we of course is taking up up to six. 192 00:18:01,910 --> 00:18:03,760 We'll get students thinking Oh does it. 193 00:18:03,760 --> 00:18:08,580 So that's a nice easy way to get things side by side in traditional esteem. 194 00:18:08,640 --> 00:18:15,150 You'd have to use leave and then you float to the left and then you transit margins in between to make 195 00:18:15,150 --> 00:18:18,880 sure that they're you know a certain distance from each other bootstrap. 196 00:18:18,930 --> 00:18:23,300 This gives you a grid system and that's a put them side by side. 197 00:18:23,310 --> 00:18:26,250 Just tell me how big you want them kind of the rest. 198 00:18:26,280 --> 00:18:32,640 And this varying height for the picture is kind of annoying so I'm not going to fix it. 199 00:18:32,640 --> 00:18:37,470 I'm going to leave it to you to modify and find images that are consistent. 200 00:18:37,480 --> 00:18:41,340 Now one other thing that we want to do is get our buttons back. 201 00:18:41,400 --> 00:18:45,660 We have links but we want them to look like the ones that were there originally. 202 00:18:46,080 --> 00:18:54,150 So I'm going to just go back on the project and we're going to add those subclasses though from the 203 00:18:54,150 --> 00:18:59,040 earlier examples you remember that we initialize are very generic objects. 204 00:18:59,050 --> 00:19:07,770 And in this generic Object we specify that we want attribute class and then we had our values so or 205 00:19:07,770 --> 00:19:15,990 values would be according to bootstraps documentation beaten and beaten dash whichever class you want. 206 00:19:16,020 --> 00:19:24,170 I want a blue one somewhere to see a primary and I'm going to do the same thing. 207 00:19:24,280 --> 00:19:32,580 Just copy that or the students plural with I want to make this one the lighter shades info just so you 208 00:19:32,580 --> 00:19:37,960 have a diversity so we can refresh and see what that looks like. 209 00:19:38,300 --> 00:19:39,100 And there we go. 210 00:19:39,220 --> 00:19:41,340 So we see that our booster code works. 211 00:19:41,340 --> 00:19:47,440 We have older and more looking like a button and or students looking like a button also. 212 00:19:47,590 --> 00:19:55,050 And you know that there were both anchor tags so bootstrap allows you to style typical anchor tug and 213 00:19:55,060 --> 00:19:56,920 make it look like a button. 214 00:19:56,920 --> 00:20:02,410 So go ahead and experiment with bootstrap experiment with making your website a little cleaner than 215 00:20:02,680 --> 00:20:09,850 mine those at the very least and adding styles removing sort of the default cord and making its more 216 00:20:09,880 --> 00:20:10,660 personalized.