| |

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

  • |

    WordPress SEO

    A good way to help optimizing a WordPress website is to use the “All-in-One SEO Pack” plugin. When activated it adds several fields to the bottom of the posts or page interface, where one can add post/page-specific details, which will override…

  • |

    Multi-Media Display

    Website design is no longer a “What You See Is What You Get” situation. What YOU see can differ considerably from what someone else sees. It’s very easy to be visually/mentally seduced into believing that your design is consistent across the web. However, with your pages being opened on anything from wide screen monitors, to small…

  • 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