Bootstrap tutorial - Part I

This is the first of a series of tutorials where we will show you how to use Bootstrap to create a fluid design website. Introduction, Download and set up.

Part I: Introduction, download, and set up.

What is Bootstrap?

Twitter Bootstrap, or simply Bootstrap, is a front end framework, a free collection of tools for creating websites and web applications quickly and easily. It supports both adaptative layouts and fluid design as well as providing templates for interface components with the optional inclusion of JavaScript extensions.

To put it in simple words, Bootstap is a bunch of pre-written code that you can adapt to your design needs and completely tailor to your website style. Using Bootstrap does not limit your creativity or makes your website look like a carbon copy of other thousands online, instead it is a productivity tool that will help you spend less time doing CSS styling and configuring your site for mobile display.

Download:

To download the latest version of Bootstrap (2.3.1 as of the time of writting this article) go to: http://getbootstrap.com and clic on the huge Download button. A tiny .zip file will be downloaded to your computer and now you're ready to start setting up Bootstrap!

It's easy to find the download link, isn't it?

Set up:

There are several ways of configuring a website to use Bootstrap. They depend on several factors such as if you're using an IDE, WYSIWYG editor or text editor. You should also consider small variations if you'll use Bootstrap to develop a template for a CMS like Wordpress or Joomla.

In the first tutorials, we will keep things as simple as possible, and therefore will be using Jedit as text editor for manipulating CSS and creating some html files.

Extract the downloaded .zip file to an easily accesible location. We will be using C:, so our path is:

c:\bootsrap\

Inside this "Boostrap" folder you will find another three folders: "img", "css" and "js" which contain all the files that [actually] make up Bootstrap.

File structure of the Bootstrap framework.

In both the CSS folder and in the JS folder you will find sets of documents that are basically named the same but one of them include the word "min" on its title. They are basically the same, but have been stripped of all the extra spaces and formatting to shave of some weight and minimize download times.

The next step will be creating a .html document in the Bootstrap folder, which is our website root folder, and editing it to include the CSS and JS files.

 

Article originally posted on May 12, 2013