Twitter Bootstrap is a great way to get started with a CSS look and feel for a site or webapp without spending much time yourself messing with your own CSS.
In a nutshell, here’s the essentials:
- You must use the HTML5 doctype,without it, your layouts in IE look random:
<!DOCTYPE html> <html lang="en"> ... </html>
- Layout can either be:
- Fixed:
<div class="container"> ... <div>
- or Fluid:
<div class="container-fluid"> ... </div>
- Fixed:
- The layout is based on 12 columns. Use the following classes to control your layout with the 12 columns – the number of offset columns and spanned columns should total 12. Offset and Span classes can be combined:
- row : encloses one row in the layout
<div class="row"> ... </div>
- offsetX : where X is a number of columns to offset
<div class="offset1 span2"> ... </div>
- spanX : where X is the number of columns to span
- row : encloses one row in the layout
Complete example:
<div class="container">
<div class="row">
<div class="offset1 span2">Left column</div>
<div class="span8">right column, one column left blank on right</div>
</div>
</div>