బోట్స్ట్రాప్ 5 ఇమేజ్

图像形状

BS5 పరీక్ష

విడేకు కోర్సులు కోర్సు సిఫారసులు

ఉదాహరణ

చిత్ర ఆకారం

స్వయంగా ప్రయత్నించండి

పుంజు రూపం

.rounded క్లాసులు చిత్రాన్ని పుంజుగా చేయడానికి ఉపయోగించబడతాయి

ఉదాహరణ

<img src="flower.jpg" class="rounded" alt="Flower">

స్వయంగా ప్రయత్నించండి

చక్రాకార చిత్రం

.rounded-circle చిత్రాన్ని కింది ప్రకారం చేయడానికి ఉపయోగించబడతాయి

ఉదాహరణ

.img-thumbnail

స్వయంగా ప్రయత్నించండి

క్లాసులు చిత్రాన్ని కింది ప్రకారం చేయడానికి ఉపయోగించబడతాయి

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre"> చిత్రాన్ని సమాయుతం చేయడం .float-start క్లాసులు చిత్రాన్ని ఎడమవైపు ప్రవహించడానికి లేదా ఉపయోగించండి .float-end

ఉదాహరణ

కుడివైపు ప్రవహించు
<img src="tulip.jpg" class="float-start">

స్వయంగా ప్రయత్నించండి

<img src="tulip.jpg" class="float-end">

మధ్యన ఉంచబడిన చిత్రం చిత్రాన్ని మధ్యన ఉంచడానికి, మేము ఉపయోగించిన యుటిలిటీ క్లాసులు .mx-auto (margin:auto) మరియు .d-block

ఉదాహరణ

(display:block)

స్వయంగా ప్రయత్నించండి

<img src="tulip.jpg" class="mx-auto d-block">

ప్రతిస్పందకమైన చిత్రాలు

చిత్రాలు వివిధ పరిమాణాలు కలిగి ఉంటాయి. స్క్రీన్ కూడా అలాగే. ప్రతిస్పందకమైన చిత్రాలు స్క్రీన్ పరిమాణాన్ని సమాయుతం చేసుకుంటాయి. .img-fluid క్లాసులను జోడించండి <img> టాగులను ఉపయోగించి ప్రతిస్పందకమైన చిత్రాలను సృష్టించండి. తరువాత చిత్రం ప్రాతినిధ్య ఘటకం లోకి బాగా సమాయుతం అవుతుంది.

.img-fluid చిత్రాన్ని ఉపయోగించే క్లాసులు max-width: 100%; మరియు height: auto; అని

ఉదాహరణ

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

స్వయంగా ప్రయత్నించండి