Kata
O kata a Bootstrap e maua ai se atigipusa fetuutuunai ma faʻalauteleina ma le tele o fesuiaiga ma filifiliga.
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 .
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.
<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.
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>- 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
<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 anotusi 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.
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
<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>Ulu ma vae
Fa'aopoopo se ulutala ma/po'o se vae i totonu o se kata.
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>O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
<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>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">
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
E manatu kata e leai se mea patino widthe amata ai, o lea e 100% le 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 meaTogafitiga 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 fa'aoga tetele e maua e seti 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.
faamauIgoa 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 meaTogafitiga 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 meaTogafitiga 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-right" 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>Tautai
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" 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 “tapaiga o ata” i itu uma e lua o se kata, ufiufi ata i totonu o le kata, pe na o le fa'apipi'i 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 luga po o lalo o se kata.
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
<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.
<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>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 .no-guttersma 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.
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 no-gutters">
<div class="col-md-4">
<img src="..." 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'aaogā fa'amatalaga ma fa'aoga pito i tua e sui ai foliga o se kata.
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.
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.
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.
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.
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.
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.
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.
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-white 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-white 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 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 .sr-onlyvasega.
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.
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.
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.
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.
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.
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.
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.
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.
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 text-warning">
<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 text-info">
<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>Mea fa'aoga Mixins
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.
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.
<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 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 o se elemene fa'apipi'i tasi 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.
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
O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.
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 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 i luga a latou mea.
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.
Igoa pepa
O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.
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.
<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>Fa'ailoga pepa
Manaomia se seti o pepa tutusa lautele ma maualuga e le o pipii le tasi i le isi? Fa'aaoga pepa fa'ato'aga.
Igoa pepa
O se kata umi lea ma ni 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.
Fa'afouga mulimuli 3 minute talu ai
Igoa pepa
O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.
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 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-deck">
<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>
<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>E pei lava o kulupu kata, e otometi lava ona laina laina vae o kata i fa'avae.
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.
Igoa pepa
O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.
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.
<div class="card-deck">
<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.
Igoa pepa
O se kata umi lea ma ni 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.
Igoa pepa
O se kata umi lea ma ni 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.
Igoa pepa
O se kata umi lea ma ni tusitusiga lagolago o lo'o i lalo e avea o se ta'ita'i masani i mea fa'aopoopo.
Igoa pepa
O se kata umi lea ma ni 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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
Igoa pepa
O se kata umi lea ma ni 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.
Igoa pepa
O se kata umi lea ma ni 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.
Igoa pepa
O se kata umi lea ma ni tusitusiga lagolago o lo'o i lalo e avea o se ta'ita'i masani i mea fa'aopoopo.
Igoa pepa
O se kata umi lea ma ni 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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
Igoa pepa
O se kata umi lea ma ni 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.
Igoa pepa
O se kata puupuu lea.
Igoa pepa
O se kata umi lea ma ni tusitusiga lagolago o lo'o i lalo e avea o se ta'ita'i masani i mea fa'aopoopo.
Igoa pepa
O se kata umi lea ma ni 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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>Koluma kata
E mafai ona fa'atulagaina kata i koluma e pei o Masonry ma na'o le CSS e ala i le afifiina i totonu .card-columns. O kata e fausia i CSS columnmeatotino nai lo le flexbox mo le faʻaogaina faigofie. O kata e oka mai luga i lalo ma agavale i le taumatau.
Ulu i luga! E mafai ona eseese lau maila ma koluma kata. Ina ia puipuia kata e malepe i luga o koluma, e tatau ona tatou setiina i latou e le display: inline-blocko column-break-inside: avoidse tali pulufana.
Igoa kata e afifi i se laina fou
O se kata umi lea ma ni 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.
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
Igoa pepa
O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.
Fa'afouga mulimuli 3 minute talu ai
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
Igoa pepa
O lenei kata e iai se ulutala masani ma se parakalafa puupuu o tusitusiga i lalo ifo.
Fa'afouga mulimuli 3 minute talu ai
O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.
Igoa pepa
O le isi lea kata e iai le ulutala ma tusitusiga lagolago i lalo. O lenei kata o loʻo i ai nisi mea faʻaopoopo e faʻapupulaina teisi maualuga i le aotelega.
Fa'afouga mulimuli 3 minute talu ai
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>E mafai fo'i ona fa'alautele ma fa'avasegaina koluma fa'atasi ma nisi code fa'aopoopo. O loʻo faʻaalia i lalo o se faʻaopoopoga o le .card-columnsvasega e faʻaaoga ai le CSS tutusa tatou te faʻaogaina-CSs koluma-e faʻatupuina se seti o vaega tali mo le suia o numera o koluma.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}