| |

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

  • |

    HTML5 July Meeting

    HTML 5 How does HTML5 differ from HTML4, and what is important to know. Is it ready yet? http://www.ishtml5readyyet.com/ HTML5 tries to address the deficiencies of HTML 4 The new and changed codes provides better support for current web requirements, reducing the need for plugins. User Application support still varies, but what can be implemented…

  • | |

    WordPress Child Themes

    WordPress uses “themes” to display the content of the database in a user-friendly and attractive interface in the browser. Deciding which theme to use may be determined by the site requirements, some themes have additional features that may be required – or not. Don’t use a theme with all the Bells & Whistles if you don’t need those…

  • |

    December 2012

    Thoughts about the effects of color – How does color affects your target audience. (Know your audience!) There are many factors that contributes to how someone perceives color. Taking color choices into consideration when developing a web design/color sceme can contribute to succuss – or failure. Colors have different meaning in different cultures and religions, so…

  • |

    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…