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 :
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.
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 :
- Layouts – Tables & customizing tables.
- Forms & form fields which include validation messages all of which are pre-built.
- 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)
- 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)
- Pagination(various states & sizes)
- Labels & Badges(can be used for displaying messages, notification purpose)
- Alerts (validation messages)
- Progress bars
- Miscellaneous stuffs (float, icons, clears etc )
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/
Userful Links :
- http://www.jonnyreeves.co.uk/2012/using-external-templates-with-mustache-js-and-jquery/ (mustache & jquery)
- https://github.com/bobthecow/mustache.php(mustache & PHP)
- http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ (sample for creating html templates using mustache)
- Rendering html using json : http://mustache.github.io/#demo
I have started working with backbone as well and would write up a detailed one for backbone preferably with some demos.
June 15, 2013 / roymj88 / 4
- Google API
- Google Maps
- Hybrid Apps
- Mobile Application Development
- mod rewrite
- Push Notification
- Random Quotes
- Source Code
- Web Development