Botões
Formatação de botões
Os botões são feitos utilizando o padrão do Bootstrap. É muito simples de implementar.
Botões grandes, médios e pequenos
Bata inserir a classe .btn-lg, .btn-sm ou .btn-xs para modificar o tamanho do seu botão.
Botões blocados
Às vezes podemos usamos botões que ocupem todo o espaço disponível, para tanto use a classe .btn-block. Isso aplicará um display: block; ao elemento.
Desabilitando botões
Se os botões forem feitos com input, basta inserir o atributo disabled que os browsers cuidarão do resto. Se o botõa foi feito usando links, use a classe .disabled. Esta classe além de visual, remove a ação do link.
Botão como link
Botões com ícones
Se você adicionar classes de ícones nos botões, eles já aparecerão no lugar correto, dispensando a inserção de elementos vazios para fazer os ícones. Veja exemplos abaixo.
Botões com dropdown
Botões que acompanham algum dropdown precisam tem os atributos abaixo:
| Atributo | Valor |
|---|---|
| class | dropdown-toggle |
| data-toggle | dropdown |
Setinhas dentro de dropdown
Fizemos uma melhoria no Locaweb Style dispensando uso da seta via elemento com classe caret. As setas são inseridas diretamente no :before do elemento, sendo assim não há a necessidade de ter o html
caso contrário o elemento ficará com 2 setas, conforme no exemplo abaixo:
Juntamente com o código do dropdown, que é feito aqui com UL.
Lembre-se que é necessário que eles estejam dentro de um elemento chamado .btn-group para que a seta de dropdown fique "acoplado" ao botão.
Um outro exemplo seria o que segue abaixo, sem a seta:
Grupo de botões
Os grupos de botões são botões dentro de um elemento .btn-group.
Ativação/Desativação
Adicionamos uma chave de ativação/desativação no grupo de botões, para usá-la adicione a classe .activation-toggle no mesmo elemento com .btn-group.
No exemplo abaixo, o primeiro botão já possui a classe .active isto é um opcional.