OUJOOD.COM
Style d’images avec Bootstrap 3
Les images sont très importantes dans la conception web moderne.
Le style des images et les placer correctement sur les pages web est donc très important pour améliorer l'expérience utilisateur.
En utilisant les classes intégrées de Bootstrap, vous pouvez facilement manipuler des images telles que faire les images de style acculés ou circulaires ronds, ou leur donner un effet de miniatures.
Coins arrondis
La classe .img-rounded ajoute des coins arrondis à une image (IE8 ne supporte pas les coins arrondis) :
📋 Copier le code<img src=" images/coq.jpg" class=" img-rounded" alt="image coq coins arrondis">
Vignette
La classe .img-thumbnail façonne l'image sous la forme d'une vignette :
📋 Copier le code<img src=" images/coq.jpg" class=" img-thumbnail" alt=" image coq forme vibnette ">
Cercle
La classe .img-circle façonne l'image d'un cercle (IE8 ne supporte pas les coins arrondis) :
📋 Copier le code<img src=" images/coq.jpg" class=" img-circle" alt=" image coq forme vibnette ">
Créer des vidéos et des Images responsives
En Bootstrap vous pouvez faire les images responsives, donc des images sensibles qui s'ajustent automatiquement pour s'adapter à la taille de l'écran.
Il suffit d'ajouter la classe .img-responsive à la balise <img> . Cette classe applique principalement les styles max-width: 100%; et height: auto; à l'image afin qu'elle s'adapte bien pour adapter l'élément conteneur — au cas où la largeur de l'image est plus grande que l'élément conteneur lui-même.
📋 Copier le code<img src=" images/nature.jpg" class=" img-responsive" alt="image nature responsive">
Vous pouvez aussi faire des vidéos ou un diaporama intégrée dans une page web responsive sans affecter ses proportions d'origine.
Le Bootstrap réactif incorporer des classes qui peuvent être appliquées directement sur les éléments <iframe>, <embed>, <video> et <object> .
Dans l'exemple ci-dessous, nous avons créé deux vidéos responsives avec deux proportions différentes (16:9 et 4:3) en ajoutant à leurs blocs contenant respectivement les classes .embed-responsive-16by9 et .embed-responsive-4by3 et la classe .embed-responsive-item à l'élément enfant <iframe> .
<!—proportion écran 16:9 --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe> </div> <!-- proportion écran 4:3 --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe> </div>
chapitre précédent chapitre suivant
Par carabde 25 decembre 2015