Nenhum auto-respeito designers de páginas web,
seria hoje projetar páginas web sem incluir
alguma forma de imagens ou mídia em seus sites.
Professores de ciência da computação são uma exceção.
Nesta fase, você provavelmente está esperando que eu diga isso,
mas não é isso que eu vou dizer.
Eu vou dizer que,
“Uma foto vale $12 no iStockPhoto.com.
Bootstrap fornece suporte extensivo para incluir
imagens e vários tipos de mídia em seus sites e suas páginas da web.
A tag HTML de imagem é obviamente vai ser usado para incluir imagens em suas páginas web. O
Bootstrap também fornece um monte de classes que você pode aplicar à
tag de imagem, a fim de melhorar ainda mais a forma como as imagens são incluídas em sua página web.
Assim, você pode usar uma classe de imagem chamada img-fluid que fará suas imagens responsivas,
o que significa que o tamanho da imagem se ajustará automaticamente a diferentes tamanhos de tela.
Você também pode usar uma miniatura img-que irá colocar uma borda branca em torno de sua imagem.
Você também pode lidar com as formas e tamanhos de imagens como você
vê nesta imagem aqui para que você possa ter imagens para as quais você cria cantos arredondados,
todos os quatro cantos,
ou qualquer par de cantos escolhido.
Assim, você pode aplicar a classe em torno dela para
criar uma imagem com cantos arredondados ou você pode ver
um hífen arredondado superior esquerdo ou direito para colocar
os cantos arredondados em qualquer uma dessas quatro bordas da sua imagem.
Você também pode aplicar círculo arredondado para criar imagens circulares.
Então, quando você visita sites,
você veria imagens sendo usadas de muitas dessas maneiras já.
Você vai se lembrar que vimos a aula de cartas na lição anterior e no exercício.
Aqui, ilustro o uso da classe Card com uma imagem incluída.
Então, neste caso, nós incluímos uma imagem com a imagem do cartão de classe superior e se você
incluir tamanho grande o suficiente a imagem que a imagem será incluída
na parte superior e, em seguida, fechada dentro de um cartão como este.
Se a imagem for muito pequena,
ela pode ser posicionada em um canto do cartão.
Então use uma imagem grande o suficiente para ser capaz de definir um cartão limpo como este.
Então, aqui você verá a imagem que está sendo descrita com,
as classes aplicadas a que, incluindo topo da imagem do cartão
e img-fluido para tornar a imagem responsiva automaticamente.
Então, é assim que você pode usar as imagens com a classe Card
para definir cartões que você usa em suas páginas web.
Outra maneira de incluir imagens e conteúdo relacionado em suas páginas da Web é um objeto de mídia.
Um objeto de mídia permite especificar uma imagem que você pode
posicionar à esquerda ou à direita da descrição.
Além disso, você pode incluir um corpo de mídia
que contém a descrição que acompanha a imagem.
Então, como você vê neste exemplo aqui,
o próprio corpo de mídia inclui qualquer conteúdo formatado HTML aqui.
Então aqui estou usando um h2 e h4 juntamente com
uma classe p dentro do corpo de mídia para definir o conteúdo real.
Vamos usar o objeto de mídia no exercício que se segue.
Você também pode fazer uma incorporação responsiva de conteúdo.
Então, por exemplo, se você tiver um vídeo que deseja incluir em sua página da Web,
então você pode usar uma classe iframe para enquadrar o vídeo
e, em seguida, anexá-lo dentro da div com as classes
incorporadas dando tamanhos responsivos para que você possa 16by9,
4by3 ou vídeo, conteúdo a ser exibido.
Então, incorporar responsivo, você pode usar as
tags embed ou iframe ou vídeo ou objeto HTML e, em seguida, anexá-lo dentro de uma div.
Aplicando a incorporação responsiva e também junto com a incorporação responsiva,
especificando as dimensões que você deseja usar para dimensões 4by3 ou 16by9.
Então é assim que você também pode incluir conteúdo de vídeo em suas páginas da Web.
Agora, que vimos o suporte para imagens e mídia,
é hora de ir para um exercício onde veremos como podemos incluir
imagens na página web ou no site em que temos trabalhado.
Vamos fazer algumas alterações na página index.html
incluindo algumas imagens e conteúdo usando o objeto de mídia.