1 00:00:05,330 --> 00:00:10,610 Welcome back to this lecture on bootstrap basics and buttons and this lecture. 2 00:00:10,610 --> 00:00:15,980 We're going to discuss how to actually link your H T.M. to bootstrap C Ss and javascript files as well 3 00:00:15,980 --> 00:00:18,910 as containers jumbo trons and buttons of bootstrap. 4 00:00:19,160 --> 00:00:20,200 Let's get started. 5 00:00:20,210 --> 00:00:23,170 We're going to have our browser open as well as our text editor. 6 00:00:23,300 --> 00:00:27,380 OK so here I have a basic H.T. mail file and it's empty right now. 7 00:00:27,620 --> 00:00:32,730 And they also have the get bootstrap documentation on the home page and another tablet's linked to the 8 00:00:32,860 --> 00:00:34,270 to him file. 9 00:00:34,280 --> 00:00:37,550 So let's go ahead and fill this in of some skeleton code. 10 00:00:37,640 --> 00:00:38,560 H team. 11 00:00:38,960 --> 00:00:39,640 Save it. 12 00:00:39,670 --> 00:00:45,620 And in the body I'll have a heading one that says Hello world. 13 00:00:45,620 --> 00:00:48,560 EXCLAMATION POINT we'll save this. 14 00:00:48,710 --> 00:00:50,820 Refresh our browser and now see. 15 00:00:50,840 --> 00:00:52,220 Hello world there. 16 00:00:52,310 --> 00:00:55,870 Now let's see what happens when we actually connect the stage to himself to bootstrap. 17 00:00:55,880 --> 00:01:01,160 We can do this easily by coming back to the home page scrolling down and you'll notice there's a link 18 00:01:01,160 --> 00:01:02,580 for the CSSA here. 19 00:01:02,750 --> 00:01:09,370 So let's grab this and let's make sure we get that closing tag as well go all the way to the left. 20 00:01:09,380 --> 00:01:16,220 Copy that and I'm going to paste in inside of this head in between the open closing head tags. 21 00:01:16,250 --> 00:01:19,890 I'm going to paste in that link for the stylesheet. 22 00:01:19,910 --> 00:01:24,950 So that's the stylesheet that's being hosted online that are each HTML file will automatically connect 23 00:01:24,950 --> 00:01:29,770 to and we can also do is copy and paste these other script lines. 24 00:01:29,840 --> 00:01:36,190 And this basically connects to the javascript and Jay query so we can copy that and place that as well. 25 00:01:36,190 --> 00:01:41,560 Not every component needs these scripts right here are these links to javascript but some components 26 00:01:41,560 --> 00:01:44,620 that have a little bit more interactivity will need them. 27 00:01:44,620 --> 00:01:47,140 So we'll make note of that when we actually need them or not. 28 00:01:47,140 --> 00:01:49,150 Typically you just copy and paste all of them. 29 00:01:49,540 --> 00:01:55,000 So I will save that and let's refresh our page and see what happens. 30 00:01:56,310 --> 00:02:00,550 So part of being refreshed noticed that there's a couple of changes here now. 31 00:02:00,550 --> 00:02:02,460 Or Hello world is in a different font. 32 00:02:02,520 --> 00:02:07,620 And also the margins and kind of buffers around hello world have changed as well. 33 00:02:07,620 --> 00:02:12,780 So we're going to do now is explore various class calls we can make with bootstrap What are the most 34 00:02:12,780 --> 00:02:17,010 common class calls we are going to make is putting things in a container. 35 00:02:17,340 --> 00:02:26,700 So often you're going to start a div and for the class you report back a container class and here is 36 00:02:26,700 --> 00:02:32,560 where we can have a Heading 1 and we'll say hello world exclamation point. 37 00:02:32,610 --> 00:02:38,610 Save that and this hello world you'll notice is inside this container which is going to automatically 38 00:02:38,610 --> 00:02:43,070 set some margins to the left and to the right and it's actually smart to be responsive. 39 00:02:43,200 --> 00:02:49,950 So as you begin to move your browser size maybe reviewing on a mobile device it can automatically set 40 00:02:50,010 --> 00:02:51,870 the text to where it needs to be. 41 00:02:51,870 --> 00:02:56,650 So it actually senses the size of the browser that it's being looked at. 42 00:02:57,040 --> 00:02:57,680 OK. 43 00:02:57,840 --> 00:03:04,770 Now we can also add in some buttons and we can do this with an HMO button that so create a button tag 44 00:03:04,770 --> 00:03:08,430 here and we'll have the Type-B button and the name be button. 45 00:03:08,580 --> 00:03:15,340 And right now in between the open and closing button tags I'm just going to type button so I can save 46 00:03:15,340 --> 00:03:17,970 that in if I hit refresh here. 47 00:03:17,980 --> 00:03:21,280 Now I see this nice button and nothing happens when I click on it. 48 00:03:21,520 --> 00:03:29,090 But if we take a look back at bootstrap and go to the documentation and then click on the components 49 00:03:29,480 --> 00:03:34,190 and Button section you should notice a bunch of examples for different buttons. 50 00:03:34,190 --> 00:03:39,200 So pretty much by default there is different colorings for buttons such as a warning button or a danger 51 00:03:39,200 --> 00:03:43,760 button and all you need to do is copy the class call to this. 52 00:03:43,760 --> 00:03:50,440 So for instance the primary button this blue we can add that in as a class call inside of the button. 53 00:03:50,480 --> 00:03:59,300 So say class copy and paste between space between primary save that and then coming back to our basic 54 00:03:59,300 --> 00:03:59,840 page to him. 55 00:03:59,870 --> 00:04:00,950 We're refresh. 56 00:04:01,040 --> 00:04:06,530 Now you notice it's stylized as a primary button and there's lots of preexisting bootstrap templates 57 00:04:06,530 --> 00:04:11,670 that can't affect the colors of these and you could always override with your own color classes as well. 58 00:04:13,210 --> 00:04:15,700 So you can come down here and check out the other button tags. 59 00:04:15,700 --> 00:04:22,690 You can do kind of outline buttons different sizes so let's say we want a large secondary button like 60 00:04:22,690 --> 00:04:23,910 the one shown there. 61 00:04:24,170 --> 00:04:29,200 I can copy that code come back here we can create another button. 62 00:04:30,150 --> 00:04:38,560 And this button will just say large and let's pass in that class call so will copy and paste that in 63 00:04:38,560 --> 00:04:45,250 between BT and secondary tan large save that and when it come back to basic it's HTML refresh. 64 00:04:45,250 --> 00:04:52,070 Now I see that larger secondary color button is the main idea behind our use cases for bootstrap. 65 00:04:52,120 --> 00:04:53,990 We're just going to come to the documentation. 66 00:04:54,130 --> 00:04:56,650 Scroll down until we find the components we like. 67 00:04:56,650 --> 00:05:01,780 Check out the examples see which ones you liked and then you can copy and paste the classes. 68 00:05:01,810 --> 00:05:04,810 So there's ways to kind of disable the state of the button. 69 00:05:04,840 --> 00:05:07,930 So here I can clearly click on them here when they're disabled. 70 00:05:07,930 --> 00:05:10,160 I can't so it can copy and paste that as well. 71 00:05:10,910 --> 00:05:13,800 And you can scroll down here and see the other toggle States. 72 00:05:13,800 --> 00:05:17,450 So you're able to toggle buttons on and off essentially changing the color. 73 00:05:17,540 --> 00:05:20,160 See if a has been checked or not etc.. 74 00:05:20,270 --> 00:05:22,370 So here we can see just a bunch of buttons. 75 00:05:22,610 --> 00:05:24,400 So if you ever want to copy and play around of these. 76 00:05:24,400 --> 00:05:27,200 All you need to do is click here on the copy of the clipboard. 77 00:05:27,380 --> 00:05:35,530 Come back to each T.M. and you can put this inside of a new div save those changes come back here refresh. 78 00:05:35,570 --> 00:05:36,820 And I see that example. 79 00:05:36,820 --> 00:05:41,860 So we have these kind of active radio buttons there and something you should get really comfortable 80 00:05:41,860 --> 00:05:42,220 with. 81 00:05:42,220 --> 00:05:46,570 It's just come into documentation and looking for those components and copy and pasting and playing 82 00:05:46,570 --> 00:05:49,800 around with a lot of these class calls. 83 00:05:49,810 --> 00:05:52,540 The last thing I want to mention is the Jumbotron class. 84 00:05:52,570 --> 00:05:57,850 So if you scroll down you can see an example of a here jumbotron and it's a lightweight flexible component 85 00:05:57,970 --> 00:06:01,500 that really is kind of like a showcase message for your web site. 86 00:06:01,540 --> 00:06:09,050 So I'm going to remove all of this here including the hello world and I'll create a new div and give 87 00:06:09,050 --> 00:06:10,790 it the class Jumbotron. 88 00:06:11,060 --> 00:06:18,310 And inside this DiVall say H-1 and say hello and welcome. 89 00:06:18,330 --> 00:06:23,260 We'll see if those changes come back to basics or a smell to a refresh. 90 00:06:23,290 --> 00:06:25,460 Now I see this nice background in gray. 91 00:06:25,570 --> 00:06:26,900 Hello and welcome. 92 00:06:27,160 --> 00:06:34,180 And often if you want to censor this way you can do is put this whole div inside of another div with 93 00:06:34,180 --> 00:06:36,190 a container class. 94 00:06:36,380 --> 00:06:43,480 So then we can grab this div with the Jumbotron stick that inside some container save it and when refresh. 95 00:06:43,640 --> 00:06:50,120 Now we see it being contained to the center and it will adjust as we kind of expand or contract or browser 96 00:06:50,120 --> 00:06:50,960 size. 97 00:06:50,960 --> 00:06:55,070 So Jumbotron is something we're going to be using a lot more throughout the course and you can always 98 00:06:55,070 --> 00:07:01,680 copy and paste these examples here so we can copy that paste it here so now I see there's a jumbotron 99 00:07:01,950 --> 00:07:08,040 with some display classes some late classes save that will come back here refresh and you get to see 100 00:07:08,040 --> 00:07:09,000 that example. 101 00:07:09,000 --> 00:07:13,150 So it's up to you whether you want to put it in a container or not depends on what you want your website 102 00:07:13,170 --> 00:07:14,040 to look like. 103 00:07:14,070 --> 00:07:19,560 Main idea being you can always come to the bootstrap documentation and copy and paste from the examples 104 00:07:19,560 --> 00:07:22,250 here and then adjust to the way you see necessary. 105 00:07:22,410 --> 00:07:27,280 So if you don't want to say hello world who's come find the heading one and have it say something like 106 00:07:28,560 --> 00:07:30,060 puppies are awesome. 107 00:07:32,730 --> 00:07:34,190 Save that. 108 00:07:34,440 --> 00:07:35,550 Refresh our page. 109 00:07:35,550 --> 00:07:37,460 And now we see puppies are awesome. 110 00:07:37,500 --> 00:07:37,980 OK. 111 00:07:38,250 --> 00:07:40,740 So that's the very basics of using boot strap. 112 00:07:40,740 --> 00:07:43,380 Coming up next we're going to briefly discuss bootstrap forms. 113 00:07:43,470 --> 00:07:45,680 And after that we'll talk about Neph bars. 114 00:07:45,690 --> 00:07:46,600 I'll see you there.