Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Tabelat

Dokumentacioni dhe shembuj për stilimin e tabelave (duke pasur parasysh përdorimin e tyre të përhapur në shtojcat JavaScript) me Bootstrap.

Vështrim i përgjithshëm

Për shkak të përdorimit të gjerë të <table>elementeve nëpër miniaplikacionet e palëve të treta si kalendarët dhe zgjedhësit e datave, tabelat e Bootstrap janë të zgjedhura . Shtoni klasën bazë .tablenë çdo <table>, pastaj zgjerojeni me klasat tona të modifikuesve opsionalë ose stilet e personalizuara. Të gjitha stilet e tabelave nuk trashëgohen në Bootstrap, që do të thotë se çdo tabelë e vendosur mund të stilohet e pavarur nga prindi.

Duke përdorur shënjimin më bazë të tabelës, ja se si .tableduken tabelat e bazuara në Bootstrap.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<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>

Variantet

Përdorni klasa kontekstuale për të ngjyrosur tabelat, rreshtat e tabelave ose qelizat individuale.

Klasa Drejtimi Drejtimi
E paracaktuar Qelizë Qelizë
fillore Qelizë Qelizë
E mesme Qelizë Qelizë
Sukses Qelizë Qelizë
Rrezik Qelizë Qelizë
Paralajmërim Qelizë Qelizë
Informacion Qelizë Qelizë
Drita Qelizë Qelizë
E errët Qelizë Qelizë
<!-- 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>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Tabelat e theksuara

Rreshtat me vija

Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-striped">
  ...
</table>

Këto klasa gjithashtu mund të shtohen në variantet e tabelës:

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-dark table-striped">
  ...
</table>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-success table-striped">
  ...
</table>

Rreshtat e lëvizshëm

Shto .table-hoverpër të aktivizuar një gjendje qëndrimi në rreshtat e tabelës brenda një <tbody>.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-hover">
  ...
</table>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-dark table-hover">
  ...
</table>

Këto rreshta të lëvizshëm mund të kombinohen gjithashtu me variantin me vija:

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-striped table-hover">
  ...
</table>

Tabelat aktive

Theksoni një rresht ose qelizë tabele duke shtuar një .table-activeklasë.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<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>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<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>

Si funksionojnë variantet dhe tabelat e theksuara?

Për tabelat e theksuara ( rreshtat me vija , rreshtat e lëvizshëm dhe tabelat aktive ), ne përdorëm disa teknika për t'i bërë këto efekte të funksionojnë për të gjitha variantet tona të tabelës :

  • Fillojmë duke vendosur sfondin e një qelize tabele me --bs-table-bgvetinë e personalizuar. Të gjitha variantet e tabelës vendosin më pas atë veti të personalizuar për të ngjyrosur qelizat e tabelës. Në këtë mënyrë, ne nuk futemi në telashe nëse ngjyrat gjysmë transparente përdoren si sfond tavoline.
  • Më pas shtojmë një hije të kutisë së futur në qelizat e tabelës me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);shtresën në krye të cilësdo të specifikuar background-color. Për shkak se ne përdorim një përhapje të madhe dhe pa turbullira, ngjyra do të jetë monotone. Meqenëse --bs-table-accent-bgështë i pacaktuar si parazgjedhje, ne nuk kemi një hije kutie të paracaktuar.
  • Kur shtohen klasat ose .table-striped, .table-hoverose , vendoset në një ngjyrë gjysmë transparente për të ngjyrosur sfondin..table-active--bs-table-accent-bg
  • Për çdo variant tabele, ne gjenerojmë një --bs-table-accent-bgngjyrë me kontrastin më të lartë në varësi të asaj ngjyre. Për shembull, ngjyra e theksit për .table-primaryështë më e errët ndërsa .table-darkka një ngjyrë të theksuar më të lehtë.
  • Ngjyrat e tekstit dhe kufirit gjenerohen në të njëjtën mënyrë dhe ngjyrat e tyre trashëgohen si parazgjedhje.

Prapa skenave duket kështu:

@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));
  }
}

Kufijtë e tavolinës

Tavolina me kufi

Shto .table-borderedpër kufijtë në të gjitha anët e tabelës dhe qelizat.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-bordered">
  ...
</table>

Shërbimet e ngjyrave të kufirit mund të shtohen për të ndryshuar ngjyrat:

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-bordered border-primary">
  ...
</table>

Tabelat pa kufij

Shto .table-borderlesspër një tabelë pa kufij.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-borderless">
  ...
</table>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-dark table-borderless">
  ...
</table>

Tavolina të vogla

Shtoni .table-smpër ta bërë .tablemë kompakte duke e prerë të gjithë qelizën paddingnë gjysmë.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-sm">
  ...
</table>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-dark table-sm">
  ...
</table>

Rreshtimi vertikal

Qelizat e tabelës <thead>janë gjithmonë të rreshtuara vertikale në fund. Qelizat e tabelës <tbody>trashëgojnë shtrirjen e tyre nga <table>dhe janë të rreshtuara në krye si parazgjedhje. Përdorni klasat e rreshtimit vertikal për t'u rilidhur aty ku nevojitet.

Kreu 1 Kreu 2 Kreu 3 Kreu 4
Kjo qelizë trashëgon vertical-align: middle;nga tabela Kjo qelizë trashëgon vertical-align: middle;nga tabela Kjo qelizë trashëgon vertical-align: middle;nga tabela Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë ​​vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë ​​vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon vertical-align: middle;nga tabela Kjo qelizë trashëgon vertical-align: middle;nga tabela Kjo qelizë është rreshtuar në krye. Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë ​​vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
<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>

Folezimi

Stilet e kufirit, stilet aktive dhe variantet e tabelave nuk trashëgohen nga tabelat e mbivendosura.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
Kreu Kreu Kreu
A Së pari E fundit
B Së pari E fundit
C Së pari E fundit
3 Larry Zogu @Cicëroj
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Si funksionon foleja

Për të parandaluar rrjedhjen e ndonjë stili në tabelat e mbivendosura, ne përdorim >përzgjedhësin e kombinuesit të fëmijëve ( ) në CSS tonë. Meqenëse duhet të synojmë të gjitha tds dhe ths në thead, tbody, dhe tfoot, përzgjedhësi ynë do të dukej goxha i gjatë pa të. Si i tillë, ne përdorim përzgjedhësin me pamje mjaft të çuditshme .table > :not(caption) > * > *për të synuar të gjitha tds dhe ths-të e .table, por asnjë nga tabelat e mbivendosura të mundshme.

Vini re se nëse shtoni <tr>s si fëmijë të drejtpërdrejtë të një tabele, ato <tr>do të mbështillen në një <tbody>si parazgjedhje, duke i bërë kështu përzgjedhësit tanë të funksionojnë siç synohet.

Anatomia

Kreu i tavolinës

Ngjashëm me tabelat dhe tabelat e errëta, përdorni klasat e modifikuesve .table-lightose .table-darkpër ta bërë <thead>s të duket gri e hapur ose e errët.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Këmbë tavoline

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
Fundi i faqes Fundi i faqes Fundi i faqes Fundi i faqes
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Titrat

Një <caption>funksionon si një titull për një tabelë. Ai i ndihmon përdoruesit me lexues ekrani të gjejnë një tabelë dhe të kuptojnë se për çfarë bëhet fjalë dhe të vendosin nëse duan ta lexojnë atë.

Lista e përdoruesve
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ju gjithashtu mund të vendosni <caption>në krye të tabelës me .caption-top.

Lista e përdoruesve
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
<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>

Tabelat e përgjegjshme

Tabelat e përgjegjshme lejojnë që tabelat të lëvizin me lehtësi horizontalisht. Bëni çdo tabelë të përgjegjshme në të gjitha portat e shikimit duke e mbështjellë një .tableme .table-responsive. Ose, zgjidhni një pikë ndërprerjeje maksimale me të cilën do të keni një tabelë të përgjegjshme deri në duke përdorur .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Prerje/prerje vertikale

Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.

Gjithmonë i përgjegjshëm

Për çdo pikë ndërprerjeje, përdoret .table-responsivepër tabelat me lëvizje horizontale.

# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Pika specifike e ndërprerjes

Përdorni .table-responsive{-sm|-md|-lg|-xl|-xxl}sipas nevojës për të krijuar tabela të përgjegjshme deri në një pikë të caktuar ndërprerjeje. Nga ajo pikë e ndërprerjes e lart, tabela do të sillet normalisht dhe nuk do të lëvizë horizontalisht.

Këto tabela mund të duken të thyera derisa stilet e tyre reaguese të zbatohen në gjerësi të veçanta të portave të pamjes.

# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
<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

Variablat

$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%;

Lak

$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,
);

Përshtatje

  • Variablat e faktorit ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) përdoren për të përcaktuar kontrastin në variantet e tabelës.
  • Përveç varianteve të tabelave të lehta dhe të errëta, ngjyrat e temës ndriçohen nga $table-bg-levelndryshorja.