Sunday, April 7, 2013

Review Twitter Bootstrap

Using: For this tutorial I am using Netbean IDE , windows xp plateform, php as server side language.
Pre-req: You should know about html, java script and css.

Preview my work here

I was looking into twitter bootstrap so here is my findings.


A) Structure of application:
    All you need is download , extract and and put the folders into your application. It has js, css and img folders. you can use it with any server side language. For demonstration I am using php. So after putting the files my project lookes like below:



B) Structure of web page:
    For creating a web page, we have 2 options
    1) Use Table structure/layout to display your contents.
     2) Use Divs  to show contents , then you need to concentrate on css to set thes div on required positions,

  Twitter Bootstrap solves layout issues. They provide css of div to divid your pages into rows and columns. So we dont need to worry about  positions of the Divs to show our contents.

   <div class="row">
        <div class="span1">contents 1</div>
        <div class="span1">contents 2</div>
 </div>
Column span levels are from 1 to 12.


Responsive Bootstrap: They have css/style created for tabs, mobiles and desktop. So your structure can easily adjust for device and desktop. All you need is to include a meta tag and css file

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Their recommendation: Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.   (Reference)

So I  made a sample page with rows and colums on desktopn this lookes like

On mobile phone it lookes like below:



C) Widgets
     We have list of wigets below. These can are adjustable on both devices and destops. So that means you can use intratcive and cool wedgits on your mobile applications.

  1.  Button groups 
  2.  Button dropdowns 
  3.  Navigational tabs, pills, and lists 
  4.  Navbar 
  5.  Labels 
  6.  Badges 
  7.  Page headers and hero unit 
  8.  Thumbnails 
  9.  Alerts 
  10.  Progress bars 
  11.  Modals 
  12.  Dropdowns 
  13.  Tooltips 
  14.  Popovers 
  15.  Accordion 
  16.  Carousel 
  17.  Typeahead 


So here is a view on desktop
and how the look on mobile device






D) Javascript
    Here we have

  1. Event handling (like we do in web app i.e clicks, selections, display, inrection etc
  2. Transitions 
  3. Custom popup called Modals 
  4. Tooltips
  5. Carousel


E) Style
     There are amazing style sheets available that workes for mobiles, tabs and destop. You can create beautiful headings, labels, buttons, meues , carosels, thumnails etc. It provides redability on mobile devices.

Reference

F) Customization

   We can easily customize our applications. And with it we can create application for both mobile and dektops. It will definitly decrease the development cost. Because I have noticed that web developer spent most of the time in adjectment of contents position on page and we put extra efforts to make our web pages compatible with mobile browsers. In twitter bootsrap javascript is very usefull, provides all kind of event handling that we need in a web application.