Պատկերներ
Փաստաթղթեր և օրինակներ՝ պատկերները պատասխանող վարքագծի մեջ ընտրելու համար (այնպես որ նրանք երբեք չեն դառնա ավելի մեծ, քան իրենց հիմնական տարրերը) և ավելացրեք դրանց թեթև ոճեր՝ բոլորը դասերի միջոցով:
Պատասխանատու պատկերներ
Bootstrap-ի պատկերները արձագանքվում են .img-fluid
. Սա վերաբերում է max-width: 100%;
և height: auto;
պատկերին, որպեսզի այն չափվի մայր տարրի հետ:
<img src="..." class="img-fluid" alt="...">
Պատկերի մանրապատկերներ
Ի լրումն մեր սահմանային շառավղային կոմունալ ծրագրերի , դուք կարող եք օգտագործել .img-thumbnail
պատկերին 1px եզրագծի կլորացված տեսք հաղորդելու համար:
<img src="..." class="img-thumbnail" alt="...">
Պատկերների հավասարեցում
Պատկերները հավասարեցրեք օգնական float դասերի կամ տեքստի հավասարեցման դասերի հետ : block
- մակարդակի պատկերները կարող են կենտրոնացվել ՝ օգտագործելով .mx-auto
margin utility դասը :
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Նկար
Եթե դուք օգտագործում եք տարրը կոնկրետի համար մի քանի տարրեր <picture>
նշելու համար , համոզվեք, որ դասերն ավելացրեք պիտակին և ոչ թե պիտակին:<source>
<img>
.img-*
<img>
<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Սաս
Փոփոխականներ
Փոփոխականները հասանելի են պատկերների մանրապատկերների համար:
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;