Source

Midia ɔbjɛkt

Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in midia ɔbjɛkt fɔ kɔnstrɔk 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, e du dis wit onli tu rikwaid 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 .

64x64 we de sho
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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.

64x64 we de sho
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.
64x64 we de sho
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </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.

64x64 we de sho
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 class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 we de sho
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 class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 we de sho
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 class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <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.
64x64 we de sho 
<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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</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.

  • 64x64 we de sho
    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.
  • 64x64 we de sho
    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.
  • 64x64 we de sho
    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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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>