Botões
Formatação de botões
Os botões são feitos utilizando o padrão do Bootstrap. É muito simples de implementar. Basta fazer um link ou input submit e inserir a classe btn. Dependendo da utilidade do botão, insira as classes descritas no Bootstrap:
| Botão | Classe | Descrição |
|---|---|---|
btn disabled |
Quando tem a classe DISABLED, desabilitamos o evento de clique. | |
btn |
Cinza padrão | |
btn |
Cinza padrão | |
btn btn-primary |
Botões primários | |
btn btn-success ico-plus |
Botões primários | |
btn btn-info |
Usado como uma alternativa para os botões default | |
btn btn-success |
Indica uma ação de sucesso ou positiva | |
btn btn-warning |
Indica que o usuário deve ter cuidado com essa ação | |
btn btn-danger |
Indica perigo, ação negativa | |
btn btn-inverse |
Botão preto, alternativo, com semântica e significado neutro | |
btn btn-primary ico-right-open-2 icoPosRight btn-large |
Botões com ícones do lado direito. Basta inserir a classe icoPosRight | |
btn btn-primary ico-right-open-2 icoPosRight btn-large |
Botões com ícones do lado direito. Basta inserir a classe icoPosRight | |
|
|
Atríbutos: class="btn btn-danger dropdown-toggle" data-toggle="dropdown" |
Opções agrupadas, mas ativados no próprio botão |
btn btn-primary ico-user-add |
Botão com ícone, mas sem texto. |
Agrupando botões
Você pode utilizar os botões dentro de uma caixa, que é padrão nas modais e em diversos lugares dos sistemas.
<div class="boxActions"> <input class="btn btn-primary" name="commit" type="submit" value="Atualizar Conta"> <a href="#" class="btn" data-dismiss="modal">Cancelar</a> </div>