02 November 2014

Begin with bootstrap

Here i have started twitter bootstrap web application development.In here i will talk basic stuff to build your own responsive web application.First thing first.You need to know what is twitter bootstrap.It is world famous responsive web development framework.First you have to download bootstrap from this link. [http://getbootstrap.com/customize/?id=ecab5932bfb5dc96278d].First unzip the file and Then you need to add index.html file to home folder.

You can use template html file to index.html file.So this is the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">  
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="" class="btn" >Hello World</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


Then here on words i will talk what are the components one by one.So first look at how to add button and change color and size of button.There are free-defined css type for buttons.

Buttons

There are seven types of buttons.

  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>

When we need to change size of button this also have free-defined sizes.





No comments:

Post a Comment