Fjölmiðlahlutur

Skjöl og dæmi fyrir fjölmiðlahlut Bootstrap til að búa til mjög endurtekna hluti eins og blogg athugasemdir, kvak og þess háttar.

Dæmi

Fjölmiðlahluturinn hjálpar til við að byggja upp flókna og endurtekna íhluti þar sem sumir miðlar eru staðsettir við hlið efnis sem umlykur ekki umræddan miðil. Auk þess gerir það þetta með aðeins tveimur nauðsynlegum flokkum þökk sé flexbox.

Hér að neðan er dæmi um einn miðlunarhlut. Aðeins þarf tvo flokka - umbúðirnar .mediaog innihaldið í .media-bodykringum þig. Hægt er að stjórna valfrjálsu bólstrun og spássíu í gegnum bilabúnað .

Fyrirsögn fjölmiðla

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 í 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: Innbyggðir þættir eru ekki meðhöndlaðir sem sveigjanlegir hlutir

Internet Explorer 10-11 birtir ekki innbyggða þætti eins og tengla eða myndir (eða ::beforeog ::aftergerviþætti) sem sveigjanlega hluti. Eina lausnin er að stilla displaygildi sem ekki er innbyggt (td , block, inline-blockeða flex). Við mælum með að nota .d-flex, eitt af skjátólunum okkar , sem auðveld leið.

Heimild: Flexbugs á GitHub

Hreiður

Margmiðlunarhlutir geta verið óendanlega hreiður, þó við mælum með að þú hættir á einhverjum tímapunkti. Settu hreiðrað .mediainn í .media-bodymóðurmiðilshlut.

Fyrirsögn fjölmiðla

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

Jöfnun

Hægt er að stilla miðlum í miðlunarhlut með flexbox tólum efst (sjálfgefið), miðja eða enda .media-bodyefnisins þíns.

Fjölmiðlar í efstu röð

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

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

Miðjumiðlar

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

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

Miðlar sem eru í botni

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

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

Panta

Breyttu röð efnis í miðlunarhlutum með því að breyta HTML sjálfum, eða með því að bæta við sérsniðnum flexbox CSS til að stilla ordereignina (í heiltölu að eigin vali).

Fjölmiðlahlutur

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

Fjölmiðlalisti

Vegna þess að margmiðlunarhluturinn hefur svo fáar byggingarkröfur geturðu líka notað þessa flokka á HTML-einingum á lista. Á <ul>eða <ol>, bættu við .list-unstyledtil að fjarlægja sjálfgefna listastíl vafrans og notaðu síðan .mediatil þín <li>. Eins og alltaf, notaðu biltól hvar sem þú þarft til að fínstilla.

Fjölmiðlahlutur sem byggir á lista
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 í faucibus.
Fjölmiðlahlutur sem byggir á lista
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 í faucibus.
Fjölmiðlahlutur sem byggir á lista
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 í 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>

Fjölmiðlahlutur

Dæmi

Fyrirsögn fjölmiðla

Flexbug #12: Innbyggðir þættir eru ekki meðhöndlaðir sem sveigjanlegir hlutir

Hreiður

Fyrirsögn fjölmiðla

Fyrirsögn fjölmiðla

Jöfnun

Fjölmiðlar í efstu röð

Miðjumiðlar

Miðlar sem eru í botni

Panta

Fjölmiðlahlutur

Fjölmiðlalisti

Fjölmiðlahlutur sem byggir á lista

Fjölmiðlahlutur sem byggir á lista

Fjölmiðlahlutur sem byggir á lista