Hello and welcome to another new episode of learning simplified.
In this tutorial we are going to practically learn about how to install Bootstrap into
our project.
In the previous tutorial we have seen how to download the original source code and it
was downloaded into our computer as a .zip format.
Now all we have to do we have to extract these files.
So that is why all we have to do is to right click on it and select extract here.
So we can see that from the zip version it has been
extracted and all the components are stored in this main folder which is known as bootstrap-3.3.7-dist.
If you want to make some changes over here like the name,
press F2, then change the name like this one.
So we have changed the name here.
Now if we click on it, we can see that inside this bootstrap folder, there are three
folders those are present over here.
And they are known as css, fonts, and JS.
So all we need to do we need to create another folder here that I have named as
bootstrap project and here, all I need to do I have to copy all the three of it...So
I'm copying them.
Now this is practically our root folder inside which we have
copied every single elements that we have extracted from the file which we have downloaded
off the Internet.
Now we don't have a need of it, so we are closing it,
now we are concentrating into our root folder.
Now this index.html has been created by us.
If we click into this CSS folder, we can see that here are the files those
have been downloaded, these are practically the codes that will be needed here.
These are the fonts, these are practically the glyph icon that will be used in the
bootstrap project.
And this is the JS folder that contains these files inside.
We will be practically requiring a single file of each folder and we will be placing
it into our project.
Now if we open our index.HTML with our text editor, we can see that this is index.html
that has been created by us, and as I have told you
before that this is the doctype HTML, that means this is an HTML5 declaration, as we
can see here.
This is the meta charset declaration, and as I have told you
earlier that this is meta name viewport, content, device-width, this is practically the most
essential part of making our site mobile responsive.
Now all we need to do we need to link up this index.HTML with
the CSS file that we have downloaded off the Internet and all those things those are needed
into our project.
We are trying to link up this bootstrap.Min.CSS with
index.HTML.
So this is what we are going to do over here...
So we have successfully linked our bootstrap.min.css with
index.html.
Now the thing remaining here is to link up a particular JavaScript to our index.HTML
and that is why we are going to our body part and linking a
javaScript...as we have linked bootstrap.min.css, these are practically the compressed version
As we can see here, if you look into bootstrap.css it is 143KB, but
bootstrap.min.css is practically 119KB, that means this is a compressed version and that
is why we are using it in our project and as we have linked
bootstrap.min.css into our project, that is why we are going to link bootstrap.min.js
to the same.
So this is what we are going to do.
Press F2, copy the filename and paste it over here as you can see...
Those are the two important things those have been linked with our project.
Now another thing, if you just look into our bootstrap.min.css file, the this is practically
the file that is linked to your index.html.
Another important issue, we are practically not going to make any
kind of changes over here.
That is why we need to create a separate file, a separate custom.css file, where the customization
will be taking place and any kind of changes into our project, we won't make any
changes into our bootstrap.min.css, we will just pick up the required class name or ID
name from here and it will be reused into our custom.css what we have created.
So all we need to do we need to create another cSS file here..
So I am creating a new CSS file and I am naming it
as custom.css.
So now we can see that are custom.css has been produced and if you want to reflect the
changes that you have made here, you have coded inside this
custom.css, then all you need to do you need to first open this index.htm.
Get back to index.htm and after linking the bootstrap.min.css with this index.htm,
now you link the custom.css over here...
Just got it and place it here..
And here we go, we are now ready to go.
Now we are able to create our own custom project with the bootstrap Framework that we have
downloaded off the Internet.
So this is the part that we have to learn from this tutorial, in the next tutorial we
are going to learn some basic things of bootstrap
3 tutorial.
If you have liked a video do not hesitate to hit that red subscribe button.
I hope to see you guys in or next tutorial.
Till then, take care, enjoy learning, bye.
Không có nhận xét nào:
Đăng nhận xét