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