Ahanoa pāpāho
Ko nga tuhinga me nga tauira mo te ahanoa pāpāho a Bootstrap hei hanga i nga waahanga tino tukurua penei i nga korero rangitaki, tweets, me era atu.
Tauira
Ka awhina te ahanoa pāpāho ki te hanga i nga waahanga uaua me te tukurua i te waahi ka tuu etahi papapāho ki te taha o nga ihirangi karekau e takai ki te taha o te hunga pāpāho. I tua atu, ka mahia e ia me nga karaehe e hiahiatia ana e rua noa na te flexbox.
Kei raro nei he tauira o te ahanoa pāpāho kotahi. E rua noa nga karaehe e hiahiatia ana—te takai .mediame te .media-bodyhuri noa i to ihirangi. Ka taea te whakahaere i te taapiri me te tawhē ma nga taputapu mokowhiti .
Pane korero
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in 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: Ko nga huānga rōraina e kore e kiia he tuemi ngawari
Karekau a Internet Explorer 10-11 e huri i nga huānga rōraina penei i nga hononga, whakaahua ranei ( ::beforeme ::afternga huānga pseudo) hei tuemi ngawari. Ko te mahi anake ko te tautuhi i te displayuara-raina-kore (hei tauira, block, inline-block, ranei flex). Ka whakaaro matou ki te whakamahi .d-flex, tetahi o a maatau taputapu whakaatu , hei whakatika ngawari.
Puna: Flexbugs i GitHub
Kohanga
Ka taea te kohanga mutunga kore o nga mea pāpāho, ahakoa ko ta matou whakaaro kia mutu koe i tetahi wa. Whakanohoia .mediaki roto i te .media-bodyahanoa pāpāho matua.
Pane korero
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in 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>Tirohanga
Ka taea te whakahāngai i te pāpāho i roto i te ahanoa pāpāho ki nga taputapu flexbox ki runga (taunoa), waenganui, mutunga ranei o to .media-bodyihirangi.
Ko te hunga pāpāho kua whakararo-runga
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 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>Ko te hunga pāpāho kua whakaritea ki waenganui
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 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>Paapaho-raro
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 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>Ota
Hurihia te raupapa o nga ihirangi i roto i nga taonga pāpāho ma te whakarereke i te HTML ake, ma te taapiri ranei i etahi CSS flexbox ritenga ki te tautuhi i te ordertaonga (ki te tauoti e whiriwhiria ana e koe).
Ahanoa pāpāho
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in 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>Rārangi pāpāho
Na te mea he iti noa nga whakaritenga hanganga o te ahanoa pāpāho, ka taea hoki e koe te whakamahi i enei karaehe ki te rarangi huānga HTML. I runga i to <ul>, <ol>, taapirihia te .list-unstyledki te tango i nga momo rarangi raarangi taunoa, ka pa .mediaatu ki to <li>s. Ka rite ki nga wa katoa, whakamahia nga taputapu mokowhiti i nga waahi katoa e tika ana kia pai te oro.
-
Ahanoa pāpāho-rarangi
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus. -
Ahanoa pāpāho-rarangi
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus. -
Ahanoa pāpāho-rarangi
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in 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>