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 .

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

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

Guhuza

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

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

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

Urutonde rw'itangazamakuru

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

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