Source

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 .

64x64 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 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: 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.

Soso: Flexbugs min bɛ GitHub kan

Nesting (kɔnɔnafili).

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.

64x64 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ɔ.
64x64 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 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>

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.

64x64 ye
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 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 ye
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 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 ye
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 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>

Ci

Yɛlɛma don kɔnɔkow sigicogo la kunnafonidilanw kɔnɔ ni HTML yɛrɛ ladilanni ye, walima ni flexbox CSS ladamu dɔw farali ye walasa ka ordernafolomafɛnw sigi (ka kɛ jateden dafalen ye i b’a fɛ ka min sugandi).

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ɔ.
64x64 ye 
<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>

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 ɲɛ.

  • 64x64 ye
    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ɔ.
  • 64x64 ye
    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ɔ.
  • 64x64 ye
    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 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>