Image Bootstrap
Dans ce chapitre, nous allons apprendre le soutien Bootstrap pour une image. Bootstrap fournit trois peuvent être appliqués à l'image simple classe de style:
- .img-arrondie:Ajouterborder-radius: 6pxpour obtenir le filet de l' image.
- .img-cercle:ajouterborder-radius: 50%pour rendre l'image entière devient circulaire.
- .img-vignette:Ajoutez un peu de rembourrage (padding) et une bordure grise.
Considérez les exemples suivants démontrent:
Exemples
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-arrondi">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-cercle">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-vignette">
Essayez »
Les résultats sont les suivants:
<Img> class
Les classes suivantes sont disponibles à toute image.
| catégorie | description | Exemples |
|---|---|---|
| .img-arrondie | Ajout d'un filet d'image (IE8 ne fonctionne pas) | essayer |
| .img-cercle | L'image devient circulaire (IE8 ne fonctionne pas) | essayer |
| .img-thumbnail | Miniatures | essayer |
| .img sensible | Photos Responsive (va bien évoluer à l'élément parent) | essayer |
Image Responsive
Par balise <img> pour ajouter la classe de support d'image .img sensible pour faire une conception adaptée. Photos vont échelle bien à l'élément parent.
.img sensible classe max-width: 100%; et la hauteur: auto; le style est appliqué sur l'image: