Source

Laupapa

Faʻamaumauga ma faʻataʻitaʻiga mo le filifilia o le siiina o laulau (tuʻuina atu lo latou faʻaogaina masani i JavaScript plugins) ma Bootstrap.

Faataitaiga

Ona o le fa'aogaina lautele o laulau i luga o widget vaega lona tolu e pei o kalena ma tagata e piki aso, ua matou mamanuina ai a matou laulau ina ia filifili i totonu . Na'o le fa'aopoopoina o le vasega fa'avae .tablei so'o se <table>, ona fa'alautele lea i sitaili fa'ale-aganu'u po'o a tatou vasega fa'aopoopo e aofia ai.

I le faʻaaogaina o le faʻailoga pito sili ona taua, o le faʻaogaina lea o .tablelaulau faʻavae i Bootstrap. O sitaili laulau uma o loʻo tuʻufaʻatasia i le Bootstrap 4 , o lona uiga o soʻo se laulau faʻapipiʻi o le a faʻapipiʻiina i le faiga tutusa ma le matua.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

E mafai fo'i ona e fesuia'i lanu—ma tusitusiga malamalama i luga o tua'oi pogisa—ma .table-dark.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Filifiliga ulu laulau

E tutusa ma laulau ma laulau pogisa, fa'aoga vasega fa'aliliu .thead-lightpo'o .thead-darkle fa'aali <thead>s e mama pe efuefu pogisa.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

laina laina

Fa'aoga .table-stripede fa'aopoopo ai le zebra-striping i so'o se laina laulau i totonu o le <tbody>.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Laupapa tuaoi

Fa'aopoopo .table-borderedmo tuaoi i itu uma o le laulau ma sela.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

laulau e leai se tuaoi

Faaopoopo .table-borderlessmo se laulau e leai ni tuaoi.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlesse mafai foi ona faaaoga i luga o laulau pogisa.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

laina fa'afefe

Fa'aopoopo .table-hoverina ia mafai ai se tulaga fa'afefe i luga o laina laulau i totonu ole <tbody>.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

La'ai laulau

Fa'aopoopo .table-smina ia fa'apipi'i fa'atasi laulau e ala i le tipi fa'afafa o pa'u sela.

# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Vasega fa'atatau

Fa'aoga vasega fa'apitoa e valivali ai laina laulau po'o sela ta'itasi.

Vasega Ulutala Ulutala
Malosi sela sela
Fa'atonu sela sela
Peraimeri sela sela
Lua sela sela
Manuia sela sela
Mata'utia sela sela
Lapataiga sela sela
Fa'amatalaga sela sela
Malamalama sela sela
Pogisa sela sela 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

E le o maua suiga masani o le laulau i tua i le laulau pogisa, peita'i, e mafai ona e fa'aogaina tusitusiga po'o fa'aoga aoga e ausia ai sitaili tutusa.

# Ulutala Ulutala
1 sela sela
2 sela sela
3 sela sela
4 sela sela
5 sela sela
6 sela sela
7 sela sela
8 sela sela
9 sela sela 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
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.

Fausia ni laulau tali mai e ala i le afifiina o so'o se mea .tablei .table-responsive{-sm|-md|-lg|-xl}le , fa'asolo fa'alava le laulau i va'aiga ta'itasi max-widthe o'o atu i le (ae le aofia ai) 576px, 768px, 992px, ma le 1120px, fa'asologa.

Manatua talu ai e le'o lagolagoina e tagata su'esu'e i le taimi nei le tele o fa'amatalaga fa'amatalaga , matou te galulue fa'atasi ma tapula'a min-ma max-prefixs ma va'aiga fa'atasi ma va'ava'a fa'a-vaega (lea e mafai ona tupu i lalo o nisi tulaga i masini maualuga-dpi, mo se fa'ata'ita'iga) e ala i le fa'aogaina o tau e sili atu le sa'o mo nei fa'atusatusaga. .

Fa'amatalaga

O se <caption>galuega e pei o se ulutala mo se laulau. E fesoasoani i tagata fa'aoga i lau faitau mata e su'e se laulau ma malamalama i lona uiga ma filifili pe latou te fia faitau i ai.

Lisi o tagata fa'aoga
# Tulaga tasi Mulimuli Uu
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

laulau tali

O laulau tali e fa'ataga ai le ta'ai fa'alava ma faigofie. Fai so'o se laulau e tali atu i va'aiga uma e ala i le afifiina o .tablele .table-responsive. Po'o, filifili se pito maualuga e mafai ona i ai se laulau tali atu e ala i le fa'aogaina o le .table-responsive{-sm|-md|-lg|-xl}.

Tu'u sa'o/tapuina

O laulau talitali e fa'aoga ai le overflow-y: hidden, lea e tipi ese ai so'o se mea e alu i tua atu o pito pito i lalo po'o pito i luga ole laulau. Aemaise lava, e mafai e lenei mea ona tipi ese menus dropdown ma isi widgets isi vaega.

Talitonu i taimi uma

I so'o se va'aiga uma, fa'aoga .table-responsivemo laulau ta'avale fa'alava.

# Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala
1 sela sela sela sela sela sela sela sela sela
2 sela sela sela sela sela sela sela sela sela
3 sela sela sela sela sela sela sela sela sela 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Fa'ailoga fa'apitoa

Fa'aoga .table-responsive{-sm|-md|-lg|-xl}pe a mana'omia e fai ai laulau fa'afofoga e o'o atu i se vaega fa'apitoa. Mai lena vaeluaga ma luga, o le laulau o le a amio masani ae le taʻavale faalava.

E ono foliga malepe nei laulau se'ia o'o ina fa'aoga a latou sitaili tali i le lautele o va'aiga fa'apitoa.

# Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala
1 sela sela sela sela sela sela sela sela
2 sela sela sela sela sela sela sela sela
3 sela sela sela sela sela sela sela sela 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala
1 sela sela sela sela sela sela sela sela
2 sela sela sela sela sela sela sela sela
3 sela sela sela sela sela sela sela sela 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala
1 sela sela sela sela sela sela sela sela
2 sela sela sela sela sela sela sela sela
3 sela sela sela sela sela sela sela sela 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala Ulutala
1 sela sela sela sela sela sela sela sela
2 sela sela sela sela sela sela sela sela
3 sela sela sela sela sela sela sela sela 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>