Starting with Bootstrap novice to ninja a complete series of Bootstraping


Image and video hosting by TinyPic

Starting with Bootstrap novice to ninja a complete series of Bootstraping:

Before starting this article I recommend you to follow me step by step. well in this article I am starting with very basic approach and hoping that all of you are beginners, so to get started go to http://getbootstrap.com/ and click on download bootstrap button given below.

Well there are two approaches to start with bootstrap and I am going to teach you both of them and it’s up to you which one you choose. So Let’s Start!!

Approach 1 (By DOWNLOADING BOOTSTRAP LOCALLY):

This approach is so simple and helps you to keep track all of your files simply by downloading bootstrap locally. So click on download button below:

After downloading extract it in folder of your choice [e.g (project1)] and make a html file again of your choice, I prefer to named it [index.html] because it’s look professional.

Now open index.html in editor of your any choice and include bootstrap, css ,javascript and jquery files in your head section of your index.html page  like this:

Some knowledge with respect to included files:

  • Meta tag viewport will help you to make it mobile friendly and responsive enough to run in every screen size even in landscape mode.
  • Include Jquery MCDN and bootstrap.min.js file in the bottom of your body section.
  • To include CSS file go to css folder (extracted from bootstrap zip file) and make a css file (e.g myStyle.css)

and then

PS: I hope you are following this article with me
and here is the output of your ultimate struggle

Complete code of Approach one : index(usingfolder).Html

 APPROACH 2(BY INCLUDING MCDN).

This method is way to simple, Simply by pasting MCDN provided by getbootstrap.com into your head section. Here it is:

and pasting in head section.

 

SOME IMPORTANT ASPECTS WITH RESPECT TO MCDN AND EXTERNAL STYLE SHEET:

  • Include MCDN below meta tag
  • Include external sheet simply in your project folder. There is no need to make it in css folder.

And here is the output:

Complete code of Approach one :  index(MCDN).Html   

Conclusion:

Well it’s totally up to you which approach suites you. I hope this article is going to help you if you are a beginner. I hope you followed me .Comment below if you have any queries I am always there to help you .

 In the next coming chapters we will get into bootstrap by learning its features.
Share this article if you like it and Subscribe to our blog. Till then take care of your self.

Article Written By : Asad Zaidi (Studies Software Engineering at University of Karachi, Department of Computer Science UBIT)

 

 

 

Comments

comments