Bootstrap 3 micro-introduction


bootstrap3_logo1Bootstrap
 is a framework to design mobile friendly websites. Using modern technologies and battle tested is a good start also for small sites.

Being a framework you have to write/design the page in a specific way, with the benefits of having pre-built CSS and some JavaScript components (popups, tabs…) ready to use.

It’s good for prototyping, to quickly deliver small projects, and probably – I don’t have experience on this – also for bigger ones.

I usually get the source via CDN, so that I don’t have to download copies, and possibly users already have a cached copy (remembering to add JQuery as well).

https://code.jquery.com/jquery-1.12.4.min.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">

The Grid concept

The framework has a 12-column grid accessed through classes. There is a special class, the container class, that encloses rows and columns. It also adds a padding of 15px, so not to be used if this is unwanted!

The container can be fluid (adjusts to the size of the device) or fixed-width (depends on the size of the device, adjusting to media query breakpoints). Both fluid and fixed-width are classes provided by Bootstrap.

Rows

Rows are sort of horizontal break for columns. They are intended to work with columns.

Columns

Quite easy to get as a concept, remembering the basic 12-column idea. Class is called col-SIZE-SPAN (where size is when it turns to single column, and span the number of columns 1 to 12). Example:

.

Size can be xs, sm, md, lg (768, >992 >1200 respectively). With medium (md) size, the screen has to be at least 992 pixels not to render as a single column.

A simple example of a three column page is stored here. It is possible to mix styles so that a three columns will turn into a two columns before rendering as a single column layout (example).

Clearfix

The clearfix class as usually happens with CSS will fix problems with floats. In addition to this there is the powerful responsive utility classes. Example:

block could be inline too, or visible could be hidden (in this case removing –block).

 

Advertisements