Une brève discussion sur la façon d'implémenter des images réactives bootstrap

Cet article vous présentera la méthode de bootstrap pour implémenter des images responsives. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tutoriels associés recommandés : "tutoriel bootstrap"

Deux formes courantes d'images réactives dans les applications de projet :

respectivement : la taille de l'écran change et la disposition de l'image change en conséquence. Afin de s'adapter à la conversion entre PC et appareils mobiles, deux ensembles de ressources d'images sont utilisés.

1 : La taille de l'écran change et la disposition de l'image change en conséquence

<div>
       <div>
           <div>
               <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/box-logo.png" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
           </div>
           <div>
            <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/google-logo.png" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/intuit-logo.png" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/square-logo.png" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
            </div>
        </div>
   </div>

Effet :

1. >
2. Tablette (>768px

3. Téléphone portable (

2 : Afin de s'adapter aux conversion entre PC et appareils mobiles, l'utilisation de deux ensembles de ressources d'image

<div>
       <img  class="visible-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
       <img  class="hidden-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
   </div>

Deux ensembles de ressources d'image aideront à éviter le gel des pages et à économiser du trafic.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!