Estilos de botão
Bootstrap oferece sete estilos de botões:
Para alcançar os estilos de botão acima, Bootstrap tem as seguintes classes:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
O exemplo a seguir mostra o código para os diferentes estilos de botão:
Exemplo
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Tente você mesmo " As classes de botão pode ser usado em um <a> , <button> , ou <input> elemento:
Exemplo
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> Tente você mesmo " Por que nós colocamos um # na href atributo do link?
Uma vez que não têm qualquer página para vinculá-lo a, e nós não queremos para obter uma "404" mensagem, nós colocamos # como o link. Na vida real, ele deve, naturalmente, sido um verdadeiro URL para a página de "Busca".
tamanhos de botão
Bootstrap oferece quatro tamanhos do botão:
As classes que definem os tamanhos diferentes são:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
O exemplo a seguir mostra o código para diferentes tamanhos de botão:
Exemplo
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Tente você mesmo " Bloco botões de nível
Um botão de nível de bloco se estende por toda a largura do elemento pai.
Adicionar classe .btn-block para criar um botão de nível de bloco:
Exemplo
<button type="button" class="btn btn-primary btn-block">Button 1</button> Tente você mesmo " Ativo / pessoas com mobilidade Botões
Um botão pode ser definido como um estado desativado (unclickable) ativa (aparece pressionado) ou:
A classe .active faz um botão aparece pressionado, ea classe .disabled faz um botão unclickable:
Exemplo
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
Completa Bootstrap Botão de Referência
Para uma referência completa de todas as classes de botão, ir para a nossa completa Bootstrap Botão de Referência .