Welcome back in this lesson I'll show you how to install bootstrap into your own applications.
And then once you've done that I'll show you some of the important basics of using pitch.
So I'm on get bootstrapped dot com just on the homepage and there's a link here download bootstrap.
And it's not actually a direct download link because we have two main choices for how to use bootstrap
.
We can either download the files and I'll do that to start.
Then we can take those files and add them into our application before we go any further.
I do have a simple search team I'll file that I'm calling basic stuff h DML m l.
And I'll just add a title and we'll just add in a few different elements of bootstrap.
Once we have it installed so we won't make anything comprehensive we'll just use it as a playground
for some of the basic bootstrap components.
OK so let's start by adding just a simple H-1 bootstrap basics
and save.
And then let's open this up in the browser.
Just keep that there for now.
Now to install bootstrap.
I did download it.
So if I open up that file you could see inside of here there's a few different components.
There's a C S S directory and inside the CCS directory there are quite a few files but there's really
only one important file which is bootstrapped up CSSA.
And this is actually the same file here bootstrapped up minutes.
SS except it's been minute fight been shrunken down to take up less space.
So these two are the important files to actually use bootstrap.
And this is a bootstrap theme all three of these are used to help add a custom theme to bootstrap so
that doesn't matter as much.
All we need is bootstrap Dotsie assess.
And we start by just opening it up so you can see what we're working with.
This is the main bootstraps re-assessed file.
It's just a lot of classes.
If you look at every single line of CSSA almost is a class declaration dot simply.
And then what we can do is use those classes instead of our applications.
So if we want to have a button with white text and a red background we're going to apply dot button
danger.
And that's what this is doing here.
But danger has white text a red background and a reddish border.
So let's go ahead and include this in our application just like any other CSSA file.
So what I'll do is just drag it over here into the same directory where I have my basic study team out
and I could also do bootstrapped up minutes reassess in place of this one.
It doesn't really matter.
Technically this one loads a little faster because if I open it up you can see it's as one giant line
all the whitespace has been removed.
So it's easier to load but I'm going to use this longer version just so that you can see exactly what
we're working with.
Now we're going to go into our actual file here I'll close this down and we're going to include bootstrapped
up CSX.
So just like any other style sheet we need a linked tag and the Tref is bootstrap dot C Ss and if we
save and we are fresh our page here you'll notice a slight difference.
Watch the font on this H-1.
It changes.
We now have bootstrap installed or at least the C Ss that goes along with bootstrap and that's all we
need for now.
We won't be working with the javascript just yet there isn't another option for installing bootstrap
that they actually give to you on the Get bootstrap Web site right here.
Bootstrap CDN we can take this link right here and add that to our code.
And it's a link to a hosted version of that same files.
So if we open that in the browser and paste that in you can see it has the contents of the minimized
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
.
Another link.
Tag and paste that you are Ellen and I'll comment this one out.
For now and go back and refresh.
And nothing changes.
The only difference is that in the first case we had the file downloaded on our computer that were linking
to and in the second case we're linking to an external file that's hosted on line.
Now let's go to the bootstrap docs and start playing around or some of these components.
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
important pieces that we'll be using.
So let's start simple with buttons.
If we want to use a button all that we have to do is use a beaten class followed by a type of button
that is between default which will give us a white button but that's also VTAM primary BATNA access
info.
Warning danger and link and they all are styled slightly differently.
And of course we can change these colors on our own but we're going to just use the built in once to
start and s he can also see up here.
We don't have to only use a button element we can use an anchor tag a button or an input.
So let's try that out.
Hello this H-1.
Let's just add in a button tag and this button tags just say click me and just refresh the page right
now and take a look at that.
That's pretty ugly button.
But if we go and add that class PTEN and then between let's do success and save we now get this awesome
green button.
So pretty easy to get some basic styles going.
And let's go back and I'll show you a few other things about buttons that are different sizes that we
can use as well and it's really easy.
We just need to add in either button large and small or button extra small so it's tried out after button
success and it doesn't have to go after it.
Doesn't matter the order of the classes but I'll do it after here DTN and let's do extra small and refresh
your page.
There we go.
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
will be in a tag or we have H.F. equals to DP colon slash slash that read every day get bootstrap dot
com and then the text will just say bootstrap docs.
So make this a little bit bigger and then will add in class in class needs to equal PTEN and let's do
between Desch info and will make it large PTEN dash Elgie and refresh.
We now have two buttons.
One is an actual button element.
Another one has an anchor tag and if I click this you can see it as an anchor tag.
So already in the first minute of using bootstrap we've been able to get decent looking buttons.
It would have taken 10 to 15 lines of CSSA on our own to replicate.
Let's go back now.
Make this fullscreen again and I'll show you a few other things about buttons.
So we have sizes.
We also have different states where we can make a button appear as if it's active and to do that we
just add the active class.
So if we try that now let's add an A few button so I'm going to duplicate our little miniature Click
Me button three times and on the last one on the middle one of the class active and refresh and you
can see hopefully that shows up well enough on the screen cast that this one appears active.
Let's go back and we can also disable a button by adding in this attribute.
Disabled equals disabled.
Let's go back and let's disable the last one refresh.
And now this button is disabled.
We get that nice little icon.
It doesn't have a hover effect where it changes color any more.
It's clearly a disabled button.
Great last thing I'll show you so we can change the colors again so button danger night gives us that
reddish orange and you can see all the colors here.
And of course you could change those by overwriting the styles so you could do something like this rather
than make another style sheet.
I'll just do it here for now.
So we're just going to do one line and also like beauty and danger.
We can change the color to be orange and now might be to endanger the Texas orange and if I wanted to
actually change the background I could do background is orange and that's how you can go in and override
the styles so you don't have to use what bootstrap gives you out of the box.
And most places don't.
OK so that's buttons and that's all I'm going to do in this video.
I just wanted to give you a really quick taste of how bootstrap works.
This pattern of adding classes to existing elements and those classes are defined in that bootstrap
that CSSA file in the next video I'm going to highlight some of the other important pieces that come
with bootstrap including forms and inputs.