Պատկերներ
Փաստաթղթեր և օրինակներ՝ պատկերները պատասխանող վարքագծի մեջ ընտրելու համար (այնպես որ նրանք երբեք չեն դառնա ավելի մեծ, քան իրենց հիմնական տարրերը) և ավելացրեք դրանց թեթև ոճեր՝ բոլորը դասերի միջոցով:
Պատասխանատու պատկերներ
Bootstrap-ի պատկերները արձագանքվում են .img-fluid
. max-width: 100%;
և height: auto;
կիրառվում են պատկերի վրա այնպես, որ այն մասշտաբավորվի մայր տարրի հետ:
SVG պատկերներ և Internet Explorer
Internet Explorer 10-ում և 11-ում SVG պատկերներն .img-fluid
ունեն անհամաչափ չափսեր: Դա շտկելու համար ավելացրեք width: 100%;
կամ .w-100
անհրաժեշտության դեպքում: Այս ուղղումը սխալ չափեր է տալիս պատկերների այլ ձևաչափերին, ուստի Bootstrap-ն այն ինքնաբերաբար չի կիրառում:
Պատկերի մանրապատկերներ
Ի լրումն մեր սահմանային շառավղային կոմունալ ծրագրերի , դուք կարող եք օգտագործել .img-thumbnail
պատկերին 1px եզրագծի կլորացված տեսք հաղորդելու համար:
Պատկերների հավասարեցում
Պատկերները հավասարեցրեք օգնական float դասերի կամ տեքստի հավասարեցման դասերի հետ : block
- մակարդակի պատկերները կարող են կենտրոնացվել ՝ օգտագործելով .mx-auto
margin utility դասը :
Նկար
Եթե դուք օգտագործում եք տարրը կոնկրետի համար մի քանի տարրեր <picture>
նշելու համար , համոզվեք, որ դասերն ավելացրեք պիտակին և ոչ թե պիտակին:<source>
<img>
.img-*
<img>
<picture>