Source

Imbonerahamwe

Inyandiko n'ingero zo guhitamo-imbonerahamwe yimbonerahamwe (ukurikije imikoreshereze yabo muri plugin ya JavaScript) hamwe na Bootstrap.

Ingero

Bitewe no gukoresha cyane imbonerahamwe kurubuga rwa gatatu rwa widget nka kalendari hamwe nabatoranya amatariki, twateguye ameza yacu kugirango duhitemo . Gusa ongeraho urwego shingiro .tablekuri buriwese <table>, hanyuma wongere hamwe nuburyo bwihariye cyangwa ibyiciro bitandukanye birimo guhindura ibyiciro.

Ukoresheje urutonde rwibanze rwibanze, dore uko .table-bishingiye kumeza reba muri Bootstrap. Imiterere yimeza yose yarazwe muri Bootstrap 4 , bivuze ko ameza yose yashizwemo azandikwa muburyo bumwe nababyeyi.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @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>

Urashobora kandi guhindura amabara-hamwe ninyandiko yoroheje kumurongo wijimye-hamwe .table-dark.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @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>

Imbonerahamwe yumutwe

Bisa nameza hamwe nameza yijimye, koresha ibyiciro bihindura .thead-lightcyangwa .thead-darkkugirango <thead>ugaragare urumuri cyangwa umukara wijimye.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @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>

Imirongo ikurikiranye

Koresha .table-stripedkugirango wongereho zebra-gukuramo kumurongo uwo ariwo wose kumurongo muri <tbody>.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @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>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @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>

Imeza ihana imbibi

Ongeraho .table-borderedimipaka kumpande zose zameza na selile.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>

Imeza itagira umupaka

Ongeraho .table-borderlesskumeza idafite imipaka.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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-borderlessirashobora kandi gukoreshwa kumeza yijimye.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>

Imirongo yemewe

Ongeraho .table-hoverkugirango ushoboze kugendagenda kumurongo kumurongo kumeza muri a <tbody>.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>

Imeza nto

Ongeraho .table-smkugirango imbonerahamwe irusheho gukata uduce twa selile mo kabiri.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @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>

Amasomo ajyanye

Koresha ibyiciro kugirango uhindure amabara kumurongo cyangwa selile.

Icyiciro Umutwe Umutwe
Bikora Akagari Akagari
Mburabuzi Akagari Akagari
Ibanze Akagari Akagari
Secondary Akagari Akagari
Intsinzi Akagari Akagari
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<!-- 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>

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- 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>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @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>

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specific

Koresha .table-responsive{-sm|-md|-lg|-xl}nkuko bikenewe kugirango ukore imbonerahamwe yishura kugeza kumurongo runaka. Uhereye kuri ibyo bice no hejuru, imbonerahamwe izitwara bisanzwe kandi ntizunguruka.

Izi mbonerahamwe zishobora kugaragara nkizimenetse kugeza uburyo bwo gusubiza bwakoreshejwe mubugari bwihariye bwo kureba.

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