Develop quickly with Twitter Bootstrap
The Twitter Boostrap framework has recently been bumped up to version 2.0 and there are a lot of improvements to be found in this new version. The Twitter Bootstrap provides easy and responsive HTML, CSS and Javascript to give developers a great UI and an easy development experience.
Scaffolding
Bootstrap provides various elements for developers to use, ranging from scaffolding to jQuery components. The scaffolding gives developers an easy way to build complex layouts based on a 12-grid system. This is all based on a system of various div tags with classes that associate the width of said div. For example, if you want a 3-column layout in a 12-column grid system, you could use three div tags with the class span4.
Example scaffolding markup
Even though some may frown upon the extra markup that this scaffolding produces, there are many advantages. Since it is all based on the grid system, spacing will be consistent throughout the site. Since all of the classes are already built, it also allows for easy development and/or rapid prototyping. Finally, building a site using the scaffolding allows developers to take advantage of the built-in, responsive design.
Responsive Design
One of the biggest updates that came with version 2.0 was the responsive design support. This means that one site can be optimized for various widths and devices. Out of the box, Bootstrap supports five different displays, ranging from smartphones and tablets to wide desktop computers. This greatly reduces development time when you need to have a website optimized for multiple devices. Even if you want to use advanced JavaScript elements like a carousel, modals, tooltips and more, the responsive design still flows through all devices.
JavaScript Components
The Twitter Bootstrap utilizes jQuery for various built in plugins. These plugins range from the simple to the complex and include:
Modal window with a popover
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
Many of these components have multiple variations and options. For example, the buttons can be used as a toggle, can display a state (such as loading), or even can be used as check boxes and radios. Most of these components also support Bootstrap’s built-in, responsive design out of the box. The carousel will re-size itself whenever there is a change in the browser’s width, or when loaded on a different device. This gives all users the ability to use the carousel and see it optimized for them no matter what device they are using.
Much More
The Twitter Bootstrap offers many more components that give developers a great foundation to build a unique website or the next big web app. You can view Bootstrap and see all of the examples on their GitHub page. Since Twitter is hosting this on their GitHub page, it is constantly being updated and they also allow you to fork the code to tweak and create unique variations. There is also an unofficial Tumblr page that showcases many projects and sites built with Twitter Bootstrap.