| |

Introduction to Twitter Bootstrap

Bootstrap is a set of tools including CSS, (& LESS) and jQuery that are designed to provide a the basis for a grid based responsive website.

Download the files from http://getbootstrap.com/ (version 3)

Version 3 is structured to be “mobile first” – all CSS is designed to flexible, in contrast to version 2 where much of the CSS is pixel based (940px wide), with separate ‘responsive’ CSS files to render on alternative media.

Version 2.3.2:
http://getbootstrap.com/2.3.2/index.html Download the compiled (minimal files), or the source files which include the full package. There is also the option to customize the files to be downloaded:
http://getbootstrap.com/2.3.2/customize.html

Download, unzip and install into appropriate folder. Check the file path setup. The JavaScript plugins require jQuery to be included.

Scaffolding Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS Styles for common HTML elements like typography, code, tables, forms, and buttons. (Explore the Less styles and how they are compiled.)

Explore http://lesscss.org/

Also includes Glyphicons, a great icon set.

Components Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

To get started, see the template samples offered in the source files. This page clarifies the structure and offers many code snippets to use http://getbootstrap.com/2.3.2/scaffolding.html

Similar Posts