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 .

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

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

Okukwatagana

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

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

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

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.

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