Media fɛn
Sɛbɛnw ni misaliw Bootstrap ka kunnafonidilan fɛn na walasa ka yɔrɔw jɔ minnu bɛ segin-ka-bɔ kosɛbɛ i n’a fɔ bulɔgu kumaw, tweetw, ani o ɲɔgɔnnaw.
Misaliya
Kunnafoni -falen -falenfɛn bɛ dɛmɛ ka yɔrɔw jɔ minnu ka gɛlɛn ani minnu bɛ segin-ka-bɔ, kunnafonidilan dɔw bɛ jɔ yɔrɔ minnu na kunnafonidi-minɛnw kɛrɛfɛ minnu tɛ kunnafoni-falen-falen kofɔlenw lamini. Ka fara o kan, a b’o Kɛ ni kalan wajibiyalen fla dɔrɔn ye k’a sababu Kɛ flexbox ye.
Kunnafoni-falen-falen-fɛn kelen misali dɔ bɛ duguma. Kalanso fila dɔrɔn de wajibiyalen don— i ka kɔnɔkow dacogo .mediaani u lamini. .media-bodypadding ni margin optionnel bɛ se ka kunbɛn ni spacing utilities ye .
Kunnafonidila kuncɛ
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.<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: Inline fɛnw tɛ jate i n’a fɔ flex fɛnw
Internet Explorer 10-11 tɛ fɛnw jira minnu bɛ ɛntɛrinɛti kɔnɔ i n’a fɔ jɛgɛnsira walima jaw (walima ::beforeani ::afterfɛn nkalonmaw) i n’a fɔ fɛn minnu bɛ fɛnw wuli. Baarakɛcogo kelen min bɛ yen, o ye ka nafa dɔ sigi sen kan min tɛ ɛntɛrinɛti kɔnɔ display(misali la, block, inline-block, walima flex). An bɛ ladilikan di ka baara kɛ ni .d-flex, an ka jiralan nafama dɔ ye , i n’a fɔ ɲɛnabɔli nɔgɔman.
Denw dilanni
Media fɛnw bɛ se ka dan tɛ minnu na, hali n’an b’a ɲini i fɛ i ka jɔ waati dɔ la. A yɔrɔ nested .mediakɔnɔna na .media-bodyof a parent media object.
Kunnafonidila kuncɛ
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.Kunnafonidila kuncɛ
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.<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>Alignment (labɛnni).
Media min bɛ media fɛn dɔ kɔnɔ, o bɛ se ka bɛn ni flexbox nafalanw ye ka taa sanfɛ (default), cɛmancɛ la, walima i ka .media-bodykɔnɔkow laban na.
Kunnafoni-di-sira minnu bɛ sanfɛ-labɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.
Donec sed odio dui ye. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, 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>Kunnafonidila minnu bɛ tali kɛ santiri la
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.
Donec sed odio dui ye. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, 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>Kunnafoni-di-sira minnu bɛ duguma-labɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.
Donec sed odio dui ye. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, 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>Ci
Yɛlɛma Kɛ kùnnafoni-falen-falen-minɛnw kɔnɔkow la ni HTML yɛrɛ ladilanni ye, walima ni flexbox CSS ladamulen dɔw Fàra ɲɔgɔn kan walasa ka ordernafolo Sìgi (ka Kɛ jateden dafalen ye i b’a fɛ min na).
Media fɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.<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>Kunnafonidila lisi
Komin media fɛn in ka jɔcogo wajibiyalenw ka dɔgɔ kosɛbɛ, i bɛ Se fana ka baara Kɛ ni nin kalasi ninnu ye list HTML elements kan. I ka <ul>walima <ol>, i ka fara a kan .list-unstyledwalasa ka browser default list styles bɛɛ bɔ yen, o kɔ i ka baara .mediakɛ i ka <li>s kan. I n’a fɔ a bɛ kɛ cogo min na tuma bɛɛ, aw bɛ baara kɛ ni yɔrɔjanfɛnw ye yɔrɔ o yɔrɔ aw mago bɛ yɔrɔ min na walasa ka u labɛn ka ɲɛ.
-
Lisiti-based media fɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ. -
Lisiti-based media fɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ. -
Lisiti-based media fɛn
Cras sigilen amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque ye fura ye min bɛ wele ko ante sollicitudin. Cras purus odio, vestibulum min bɛ vulputate kɔnɔ, o ye tempus viverra turpis ye. Fusce condimentum nunc ac nisi jiribolo min bɛ wele ko vulputate fringilla. Donec lacinia congue felis bɛ sɔrɔ faucibus kɔnɔ.
<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>