Source

Mea fa'asalalau

Faʻamaumauga ma faʻataʻitaʻiga mo le mea faʻasalalau a Bootstrap e fausia ai vaega sili ona fai soo e pei o faʻamatalaga blog, tweets, ma mea faapena.

Faataitaiga

O le mea fa'asalalau e fesoasoani i le fausiaina o vaega lavelave ma fai fa'asolo lea o lo'o tu'u ai nisi fa'asalalauga fa'atasi ma mea e le o afifi ai fa'asalalauga fa'apea. Ma le isi, e faia lenei mea i na'o le lua vasega mana'omia fa'afetai ile flexbox.

Lalo o se faʻataʻitaʻiga o se mea faʻasalalau e tasi. E na'o le lua vasega e mana'omia-o le afifiina .mediama le .media-bodyfa'ata'amilo o au mea. E mafai ona fa'atonutonuina le fa'alava ma le pito e filifili e ala ile fa'aogaina ole avanoa .

Placeholder 64x64
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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: O elemene i totonu e le fa'atatauina o ni mea fa'alelei

Internet Explorer 10-11 e le fa'aliliuina elemene fa'asinotonu e pei o so'otaga po'o ata (po'o ::beforema ::afterpseudo-elements) o ni mea fa'alelei. Pau lava le fofo ole setiina o se tau e le o totonu display(fa'ata'ita'iga, block, inline-block, poʻo flex). Matou te fautua atu e faʻaaoga .d-flex, se tasi o matou faʻaaliga faʻaoga , e fai ma faʻaoga faigofie.

Punavai: Flexbugs ile GitHub

Faamoega

O mea fa'asalalau e mafai ona fa'aputuina e le gata, e ui lava matou te fautua atu e te tu i se taimi. Tu'u fa'amoega .mediai totonu .media-bodyo se mea fa'asalalau matua.

Placeholder 64x64
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
Placeholder 64x64
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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>

Fa'atonuga

O ala fa'asalalau i totonu o se mea fa'asalalau e mafai ona fa'aogaina ma fa'aoga flexbox i le pito i luga (fa'aletonu), ogatotonu, po'o le pito o au .media-bodymea.

Placeholder 64x64
Fa'asalalau pito i luga

Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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 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>
Placeholder 64x64
Fa'asalalauga fa'aogatotonu

Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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 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>
Placeholder 64x64
Ala fa'asalalau fa'asaga i lalo

Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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 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>

Poloaiga

Suia le fa'asologa o anotusi i mea fa'asalalau e ala i le suia o le HTML lava ia, po'o le fa'aopoopoina o se custom flexbox CSS e fa'atulaga ai le ordermeatotino (i le numera o lau filifiliga).

Mea fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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>

Lisi fa'asalalau

Talu ai ona o le mea faʻasalalau e itiiti lava le manaʻoga, e mafai foi ona e faʻaogaina nei vasega ile lisi elemene HTML. I luga o lau <ul>po'o <ol>, fa'aopoopo le .list-unstylede aveese so'o se su'esu'ega fa'aletonu lisi sitaili, ona fa'aoga lea .mediai lau <li>s. E pei lava o taimi uma, fa'aoga avanoa avanoa i so'o se mea e mana'omia e fa'alelei ai.

  • Placeholder 64x64
    Lisi mea fa'asalalau fa'asalalau
    Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
  • Placeholder 64x64
    Lisi mea fa'asalalau fa'asalalau
    Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.
  • Placeholder 64x64
    Lisi mea fa'asalalau fa'asalalau
    Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i 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>