Create Fixed Layout
Description
The following code shows how to create Fixed Layout.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
body {<!--from w ww. jav a2 s. c o m-->
padding-top: 70px;
}
</style>
</head>
<body>
<nav id="myNavbar"
class="navbar navbar-default navbar-inverse navbar-fixed-top"
role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tutorial</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.java2s.com"
target="_blank">Home</a></li>
<li><a href="http://www.java2s.com"
target="_blank">About</a></li>
<li><a href="http://www.java2s.com"
target="_blank">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
facilisis leo at faucibus adipiscing. Duis auctor dictum erat
hendrerit dapibus.</p>
<p>
<a href="http://www.java2s.com" target="_blank"
class="btn btn-success btn-lg">Get started today</a>
</p>
</div>
<div class="row">
<div class="col-xs-4">
<h2>HTML</h2>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
facilisis leo at faucibus adipiscing. Duis auctor dictum erat
hendrerit dapibus.</p>
<p>
<a href="http://www.java2s.com/"
target="_blank" class="btn btn-success">Learn More »</a>
</p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
facilisis leo at faucibus adipiscing. Duis auctor dictum erat
hendrerit dapibus.</p>
<p>
<a href="http://www.java2s.com/"
target="_blank" class="btn btn-success">Learn More »</a>
</p>
</div>
<div class="col-xs-4">
<h2>Bootstrap</h2>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
facilisis leo at faucibus adipiscing. Duis auctor dictum erat
hendrerit dapibus.</p>
<p>
<a href="http://www.java2s.com/"
target="_blank" class="btn btn-success">Learn More »</a>
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>© Copyright 2013 Tutorial</p>
</footer>
</div>
</div>
</div>
</body>
</html>