BOOTSTRAP 3
Framework - Front End
getbootstrap.com
Keven Jesus
Encantador de usuários
github.com/kevenjesus
facebook.com/kevenjesus
Nav
Abas
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>Abas Pills
.nav-pills
Abas na vertical
.nav-stacked
Justificado
.nav-justified
Abas com dropdown
<ul class="nav nav-pills">
<li role="presentation" class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
</ul>
</li>
</ul>Navbar
Posicionando logo (Brand)
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="bootstrap.gif" width="25" />
</a>
</div>
</div>
</nav>Adicionando formulário
<form action="#" class="navbar-form">
<input type="text" placeholder="Oi" class="form-control">
</form>Navbar
Posicionando na esquerda e na direita
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="bootstrap.gif" width="25" />
</a>
</div>
<div class="navbar-right">
<span class="navbar-text">Estou na direita</span>
</div>
</div>
</nav>Botões, links e textos
<button class="btn btn-default navbar-btn">Meu botão</button>
<a href="#" class="navbar-link">Clica-me</a>
<span class="navbar-text"></span>Navbar
navbar fixo em baixo
Navbar fixo no topo
.navbar-fixed-top
.navbar-fixed-bottom
Navbar
Invertendo as cores
.navbar-inverse
Customizando seus próprios navbar
.navbar-outro{
background-color:orange;
color:#fff;
}Obrigado \o/
Dúvidas ? consulte nosso grupo
facebook.com/groups/twitter.bootstrap.brasil/
Receba dicas sobre bootstrap
bootstraptotal.com.br/informativo