1
00:00:00,180 --> 00:00:04,680
Welcome back in this lesson I'll show you how to install bootstrap into your own applications.

2
00:00:04,740 --> 00:00:08,370
And then once you've done that I'll show you some of the important basics of using pitch.

3
00:00:08,850 --> 00:00:14,180
So I'm on get bootstrapped dot com just on the homepage and there's a link here download bootstrap.

4
00:00:14,850 --> 00:00:19,580
And it's not actually a direct download link because we have two main choices for how to use bootstrap

5
00:00:19,580 --> 00:00:20,100
.

6
00:00:20,430 --> 00:00:24,340
We can either download the files and I'll do that to start.

7
00:00:24,530 --> 00:00:29,360
Then we can take those files and add them into our application before we go any further.

8
00:00:29,430 --> 00:00:35,230
I do have a simple search team I'll file that I'm calling basic stuff h DML m l.

9
00:00:35,790 --> 00:00:40,770
And I'll just add a title and we'll just add in a few different elements of bootstrap.

10
00:00:40,800 --> 00:00:45,510
Once we have it installed so we won't make anything comprehensive we'll just use it as a playground

11
00:00:45,510 --> 00:00:47,960
for some of the basic bootstrap components.

12
00:00:48,510 --> 00:00:54,840
OK so let's start by adding just a simple H-1 bootstrap basics

13
00:00:57,720 --> 00:00:58,460
and save.

14
00:00:58,700 --> 00:01:01,790
And then let's open this up in the browser.

15
00:01:03,240 --> 00:01:05,280
Just keep that there for now.

16
00:01:05,280 --> 00:01:06,690
Now to install bootstrap.

17
00:01:06,780 --> 00:01:08,190
I did download it.

18
00:01:08,250 --> 00:01:13,720
So if I open up that file you could see inside of here there's a few different components.

19
00:01:13,830 --> 00:01:19,650
There's a C S S directory and inside the CCS directory there are quite a few files but there's really

20
00:01:19,650 --> 00:01:23,890
only one important file which is bootstrapped up CSSA.

21
00:01:24,630 --> 00:01:27,710
And this is actually the same file here bootstrapped up minutes.

22
00:01:27,740 --> 00:01:32,290
SS except it's been minute fight been shrunken down to take up less space.

23
00:01:32,460 --> 00:01:36,280
So these two are the important files to actually use bootstrap.

24
00:01:36,600 --> 00:01:41,850
And this is a bootstrap theme all three of these are used to help add a custom theme to bootstrap so

25
00:01:41,850 --> 00:01:43,370
that doesn't matter as much.

26
00:01:43,380 --> 00:01:45,680
All we need is bootstrap Dotsie assess.

27
00:01:45,780 --> 00:01:49,430
And we start by just opening it up so you can see what we're working with.

28
00:01:49,470 --> 00:01:52,200
This is the main bootstraps re-assessed file.

29
00:01:52,770 --> 00:01:54,280
It's just a lot of classes.

30
00:01:54,300 --> 00:02:00,510
If you look at every single line of CSSA almost is a class declaration dot simply.

31
00:02:00,690 --> 00:02:05,340
And then what we can do is use those classes instead of our applications.

32
00:02:05,340 --> 00:02:12,060
So if we want to have a button with white text and a red background we're going to apply dot button

33
00:02:12,060 --> 00:02:12,720
danger.

34
00:02:12,900 --> 00:02:14,510
And that's what this is doing here.

35
00:02:14,730 --> 00:02:19,590
But danger has white text a red background and a reddish border.

36
00:02:19,650 --> 00:02:24,410
So let's go ahead and include this in our application just like any other CSSA file.

37
00:02:24,750 --> 00:02:31,880
So what I'll do is just drag it over here into the same directory where I have my basic study team out

38
00:02:32,540 --> 00:02:37,020
and I could also do bootstrapped up minutes reassess in place of this one.

39
00:02:37,020 --> 00:02:38,520
It doesn't really matter.

40
00:02:38,550 --> 00:02:45,420
Technically this one loads a little faster because if I open it up you can see it's as one giant line

41
00:02:45,690 --> 00:02:47,570
all the whitespace has been removed.

42
00:02:47,850 --> 00:02:53,640
So it's easier to load but I'm going to use this longer version just so that you can see exactly what

43
00:02:53,640 --> 00:02:55,450
we're working with.

44
00:02:55,470 --> 00:03:02,130
Now we're going to go into our actual file here I'll close this down and we're going to include bootstrapped

45
00:03:02,130 --> 00:03:03,120
up CSX.

46
00:03:03,220 --> 00:03:11,370
So just like any other style sheet we need a linked tag and the Tref is bootstrap dot C Ss and if we

47
00:03:11,370 --> 00:03:16,310
save and we are fresh our page here you'll notice a slight difference.

48
00:03:16,320 --> 00:03:18,140
Watch the font on this H-1.

49
00:03:18,420 --> 00:03:19,590
It changes.

50
00:03:19,620 --> 00:03:24,720
We now have bootstrap installed or at least the C Ss that goes along with bootstrap and that's all we

51
00:03:24,720 --> 00:03:25,500
need for now.

52
00:03:25,650 --> 00:03:30,060
We won't be working with the javascript just yet there isn't another option for installing bootstrap

53
00:03:30,510 --> 00:03:35,310
that they actually give to you on the Get bootstrap Web site right here.

54
00:03:35,400 --> 00:03:40,750
Bootstrap CDN we can take this link right here and add that to our code.

55
00:03:41,010 --> 00:03:44,870
And it's a link to a hosted version of that same files.

56
00:03:45,120 --> 00:03:49,920
So if we open that in the browser and paste that in you can see it has the contents of the minimized

57
00:03:49,920 --> 00:03:56,670
file and it's hosted at this u r l so we can just have a link to that you r l so I can replace that

58
00:03:56,670 --> 00:03:56,900
.

59
00:03:56,970 --> 00:03:57,540
Another link.

60
00:03:57,540 --> 00:04:01,530
Tag and paste that you are Ellen and I'll comment this one out.

61
00:04:01,530 --> 00:04:04,230
For now and go back and refresh.

62
00:04:04,380 --> 00:04:06,020
And nothing changes.

63
00:04:06,030 --> 00:04:10,950
The only difference is that in the first case we had the file downloaded on our computer that were linking

64
00:04:10,950 --> 00:04:16,650
to and in the second case we're linking to an external file that's hosted on line.

65
00:04:16,650 --> 00:04:20,750
Now let's go to the bootstrap docs and start playing around or some of these components.

66
00:04:21,240 --> 00:04:27,330
So go back to get bootstrap and let's click on C Ss and I'm just going to point out some of the more

67
00:04:27,330 --> 00:04:29,150
important pieces that we'll be using.

68
00:04:29,400 --> 00:04:31,940
So let's start simple with buttons.

69
00:04:32,460 --> 00:04:40,650
If we want to use a button all that we have to do is use a beaten class followed by a type of button

70
00:04:40,990 --> 00:04:48,510
that is between default which will give us a white button but that's also VTAM primary BATNA access

71
00:04:48,740 --> 00:04:49,220
info.

72
00:04:49,260 --> 00:04:54,080
Warning danger and link and they all are styled slightly differently.

73
00:04:54,240 --> 00:04:58,860
And of course we can change these colors on our own but we're going to just use the built in once to

74
00:04:58,860 --> 00:05:02,500
start and s he can also see up here.

75
00:05:02,700 --> 00:05:08,600
We don't have to only use a button element we can use an anchor tag a button or an input.

76
00:05:08,820 --> 00:05:10,720
So let's try that out.

77
00:05:11,730 --> 00:05:13,030
Hello this H-1.

78
00:05:13,230 --> 00:05:22,740
Let's just add in a button tag and this button tags just say click me and just refresh the page right

79
00:05:22,740 --> 00:05:25,860
now and take a look at that.

80
00:05:25,950 --> 00:05:27,310
That's pretty ugly button.

81
00:05:27,690 --> 00:05:37,740
But if we go and add that class PTEN and then between let's do success and save we now get this awesome

82
00:05:37,740 --> 00:05:39,200
green button.

83
00:05:39,330 --> 00:05:41,870
So pretty easy to get some basic styles going.

84
00:05:42,190 --> 00:05:47,670
And let's go back and I'll show you a few other things about buttons that are different sizes that we

85
00:05:47,670 --> 00:05:50,110
can use as well and it's really easy.

86
00:05:50,130 --> 00:05:58,410
We just need to add in either button large and small or button extra small so it's tried out after button

87
00:05:58,410 --> 00:06:00,500
success and it doesn't have to go after it.

88
00:06:00,510 --> 00:06:08,600
Doesn't matter the order of the classes but I'll do it after here DTN and let's do extra small and refresh

89
00:06:08,600 --> 00:06:09,740
your page.

90
00:06:09,750 --> 00:06:11,170
There we go.

91
00:06:11,170 --> 00:06:16,710
I'll move this over now and let's add in a few more buttons but this one will be an anchor tag and this

92
00:06:16,710 --> 00:06:24,640
will be in a tag or we have H.F. equals to DP colon slash slash that read every day get bootstrap dot

93
00:06:24,660 --> 00:06:30,480
com and then the text will just say bootstrap docs.

94
00:06:30,550 --> 00:06:38,550
So make this a little bit bigger and then will add in class in class needs to equal PTEN and let's do

95
00:06:38,550 --> 00:06:47,330
between Desch info and will make it large PTEN dash Elgie and refresh.

96
00:06:47,340 --> 00:06:48,690
We now have two buttons.

97
00:06:48,750 --> 00:06:50,620
One is an actual button element.

98
00:06:50,620 --> 00:06:55,210
Another one has an anchor tag and if I click this you can see it as an anchor tag.

99
00:06:56,340 --> 00:07:01,200
So already in the first minute of using bootstrap we've been able to get decent looking buttons.

100
00:07:01,370 --> 00:07:05,330
It would have taken 10 to 15 lines of CSSA on our own to replicate.

101
00:07:05,760 --> 00:07:06,960
Let's go back now.

102
00:07:06,990 --> 00:07:10,980
Make this fullscreen again and I'll show you a few other things about buttons.

103
00:07:11,220 --> 00:07:12,720
So we have sizes.

104
00:07:12,750 --> 00:07:18,560
We also have different states where we can make a button appear as if it's active and to do that we

105
00:07:18,570 --> 00:07:21,080
just add the active class.

106
00:07:21,390 --> 00:07:27,060
So if we try that now let's add an A few button so I'm going to duplicate our little miniature Click

107
00:07:27,060 --> 00:07:37,140
Me button three times and on the last one on the middle one of the class active and refresh and you

108
00:07:37,140 --> 00:07:43,590
can see hopefully that shows up well enough on the screen cast that this one appears active.

109
00:07:43,620 --> 00:07:49,290
Let's go back and we can also disable a button by adding in this attribute.

110
00:07:49,290 --> 00:07:51,850
Disabled equals disabled.

111
00:07:52,440 --> 00:07:57,950
Let's go back and let's disable the last one refresh.

112
00:07:58,180 --> 00:08:00,020
And now this button is disabled.

113
00:08:00,120 --> 00:08:01,940
We get that nice little icon.

114
00:08:02,070 --> 00:08:05,110
It doesn't have a hover effect where it changes color any more.

115
00:08:05,220 --> 00:08:07,460
It's clearly a disabled button.

116
00:08:07,560 --> 00:08:14,610
Great last thing I'll show you so we can change the colors again so button danger night gives us that

117
00:08:14,610 --> 00:08:18,630
reddish orange and you can see all the colors here.

118
00:08:18,870 --> 00:08:24,300
And of course you could change those by overwriting the styles so you could do something like this rather

119
00:08:24,300 --> 00:08:25,850
than make another style sheet.

120
00:08:25,860 --> 00:08:27,270
I'll just do it here for now.

121
00:08:27,330 --> 00:08:32,330
So we're just going to do one line and also like beauty and danger.

122
00:08:32,460 --> 00:08:40,050
We can change the color to be orange and now might be to endanger the Texas orange and if I wanted to

123
00:08:40,050 --> 00:08:46,440
actually change the background I could do background is orange and that's how you can go in and override

124
00:08:46,440 --> 00:08:51,550
the styles so you don't have to use what bootstrap gives you out of the box.

125
00:08:52,200 --> 00:08:53,580
And most places don't.

126
00:08:54,030 --> 00:08:56,940
OK so that's buttons and that's all I'm going to do in this video.

127
00:08:56,940 --> 00:09:00,300
I just wanted to give you a really quick taste of how bootstrap works.

128
00:09:00,300 --> 00:09:06,450
This pattern of adding classes to existing elements and those classes are defined in that bootstrap

129
00:09:06,460 --> 00:09:11,010
that CSSA file in the next video I'm going to highlight some of the other important pieces that come

130
00:09:11,010 --> 00:09:13,540
with bootstrap including forms and inputs.