Source

Ekintu ky’emikutu gy’amawulire

Ebiwandiiko n'ebyokulabirako ku Bootstrap's media object okuzimba ebitundu ebiddiŋŋana ennyo nga blog comments, tweets, n'ebirala ebiringa ebyo.

Eky'okulabirako

Ekintu ky’emikutu kiyamba okuzimba ebitundu ebizibu era ebiddiŋŋana nga emikutu egimu giteekeddwa ku mabbali g’ebirimu ebitazingira ku mikutu egyogeddwako. Plus, kino kikola ne class bbiri zokka ezeetaagisa okwebaza flexbox.

Wansi waliwo ekyokulabirako ky’ekintu kimu eky’emikutu. Ebika bibiri byokka bye byetaagibwa —okuzinga .median’okwetooloola .media-bodyebirimu byo. Optional padding ne margin bisobola okufugibwa okuyita mu spacing utilities .

64x64 nga bwe kiri
Omutwe gw'emikutu gy'amawulire
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa 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: Ebintu ebiri mu layini tebikwatibwa nga ebintu ebikyukakyuka

Internet Explorer 10-11 tekola bintu ebiri mu layini nga enkolagana oba ebifaananyi (oba ::beforene ::afterpseudo-elements) nga ebintu ebikyukakyuka. Ekizibu kyokka kwe kuteekawo omuwendo ogutali mu layini display(okugeza, block, inline-block, oba flex). Tukuwa amagezi okukozesa .d-flex, ekimu ku bikozesebwa byaffe eby’okulaga , ng’okutereeza okwangu.

Ensibuko: Flexbugs ku GitHub

Okuzimba ebisu

Ebintu by'emikutu bisobola okuteekebwa mu kisu ekitaliiko kkomo, wadde nga tukuwa amagezi oyimirire mu kiseera ekimu. Teeka nested .mediamunda mu .media-bodyy'ekintu eky'emikutu gy'omuzadde.

64x64 nga bwe kiri
Omutwe gw'emikutu gy'amawulire
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.
64x64 nga bwe kiri
Omutwe gw'emikutu gy'amawulire
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa 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 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>

Okukwatagana

Emikutu mu kintu ky'emikutu giyinza okukwatagana n'ebikozesebwa bya flexbox waggulu (ebisookerwako), wakati, oba ku nkomerero .media-bodyy'ebirimu byo.

64x64 nga bwe kiri
Emikutu gy’amawulire egy’oku ntikko

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa 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 nga bwe kiri
Emikutu gy’amawulire egy’okukwatagana wakati

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa 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 nga bwe kiri
Emikutu gy’amawulire egy’okulaga wansi

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa 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>

Okulagira

Kyusa ensengeka y'ebirimu mu bintu by'emikutu ng'okyusa HTML yennyini, oba ng'oyongerako CSS ezimu eza custom flexbox okuteekawo ordereky'obugagga (ku namba enzijuvu gy'olonze).

Ekintu ky’emikutu gy’amawulire
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.
64x64 nga bwe kiri 
<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>

Olukalala lw'emikutu gy'amawulire

Olw’okuba ekintu ky’emikutu kirina ebyetaago by’enzimba ebitono ennyo, osobola n’okukozesa ebika bino ku bintu bya HTML eby’olukalala. Ku <ul>oba yo <ol>, yongera ku .list-unstyledokuggyawo sitayiro zonna ez'olukalala lwa browser ezisookerwako, n'oluvannyuma okozese ku s .mediayo . <li>Nga bulijjo, kozesa ebikozesebwa mu kugabanya ebanga wonna we kyetaagisa okulongoosa obulungi.

  • 64x64 nga bwe kiri
    Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
    Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.
  • 64x64 nga bwe kiri
    Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
    Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.
  • 64x64 nga bwe kiri
    Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
    Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque nga esookera ddala okusoba. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa 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>