Source

Ikintu cyitangazamakuru

Inyandiko n'ingero kubitangazamakuru bya Bootstrap kugirango byubake ibice bisubiramo cyane nkibitekerezo bya blog, tweet, nibindi nkibyo.

Urugero

Ikintu cyitangazamakuru gifasha kubaka ibice bigoye kandi bisubirwamo aho ibitangazamakuru bimwe bihagaze hamwe nibirimo bitazengurutse ibitangazamakuru byavuzwe. Byongeye, ikora ibi hamwe nibyiciro bibiri gusa bisabwa dukesha flexbox.

Hasi ni urugero rwikintu kimwe cyitangazamakuru. Ibyiciro bibiri gusa birakenewe-gupfunyika .mediahamwe .media-bodynibirimo. Guhitamo padi na margin birashobora kugenzurwa binyuze mumwanya muto .

64x64
Umutwe w'itangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri 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: Imirongo yumurongo ntabwo ifatwa nkibintu byoroshye

Internet Explorer 10-11 ntabwo itanga ibice byumurongo nkumuhuza cyangwa amashusho (cyangwa ::beforena ::afterpseudo-element) nkibintu byoroshye. Igikorwa cyonyine ni ugushiraho umurongo utari umurongo display(urugero ,,, blockcyangwa inline-block) flex. Turasaba gukoresha .d-flex, kimwe mubikorwa byacu byerekana , nkigisubizo cyoroshye.

Inkomoko: Flexbugs kuri GitHub

Icyari

Ibikoresho byitangazamakuru birashobora guterwa bitagira akagero, nubwo turasaba ko uhagarara mugihe runaka. Shyira icyari .mediaimbere .media-bodyyikintu cyababyeyi.

64x64
Umutwe w'itangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.
64x64
Umutwe w'itangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri 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>

Guhuza

Itangazamakuru mubintu byitangazamakuru rishobora guhuzwa na flexbox yingirakamaro hejuru (isanzwe), hagati, cyangwa iherezo .media-bodyryibirimo.

64x64
Itangazamakuru ryo hejuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus 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
Itangazamakuru rihujwe

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus 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
Itangazamakuru rihuza hepfo

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus 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>

Tegeka

Hindura gahunda yibirimo mubitangazamakuru uhindura HTML ubwayo, cyangwa wongeyeho flexbox CSS yihariye kugirango ushireho orderumutungo (kuri integer wahisemo).

Ikintu cyitangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.
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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</div>

Urutonde rw'itangazamakuru

Kuberako ikintu cyitangazamakuru gifite ibyangombwa bike byubaka, urashobora kandi gukoresha aya masomo kurutonde rwibintu HTML. Kuri <ul>cyangwa <ol>, ongeraho .list-unstyledkugirango ukureho mushakisha iyariyoyose urutonde rwimiterere, hanyuma ukoreshe .mediakuri <li>s. Nkibisanzwe, koresha umwanya utandukanye aho bikenewe kugirango uhuze neza.

  • 64x64
    Urutonde rushingiye kubitangazamakuru
    Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.
  • 64x64
    Urutonde rushingiye kubitangazamakuru
    Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.
  • 64x64
    Urutonde rushingiye kubitangazamakuru
    Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri 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>