Tuesday 28 May 2013

Twitter Bootstrap tutorial 01 (twitter boostrap base template)

PURPOSE
show the code of a basic twitter bootstrap html template

WHAT YOU NEED TO KNOW

  • in the template header include bootstrap.css/bootstrap.js and jquery.js
  • you need to put the doctype at the beginning becoz twitter bootstrap uses html5
  • if you want to make it responsive meaning(flexibly changing layout according to device) you can include the bootstrap-responsive.css in the header.

CODE
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  >
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"  >
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html


TEST
you can test responsiveness with the next tutorial.

No comments:

Post a Comment