Bootstrap Formes d'image
Coins arrondis:
Cercle:
La vignette:
Coins arrondis
Le .img-rounded classe ajoute des coins arrondis à une image (IE8 ne supporte pas les coins arrondis):
Exemple
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Essayez - le vous - même » Cercle
Le .img-circle classe façonne l'image d'un cercle (IE8 ne supporte pas les coins arrondis):
Exemple
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Essayez - le vous - même » La vignette
La .img-thumbnail classe façonne l'image pour une vignette:
Exemple
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Essayez - le vous - même » Images Responsive
Images vient dans toutes les tailles. Donc, faire des écrans. images réactives ajustent automatiquement à la taille de l'écran.
Créer des images sensibles en ajoutant un .img-responsive classe à la <img> tag. L'image sera alors échelle bien à l'élément parent.
Le .img-responsive classe applique display: block; et max-width: 100%; et height: auto; à l'image:
Galerie d'images
Vous pouvez également utiliser Bootstrap's système de grille en conjonction avec la .thumbnail classe pour créer une galerie d'images:
Exemple
<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> Essayez - le vous - même » Intègre Responsive
permettent également des vidéos ou des diaporamas échelle correctement sur tout appareil.
Les classes peuvent être appliquées directement sur <iframe>, <embed>, <video> et <object> éléments.
L'exemple suivant crée une vidéo réactive en ajoutant un .embed-responsive-item classe à un <iframe> tag (la vidéo sera alors échelle bien à l'élément parent). Le contenant <div> définit le rapport d'aspect de la vidéo:
Exemple
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Essayez - le vous - même » Quel est le rapport d'aspect?
Le rapport d'aspect d'une image décrit la relation proportionnelle entre sa largeur et sa hauteur. Deux rapports d'aspect vidéo commun sont 4: 3 (le format vidéo universel du 20e siècle), et 16: 9 (universelle pour la télévision HD et la télévision numérique européenne).
Vous pouvez choisir entre deux classes de rapport d'aspect:
<!-- 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>Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
Complete Bootstrap image Référence
Pour une référence complète de toutes les classes d'images, rendez - vous à notre entière Bootstrap l' image de référence .