Bootstrap imagem Formas
Cantos arredondados:
Círculo:
Miniatura:
Cantos arredondados
O .img-rounded classe adiciona cantos arredondados a uma imagem (se o IE8 não suporta cantos arredondados):
Exemplo
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Tente você mesmo " Círculo
O .img-circle classe molda a imagem para um círculo (não IE8 não suporta cantos arredondados):
Exemplo
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Tente você mesmo " Miniatura
O .img-thumbnail classe molda a imagem para uma miniatura:
Exemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Tente você mesmo " Imagens Responsive
Imagens vem em todos os tamanhos. Então faça telas. imagens Responsive ajustar automaticamente para ajustar o tamanho da tela.
Criar imagens que respondem pela adição de um .img-responsive classe para o <img> tag. A imagem será então dimensionar bem para o elemento pai.
O .img-responsive classe aplica display: block; e max-width: 100%; e height: auto; para a imagem:
Galeria de imagens
Você também pode usar Bootstrap's sistema de rede em conjunto com o .thumbnail classe para criar uma galeria de imagens:
Exemplo
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> Tente você mesmo " Incorpora Responsive
Também deixe vídeos ou slideshows dimensionar adequadamente em qualquer dispositivo.
As aulas podem ser aplicados diretamente para <iframe>, <embed>, <video> e <object> elementos.
O exemplo a seguir cria um vídeo que responde pela adição de um .embed-responsive-item classe para um <iframe> tag (o vídeo será então dimensionar bem para o elemento pai). A contendo <div> definir a relação de aspecto do vídeo:
Exemplo
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Tente você mesmo " Qual é a relação de aspecto?
A relação de aspecto de uma imagem descreve a relação proporcional entre a sua largura e altura. Duas razões de aspecto de vídeo comuns são 4: 3 (o formato de vídeo universal do século 20), e 16: 9 (universal para a televisão de alta definição e de televisão digital europeu).
Você pode escolher entre duas classes de relação de aspecto:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
Completa Bootstrap imagem de referência
Para uma referência completa de todas as classes de imagem, vá para nossa completa Bootstrap imagem de referência .