Fun with Bootstrap
Fun with Bootstrap
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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.
Bootstrap makes available a number of very useful components, which I’ve lifted from the site for your benefit:
List of components
- Button groups
- Button dropdowns
- Navigational tabs, pills, and lists
- Page headers and hero unit
- Progress bars
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.
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.
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!
Published at DZone with permission of Rob Sanders , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.