Delweddau

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

Delweddau ymatebol

Mae delweddau yn Bootstrap yn cael eu gwneud yn ymatebol gyda .img-fluid. max-width: 100%;ac height: auto;yn cael eu cymhwyso i'r ddelwedd fel ei bod yn graddio gyda'r rhiant elfen.

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

Delweddau SVG ac IE 10

Yn Internet Explorer 10, mae delweddau SVG gyda .img-fluidmaint anghymesur. I drwsio hyn, ychwanegwch width: 100% \9;lle bo angen. Mae'r atgyweiriad hwn yn maint amhriodol o fformatau delwedd eraill, felly nid yw Bootstrap yn ei gymhwyso'n awtomatig.

Mân-luniau delwedd

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

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

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 .

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

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

<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>