Boilerplate
Código inicial.
Template básico
Utilize este código para iniciar seu projeto. Aqui você tem a estrutura básica para fazer o Locaweb Style funcionar perfeitamente:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Seu produto</title>
<meta charset="utf-8">
<!-- Isso é necessário para funcionar a versão mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//assets.locaweb.com.br/locastyle/2.0.6/stylesheets/locastyle.css">
</head>
<body>
<!-- Header principal -->
<header class="header" role="banner">
<div class="container">
<span class="control-menu visible-xs ico-menu-2"></span>
<span class="control-sidebar visible-xs ico-list"></span>
<h1 class="project-name"><a href="#">Nome do Sistema</a></h1>
<a href="#" class="help-suggestions ico-question hidden-xs">Ajuda e Sugestões</a>
<div class="dropdown hidden-xs">
<a href="#" data-toggle="dropdown" class="title-dropdown">emkt2013</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#" role="menuitem">Option 1</a></li>
<li><a href="#" role="menuitem">Option 2</a></li>
<li><a href="#" role="menuitem">Option 3</a></li>
</ul>
</div>
</div>
</header>
<!-- Menu -->
<div class="nav-content">
<menu class="menu">
<ul class="container">
<li><a href="#" class="active ico-home" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem">Lista de contatos</a></li>
<li><a href="#" role="menuitem">Mensagens</a>
<ul>
<li><a href="#">Enviar</a></li>
<li><a href="#">Criar</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Relatórios</a></li>
</ul>
</li>
<li><a href="#" role="menuitem">Campanhas</a></li>
<li><a href="#" role="menuitem">Templates</a></li>
<li><a href="#" role="menuitem">Relatórios</a></li>
<li><a href="#" role="menuitem">Configurações</a></li>
</ul>
</menu>
<h2 class="title-sep visible-xs">Mais</h2>
<ul class="nav-mob-list visible-xs">
<li><a href="#" class="ico-help-circle">Ajuda e sugestões</a></li>
</ul>
</div>
<!-- Aqui começa a parte de conteúdo dividido por colunas -->
<main class="main">
<div class="container">
<div class="row">
<div class="col-md-9 content" role="main">
Coluna da esquerda com o conteúdo.
</div>
<aside class="col-md-3 sidebar" role="complementary">
Sidebar
</aside>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-menu">
<nav class="container">
<h2 class="title-footer">suporte e ajuda</h2>
<ul class="no-liststyle">
<li><a href="#" class="bg-customer-support"><span class="visible-lg">Atendimento</span></a></li>
<li><a href="#" class="bg-my-tickets"><span class="visible-lg">Meus Chamados</span></a></li>
<li><a href="#" class="bg-help-desk"><span class="visible-lg">Central de Ajuda (Wiki)</span></a></li>
<li><a href="#" class="bg-statusblog"><span class="visible-lg">Statusblog</span></a></li>
</ul>
</nav>
</div>
<div class="container footer-info">
<span class="last-access ico-screen"><strong>Último acesso: </strong>7/8/2011 22:35:49</span>
<div class="set-ip"><span class="set-ip"><strong>IP:</strong> 201.87.65.217</span></div>
<p class="copy-right">Copyright © 1997-2011 Locaweb Serviços de Internet S/A.</p>
</div>
</footer>
<!-- Scripts - Atente-se na ordem das chamadas -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="//assets.locaweb.com.br/locastyle/2.0.6/javascripts/locastyle.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>