imagem Bootstrap
Neste capítulo, vamos aprender apoio Bootstrap para uma imagem. Bootstrap oferece três podem ser aplicadas à imagem classe de estilo simples:
- .img-arredondado:Adicionarborder-radius: 6pxpara obter o filé de imagem.
- .img-circle:adicionarborder-radius: 50%para fazer toda a imagem torna-se circular.
- .img-thumbnail:Adicione um pouco de enchimento (estofamento) e uma borda cinza.
Considere os exemplos que se seguem demonstram:
Exemplos
<img src = "/wp-content/uploads/2014/06/download.png" class = "arredondado img-">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-circle">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-thumbnail">
tente »
Os resultados são os seguintes:
<Img> class
As seguintes classes estão disponíveis a qualquer imagem.
| categoria | descrição | Exemplos |
|---|---|---|
| .img-arredondada | Adicionando um filete de imagem (se o IE8 não suporta) | tentar |
| .img-circle | O quadro torna-se circular (não IE8 não suporta) | tentar |
| .img-thumbnail | miniaturas | tentar |
| .img-responsive | Pictures Responsive (vai ser bem dimensionada para o elemento pai) | tentar |
imagem Responsive
Por tag <img> para adicionar classe de apoio imagem Img-responsivos para fazer design responsivo. Pictures irá dimensionar bem para o elemento pai.
.img-responsive classe max-width: 100%; e altura: auto; estilo é aplicado na imagem: