BOOTSTRAP 3
Framework - Front End
getbootstrap.com
Keven Jesus
Encantador de usuários
github.com/kevenjesus
facebook.com/kevenjesus
Botões
.btn
Componente base
.btn-sm
Modificador de componente
.btn-primary
Estilo do componente
.btn-xs | btn-lg
Botões
Grupo de botões
<div class="btn-group">
<button class="btn btn-default">Botão 01</button>
<button class="btn btn-default">Botão 02</button>
<button class="btn btn-default">Botão 03</button>
</div><div class="btn-toolbar">
<!-- vários grupo de botões -->
</div>.btn-group-xs | .btn-group-sm | .btn-group-lg
Componente modificador
Toolbar
Botões
Caixa de menu em botões
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Abrir caixa
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><div class="btn-group dropup">
<!-- código do botão aqui -->
</div>Caixa de menu por cima
Botões
Carregamento (loading) para botões
<button id="meuBotao" data-loading-text="Carregando..." class="btn btn-primary">
Carregar agpra
</button>
<script>
$('#meuBotao').on('click', function () {
var $btn = $(this).button('loading')
setTImeout(function(){
$btn.button('reset');
},1000);
});
</script>Checkbox / radiobox
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio 2
</label>
</div>Obrigado \o/
Dúvidas ? consulte nosso grupo
facebook.com/groups/twitter.bootstrap.brasil/
Receba dicas sobre bootstrap
bootstraptotal.com.br/informativo