Logo Passei Direto
Buscar

7 - Bootstrap - CSS - Buttons, Imagese Helper Classes

breadcrumb-separator

UNOPAR

User badge image
Rilker Perazzo

em

Ferramentas de estudo

Mostrar todas

Conteúdos escolhidos para você

Html ,CSS e XML
493 pág.

Html ,CSS e XML

Aula 04 - Desenvolvimento Front-End - HTML, CSS e Bootstrap
428 pág.

Aula 04 - Desenvolvimento Front-End - HTML, CSS e Bootstrap

UNIP

Livro_Desenvolvimento para Web
70 pág.

Livro_Desenvolvimento para Web

FAMETRO

FERRAMENTA DE DESENVOLVIMENTO WEB
24 pág.

FERRAMENTA DE DESENVOLVIMENTO WEB

UAM

Bootstrap: Framework Front-end
9 pág.

Bootstrap: Framework Front-end

PUC-MINAS

Perguntas dessa disciplina

Leia a seguinte passagem de texto:“Simple entry Tool: quando você clica nessa ferramenta, o Finale exibe a paleta Simple Entry, contendo um ícone indi

Anhanguera

2) As tabelas HTML são utilizadas para apresentar dados em formato de grade, com linhas e colunas. A estrutura de uma tabela é definida pelas tags

UNOPAR

Questão 17/46 - Oportunidade de Ampliação da Formação Ler em voz alta [Componente Específico] Para que se realize a multiplicação de probabilidades co

Questão 6/10 - Programação IV Ler em voz alta Kotlin Playground, criada pelos fundadores da linguagem, justamente para você digitar alguns código...

“Simple entry Tool: quando você clica nessa ferramenta, o Finale exibe a paleta Simple Entry, contendo um ícone individual para cada valor rítmico (se

Anhanguera

Material
Buscar
páginas com resultados encontrados.
páginas com resultados encontrados.

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Conteúdos escolhidos para você

Html ,CSS e XML
493 pág.

Html ,CSS e XML

Aula 04 - Desenvolvimento Front-End - HTML, CSS e Bootstrap
428 pág.

Aula 04 - Desenvolvimento Front-End - HTML, CSS e Bootstrap

UNIP

Livro_Desenvolvimento para Web
70 pág.

Livro_Desenvolvimento para Web

FAMETRO

FERRAMENTA DE DESENVOLVIMENTO WEB
24 pág.

FERRAMENTA DE DESENVOLVIMENTO WEB

UAM

Bootstrap: Framework Front-end
9 pág.

Bootstrap: Framework Front-end

PUC-MINAS

Perguntas dessa disciplina

Leia a seguinte passagem de texto:“Simple entry Tool: quando você clica nessa ferramenta, o Finale exibe a paleta Simple Entry, contendo um ícone indi

Anhanguera

2) As tabelas HTML são utilizadas para apresentar dados em formato de grade, com linhas e colunas. A estrutura de uma tabela é definida pelas tags

UNOPAR

Questão 17/46 - Oportunidade de Ampliação da Formação Ler em voz alta [Componente Específico] Para que se realize a multiplicação de probabilidades co

Questão 6/10 - Programação IV Ler em voz alta Kotlin Playground, criada pelos fundadores da linguagem, justamente para você digitar alguns código...

“Simple entry Tool: quando você clica nessa ferramenta, o Finale exibe a paleta Simple Entry, contendo um ícone individual para cada valor rítmico (se

Anhanguera

Prévia do material em texto

08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 1/16
Bootstrap - CSS: Buttons, Imagese
Helper Classes
APRESENTAR FERRAMENTAS BOOTSTRAP PARA ESTILIZAR BOTÕES (BUTTONS) E IMAGENS (IMAGES) E
LISTAR AS PRINCIPAIS CLASSES AUXILIARES BOOTSTRAP.
AUTOR(A): PROF. JORGE HENRIQUE PESSOTA
Elemento Button
O framework Bootstrap oferece diversas classes para estilização de botões, sendo elas:
 
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link 
 
A classe .btn é a classe padrão Bootstrap para a estilização de botões. Ela aplica uma coloração cinza e
deixa as bordas arredondadas. Já as demais classes alteram a cor e formato do botão, de acordo com o
contexto proposto.
 
Para aplicar uma estilização diferente do padrão, deve-se declarar tanto a classe .btn, quanto a classe
referente à estilização desejada.
 
Exemplo:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 2/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body>
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Classes para estilização de botões</h2>
18. 
19. <br>
20. 
21. <button type="button" class="btn">Basic</button>
22. <button type="button" class="btn btn-default">Default</button>
23. <button type="button" class="btn btn-primary">Primary</button>
24. <button type="button" class="btn btn-success">Success</button>
25. <button type="button" class="btn btn-info">Info</button>
26. <button type="button" class="btn btn-warning">Warning</button>
27. <button type="button" class="btn btn-danger">Danger</button>
28. <button type="button" class="btn btn-link">Link</button> 
29. 
30. </div>
31. 
32. </body>
33. </html>
 
Resultado:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 3/16
As classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger e .btn-
link também podem ser utilizadas para os elementos a (ancora) e input.
 
Exemplo:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 4/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body>
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Classes para estilização de botões</h2>
18. 
19. <br>
20. 
21. <a href="#" class="btn btn-info" role="button">Link Button</a>
22. <input type="button" class="btn btn-info" value="Input Button">
23. <input type="submit" class="btn btn-info" value="Submit Button">
24. 
25. </div>
26. 
27. </body>
28. </html>
 
Resultado:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 5/16
Definindo tamanho para botões
O Bootstrap também oferece classes para definir diferentes tamanhos para os botões. As seguintes classes
podem ser utilizadas:
 
.btn-lg
.btn-md
.btn-sm
.btn-xs
 
Exemplo:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 6/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body>
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Classes para estilização de botões</h2>
18. 
19. <br>
20. 
21. <button type="button" class="btn btn-success btn-xs">Success</button>
22. <button type="button" class="btn btn-success btn-sm">Success</button>
23. <button type="button" class="btn btn-success btn-md">Success</button>
24. <button type="button" class="btn btn-success btn-lg">Success</button>
25. 
26. </div>
27. 
28. </body>
29. </html>
 
Resultado:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 7/16
Há ainda, situações em que o botão deva ocupar toda a largura da tela ou do container em que ele está
contido. Nestes casos, pode-se utilizar a classe .btn-block. Esta classe faz com que o botão ocupe toda a área
horizontal (largura) disponível.
 
Exemplo:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 8/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body>
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Classes para estilização de botões</h2>
18. 
19. <br>
20. <h3>Classes <code>.btn</code>, <code>.btn-success</code>, 
21. e <code>.btn-xs</code></h3> 
22. 
23. <button type="button" class="btn btn-success btn-xs">Success</button>
24. 
25. <br>
26. 
27. <h3>Classes <code>.btn</code>, <code>.btn-success</code>, 
28. <code>.btn-xs</code> e <code>.btn-block</code></h3> 
29. 
30. <button type="button" class="btn btn-success btn-xs btn-block">Success</butt
31. 
32. <br><br>
33. 
34. <h3>Classes <code>.btn</code>, <code>.btn-success</code> 
35. e <code>.btn-lg</code></h3> 
36. 
37. <button type="button" class="btn btn-success btn-lg">Success</button>
38. 
39. <br>
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 9/16
40. 
41. <h3>Classes <code>.btn</code>, <code>.btn-success</code>, 
42. <code>.btn-lg</code> e <code>.btn-block</code></h3> 
43. 
44. <button type="button" class="btn btn-success btn-lg btn-block">Success</butt
45. 
46. </div>
47. 
48. </body>
49. </html> 
 
Resultado:
Habilitar/Desabilitar um Botão
O Bootstrap disponibiliza a classe .active para apresentar um botão com a aparência de pressionado e a
classe .disable para apresentar um botão desabilitado (que não possa ser pressionado pelo usuário).
 
Exemplo:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 10/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body>
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Classes .active e .disable</h2>
18. 
19. <br>
20. 
21. <button type="button" class="btn">Clique Aqui!</button> 
22. <button type="button" class="btn active">Botão já pressionado</button>
23. <button type="button" class="btn disabled">Botão desabilitado</button>
24. 
25. </div>
26. 
27. </body>
28. </html>
 
Resultado:
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 11/16
Images
O Bootstrap disponibiliza três classes para estilização de imagens: .img-rounded,.img-circle e .img-
thumbnail.
 
A classe .img-rounded arredonda os cantos da imagem.
 
A classe .img-circle arredonda toda a borda da imagem, gerando um formato circular.
 
A classe .img-thumbnail adiciona uma moldura , gerando a aparência de uma imagem em miniatura.
 
Na imagem abaixo é possível observar o resultado obtido com cada classe.
Para reproduzir o resultado apresentado e para testar as classes, utilize o código abaixo como referência e
informe o nome das imagens a serem utilizadas no atributo “src” do elemento img.
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 12/16
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. 
4. <head>
5. 
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <title>Modelagem de Interfaces - Bootstrap</title>
9. <link href="css/bootstrap.min.css" rel="stylesheet"> 
10. 
11. </head>
12. 
13. <body style="background-color:lightgrey">
14. 
15. <div class="container">
16. 
17. <h2>Bootstrap - Estilização de Imagens</h2>
18. <h3>Classes <code>.img-rounded</code>, <code>.img-circle</code> 
19. e <code>.img-thumbnail</code></h3> 
20. 
21. <br>
22. 
23. 
24. <img src="NOME-DA-IMAGEM" class="img-rounded" alt="Imagem arredondada">
25. <img src="NOME-DA-IMAGEM" class="img-circle" alt=" Imagem circular">
26. <img src="NOME-DA-IMAGEM" class="img-thumbnail" alt="Imagem com moldura">
27. 
28. </div>
29. 
30. </body>
31. </html>
32. 
Helper Classes
Helper Classes são classes auxiliares Bootstrap que apoiam o desenvolvedor web na criação de layouts
modernos e responsivos. Muitas destas classes são detalhadas em outros tópicos desta disciplina, no então,
apresenta-se aqui, um resumo das principais.
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 13/16
Classes Contextuais
Classes contextuais permitem expressar algum significado a um determinado texto a partir de cores de
fonte e cores de fundo. As seguintes classes estão disponíveis para cores de textos:
 
.text-muted: indica que o texto é silenciado.
.text-primary: indica que o texto é importante.
.text-success: o texto indica sucesso.
.text-info: o texto representa alguma informação.
.text-warning: o texto representa atenção.
.text-danger: o texto representa perigo.          
 
Para cor de fundo, as seguintes classes podem ser utilizadas:
 
.bg-primary: o texto é importante.
.bg-success: o texto indica sucesso.
.bg-info: o texto representa alguma informação.
.bg-warning: o texto representa atenção.
.bg-danger: o texto representa perigo.     
Outras Classes
.pull-left: flutua um elemento para a esquerda.
 
.pull-right: flutua um elemento para a direita.
 
.center-block: define as seguintes propriedades para o elemento: display:block,  margin-right:auto e
margin-left:auto.
 
.clearfix: limpa flutuações.
 
.show: força a apresentação de um elemento (display:block).
 
.hidden: inibe a apresentação de um elemento (display:none).
 
.invisible: inibe a apresentação de um elemento, porém preserva a sua localização e suas dimensões no
layout (visibility:hidden).
 
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 14/16
.sr-only: inibe a apresentação de um elemento para todos os dispositivos, exceto para os leitores de tela.
 
.sr-only-focusable: quando combinada com a classe .sr-only, apresenta um elemento novamente quando ele
recebe o foco.
 
.text-hide: ajuda a substituir o conteúdo de texto de um elemento por uma imagem de plano de fundo
 
.close: indica um ícone próximo.
 
.caret: indica uma funcionalidade dropdown.
Utilidades Responsivas
Algumas classes são fundamentais para garantir um design responsivo. As classes destacadas abaixo
possibilitam apresentar ou inibir conteúdos de acordo com o dispositivo em uso.
 
Classes < 768 pixels >= 768 pixels >= 992 pixels >= 1200 pixels
.visible-xs-* Visível Inibe Inibe Inibe
.visible-sm-* Inibe Visível Inibe Inibe
.visible-md-* Inibe Inibe Visível Inibe
.visible-lg-* Inibe Inibe Inibe Visível
.hidden-xs Inibe Visível Visível Visível
.hidden-sm Visível Inibe Visível Visível
.hidden-md Visível Visible Inibe Visível
.hidden-lg Visível Visible Visible Inibe
 
 
Resumo do Tópico
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 15/16
Neste tópico foram apresentadas ferramentas Bootstrap para a estilização de botões e imagens, além de
destacar as principais classes auxiliares Bootstrap.
ATIVIDADE FINAL
Quais são as classes Bootstrap disponívels para estilização de imagens?
A. .bg-primary, . bg-info e .bg-success
B. .img-rounded, .img-circle e .img-thumbnail.
C. .show, .sr-only e .caret.
D. .ls-btn-block, .active e .disable
Quais são os três elementos HTML que podem ser estilizados com as
classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-
warning, .btn-danger e .btn-link?
A. button, image e table.
B. button, a e input.
C. a, input e link.
D. button, link e image.
Qual é a função da classe .btn-block?
A. Esta classe faz com que o botão estilizado ocupe toda a área horizontal (largura) disponível no
layout.
B. Esta classe faz com que o botão estilizado fique indisponível para ser pressionado
C. Esta classe faz com que o botão estilizado fique invisível.
D. Esta classe faz com que o botão estilizado ocupe apenas uma coluna do sistema de grid Bootstrap.
REFERÊNCIA
SILVA, Maurício Samy. Bootstrap 3.3.5: Aprenda a usar o framework Bootstrap para criar layouts CSS
complexos e responsivos. 1.ª ed. São Paulo: Novatec, 2015c.
TUTORIALS POINT. Bootstrap Overview, Bootstrap Tutorial. Disponível em:
http://www.tutorialspoint.com/bootstrap/
(http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf). Acesso em: 27 de novembro de 2017.
http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf
08/10/2022 20:29 AVA UNINOVE
https://ava.uninove.br/seu/AVA/topico/container_impressao.php 16/16
W3SCHOOLS.COM. Bootstrap Get Started. Disponível em:
http://www.w3schools.com/Bootstrap/Bootstrap_get_started.asp
(http://www.w3schools.com/Bootstrap/Bootstrap_get_started.asp). Acesso em 27 de novembro de 2017.
http://www.w3schools.com/Bootstrap/Bootstrap_get_started.asp

Mais conteúdos dessa disciplina