oujood.com

Les images avec Bootstrap 3: image responsive

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
Dans ce tutoriel vous apprenez à appliquer le style aux images, créer des vignettes, des  grilles d'images et de vidéos et plus à l'aide de Bootstrap.

chercher |

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> .


  Copier le code

  <!—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



Voir aussi nos tutoriel :

css3 fonts

Polices en CSS3. CSS3 Fonts comment utiliser des polices non standariées dans une page web

Retourne le code PHP utilisé pour générer une variable"> var_export

 Retourne le code PHP utilisé pour générer une variable

Affiche des informations lisibles pour une variable">print_r

 Affiche des informations lisibles pour une variable