Wednesday, December 11, 2013

Be a professional web designer easily using bootstrap

5 comments

Introduction

twitter bootstrap tutorial
bootstrap logo
Are you a web developer and do have enough time to make your website nice and professional by using css3,jquery and others.If so bootstrap if for you.
Bootstrap is a web design framework by using this you can build your website without writing much code in css or javascript.All you need to just declare css class in your html.Thats it,rest of the design work will done by bootstrap css library.Mainly bootstrap is a collection of class for different use and with different style.
Bootstrap is responsible.Thats means you do not need to apply several css for desktop,table or phone.Just one css file is enough for handling multi platform issue.
For learning convention we divided whole tutorial into several section
  1. Download and include bootstrap 
  2. creating layout
  3. creating section and column
  4. typography
  5. working with box and table
  6. forms
  7. buttons
  8. icon
  9. navbar

Download and set up bootstrap

It was said before that bootstrap is noting but  some css and javascript build in library.Bootstrap javascript is complex so i personally use Jquery UI for javascript work.It is hundread time easier and faster than Bootstrap javascript library.
Go to http://getbootstrap.com/  and there have two option for you.Dowload bootstrap is only bootstrap css and js files no example or demos.If you want to download bootstrap with sample file then  click 
Add these three folder to your project folder.Now add bootstrap.min.css or bootstrap.css in your header as we link external css file.Notice both of them are same bootstrap.min.css is the minimize version of bootstrp.css. If you need any javascript in your bootstrap then add bootstrap.min.js as we link external .js file in webpage.Before that you have to include jquery library also.

Creating Layout of webpage

basic template

<!DOCTYPE html>
<html>   
<head>
    <title>Bootstrap 101 Template</title>   
  <meta name="viewport" content="width=device-width, initial-scale=1.0">     
<!-- Bootstrap -->    
 <link href="css/bootstrap.min.css" rel="stylesheet">
<!--if Internet explorer is less than 9 than two file are important for html5 and responsible layout.-->     <!--[if lt IE 9]>       
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>     
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-- >
  </head>
  <body>     
 <div class="alert alert-success">Congratulation You Successfully setup Bootsrap.</div>     
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     
<script src="https://code.jquery.com/jquery.js"></script>  
 <!-- Include all compiled plugins (below), or include individual files as needed -- >    
 <script src="js/bootstrap.min.js"></script>  
 </body>
</html>
bootstrap layout setup
if you include everything correctly you see exactly this in your browser
Explanation: To ensure proper rendering and touch zooming, we added the viewport meta tag.After that,if browser is IE and its version is less than 9 then we need another two extra js file for html5 and responsible layout suppport.At the end of body we add jquery libray and bootstrap js library.Thats all. Note if you work only css then no need to add javascript library.

Column Layout

You may already familiar with two column or three column layout website.Bootstrap has same facility but more than that.By default bootstrap  is responsive.If your build three column layout web page in bootstrap and browser windows size is smaller( like in table) then it collapse into one or two column, baseed on client browser size. bootstrap use 12 column grid system layout.That means it consider whole browser window 12 column (similar to table column).Each and every device(like phone,table,desktop) browser width consider 12 column.
Max container width(browser with) in LED or LCD monitor is 1170px,Older computer monitor 970px,table 750px,mobile less than 750px.
One column equal to 95px in LED - LCD ,78px in old desktop monitor,60px in tablet. Now suppose we are building webpage for tablet specific.we need 200px similar left sidebar and 500px similar  main body.we can distribute it to 3 column and 9 column respectively.After that,If we browser this website in LED or other monitor than it still remain same two column layout and size of each column expand according to current device.But if we browse same webpage in mobile phone which width is smaller than tablet than two column layout does not exist and it converted to one column.Each column become an individual row.

Layout related Class in Bootstrap

whole webpage have to contain withing container class.As said before each row have 12 column,you can add as many column you want and also can add nested column.This is 100% same to table in html.Think you are creating a table based layout.Then it is much more easier for you to follow rest of the article.
.container is main wrapper class
.row is creating a new row
.col-lg-* it means column large(Lcd,Led) compatible like .col-lg-4 means four coloumn 
.col-md-*  means column medium(older PC monitor)
.col-sm-*  means small device (tablet)
.col-xs-*  extra small device(mobile)
Every class declare column but their name is different based on platform you like to work. View the source of previous Live example source and you can find there use of above classes. Move columns to the right using .col-(md,lg,sm,xs)-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Friday, November 8, 2013

Html5 form video tutorial

1 comments

This is a series of video tutorial which will help you to use new html5 form tags and its new attributes.After watching all of this video you can create a dynamic from with html build in validation and so on.There are some jquery with from which makes form truely awsome.

Download Now

Download instruction:
After click the download button.It will goes to a file sharing website and from there click download button with file size.
 

Copyright 2010 All Rights Reserved E-tech institute of IT.