Simple Responsive Website Using Bootstrap
Just found
good tutorial to develop a responsive website using Bootstrap. Just add bootstrap libraries amd use some class names for div elements from css and the website will automatically resize with the change in resolution which makes your website accessible via mobile devices as well as desktop browsers.
Libraries: bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery.min.js.
Class names: container, row-fluid, span1,span2,...,span12,offset1,...
Just follow the
Template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
</head>
<body>
<div class="
container">
<div class="
row-fluid">
<div class="
span6">
...content
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Try this small Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
<p>A man who was completely innocent, offered himself as a sacrifice for the good of others, including his enemies, and became the ransom of the world. It was a perfect act. - <b>Mahatma Gandhi</b></p>
</div>
<div class="span6">
<p>Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. -<b>Swami Vivekananda</b></p>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
