Bililingi
Mikanda mpe bandakisa mpo na kopona bilili na bizaleli ya koyanola (yango wana ekomaka ata moke te monene koleka biloko na bango ya moboti) mpe kobakisa mitindo ya pete na yango —nyonso na nzela ya bakelasi.
Bililingi oyo ezali kopesa eyano
Ba images na Bootstrap esalemi responsive na .img-fluid
. Yango etali max-width: 100%;
mpe height: auto;
na elilingi mpo ete esala échelle na eleman ya moboti.
<img src="..." class="img-fluid" alt="...">
Bilili ya mike
En plus ya ba utilitaires na biso ya border-radius , okoki kosalela .img-thumbnail
pona kopesa image apparence ya border ya 1px arrondi.
<img src="..." class="img-thumbnail" alt="...">
Kobongisa bililingi
Bongisa bilili na bakelasi ya flotteur ya mosungi to bakelasi ya boyokani ya makomi . block
-niveau bilili ekoki kozala na katikati na kosalelaka kelasi ya utilitaire ya .mx-auto
marge .
<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>
Foto
Soki ozali kosalela <picture>
eleman mpo na kolakisa <source>
biloko mingi mpo na moko ya sikisiki <img>
, sala makasi obakisa .img-*
bakelasi na <img>
mpe te na <picture>
elembo.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass oyo azali
Ba variables oyo ezali
Ba variables ezali mpo na ba miniatures ya bilili.
$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;