1 00:00:01,830 --> 00:00:06,210 Let's start using bootstrap, and there are two ways we can use this toolkit. 2 00:00:06,930 --> 00:00:09,630 One is to download. 3 00:00:11,510 --> 00:00:15,990 And you can just click on the first link, it says, compiled in JavaScript. 4 00:00:16,100 --> 00:00:18,710 Well, let's just see what gets downloaded. 5 00:00:19,340 --> 00:00:25,910 So if I open this, you'll see here that I have a successful and JavaScript file. 6 00:00:26,060 --> 00:00:27,380 You see there's a bunch of them. 7 00:00:28,470 --> 00:00:34,170 You don't have to worry too much about it is just different access files that are used together based 8 00:00:34,170 --> 00:00:39,870 on if you're using the bootstrap grid or the bootstrap success and you'll see some of them have the 9 00:00:39,870 --> 00:00:44,240 bootstrap Dortmunder access and that means that there are Minify. 10 00:00:44,250 --> 00:00:50,970 So if I open this, you'll see that everything is on one line and minified right now. 11 00:00:50,970 --> 00:00:54,750 All we need to do is just add this to our project. 12 00:00:54,750 --> 00:01:00,720 But I want to show you a better way of doing it, especially when we're getting started, and that is 13 00:01:01,080 --> 00:01:03,330 we can use something called a CDN. 14 00:01:03,750 --> 00:01:05,250 So what is a CDN? 15 00:01:05,250 --> 00:01:08,190 A CDN is a content delivery network. 16 00:01:08,970 --> 00:01:15,660 Bootstrap has this link and they're hosting the bootstrap access files for us. 17 00:01:15,840 --> 00:01:18,130 So we don't even need to include it in our project. 18 00:01:18,150 --> 00:01:21,600 All we need to do is add this line into our HTML. 19 00:01:21,810 --> 00:01:29,790 And you'll see here that the link tag, which refers to a stylesheet has an F that links us to the bootstrap 20 00:01:29,790 --> 00:01:33,410 minified access and that's what a content delivery network is. 21 00:01:33,540 --> 00:01:35,910 We don't need to include our files into our project. 22 00:01:35,910 --> 00:01:40,130 We just link to someplace else that is actually hosting this file. 23 00:01:40,380 --> 00:01:41,600 So let's copy that. 24 00:01:41,610 --> 00:01:42,500 Open up Sublime. 25 00:01:42,720 --> 00:01:48,540 And I'm going to create a new file here and we'll save it to the desktop. 26 00:01:50,150 --> 00:01:52,120 I won't call it index page HTML. 27 00:01:53,780 --> 00:01:58,430 I save and let's open that up in the browser as well. 28 00:01:58,490 --> 00:02:04,640 OK, I'm empty because while we don't have anything here, let's start with our HTML page and we'll 29 00:02:04,640 --> 00:02:06,460 title it Bootstrap. 30 00:02:07,220 --> 00:02:16,400 And again, we have that link copied, which is the CDN that says, hey, I want this file from Bootstrap. 31 00:02:16,550 --> 00:02:21,110 If you scroll down to the bottom, it also has the JavaScript file. 32 00:02:21,290 --> 00:02:24,020 And like I said before, we need these files. 33 00:02:24,170 --> 00:02:30,620 If we're using features of bootstrap, such as drop downs or models that actually add some actions to 34 00:02:30,620 --> 00:02:31,310 our websites. 35 00:02:32,120 --> 00:02:36,790 So let's just copy this and where we want to put JavaScript. 36 00:02:36,800 --> 00:02:41,490 And again, when we get to that section and discourse, we'll talk more about it. 37 00:02:41,660 --> 00:02:49,430 We want to put it at the bottom of our body tag, and that is because you want these JavaScript files 38 00:02:49,670 --> 00:02:50,390 to load. 39 00:02:50,720 --> 00:02:54,860 After all, the content of your websites have loaded this way. 40 00:02:55,070 --> 00:02:59,030 We have our website loaded and then these scripts get downloaded. 41 00:02:59,180 --> 00:03:04,280 If we put these at the top, you'll have to wait for all of them to load before a user can see your 42 00:03:04,280 --> 00:03:04,700 website. 43 00:03:04,700 --> 00:03:07,190 And obviously, that's that's not what we want to do. 44 00:03:07,500 --> 00:03:11,580 OK, and this is all we need to have bootstrap working for us. 45 00:03:12,260 --> 00:03:13,520 So let's play with a few things. 46 00:03:13,520 --> 00:03:22,640 Let's say we wanted to add a neighbor bar, go into the components and select now bar and you can read 47 00:03:22,640 --> 00:03:23,900 about how it works. 48 00:03:24,440 --> 00:03:28,850 But I really, really like this navigation bar, so I'm just going to copy the code. 49 00:03:32,130 --> 00:03:38,670 And added to my body, and I know it can get overwhelming when you're copping a whole bunch of code 50 00:03:38,670 --> 00:03:46,830 and you don't know exactly what it's doing, but if you actually read this line by line, you know, 51 00:03:47,070 --> 00:03:52,200 everything is just a few tags with their own specific bootstrap classes. 52 00:03:52,440 --> 00:03:54,480 So let's save here and refresh. 53 00:03:55,760 --> 00:03:58,460 And look at that, we have a navigation bar. 54 00:03:59,640 --> 00:04:05,700 How easy is that and one thing that Bootstrap is really famous for and why people love it so much is 55 00:04:05,700 --> 00:04:07,170 that it's fully responsive. 56 00:04:07,170 --> 00:04:08,450 So you see the menu board here. 57 00:04:08,460 --> 00:04:11,610 If I make it bigger, look at that. 58 00:04:12,000 --> 00:04:16,650 It automatically changes according to what we need. 59 00:04:17,860 --> 00:04:20,400 OK, what else can we add over here? 60 00:04:20,440 --> 00:04:21,460 Let's look at. 61 00:04:23,340 --> 00:04:25,770 At a Jumbotron hello, world. 62 00:04:25,950 --> 00:04:27,330 OK, so I can copy this. 63 00:04:29,300 --> 00:04:36,500 And again, let's add that to let's add that right below the nav bar, so again, and sublime text, 64 00:04:36,500 --> 00:04:42,710 I can minimize this by clicking the sign over here and below. 65 00:04:42,710 --> 00:04:45,980 The now bar will add this Jumbotron. 66 00:04:48,990 --> 00:04:56,630 So if I save and refresh, look at that, we have hello, world, let's had one last thing. 67 00:04:58,130 --> 00:05:07,010 We'll do a model and with the model, I really like this one launch demo model, so I'm going to copy 68 00:05:07,010 --> 00:05:07,400 this. 69 00:05:09,500 --> 00:05:15,110 And again, I'm going to minimize the Jumbotron just so we can see what we've added, copy and paste 70 00:05:15,110 --> 00:05:18,920 this, always have to adjust my indentation. 71 00:05:18,920 --> 00:05:19,490 Perfect. 72 00:05:19,700 --> 00:05:21,770 And I say this and refresh. 73 00:05:23,480 --> 00:05:29,270 We have the launch demo model, and if I click this link that we have our own model. 74 00:05:30,340 --> 00:05:38,530 Now, this just to prove that this is JavaScript, if I remove these scripts, I'm just going to comment 75 00:05:38,530 --> 00:05:38,980 them out. 76 00:05:41,570 --> 00:05:49,100 And I click this, nothing happens, and that's what JavaScript is doing, we'll get into it, like 77 00:05:49,100 --> 00:05:56,030 I said later, but there are some features that might not work with Bootstrap if you don't include the 78 00:05:56,030 --> 00:05:56,530 scripts. 79 00:05:56,900 --> 00:06:01,440 But if you're only using it for styles, then you might not even need this. 80 00:06:01,640 --> 00:06:04,880 So if I remove this, if you saw we still have. 81 00:06:06,110 --> 00:06:09,650 All of these by the nav bar isn't working anymore. 82 00:06:09,680 --> 00:06:12,190 So, again, you can play around and see what you need. 83 00:06:12,800 --> 00:06:15,600 You don't need to know exactly what these scripts do yet. 84 00:06:16,130 --> 00:06:17,930 So just leave them there for now. 85 00:06:18,620 --> 00:06:24,050 Now, how can we change the style so that we can add our own custom? 86 00:06:24,320 --> 00:06:25,400 Look to our website? 87 00:06:26,360 --> 00:06:34,910 Well, if we wanted to change something like the launch demo model button, well, in that case, I 88 00:06:34,910 --> 00:06:42,410 can see over here that this is the button and I can look at the classes that Bootstrap gives us if I 89 00:06:42,410 --> 00:06:43,670 go into. 90 00:06:46,370 --> 00:06:53,660 Well, here I can see that all these classes have all these colors have different names, so if I wanted 91 00:06:53,660 --> 00:06:58,060 to be red, I can use one bun danger. 92 00:06:58,640 --> 00:07:00,140 So again, I can remove. 93 00:07:03,720 --> 00:07:06,200 Actually, I can just type this out instead of primary. 94 00:07:06,390 --> 00:07:08,820 I can do Dange, safe and refresh. 95 00:07:10,480 --> 00:07:16,300 And now the buttons read, but again, what if you want your own custom, look to the button? 96 00:07:16,990 --> 00:07:19,100 Well, that's easy to do. 97 00:07:19,120 --> 00:07:23,560 We can now say that from now on, I want Button Dange. 98 00:07:24,570 --> 00:07:29,880 To be orange, the way we do that is we create a stylesheet at the top. 99 00:07:32,540 --> 00:07:37,970 And now we can add our own stylesheet and you can see it's below the bootstrap one, which means that 100 00:07:37,970 --> 00:07:44,450 according to cascading style sheets, our styles will override anything that might match the bootstrap 101 00:07:44,450 --> 00:07:44,730 ones. 102 00:07:44,870 --> 00:07:46,940 So let's create a style file here. 103 00:07:48,270 --> 00:07:54,090 And I actually have one created already on our desktop, you can see it over here in the same directory 104 00:07:54,090 --> 00:07:55,260 as the index HTML. 105 00:07:56,300 --> 00:08:06,260 And here we can say that the one danger that we just added has a background color. 106 00:08:07,230 --> 00:08:08,160 Both orange. 107 00:08:08,960 --> 00:08:10,340 If I save this and refresh. 108 00:08:11,320 --> 00:08:18,100 Look at that, our button is now orange and the hover effect is still red, and that's defo bootstrap. 109 00:08:18,120 --> 00:08:18,880 So we can do. 110 00:08:20,650 --> 00:08:23,710 But in danger hover. 111 00:08:27,120 --> 00:08:30,450 Is going to be black, save and refresh. 112 00:08:32,000 --> 00:08:35,240 Look at that, we have our own custom button. 113 00:08:36,630 --> 00:08:41,640 You can see bootstrappers very powerful, we're able to create websites really, really fast this way, 114 00:08:42,090 --> 00:08:48,600 and in the next section we're going to talk about the best feature of bootstrap that I have yet to tell 115 00:08:48,600 --> 00:08:48,960 you about. 116 00:08:49,560 --> 00:08:50,450 I'll see you in the next one. 117 00:08:50,770 --> 00:08:50,950 Bye.