Source

Midia ɔbjɛkt

Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in midia ɔbjɛkt fɔ kɔnstrɔkt kɔmpɔnɛnt dɛn we rili ripit lɛk blɔk kɔmɛnt, twit, ɛn ɔda tin dɛn lɛk dat.

Ɛgzampul

Di midia ɔbjɛkt de ɛp fɔ bil kɔmpleks ɛn ripit kɔmpɔnɛnt dɛn usay sɔm midia de pozishɔn alongsay kɔntinyu we nɔ de rap rawnd di midia we dɛn tɔk bɔt. Plus, i du dis wit onli tu rikwayd klas tanks to flexbox.

Dis dɔŋ ya na ɛgzampul fɔ wan midia ɔbjɛkt. Na tu klas nɔmɔ dɛn nid—di wrap .mediaɛn di .media-bodyrawnd yu kɔntinyu. Opshɔnal padding ɛn margin kin kɔntrol tru spɛshal yutiliti dɛn .

Placeholder 64x64
Midia edlayn
Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus. 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12: Inlayn ɛlimɛnt dɛn nɔ de trit lɛk fleks aytem dɛn

Internet Explorer 10-11 nɔ de rɛnd inlayn ɛlimɛnt dɛn lɛk link ɔ pikchɔ dɛn (ɔ ::beforeɛn ::afterpseudo-ɛlimɛnt dɛn) as fleks aytem dɛn. Di onli wokaround na fɔ sɛt wan nɔ-inlayn displayvalyu (ɛgz., block, inline-block, ɔ flex). Wi kin advays yu fɔ yuz .d-flex, wan pan wi displei yutiliti dɛn , as wan izi fix.

Sos: Flexbugs na GitHub

Fɔ mek dɛn nɛst

Midia ɔbjɛkt dɛn kin gɛt infinitely nest, pan ɔl we wi kin se yu fɔ stɔp na sɔm tɛm. Ples nest .mediainsay di .media-bodyɔf wan mama ɛn papa midia ɔbjɛkt.

Placeholder 64x64
Midia edlayn
Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.
Placeholder 64x64
Midia edlayn
Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus. 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Alignmɛnt fɔ di wan dɛn we de

Midia insay wan midia ɔbjɛkt kin alaynɛd ​​wit fleksbɔks yutiliti dɛn to di ɔp (difɔlt), midul, ɔ ɛnd pan yu .media-bodykɔntinyu.

Placeholder 64x64
Midia we de alaynɛd ​​ɔp

Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Sɛntral-alayn midia

Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Midia we de alaynɛd ​​dɔŋ

Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Ɔda

Chenj di ɔda we aw di tin dɛn de insay di midia ɔbjɛkt dɛn bay we yu chenj di HTML sɛf, ɔ bay we yu ad sɔm kɔstɔm fleksbɔks CSS fɔ sɛt di orderprɔpati (to wan intaj we yu pik).

Midia ɔbjɛkt
Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.
Placeholder 64x64 
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

Lis fɔ di midia

Bikɔs di midia ɔbjɛkt gɛt smɔl strɔkchɔral rikwaymɛnt dɛn, yu kin yuz dɛn klas ya bak pan list HTML ɛlimɛnt dɛn. Na yu <ul>ɔ <ol>, ad di .list-unstyledfɔ pul ɛni brɔwza difɔlt list stayl dɛn, dɔn aplay .mediato yu <li>s. As ɔltɛm, yuz spacing utilities ɛnisay we nid de fɔ fayn tyun.

  • Placeholder 64x64
    List-based midia ɔbjɛkt
    Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.
  • Placeholder 64x64
    List-based midia ɔbjɛkt
    Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus.
  • Placeholder 64x64
    List-based midia ɔbjɛkt
    Kras sidon amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solisitudin. Kras purus odio, vestibulum in vulputate na, tempus viverra turpis. Fusce kondimɛnt nunc ac nisi vulputate fringila. Donec lacinia congue felis na di faucibus. 
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>