Friday, April 26, 2013

Make Amazing Website Design with Twitter Bootstrap

Create amazing website with Twitter Bootstrap. Now its very easy to design your website using HTML, CSS, JAVASCRIPT.

 

Website design is main part of website development. It is always tedious to use CSS and JAVASCRIPT in your website. So Twitter Bootstrap make web site design very easy. Twitter Bootstrap provide the beautiful css and javascript code from twitter experts. So you can just use this for make your website in few steps.
  
Twitter Bootstrap is a framework provide a powerful front end GUI  for web developer. 
 
So Lets starts some beginner programming with twitter bootstrap..............

First download twitter bootstrap package from http://twitter.github.io/bootstrap/assets/bootstrap.zip 
then extract package into your destination folder after extracting the bootstrap.zip you get the following file structure. It contain some CSS,JAVASCRIPT files.

bootstrap/
  ├── css/
  │── js/

  └── img/ 

 Browser Support : It working perfectly with all browser like IE, Firefox and Safari etc...

Getting started with some basic...
Just include  below line in your head tag of html
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">

The above file contain some div classes and id so apply this to your html using <div class=" "> or <div id=" ">

The basic program look like below,

 <!DOCTYPE html>
</html>
    <head>
        <title>Twitter Bootstrap Tutorial</title>
              <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
             Hello world
    </body>
</html>


Suppose your above html file is abc.html then keep the css folder near to the abc.html. After doing this the directory structure look like this


Twitter Bootstrap Directory structure


So now start with some Twitter Bootstrap CSS and JAVASCRIPT..

 
<!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" media="screen">
      </head>
      <body>
             <h1>Hello, world!</h1>
             <script src="http://code.jquery.com/jquery.js"></script>
             <script src="js/bootstrap.min.js"></script>
       </body>
</html>


The output in your browser look like below,

Sample Twitter Bootstrap Program Output

 

So now you can start the web designing with Twitter bootstrap....
You can design a powerful login form just like below using twitter bootstrap, 

Twitter Boostrap Form

The sample Twitter Bootstrap look like below

Twitter Boostrap Button Generator

You can generate similar buttons on Twitter bootstrap button generator.. Twitter bootstrap Button generator

Twitter Bootstrap Button Generator

You can generate your button online visit url http://www.plugolabs.com/twitter-bootstrap-button-generator/ then the button generator will generate code copy that code into the form tag of your html you will get amazing button with this.

You can find all the tutorial of Twitter bootstrap with the source code below
http://www.w3resource.com/twitter-bootstrap/twitter-bootstrap.zip 

You can also find the basic video tutorial @ Twitter Bootstrap on https://www.youtube.com/watch?v=BVFQc0iGFwU 


The similar library by Yahoo also available....
The Yahoo! User Interface Library (YUI) : This i an open-source JavaScript library for building richly interactive web applications. YUI contain Ajax, DHTML and DOM scripting and some CSS. So you can use this to make your website more creative
You can find more information about YUI on url http://yuilibrary.com/   
  
Best luck... Go and make your world colorful with Twitter Bootstrap... 



 

4 comments: