Delweddau

Dogfennaeth ac enghreifftiau ar gyfer optio delweddau i ymddygiad ymatebol (felly ni fyddant byth yn dod yn ehangach na'u rhiant) ac yn ychwanegu arddulliau ysgafn atynt - i gyd trwy ddosbarthiadau.

Ar y dudalen hon

Delweddau ymatebol

Mae delweddau yn Bootstrap yn cael eu gwneud yn ymatebol gyda .img-fluid. Mae hyn yn berthnasol max-width: 100%;ac height: auto;i'r ddelwedd fel ei fod yn cyd-fynd â lled y rhiant.

html

<img src="..." class="img-fluid" alt="...">

Mân-luniau delwedd

Yn ogystal â'n cyfleustodau radiws ffin , gallwch ei ddefnyddio .img-thumbnaili roi golwg ffin 1px crwn i ddelwedd.

html

<img src="..." class="img-thumbnail" alt="...">

Alinio delweddau

Alinio delweddau gyda'r dosbarthiadau arnofio helpwr neu ddosbarthiadau alinio testun . block- gellir canoli delweddau lefel gan ddefnyddio'r dosbarth .mx-autocyfleustodau ymyl .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Llun

Os ydych chi'n defnyddio'r <picture>elfen i nodi <source>elfennau lluosog ar gyfer ffeil benodol <img>, gwnewch yn siŵr eich bod chi'n ychwanegu'r .img-*dosbarthiadau at y tag <img>ac nid at y <picture>tag.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Newidynnau

Mae newidynnau ar gael ar gyfer mân-luniau delwedd.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;