Fa'asolo ile anotusi autu Fa'asolo ile fa'ata'ita'iga o fa'amatalaga
in English

Kata

O kata a Bootstrap e maua ai se atigipusa fetuutuunai ma faʻalauteleina ma le tele o fesuiaiga ma filifiliga.

I luga o lenei itulau

E uiga i

O le kata ose mea e mafai ona fetu'una'i ma fa'alautele. E aofia ai filifiliga mo ulutala ma vae, o le tele o anotusi eseese, lanu o talaaga, ma filifiliga faʻaalia mamana. Afai e te masani i le Bootstrap 3, o kata e sui ai a matou paneli tuai, vaieli, ma ata. O galuega fa'atusa i na vaega o lo'o avanoa e fai ma vasega fa'aopoopo mo kata.

Faataitaiga

O kata e fausia i ni fa'ailoga la'ititi ma sitaili e mafai, ae o lo'o mafai lava ona tu'uina atu le tele o le fa'atonuga ma le fa'atulagaina. Fausia i le flexbox, latou te ofoina faigofie le faʻaogaina ma faʻafefiloi lelei ma isi vaega Bootstrap. E leai ni margina latou mea fa'aletonu, o lea ia fa'aoga avanoa avanoa pe a mana'omia.

O loʻo i lalo se faʻataʻitaʻiga o se kata faʻavae ma mea faʻafefiloi ma se lautele tumau. O kata e leai se lautele tumau e amata ai, o lea e masani lava ona faʻatumuina le lautele atoa o lona elemene matua. O lenei mea e faigofie ona faʻapipiʻiina ma a tatou filifiliga sizing eseese .

Placeholder Image cap
Igoa pepa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Alu i se mea 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ituaiga mataupu

E lagolagoina e kata le tele o anotusi, e aofia ai ata, tusitusiga, vaega o lisi, sootaga, ma isi mea. O lo'o i lalo fa'ata'ita'iga o mea o lo'o lagolagoina.

Tino

O le poloka fau o se kata o le .card-body. Fa'aoga i so'o se taimi e te mana'omia ai se vaega fa'atumu i totonu o se kata.

O nisi nei o tusitusiga i totonu o se tino kata. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Ulutala, tusitusiga, ma so'oga

Fa'aigoa pepa e fa'aoga e ala i le fa'aopoopo .card-titlei se <h*>fa'ailoga. I le auala lava e tasi, e faʻaopoopoina soʻotaga ma tuʻu i tafatafa o le tasi ma le isi e ala i le faʻaopoopoina .card-linki se <a>pine.

O ulutala e fa'aogaina e ala i le fa'aopoopoina o le a .card-subtitlei se <h*>fa'ailoga. Afai e tuu le .card-titlema .card-subtitlemea i totonu o se .card-bodymea, o le igoa kata ma le ulutala e fetaui lelei.

Igoa pepa
Fa'aulutala o Kata

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Feso'ota'iga kata Se isi so'oga 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Ata

.card-img-toptuu se ata i le pito i luga o le kata. Fa'atasi ai ma .card-textle , e mafai ona fa'aopoopoina tusitusiga i le kata. O tusitusiga i totonu .card-texte mafai fo'i ona fa'avasega ma fa'ailoga HTML masani.

Placeholder Image cap

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lisi vaega

Fausia lisi o mea i totonu o se kata faʻatasi ai ma se kulupu lisi faʻafefe.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Fa'aalia
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
Fa'avae pepa 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Togo umukuka

Fa'afefiloi ma fa'afetaui ituaiga mea e tele e fai ai le kata e te mana'omia, pe togi mea uma i totonu. O lo'o fa'aalia i lalo sitaili ata, poloka, sitaili o tusitusiga, ma se vaega lisi—ua afifi uma i se kata fa'amautu-lautele.

Placeholder Image cap
Igoa pepa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
Feso'ota'iga kata Se isi so'oga 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Fa'aopoopo se ulutala ma/po'o se vae i totonu o se kata.

Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

E mafai ona fa'apipi'i fa'auluulu pepa e fa'aopoopo .card-headeri <h*>elemene.

Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Upusii

O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.

O se tasi lauiloa i le Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
2 aso talu ai 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Tele

O kata e manatu e leai se mea patino widthe amata ai, o lea o le a 100% lautele se'i vagana ua ta'ua. E mafai ona e suia lenei mea pe a manaʻomia ile CSS masani, vasega faʻasologa, faʻafefiloi Sass faʻafefiloi, poʻo mea aoga.

Fa'aaogā fa'ailoga fa'asologa

Fa'aaoga le fa'asologa, afifi kata i koluma ma laina pe a mana'omia.

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Faʻaaogaina mea faʻaoga

Fa'aoga la matou lima o mea faigaluega fa'apitoa e fa'atulaga vave ai le lautele o se kata.

Igoa pepa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

faamau
Igoa pepa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

faamau 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Fa'aaogaina o le CSS masani

Fa'aoga le CSS fa'aleaganu'u i lau sitaili po'o sitaili i totonu e seti ai le lautele.

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Fa'atonuga o tusitusiga

E mafai ona e vave suia le fa'aogaina o tusitusiga o so'o se kata—i lona atoaga po'o vaega fa'apitoa—ma a matou vasega fa'aoga tusitusiga .

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Fa'aopoopo nisi fa'asagaga i le fa'auluuluga o le kata (po'o le poloka) fa'atasi ai ma vaega fa'asaga a Bootstrap .

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ata

O kata e aofia ai nai filifiliga mo le galue i ata. Filifili mai le faʻapipiʻiina o "puupuu ata" i pito uma o se kata, faʻapipiʻi ata i totonu o kata, pe na o le faʻapipiʻiina o le ata i totonu o se kata.

O pulou ata

E tutusa ma ulutala ma vae, o kata e mafai ona aofia ai luga ma lalo “puupuu ata”—ata i le pito i luga po o le pito i lalo o se kata.

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Fa'apipi'i ata

Su'e se ata i tua o le kata ma fa'alava le tusitusiga a lau kata. Fa'alagolago i le ata, atonu e te mana'omia pe e te le mana'omia ni sitaili fa'aopoopo po'o mea fa'aoga.

Placeholder Card image
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Manatua e le tatau ona sili atu mea e aofia ai nai lo le maualuga o le ata. Afai e tele atu mea i lo le ata o le a fa'aalia le anotusi i fafo o le ata.

Fa'asagaga

I le fa'aogaina o le fa'aogaina o fa'asologa ma vasega aoga, e mafai ona fa'alava kata i se auala feavea'i-faauo ma tali atu. I le fa'ata'ita'iga o lo'o i lalo, matou te 'ave'esea fa'amau fa'atasi .g-0ma fa'aoga .col-md-*vasega e fa'ata'atia ai le kata i le mea e mdmotu ai. Atonu e mana'omia nisi fetuutuuna'iga e fa'atatau i mea o lo'o i totonu o lau kata.

Placeholder Image
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Sitaili pepa

O kata e aofia ai filifiliga eseese mo le faʻavasegaina o latou talaaga, tuaoi, ma lanu.

Tala'aga ma lanu

Fa'aoga le lanu o tusitusiga ma fa'aoga aoga e sui ai foliga o se kata.

Ulutala
Igoa pepa muamua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lona lua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Success card title

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa mata'utia

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lapatai

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa fa'amatalaga

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa kata mama

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa pogisa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .visually-hiddenvasega.

tuaoi

Fa'aoga mea fa'aoga tuaoi e sui ai na'o le border-colorkata. Manatua e mafai ona e tuʻuina .text-{color}vasega i luga o matua .cardpoʻo se vaega o mea o loʻo i totonu o le kata e pei ona faʻaalia i lalo.

Ulutala
Igoa pepa muamua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lona lua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Success card title

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa mata'utia

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lapatai

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa fa'amatalaga

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa kata mama

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa pogisa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins mea aoga

E mafai foi ona e suia tuaoi i luga o le ulutala kata ma le vae pe a manaʻomia, ma e oʻo lava i le aveeseina o background-colorlatou .bg-transparent.

Ulutala
Success card title

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Fa'avae 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Fa'atulagaina o kata

I le fa'aopoopoina o le fa'avasegaina o mea i totonu o kata, o le Bootstrap e aofia ai ni nai filifiliga mo le tu'uina atu o fa'asologa o kata. Mo le taimi nei, o nei faʻatulagaina filifiliga e leʻi tali mai .

Vaega kata

Fa'aoga kulupu kata e fa'aliliu ai kata ose elemene fa'apipi'i e tutusa le lautele ma le maualuga koluma. O vaega o kata e amata fa'aputu ma fa'aoga display: flex;e fa'apipi'i fa'atasi ma fua tutusa e amata mai i le mea e smmotu ai.

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

Placeholder Image cap
Igoa pepa

O lenei kata o loʻo iai ni tusitusiga lagolago i lalo e avea o se taʻitaʻi masani i totonu o mea faaopoopo.

Fa'afouga mulimuli 3 minute talu ai

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Pe a fa'aogaina vaega kata ma vae, e otometi lava ona laina laina a latou mea.

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai
Placeholder Image cap
Igoa pepa

O lenei kata o loʻo iai ni tusitusiga lagolago i lalo e avea o se taʻitaʻi masani i totonu o mea faaopoopo.

Fa'afouga mulimuli 3 minute talu ai
Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Kata kata

Fa'aoga le Bootstrap grid system ma ana .row-colsvasega e fa'atonutonu ai pe fia koluma fa'asologa (o afifi i au kata) e te fa'aalia i le laina. Mo se fa'ata'ita'iga, o le .row-cols-1tu'uina atu lea o kata i luga o le koluma e tasi, ma .row-cols-md-2vaelua pepa fa'afa i le lautele tutusa i le tele o laina, mai le vaeluaga o le va i luga.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Suia i .row-cols-3ma o le ae iloa ai le afifi pepa lona fa.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

A e manaʻomia tutusa le maualuga, faʻaopoopo .h-100i kata. Afai e te manaʻo i le maualuga tutusa e ala i le faaletonu, e mafai ona e seti $card-height: 100%i Sass.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

Placeholder Image cap
Igoa pepa

O se kata puupuu lea.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Placeholder Image cap
Igoa pepa

O se kata umi lea ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo. O lenei anotusi e fai si umi teisi.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

E pei lava o vaega o kata, e otometi lava ona laina laina vae o kata.

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai
Placeholder Image cap
Igoa pepa

O lenei kata o loʻo iai ni tusitusiga lagolago i lalo e avea o se taʻitaʻi masani i totonu o mea faaopoopo.

Fa'afouga mulimuli 3 minute talu ai
Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

I totonu v4na matou faʻaogaina se CSS-naʻo le auala e faʻataʻitaʻi ai le amio a Masonry -pei o koluma, ae o lenei metotia na sau ma le tele o aʻafiaga le lelei . Afai e te manaʻo e maua lenei ituaiga o faʻatulagaga i totonu v5, e mafai ona e faʻaogaina le Masonry plugin. Masonry e le o aofia i Bootstrap , ae ua matou faia se faʻataʻitaʻiga faʻataʻitaʻiga e fesoasoani ia te oe e amata ai.

Sass

Fuafuaga

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;