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

Made with Slides.com