Here the result:
And finally the code:
<!-- (0) Create an empty HTML page -->
<!DOCTYPE html>
<html>
<!-- (1) Some basic header info -->
<head>
<meta charset="utf-8">
<title>Basic web site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- (2) Import the provided CSS file -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- (3) Import jQuery and Bootstrap -->
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- (5) At last add some JavaScript (jQuery) here to fill the page with life -->
<script>
$(document).ready(function(){
$("#header-home").click(function() {
$('div.my-content').html('<p>Home ...</p>');
});
$("#header-contact").click(function() {
$('div.my-content').html('<p>Contact ...</p>');
});
$("#header-about").click(function() {
$('div.my-content').html('<p>About ...</p>');
});
$("#header-contact").click(function() {
$('div.my-content').html('<p>Contact ...</p>');
});
});
</script>
<!-- (4) Bootstrap decorated HTML here -->
<div id="container">
<!-- A navigation header bar which is fixed to the top -->
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#"> Basic web site</a>
<ul id="header" class="nav">
<li class="active"><a href="#" id="header-home">Home</a></li>
<li><a href="#about" id="header-about">About</a></li>
<li><a href="#contact" id="header-contact">Contact</a></li>
</ul>
</div>
</div>
<!-- (4.1) A simple web site header -->
<div class="hero-unit">
<h1>Basic web site</h1>
<p>This site explains the Twitter Bootstrap a little bit.</p>
<p>
</p>
</div>
<!-- (4.2) A HTML grid with 12 columns, in this case we -->
<div class="row">
<!-- 4 columns are used for the left hand side navigation bar -->
<div class="span4 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#Marker1"><i class="icon-chevron-right"></i> Marker 1</a></li>
<li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 2</a></li>
<li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 3</a></li>
</ul>
</div>
<!-- (4.3) 8 columns are used for the right hand side content area -->
<div class="span8">
<!-- (4.4) The content area which can be decorated by own css -->
<div class="my-content">
<p> Home ...</p>
</div>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment