Source

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 .

64x64
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 class="mr-3" src="..." 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: 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.

64x64
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.
64x64
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 class="mr-3" src="..." 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="..." 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>

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.

64x64
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 class="align-self-start mr-3" src="..." 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
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 class="align-self-center mr-3" src="..." 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
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 class="align-self-end mr-3" src="..." 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>

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.
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="..." alt="Generic placeholder image">
</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.

  • 64x64
    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.
  • 64x64
    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.
  • 64x64
    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 class="mr-3" src="..." 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="..." 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="..." 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>