Art Botoes Bootstrap

Título: Como utilizar botões no Bootstrap
Descrição: Neste artigo veremos como funcionam os botões no framework Boostrap.

Aprenderemos quais tags e classes devem ser utilizadas para se trabalhar com esse
componente.
Login: higormedeiro
Canal: Front-End
Guia: Bootstrap > Introdução
Valor: 70,00
Motivação
Os botões compreendem uma parte fundamental do Bootstrap e entender como
eles funcionam e como podemos defini-lo é essencial para os desenvolvedores que
utilizam o framework.
Etapa 1: Conhecendo o Botão no Bootstrap

O Bootstrap permite a estilização dos botões e links. Para isso basta adicionar a
classe "btn" fazendo com sejam herdados os aspectos padrão de um botão cinza com
cantos arredondados.
Além dessas características ainda é possível adicionar uma cor para o botão com
algumas classes extras, que são do tipo btn btn-classe. A Listagem 1 mostra um
exemplo de um arquivo HTML que referencia o bootstrap.css como única referência e
utiliza a classe btn com outras classes btn extras para exibir diferentes botões ao
usuário:
[CODE]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap com Botões</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<button class="btn" type="button">Botão default</button>
<button class="btn btn-primary" type="button">Botão prioritário</button>
<button class="btn btn-info" type="button">Botão de informação</button>
<button class="btn btn-success" type="button">Botão de sucesso</button>
<button class="btn btn-warning" type="button">Botão de aviso</button>
<button class="btn btn-danger" type="button">Botão de perigo</button>
<button class="btn btn-inverse" type="button">Botão preto com cinza</button>
<button class="btn btn-link" type="button">Link com aspecto de botão</button>
</body>
</html>
[/CODE]
Listagem 1. Configurando diferentes tipos de botões.
Segue a Figura 1 com a execução do código exibido na Listagem 1:
Figura 1. Diferentes tipos de botões disponibilizados no Bootstrap.
Etapa 2: Alterando o Tamanho dos Botões

Existem classes que permitem alterar o tamanho dos botões. Isso é possível
através da adição das classes "btn-lg", "btn-sm", ou "btn-xs" aos botões ou links. Com
isso, alteramos o tamanho dos botões para grande, pequeno ou muito pequeno
respectivamente.
NO código da Listagem 2 configuramos diferentes tamanhos para os botões:
[CODE]
<button class="btn btn-lg btn-primary" type="button">Botão grande</button>
<button class="btn btn-primary" type="button">Botão normal</button>
<button class="btn btn-sm btn-primary" type="button">Botão pequeno</button>
<button class="btn btn-xs btn-primary" type="button">Botão muito pequeno</button>
[CODE]
Listagem 2. Configurando diferentes tamanhos para os botões.
.
Na Figura 2 tem-se a visualização do código acima:
Figura 2. Diferentes configurações de tamanhos para os botões.
Vale ressaltar que a partir da versão 3 do Bootstrap as classes dos botões mudaram de
nome alterando de "btn-large" para "btn-lg", "btn-small" para "btn-sm" e de
"btn-mini" para "btn-xs".
Também é possível utilizar os botões em nível de bloco, ou seja, os botões são

posicionados como se estivessem em um bloco único, um abaixo do outro. Para isso,
basta apenas adicionar a classe "btn-block" conforme mostra a Listagem 3:
[CODE]
<button class="btn btn-block btn-primary" type="button">Botão em Bloco</button>
<button class="btn btn-block" type="button">Botão em Bloco</button>
[CODE]
Listagem 3. Configurando botões em nível de bloco.
A Figura 3 mostra a aparência dos botões na tela:
Figura 3. Visualização dos botões em nível de bloco.
Etapa 3: Desabilitando os Botões

Para desabilitar um botão basta adicionar a classe "disabled", com isso as cores
serão esmaecidas e o botão perderá o gradiente.
Na Listagem 4 demonstramos como utilizar a classe “disabled”:
[CODE]
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Botão
prioritário</button>
<button type="button" class="btn btn-large" disabled>Botão</button>
[CODE]
Listagem 4. Exemplo de como desabilitar os botões.
A Figura 4 abaixo mostra como ficaram os botões desabilitados:
Figura 4. Visualização dos Botões desabilitados.
Outra característica que também ocorre nos botões desabilitados é que se colocarmos o
mouse em cima aparecerá um ícone indicando que o botão está desabilitado.
Etapa 4: Configurando Ícones nos Botões

O Bootstrap oferece cerca de 140 ícones que podem ser utilizados com os botões,
esses ícones são fornecidos pelo GLYPHICONS (http://glyphicons.com/) através de uma
parceria entre a empresa e o projeto Bootstrap.
Para utilizá-los é muito simples, basta utilizar um botão e adicionar as classe s "glyphicon
glyphicon-nome_da_classe".
A Listagem 5 mostra como adicionar ícones aos botões:
[CODE]
<button class="glyphicon glyphicon-align-left"></button>
<button class="glyphicon glyphicon-calendar"></button>
<button class="glyphicon glyphicon-edit"></button>
[/CODE]
Listagem 5. Exemplo de como configurar ícones para os botões.
Segue a Figura 5 que mostra os três ícones adicionados:
Figura 5. Ícones configurados nos botões.
Todos os ícones e suas respectivas classes podem ser visualizadas em

http://getbootstrap.com/components/.
Etapa 5: Agrupando Botões

Podemos agrupar os botões utilizando uma classe "btn-group" em uma "div".
A Listagem 6 demonstra como agrupar os botões em uma toolbar:
[CODE]
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group" aria-label="Primeiro Grupo">

<button type="button" class="btn btn-default">1</button>
</div>
<div class="btn-group" role="group" aria-label="Segundo Grupo">

</div>
</div>
[CODE]
Listagem 6. Exemplo de como agrupar botões em uma toolbar.
A Figura 6 demonstra como ficaram os ícones agrupados e em forma de uma toolbar:
Figura 6. Botões agrupados em uma toolbar.

Dessa forma, nota-se que os botoes constituem um elemento muito sofisticado e com
diversas possibilidades de configuração, através das suas diversas classes, que torna o
layout da página bastante elegante e intuitivo.

Art Botoes Bootstrap

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Art Botoes Bootstrap

Enviado por

Direitos autorais:

Formatos disponíveis

Título: Como utilizar botões no Bootstrap

Descrição: Neste artigo veremos como funcionam os botões no framework Boostrap.

Etapa 1: Conhecendo o Botão no Bootstrap

Segue a Figura 1 com a execução do código exibido na Listagem 1:

Figura 1. Diferentes tipos de botões disponibilizados no Bootstrap.

Etapa 2: Alterando o Tamanho dos Botões

Figura 2. Diferentes configurações de tamanhos para os botões.

Também é possível utilizar os botões em nível de bloco, ou seja, os botões são

A Figura 3 mostra a aparência dos botões na tela:

Figura 3. Visualização dos botões em nível de bloco.

Etapa 3: Desabilitando os Botões

A Figura 4 abaixo mostra como ficaram os botões desabilitados:

Figura 4. Visualização dos Botões desabilitados.

Etapa 4: Configurando Ícones nos Botões

Segue a Figura 5 que mostra os três ícones adicionados:

Figura 5. Ícones configurados nos botões.

Todos os ícones e suas respectivas classes podem ser visualizadas em

Etapa 5: Agrupando Botões

<div class="btn-group" role="group" aria-label="Primeiro Grupo">

<div class="btn-group" role="group" aria-label="Segundo Grupo">

A Figura 6 demonstra como ficaram os ícones agrupados e em forma de uma toolbar:

Figura 6. Botões agrupados em uma toolbar.

Você também pode gostar