Bootstrap 4

imagens e tabelas
Cleitom José Richter
cleitom.richter@iffarroupilha.edu.br
Estilização de imagens com Bootstrap
Bootstrap dispõe de várias classes
exclusivas para tratar imagens. Vamos
apresentar algumas delas:

img-fluid: adequa o tamanho da

imagem à view port, excluindo qualquer tipo
de sobras que possam ocasionar o
aparecimento de scroll. Pode ser usada no
container global ou dentro de colunas com
efeito idêntico.
Dica: mt-1 é uma classe que inclui 1px de margem top.
Assim como pt-1 inclui 1px de padding no topo.
Essa regra vai de 0 a 5px e pode ser inserida em todas as
direções usando as iniciais ‘b’ de bottom, ‘l’ de left, ‘r’ de right.
Veja mais em: https://getbootstrap.com.br/docs/4.1/utilities/spacing/ 2
Estilização de imagens com Bootstrap
img-thumbnail: Tem comportamento
idêntico ao img-fluid, porém coloca uma
moldura ao redor da imagem.

rounded: utilizado junto ao img-fluid,

tem a missão de suavizar os cantos da
imagem.

d-block: modifica o posicionamento para

em bloco;
mx-auto: define que as margens esquerda
e direita são automáticas – isso centraliza o
elemento no sentido horizontal;
3
Estilização de imagens com Bootstrap
Para o tratamento de imagens com valor
semântico utiliza-se as tag <figure> e
dentro dela as tags <img> e <figcaption>.
Mas a estilização se dá exclusivamente por
meio das classe desenvolvidas para essa
finalidade.

Use as classes .figure, .figure-img

e .figure-caption para conseguir alguns
estilos bases para os elementos HTML5.
Imagens na tag <figure> não possuem
tamanhos explícitos, por isso, tenha certeza
de colocar a classe .img-fluid no elemento
<img>, para fazer com que ela seja
responsiva.
4
Estilização de tabelas com Bootstrap
Basta adicionar a classe .table em qualquer
<table>, então, customize-a mais usando
nossos estilos de customização ou as
diversas classes modificadoras.

Todos os estilos de tabelas são herdados

no Bootstrap 4, significando que qualquer
tabela aninhada vai se comportar do
mesmo modo que seus pais.

5
Estilização de tabelas com Bootstrap
Você também pode inverter as cores (texto
claro em background escuro), usando a
class .table-dark ou table-light.

6
Estilização de tabelas com Bootstrap
Você também pode inverter as cores (texto
claro em background escuro), usando a
class .table-dark ou table-light.

Dica: essa estilização pode ser

aplicada somente no cabeçalho
(<thead>) se quiser.
7
Estilização de tabelas com Bootstrap
Há também a possibilidade de tabelas
zebradas. table-striped.

8
Estilização de tabelas com Bootstrap

 Há também estilos de tabelas que mudam comportamento ao passar o

mouse. table-hover.

 Se quiser tabela com espaçamento reduzido use table-sm;

 Para tabela com linhas em todas as direções use table-bordered;

 Já para esconder todas as linhas use table-borderless

9
Estilização de tabelas com Bootstrap
As tabelas podem assumir o estilo das cores padrão do bootstrap:

10
Estilização de tabelas com Bootstrap
As tabelas podem assumir as cores padrão do bootstrap inclusive para o
background:

11
Estilização de tabelas com Bootstrap
As tabelas responsivas podem ser implementadas por meio da
classe .table-responsive. Além disso, você pode escolher um breakpoint
máximo para a tabela ser responsiva, usando a classe .table-
responsive{-sm|-md|-lg|-xl}.

Tabelas responsivas usam overflow-y: hidden, declaração a qual corta

qualquer conteúdo que vai além da borda de cima ou de baixo, numa tabela.
Em particular, isso pode acabar cortando menus dropdowns e outros widgets
de terceiros.

12