Wednesday 4 March 2015

Bootstrap Tutorials


Learn Bootstrap Quickly in an Hour

Bootstrap is a very powerful Css Framework which is used by many of the sites nowadays.


Why you need bootstrap? 

When you build a website. HTML provides a structure to our page. Then, we add up Css to style that page. At last you might wanna add javascript to set a page behaviour i.e. how your page behaves including animations, button click responses etc. 

To add Css and Javascript to html you have to again and again navigate between the files which is not at all a proper way of working to big project. Bootstrap lets you overcome this headache and with bootstrap now you can add all the Css and Javascript to the HTML file itself. 


To start with bootstrap go this link: http://getbootstrap.com/getting-started/#download. Then click on the download button.


You can also download the Sass Version of bootstrap if you are familiar with Sass. But you aren't then go with the default one.


Once you have downloaded the .zip file unzip that file. You'll get the disp folder. Now, Add the index.html file to that disp folder. As shown below.


Now, i'll quickly add little bit of html code to index.html. But before that i'll tell you what these folder contains. 

1) From css folder i'll be using bootstrap.css and will import that inside of my index.html. 

2) From js folder i'll import bootstrap.js inside of my index.html. One thing to keep in mind bootstrap.js is dependent on Jquery so you'll need to import that first.

To import Jquery add the below line between your <body></body> tags

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>


A Bootstrap class that will both responsively wrap content to fixed and update margins based on the current windoize is called 


updating ......... wait i'll add more to it. Soooon.


No comments:

Post a Comment