Let's start using bootstrap, and there are two ways we can use this toolkit.
One is to download.
And you can just click on the first link, it says, compiled in JavaScript.
Well, let's just see what gets downloaded.
So if I open this, you'll see here that I have a successful and JavaScript file.
You see there's a bunch of them.
You don't have to worry too much about it is just different access files that are used together based
on if you're using the bootstrap grid or the bootstrap success and you'll see some of them have the
bootstrap Dortmunder access and that means that there are Minify.
So if I open this, you'll see that everything is on one line and minified right now.
All we need to do is just add this to our project.
But I want to show you a better way of doing it, especially when we're getting started, and that is
we can use something called a CDN.
So what is a CDN?
A CDN is a content delivery network.
Bootstrap has this link and they're hosting the bootstrap access files for us.
So we don't even need to include it in our project.
All we need to do is add this line into our HTML.
And you'll see here that the link tag, which refers to a stylesheet has an F that links us to the bootstrap
minified access and that's what a content delivery network is.
We don't need to include our files into our project.
We just link to someplace else that is actually hosting this file.
So let's copy that.
Open up Sublime.
And I'm going to create a new file here and we'll save it to the desktop.
I won't call it index page HTML.
I save and let's open that up in the browser as well.
OK, I'm empty because while we don't have anything here, let's start with our HTML page and we'll
title it Bootstrap.
And again, we have that link copied, which is the CDN that says, hey, I want this file from Bootstrap.
If you scroll down to the bottom, it also has the JavaScript file.
And like I said before, we need these files.
If we're using features of bootstrap, such as drop downs or models that actually add some actions to
our websites.
So let's just copy this and where we want to put JavaScript.
And again, when we get to that section and discourse, we'll talk more about it.
We want to put it at the bottom of our body tag, and that is because you want these JavaScript files
to load.
After all, the content of your websites have loaded this way.
We have our website loaded and then these scripts get downloaded.
If we put these at the top, you'll have to wait for all of them to load before a user can see your
website.
And obviously, that's that's not what we want to do.
OK, and this is all we need to have bootstrap working for us.
So let's play with a few things.
Let's say we wanted to add a neighbor bar, go into the components and select now bar and you can read
about how it works.
But I really, really like this navigation bar, so I'm just going to copy the code.
And added to my body, and I know it can get overwhelming when you're copping a whole bunch of code
and you don't know exactly what it's doing, but if you actually read this line by line, you know,
everything is just a few tags with their own specific bootstrap classes.
So let's save here and refresh.
And look at that, we have a navigation bar.
How easy is that and one thing that Bootstrap is really famous for and why people love it so much is
that it's fully responsive.
So you see the menu board here.
If I make it bigger, look at that.
It automatically changes according to what we need.
OK, what else can we add over here?
Let's look at.
At a Jumbotron hello, world.
OK, so I can copy this.
And again, let's add that to let's add that right below the nav bar, so again, and sublime text,
I can minimize this by clicking the sign over here and below.
The now bar will add this Jumbotron.
So if I save and refresh, look at that, we have hello, world, let's had one last thing.
We'll do a model and with the model, I really like this one launch demo model, so I'm going to copy
this.
And again, I'm going to minimize the Jumbotron just so we can see what we've added, copy and paste
this, always have to adjust my indentation.
Perfect.
And I say this and refresh.
We have the launch demo model, and if I click this link that we have our own model.
Now, this just to prove that this is JavaScript, if I remove these scripts, I'm just going to comment
them out.
And I click this, nothing happens, and that's what JavaScript is doing, we'll get into it, like
I said later, but there are some features that might not work with Bootstrap if you don't include the
scripts.
But if you're only using it for styles, then you might not even need this.
So if I remove this, if you saw we still have.
All of these by the nav bar isn't working anymore.
So, again, you can play around and see what you need.
You don't need to know exactly what these scripts do yet.
So just leave them there for now.
Now, how can we change the style so that we can add our own custom?
Look to our website?
Well, if we wanted to change something like the launch demo model button, well, in that case, I
can see over here that this is the button and I can look at the classes that Bootstrap gives us if I
go into.
Well, here I can see that all these classes have all these colors have different names, so if I wanted
to be red, I can use one bun danger.
So again, I can remove.
Actually, I can just type this out instead of primary.
I can do Dange, safe and refresh.
And now the buttons read, but again, what if you want your own custom, look to the button?
Well, that's easy to do.
We can now say that from now on, I want Button Dange.
To be orange, the way we do that is we create a stylesheet at the top.
And now we can add our own stylesheet and you can see it's below the bootstrap one, which means that
according to cascading style sheets, our styles will override anything that might match the bootstrap
ones.
So let's create a style file here.
And I actually have one created already on our desktop, you can see it over here in the same directory
as the index HTML.
And here we can say that the one danger that we just added has a background color.
Both orange.
If I save this and refresh.
Look at that, our button is now orange and the hover effect is still red, and that's defo bootstrap.
So we can do.
But in danger hover.
Is going to be black, save and refresh.
Look at that, we have our own custom button.
You can see bootstrappers very powerful, we're able to create websites really, really fast this way,
and in the next section we're going to talk about the best feature of bootstrap that I have yet to tell
you about.
I'll see you in the next one.
Bye.