Awọn aworan
Iwe ati awọn apẹẹrẹ fun jijade awọn aworan sinu ihuwasi idahun (nitorinaa wọn ko tobi ju awọn eroja obi wọn lọ) ati ṣafikun awọn aza iwuwo fẹẹrẹ si wọn — gbogbo nipasẹ awọn kilasi.
Awọn aworan idahun
Awọn aworan ni Bootstrap jẹ idahun pẹlu .img-fluid
. Eyi kan max-width: 100%;
ati height: auto;
aworan naa ki o le ṣe iwọn pẹlu eroja obi.
<img src="..." class="img-fluid" alt="...">
Awọn eekanna atanpako aworan
Ni afikun si awọn ohun elo redio aala wa , o le lo .img-thumbnail
lati fun aworan ni irisi aala 1px yika.
<img src="..." class="img-thumbnail" alt="...">
aligning images
Ṣe afiwe awọn aworan pẹlu awọn kilasi leefofo oluranlọwọ tabi awọn kilasi titete ọrọ . block
Awọn aworan ipele le jẹ dojukọ nipa lilo kilasi .mx-auto
IwUlO ala .
<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>
Aworan
If you are using the <picture>
element to specify multiple element <source>
for a specific <img>
, rii daju pe o fi awọn .img-*
kilasi kun si <img>
kii ṣe si <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Awọn oniyipada
Awọn oniyipada wa fun awọn eekanna atanpako aworan.
$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;