Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Fun with Bootstrap

DZone's Guide to

Fun with Bootstrap

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

Recently, I was directed towards a new open source web front end framework called Bootstrap.  The current version (as if this writing) is version 2.3.2, which you can download from here.

The aim of this initiative is to create an intuitive, abstract combination of JavaScript and CSS to allow designers and developers to create responsive user interfaces which can render seamlessly across a range of different consumer devices, such as desktop, mobile and tablet devices.

Bootstrap accomplishes this seemingly impossible task by leveraging some of the more advanced aspects of HTML5 as well as combining an intelligent set of CSS classes which extend HTML in a very logical and well ordered way.

Be more specific

Fair enough.  Many frameworks have claimed to extend hypertext mark-up to create some ingenious new toolkit or framework, but very few succeed. What makes Bootstrap any different?

For one thing, it appears to have been built from the code up.  The CSS classes extend basic HTML elementsin a very logical – and reusable – fashion.  Bootstrap uses a sequence of  live grids to orient content depending on your requirements.

HTML mark-up can also be decorated with classes to reorder or re-orient content depending on the type of device which is requesting HTML content (referred to as the ‘Responsive’ utility classes).  For more on this, check out the responsive design layouts section.

Components

Bootstrap makes available a number of very useful components, which I’ve lifted from the site for your benefit:

List of components

Together, the Components and JavaScript plugins sections provide the following interface elements:

  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Aside from the various examples of scaffolding, in addition to the copious amount of documentation explaining the new CSS classes, there’s also a site dedicated to additional supporting documentation which can be located over here.

Examples

On the weekend, I decided to take Bootstrap for a spin.  Using the example scaffolding as a starting point, I created a number of static HTML pages and reused the JavaScript and CSS includes. 

This required a fair amount of hand editing, made far easier by the use of Visual Studio (2010) as a HTML editor, as the intellisense provided easy access to CSS class definitions and so forth.

Aussie Wine Sales

My example site was posted last night and if you’d like to check out my initial handiwork, navigate to Aussie Wine Sales.

More to come

This article is just an introduction.  When I have a little bit more time, I’ll write a follow up article which goes into a bit more detail about my experiences in building the Aussie Wine Sales website, calling out specifically concepts which were very intuitive as well as some of the (occasional) drawbacks.

I’ll leave you with one final thought – Bootstrap actually made the experience of hand coding HTML bearable.. possibly even, dare I say it, fun!

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:

Published at DZone with permission of Rob Sanders, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}