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 .
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 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: 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.
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.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 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>Ð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.
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 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>Nyadzɔdzɔgblɔmɔ̃ 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 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>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 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>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.<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>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.
-
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. -
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. -
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 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>