Íomhánna
Doiciméadú agus samplaí chun íomhánna a roghnú in iompar sofhreagrach (mar sin ní éiríonn siad níos leithne ná a dtuismitheoir) agus cuireann siad stíleanna éadroma leo - go léir trí ranganna.
Íomhánna sofhreagracha
Déantar íomhánna i Bootstrap sofhreagrach le .img-fluid
. Baineann sé seo max-width: 100%;
agus height: auto;
leis an íomhá ionas go scálaí sé le leithead an tuismitheora.
<img src="..." class="img-fluid" alt="...">
Mionsamhlacha íomhá
Chomh maith lenár bhfóntais ga teorann , is féidir leat é a úsáid .img-thumbnail
chun cuma teorann chothromú 1px a thabhairt don íomhá.
<img src="..." class="img-thumbnail" alt="...">
Íomhánna a ailíniú
Ailínigh na híomhánna leis na ranganna snámhphointe cúntóir nó ranganna ailínithe téacs . block
Is féidir íomhánna leibhéal a lárú ag baint úsáide as an .mx-auto
rang áirgiúlachta corrlaigh .
<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>
Pictiúr
Má tá an eilimint á úsáid agat <picture>
chun ileilimintí a shonrú le <source>
haghaidh leathanach ar leith <img>
, déan cinnte na .img-*
ranganna a chur leis an gclib <img>
agus ní leis an <picture>
gclib.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Athróga
Tá athróga ar fáil le haghaidh mionsamhlacha íomhá.
$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;