Using Twitter Bootstrap - Beginners Part 1
Here is a beginners tutorial on how to use Twitter Bootstrap on your site. First: Download Bootstrap
Then we need to get the latest version of jQuery: Download jQuery
Twitter Bootstrap Turorial: 101
Now we can start! Once you have downloaded the bootstrap package and unzipped it, the folder contents should look something like the following:
Slap that up on your server or on your localhost, and open up the file you want to have bootstrap on. If you don’t have any of that, lets create a Hello World File.
Create a file and call it
index.html and place the following into it, Creating A Simple HTML Page
Now lets add the Bootstrap Framework
First we need to add this line to the very top of the file, right before the opening HTML tag:
This is the new DOCTYPE for HTML5
Next add the
.css file for bootstrap inside your head tag
Now add this in the place of the
H1 tag inside the
One final step, adding the jQuery files. Place these two lines right before the closing body tag
BAM! You are done, you have now created your first Bootstrap page!
If you noticed the use of the .min (minified) version of the file, that is because the file is small and will load a lot faster, and should be used on all production servers, if you need to edit the files, use the files without the .min. Just an FF for you.
But we are no where near finished, there is so much more that can be done with Bootstrap. There is still the responsive layout css file to include, a meta tag for the viewpoint, etc… So that your site looks good on different screen sizes, take a look at the next article, Using Twitter Bootstrap - Responsive Layouts.