| |

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

  • | |

    May 2013, Divs, Floats and Clears

    Using CSS and Div’s for layout. Div’s contain the information to layout the site, but making them behave in a predictable manor is not always easy. Floats are used to control positioning, (left or right) but multiple elements will need to be “cleared” to line up correctly. http://www.sitepoint.com/using-css-grid-layout-and-blend-5-to-build-a-game/ http://960.gs/ http://unsemantic.com/ http://caniuse.com/css-grid http://designfestival.com/design-organized-websites-rapidly-with-960-grid/ http://layouts.ironmyers.com/ http://css-tricks.com/all-about-floats/ http://www.quirksmode.org/css/clearing.html

  • CSS Goodies

    Websites worth a visit, CSS goodies to explore. http://www.colorzilla.com/gradient-editor/ http://css3gen.com/ http://css3menu.com/ http://css-tricks.com http://css-tricks.com/examples/AnythingSlider/ http://css-tricks.com/downloads/ http://bit.ly/sG04Eo http://www.design.annagraphics.com/tutorials/tweaks.css http://www.design.annagraphics.com/tutorials/cssfixes.pdf 

  • | |

    Where is web DESIGN heading?

    With Windows 8/touch screens, iPads and cell phones becoming mainstream for web browsing, what should designers take into consideration when planning a new website layout? Start by understanding the user experience, and your potential viewer. What kind of content will the user be looking at? Will they be shopping, reading, viewing image galleries – and…

  • | | | |

    June 21, 2011 – WordPress Gallery Plug-ins

    There are many image gallery plug-ins for WordPress which provide a way of showing images in galleries and albums and use the version of the ‘lightbox’ overlay. NextGen Gallery by Alex Rabe – Download the NextGen Gallery plug in. (The current version needs PHP 5.2 to run) http://alexrabe.de/wordpress-plugins/nextgen-gallery/ Older versions can be downloaded which run…