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

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

青灯夜游
青灯夜游avant
2020-12-29 18:50:113897parcourir

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.

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

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  alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
           </div>
           <div>
            <img  alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
            </div>
            <div>
                <img  alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
            </div>
            <div>
                <img  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 Une brève discussion sur la façon dimplémenter des images réactives bootstrap

<div>
       <img  alt="Une brève discussion sur la façon d'implémenter des images réactives bootstrap" >
       <img  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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer