Olá a todos! Acabei de criar um template de página básica HTML5 responsivo com cabeçalho fixo, para me ajudar a acertar a codificação quando eu começar um novo projeto.
Ele contém Twitter Bootstrap e jQuery por padrão, bem como o incrível catálogo de temas Bootswatch e Bootstrap-RTL (para desenvolvimento em árabe, hebraico, farsi e outros idiomas RTL).
Eu adoraria tornar isso o mais útil possível, então, por favor, não hesite em comentar.
Espero que você ache isso útil.
<!doctype html>
<!--
To change themes, choose a theme name on line 22 and paste it on line 23, replacing the one-before-last URL segment.
When changing themes you may need to change the top margin of the body on line 32
To make this template rtl change the following:
1. Uncomment stylesheet on line 25
2. On line 62 change class from navbar-left to navbar-right
-->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"/>
<!-- Bootswatch Themes: amelia, cerulean, cosmo, custom, cyborg, darkly, flatly, journal, lumen, paper, readable, sandstone, simplex, slate, spacelab, superhero, united, yeti -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.2.0+2/flatly/bootstrap.min.css"/>
<!--link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css"/-->
<title></title>
</head>
<body style="margin:60px 0 0 0;">
<!-- Fixed navbar -->
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<nav class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</header>
<section class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor in felis a pretium. Pellentesque malesuada enim eu libero sagittis egestas. Morbi dignissim ligula vel urna porttitor, eu facilisis lacus lobortis. Integer rutrum commodo leo, id vehicula justo interdum vitae. Curabitur eu tristique lacus. Vivamus elementum, turpis ut pellentesque dapibus, tellus tellus ornare dolor, sed bibendum enim ex et quam. Phasellus rhoncus ante at tincidunt vulputate. Nam ac ornare neque, id iaculis orci. Duis feugiat consequat viverra. Suspendisse nec hendrerit libero. Morbi blandit augue quis orci aliquam placerat. Quisque est nisi, eleifend quis facilisis id, rutrum ut purus. Morbi rutrum interdum volutpat. Pellentesque ac ultrices justo.Fusce commodo lectus et facilisis imperdiet. Etiam ultrices vitae ante quis mollis. Vivamus viverra ligula suscipit volutpat commodo. Vivamus felis nulla, vulputate ut vehicula quis, pharetra ut nibh. Fusce nec mollis urna, in vehicula diam. Quisque venenatis blandit mi non consectetur. Donec aliquam enim nisi, lacinia vehicula neque consectetur vel. Ut rhoncus nibh at tellus aliquet lacinia eget sed odio. Mauris a fermentum nulla, sit amet elementum lacus. In a turpis eros. Nunc et felis et magna aliquam maximus a non sapien. Aenean mauris risus, fermentum et porttitor nec, elementum id libero. Donec nibh nulla, faucibus nec maximus sit amet, ultrices nec nibh.Nullam interdum est vel nulla iaculis, id ultrices dui volutpat. Aenean sed elementum libero, id dignissim tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec finibus ut nisl sit amet auctor. Aenean nec finibus tortor, eget hendrerit felis. Aenean in iaculis nisl. Nulla eu nunc venenatis, egestas enim a, tristique est.Curabitur congue ultricies eros et malesuada. Aenean consectetur lobortis tempor. Mauris odio turpis, pretium id porttitor et, sagittis id enim. Phasellus bibendum ligula id nibh mattis, sed interdum diam accumsan. Curabitur lobortis dolor porttitor, rutrum turpis quis, posuere nibh. Donec et dolor semper, tristique augue vel, aliquet urna. Morbi odio.
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
</body>
</html>