Source

Nyadzɔdzɔgblɔmɔnuwo ƒe nu

Nuŋlɔɖi kple kpɔɖeŋuwo na Bootstrap ƒe media nu be woatu akpa siwo gbugbɔna gblɔna ŋutɔ abe blog nyawo, tweets, kple esiawo tɔgbe ene.

Kpɔɖeŋu

Nyadzɔdzɔgblɔmɔ̃ ƒe nu la kpena ɖe akpa siwo gɔme sese sesẽ eye wogbugbɔa nu ŋu la tutu ŋu afisi woɖoa nyadzɔdzɔgblɔmɔ̃ aɖewo ɖe nyatakaka siwo mexatsa ɖe nyadzɔdzɔgblɔmɔ̃ si wogblɔ ŋu o la xa. Gakpe ɖe eŋu la, ewɔa esia kple klass eve siwo wobia ko le akpedada na flexbox.

Media nu ɖeka ƒe kpɔɖeŋu le ete. Klass eve koe wobia tso asiwò—wò nyawo babla .mediakple esiwo .media-bodyƒo xlã wò nyawo. Woate ŋu akpɔ padding kple margin si woate ŋu atia dzi to dometsotso ƒe dɔwɔnuwo dzi .

64x64 ƒe didime
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me. 
<div class="media">
  <img class="mr-3" src="..." 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: Womebua nusiwo le fli me abe nusiwo le fli me ene o

Internet Explorer 10-11 meɖea nusiwo le fli me abe kadodowo alo nɔnɔmetatawo (alo ::beforekple ::afteraʋatso-nuawo) fiana abe nusiwo le fli me ene o. Dɔwɔwɔ ɖeka koe nye be nàɖo displayasixɔxɔ si mele fli me o (le kpɔɖeŋu me, block, inline-block, alo flex). Míeɖo aɖaŋu be nàzã .d-flex, míaƒe ɖeɖefia dɔwɔnuwo dometɔ ɖeka , abe ɖɔɖɔɖo bɔbɔe ene.

Dzɔtsoƒe: Flexbugs le GitHub dzi

Atɔwɔwɔ

Media nuwo ateŋu anye nested seɖoƒemanɔmee, togbɔ be míeɖo aɖaŋu be nàdzudzɔ le ɣeyiɣi aɖe me hã. De nested .mediaɖe .media-bodydzila media nu ƒe me.

64x64 ƒe didime
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.
64x64 ƒe didime
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me. 
<div class="media">
  <img class="mr-3" src="..." 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="..." 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>

Ðoɖowɔwɔ ɖe ɖoɖo nu

Woateŋu awɔ media le media object me ɖe ɖoɖo nu kple flexbox utilities ɖe wò .media-bodynyatakakawo ƒe tame (default), titina, alo nuwuwu.

64x64 ƒe didime
Nyadzɔdzɔgblɔmɔ̃ siwo woɖo ɖe ɖoɖo nu le etame

Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.

Donec sed odio dui. Nullam quis risus eget urna mollis ƒe atsyɔ̃ɖoɖo vel eu leo. Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-start mr-3" src="..." 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 ƒe didime
Nyadzɔdzɔgblɔmɔnuwo siwo woɖo ɖe titina

Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.

Donec sed odio dui. Nullam quis risus eget urna mollis ƒe atsyɔ̃ɖoɖo vel eu leo. Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-center mr-3" src="..." 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 ƒe didime
Nyadzɔdzɔgblɔmɔ̃ siwo woɖo ɖe ɖoɖo nu le ete

Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.

Donec sed odio dui. Nullam quis risus eget urna mollis ƒe atsyɔ̃ɖoɖo vel eu leo. Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-end mr-3" src="..." 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>

Gbeɖeɖe

Trɔ ɖoɖo si nu nyawo le le media nuwo me to asitɔtrɔ le HTML ŋutɔ ŋu me, alo to flexbox CSS tɔxɛ aɖewo tsɔtsɔ kpee me be nàɖo nɔnɔmea order(na xexlẽdzesi blibo si nèdi).

Nyadzɔdzɔgblɔmɔnuwo ƒe nu
Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.
64x64 ƒe didime 
<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="..." alt="Generic placeholder image">
</div>

Nyadzɔdzɔgblɔmɔnuwo ƒe xexlẽdzesiwo

Esi wònye be media object la ƒe xɔtuɖoɖo ƒe nudidi ʋɛ aɖewo koe li ta la, àteŋu azã klass siawo hã le list HTML elements dzi. Le wò <ul>alo <ol>, tsɔ kpe ɖe eŋu .list-unstyledbe nàɖe web-browser ƒe xexlẽdzesiwo ƒe atsyã ɖesiaɖe ɖa, eye emegbe nàwɔ dɔ .mediaɖe wò <li>s dzi. Abe alesi wònɔna ɖaa ene la, zã dometsotso ƒe dɔwɔnuwo le afisiafi si wòahiã le be nàtrɔ asi le eŋu nyuie.

  • 64x64 ƒe didime
    Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
    Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.
  • 64x64 ƒe didime
    Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
    Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me.
  • 64x64 ƒe didime
    Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
    Cras nɔ anyi amet nibh libero, le gravida nulla me. Nulla vel metus scelerisque si wowɔna do ŋgɔ na ʋɔnudɔdrɔ̃. Cras purus odio, vestibulum le akɔta le, tempus viverra turpis. Fusce condimentum nunc ac nisi ƒe ƒunukpeƒe ƒe lãkusi. Donec lacinia congue felis le lãgbalẽgolo me. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src="..." 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="..." 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="..." 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>