Jya ku bintu nyamukuru Jya kuri docs
in English

Imbonerahamwe

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

Kuriyi page

Incamake

Bitewe no gukoresha <table>ibintu byinshi mugice cya gatatu cya widget nka kalendari hamwe nabatoranya amatariki, imbonerahamwe ya Bootstrap irahitamo . Ongeraho urwego shingiro .tablekuri buriwese <table>, hanyuma wagure hamwe nibyifuzo byacu byo guhindura cyangwa uburyo bwihariye. Imiterere yimeza yose ntabwo yarazwe muri Bootstrap, bivuze ko ameza yose yatondetse ashobora kwandikwa yigenga kubabyeyi.

Ukoresheje urutonde rwibanze rwibanze, dore uko .table-bishingiye kumeza reba muri Bootstrap.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ibihinduka

Koresha amasomo ajyanye n'amabara kumeza, umurongo wameza cyangwa selile zitandukanye.

Icyiciro Umutwe Umutwe
Mburabuzi Akagari Akagari
Ibanze Akagari Akagari
Secondary Akagari Akagari
Intsinzi Akagari Akagari
Akaga Akagari Akagari
Iburira Akagari Akagari
Amakuru Akagari Akagari
Umucyo Akagari Akagari
Umwijima Akagari Akagari 
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Imbonerahamwe yemewe

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 Inyoni @twitter 
<table class="table table-striped">
  ...
</table>

Aya masomo arashobora kandi kongerwaho muburyo bwo kumeza:

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-success table-striped">
  ...
</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">
  ...
</table>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Iyi mirongo ishobora kugendana irashobora kandi guhuzwa hamwe nimirongo ihindagurika:

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Imbonerahamwe ifatika

Shyira kumurongo kumeza cyangwa selile wongeyeho urwego .table-active.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Nigute impinduka hamwe nameza ashimangira gukora?

Ku mbonerahamwe ishimangirwa ( umurongo ucagaguye , umurongo uhindagurika , hamwe nimbonerahamwe ikora ), twakoresheje tekinike zimwe kugirango izo ngaruka zikore kumeza yacu yose ameza :

  • Dutangira dushiraho inyuma yama selire hamwe --bs-table-bgnumutungo wihariye. Imbonerahamwe zose zahinduwe hanyuma ushireho umutungo wihariye kugirango uhindure amabara selile. Ubu buryo, ntabwo twinjira mubibazo niba igice-kibonerana amabara akoreshwa nkameza yimbere.
  • Noneho twongeyeho inset agasanduku igicucu kumeza ya selile hamwe box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);na layer hejuru yicyerekezo icyo aricyo cyose background-color. Kuberako dukoresha gukwirakwira cyane kandi nta guhubuka, ibara rizaba monotone. Kubera --bs-table-accent-bgko bidahwitse byanze bikunze, ntabwo dufite agasanduku gasanzwe.
  • Mugihe kimwe .table-striped, .table-hovercyangwa .table-activeibyiciro byongeweho, i --bs-table-accent-bgyashizwe kumurongo wa semitransparent ibara kugirango ibara inyuma.
  • Kuri buri mbonerahamwe ihindagurika, dukora --bs-table-accent-bgibara rifite itandukaniro rinini bitewe nibara. Kurugero, ibara ryibara rya .table-primaryni ryijimye mugihe .table-darkrifite ibara ryoroheje ryerekana.
  • Amabara yumupaka nimbibi byakozwe muburyo bumwe, kandi amabara yabo yarazwe muburyo budasanzwe.

Inyuma yinyuma birasa nkibi:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Imipaka

Imbonerahamwe 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">
  ...
</table>

Imipaka yibara ryibikoresho irashobora kongerwaho kugirango uhindure amabara:

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Imbonerahamwe idafite imipaka

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">
  ...
</table>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Ameza mato

Ongeraho .table-smkugirango ukore ikindi kintu cyose .tableukata selile zose mo paddingkabiri.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-sm">
  ...
</table>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Guhuza neza

Imbonerahamwe yama selire <thead>ihora ihagaritse hepfo. Imbonerahamwe yimeza mu <tbody>kuzungura guhuza kuva <table>kandi ihujwe hejuru hejuru kubisanzwe. Koresha vertical align amasomo kugirango wongere uhuze aho bikenewe.

Umutwe 1 Umutwe 2 Umutwe 3 Umutwe 4
Iyi selile iragwa vertical-align: middle;kumeza Iyi selile iragwa vertical-align: middle;kumeza Iyi selile iragwa vertical-align: middle;kumeza Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi.
Aka kagari karazwe vertical-align: bottom;kumurongo wameza Aka kagari karazwe vertical-align: bottom;kumurongo wameza Aka kagari karazwe vertical-align: bottom;kumurongo wameza Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi.
Iyi selile iragwa vertical-align: middle;kumeza Iyi selile iragwa vertical-align: middle;kumeza Aka kagari kahujwe hejuru. Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Icyari

Imipaka yimipaka, uburyo bukora, nuburyo bwo kumeza ntibiragwa kumeza yashizwemo.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
Umutwe Umutwe Umutwe
A. Ubwa mbere Icya nyuma
B. Ubwa mbere Icya nyuma
C. Ubwa mbere Icya nyuma
3 Larry Inyoni @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Ukuntu ibyari bikora

Kugirango tubuze uburyo ubwo aribwo bwose gutemba kumeza yashizwemo, dukoresha utoranya abana ( >) utoranya muri CSS yacu. Kuva dukeneye intego zose tds na ths muri thead,, tbodyna tfoot, uwatoranije yagaragara neza cyane tutayifite. Nkiyo, dukoresha uburyo .table > :not(caption) > * > *budasanzwe busa nuwatoranije kugirango tugere kuri tds na ths zose za .table, ariko ntanumwe mubishobora guterwa kumeza.

Menya ko niba wongeyeho <tr>s nkabana bayobora kumeza, ibyo <tr>bizapfunyika muburyo <tbody>budasanzwe, bityo abaduhitamo bakora nkuko byateganijwe.

Anatomy

Umutwe wameza

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

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ikirenge

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter
Umutwe Umutwe Umutwe Umutwe 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Ibisobanuro

Imikorere <caption>nkumutwe kumeza. Ifasha abakoresha hamwe nabasomyi ba ecran kubona imbonerahamwe no kumva icyo ivuga no guhitamo niba bashaka kuyisoma.

Urutonde rwabakoresha
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Urashobora kandi gushira <caption>hejuru hejuru yimeza hamwe .caption-top.

Urutonde rwabakoresha
# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter 
<table class="table caption-top">
  <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>

Imbonerahamwe isubiza

Imbonerahamwe isubiza yemerera imbonerahamwe kuzenguruka mu buryo butambitse kandi byoroshye. Kora imbonerahamwe iyo ari yo yose isubiza ibintu byose ureba .tablehamwe .table-responsive. Cyangwa, hitamo intera ntarengwa yo kugira imbonerahamwe isubiza hejuru ukoresheje .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Gukata neza / guhagarika

Imbonerahamwe ishubije ikoresha overflow-y: hidden, ikuraho ibintu byose birenze hepfo cyangwa hejuru yimeza. By'umwihariko, ibi birashobora gukuramo ibice byamanutse hamwe nandi mashyaka ya gatatu.

Buri gihe witabira

Hirya no hino, koresha .table-responsivekumeza utambitse.

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

Ibice byihariye

Koresha .table-responsive{-sm|-md|-lg|-xl|-xxl}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
# 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
# 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
# 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
# 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
# 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">
  <table class="table">
    ...
  </table>
</div>

<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>

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

Sass

Ibihinduka

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Umuzingi

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Guhitamo

  • Ibintu bihinduka ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) bikoreshwa mukumenya itandukaniro muburyo butandukanye.
  • Usibye urumuri & umwijima wameza ahinduka, insanganyamatsiko yamabara yoroherezwa nimpinduka $table-bg-level.