Bootstrap – at a glance

What is Bootstrap?

Bootstrap is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

Basic Overview :

Customize : http://lab.roymj.co.in/bootstrap/docs/customize.html

Using this we can customize how the UI should look like. Each and every styling can be altered to suit our design idea. After editing various values in the fields, we can download a zip file( js,css & images) which we can include in our website and proceed with the development.

Examples : http://lab.roymj.co.in/bootstrap/docs/getting-started.html#examples

Here there are 8 re-usable html pages(using bootstrap) which we can simply re-use to our application. This includes slideshow, navigation menus, sign in box, responsive layout, fixed footers and similar. Everything can be added to our application.

Usage (HTML/CSS) : http://lab.roymj.co.in/bootstrap/docs/base-css.html

This demonstrates basic usage of html and css elements of bootstrap library which we have included(pretty much like jquerymobile).

Gives insight into working with pre-defined styles of bootstrap like :

  • Fonts
  • Layouts – Tables & customizing tables.
  • Forms & form fields which include validation messages all of which are pre-built.
  • Buttons
  • Images
  • Icons provided by http://glyphicons.com/

Scaffolding : http://lab.roymj.co.in/bootstrap/docs/scaffolding.html

This consist of basic page layout and grid- designing(responsive) purely using html and css classes(pre-defined in bootstrap library). Various different examples include :

  • Grid System(2,4, n columns)
  • Fluid Grid – Responsive (2,4 , n columns)
  • Layouts
  • Fluid layouts

Components (Reusable) : http://lab.roymj.co.in/bootstrap/docs/components.html

Components are various elements of a html page which can be done by using the bootstrap library. Instead of using external library or plugins, most of these are already pre-loaded in bootstrap. Sample elements would be :

  • Drop Down Menus
  • Buttons & Group of buttons
  • Drop down using buttons
  • Navigation Menus
  • Navigation Bars(this would be a horizontal menu like a bar)
  • Breadcrumbs
  • Pagination(various states & sizes)
  • Labels & Badges(can be used for displaying messages, notification purpose)
  • Thumbnails
  • Alerts (validation messages)
  • Progress bars
  • Miscellaneous stuffs (float, icons, clears etc )

Extend : http://lab.roymj.co.in/bootstrap/docs/extend.html

We can extend the bootstrap by using “LESS”(a dynamic stylesheet language, style sheets with extension .less).

Reference : http://www.wordsbyf.at/2012/03/08/why-less/

Mustache Template Engine : http://lab.roymj.co.in/bootstrap/docs/templates/

About Mustache : Mustache is a language independent, logicless templating engine which, in the context of a JavaScript / HTML5 style web application, means you can use it to separate your logic (javascript code) from your view (HTML Markup). Mustache comes in a variety of flavours; this article will be focusing on the JavaScript implementation.

Userful Links :

I have started working with backbone as well and would write up a detailed one for backbone preferably with some demos.

Cheers.

4 Comments on "Bootstrap – at a glance"


  1. I’m now not sure where you’re getting your info, but good topic. I needs to spend some time learning more or working out more. Thank you for magnificent information I was looking for this information for my mission.

    Reply

  2. Thanks for any other magnificent article. The place else could anybody get that kind of information in such an ideal means of writing? I’ve a presentation next week, and I am on the search for such info.

    Reply

  3. Woah this weblog is magnificent i love reading your posts. Stay up the good paintings! You recognize, lots of people are searching round for this information, you can help them greatly.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *