Source

Nā papaʻaina

ʻO ka palapala a me nā laʻana no ke koho ʻana i nā papa (e hāʻawi ʻia i kā lākou hoʻohana maʻamau i nā plugins JavaScript) me Bootstrap.

Nā laʻana

Ma muli o ka hoʻohana laha ʻana o nā papa ma nā ʻaoʻao ʻekolu e like me nā kalena a me nā mea koho lā, ua hoʻolālā mākou i kā mākou papa e koho i loko . Hoʻohui wale i ka papa kumu .tablei kekahi <table>, a laila e hoʻonui me nā ʻano maʻamau a i ʻole kā mākou mau papa hoʻololi like ʻole.

Ke hoʻohana nei i ka hōʻailona papa maʻamau, eia ke ʻano o ka .tablenānā ʻana o nā papa ma Bootstrap. Hoʻoili ʻia nā ʻano papa ʻaina a pau ma Bootstrap 4 , ʻo ia hoʻi, e hoʻopaʻa ʻia nā papa pūnana ma ke ʻano like me ka makua.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Hiki iā ʻoe ke hoʻohuli i nā kala—me nā kikokikona māmā ma nā ʻaoʻao ʻeleʻele—me .table-dark.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Nā koho poʻo papa

E like me nā papa ʻaina a me nā papa ʻeleʻele, e hoʻohana i nā papa hoʻololi a i .thead-lightʻole .thead-darke <thead>hoʻomāmā a ʻeleʻele paha.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Nā lālani kaha

E hoʻohana .table-stripede hoʻohui i ka zebra-striping i kēlā me kēia lālani pākaukau i loko o ka <tbody>.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Pākaukau palena

Hoʻohui .table-borderedno nā palena ma nā ʻaoʻao a pau o ka pākaukau a me nā cell.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Nā lālani hoverable

Hoʻohui .table-hoveri mea e hiki ai i kahi kūlana hover ma nā lālani pākaukau i loko o kahi <tbody>.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Pākaukau liʻiliʻi

Hoʻohui .table-smi mea e ʻoi aku ka paʻakikī o nā papa ma o ka ʻoki ʻana i ka padding cell i ka hapalua.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Nā papa kuʻuna

E hoʻohana i nā papa pōʻaiapili e kala i nā lālani papa ʻaina a i ʻole nā ​​​​pūnaewele pākahi.

Papa Poʻomanaʻo Poʻomanaʻo
ʻeleu Kelepona Kelepona
Default Kelepona Kelepona
Papahana Kelepona Kelepona
lua Kelepona Kelepona
Pōmaikaʻi Kelepona Kelepona
ʻO ka pōʻino Kelepona Kelepona
ʻŌlelo aʻo Kelepona Kelepona
ʻIke Kelepona Kelepona
Māmā Kelepona Kelepona
Poʻeleʻele Kelepona Kelepona 
<!-- 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>

ʻAʻole loaʻa nā ʻano ʻokoʻa o ka papaʻaina maʻamau me ka papaʻeleʻele, akā naʻe, hiki iā ʻoe ke hoʻohana i ka kikokikona a i ʻole nā ​​mea pono hope no ka loaʻa ʻana o nā ʻano like.

# Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona
2 Kelepona Kelepona
3 Kelepona Kelepona
4 Kelepona Kelepona
5 Kelepona Kelepona
6 Kelepona Kelepona
7 Kelepona Kelepona
8 Kelepona Kelepona
9 Kelepona Kelepona 
<!-- 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>
Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa.

E hana i nā pākaukau pane ma ke kāʻei ʻana i kekahi .tableme ka .table-responsive{-sm|-md|-lg|-xl}, e hoʻopaʻa i ka papaʻaina ma ka ʻaoʻao i kēlā me kēia max-widthhaʻihaʻi a hiki i (akā, ʻaʻole me) 576px, 768px, 992px, a me 1120px.

No ka mea, ʻaʻole kākoʻo nā mākaʻikaʻi i kēia manawa i nā nīnau pōʻaiapili , hana mākou i nā palena a min-me max-nā prefix a me nā puka ʻike me nā laula haʻihaʻi (hiki ke hana ʻia ma lalo o kekahi mau kūlana ma nā hāmeʻa kiʻekiʻe-dpi, no ka laʻana) ma ka hoʻohana ʻana i nā waiwai me ka pololei o kēia mau hoʻohālikelike. .

Nā huaʻōlelo

ʻO kahi <caption>hana e like me ke poʻo no kahi papaʻaina. Kōkua ia i nā mea hoʻohana me nā mea heluhelu pale e ʻimi i kahi papaʻaina a hoʻomaopopo i ke ʻano o ia mea a hoʻoholo inā makemake lākou e heluhelu.

Papa inoa o nā mea hoʻohana
# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka 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>

Nā papa pane

Hāʻawi nā papa pane i nā papa e ʻōwili ʻia me ka maʻalahi. E hana i kekahi papa ʻaina e pane mai i nā ʻāpana ʻike āpau ma ke kāʻei ʻana i kahi .tableme .table-responsive. A i ʻole, e koho i kahi haʻihaʻi kiʻekiʻe loa e loaʻa ai kahi papa pane ma ka hoʻohana ʻana i .table-responsive{-sm|-md|-lg|-xl}.

ʻoki ʻoki/ʻoki ʻia

Hoʻohana nā papa pane i ka overflow-y: hidden, kahi e hoʻopaʻa ai i nā ʻike ma waho aʻe o nā ʻaoʻao lalo a i luna paha o ka papaʻaina. ʻO ka mea kūikawā, hiki i kēia ke ʻoki i nā menus dropdown a me nā widget ʻaoʻao ʻekolu.

Pane mau

Ma kēlā me kēia wahi haʻihaʻi, e hoʻohana .table-responsiveno nā papa ʻauʻau ākea.

# Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona
2 Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona
3 Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona Kelepona 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Kūkākūkā haʻihaʻi

E hoʻohana .table-responsive{-sm|-md|-lg|-xl}e like me ka mea e pono ai no ka hana ʻana i nā papa pane a hiki i kahi breakpoint. Mai kēlā haʻihaʻi a piʻi aʻe, e hana maʻamau ka papaʻaina a ʻaʻole e ʻōwili i ka pae.

# Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona Kelepona Kelepona Kelepona
2 Kelepona Kelepona Kelepona Kelepona Kelepona
3 Kelepona Kelepona Kelepona Kelepona Kelepona
# Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona Kelepona Kelepona Kelepona
2 Kelepona Kelepona Kelepona Kelepona Kelepona
3 Kelepona Kelepona Kelepona Kelepona Kelepona
# Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona Kelepona Kelepona Kelepona
2 Kelepona Kelepona Kelepona Kelepona Kelepona
3 Kelepona Kelepona Kelepona Kelepona Kelepona
# Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo Poʻomanaʻo
1 Kelepona Kelepona Kelepona Kelepona Kelepona
2 Kelepona Kelepona Kelepona Kelepona Kelepona
3 Kelepona Kelepona Kelepona Kelepona Kelepona 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>