Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Tabulas

Dokumentācija un piemēri tabulu izvēlei (ņemot vērā to izplatīto izmantošanu JavaScript spraudņos) ar Bootstrap.

Pārskats

Tā kā elementi tiek plaši izmantoti <table>trešo pušu logrīkos, piemēram, kalendāros un datumu atlasītājos, Bootstrap tabulas ir izvēlētas . Pievienojiet bāzes klasi .tablejebkurai <table>, pēc tam paplašiniet ar mūsu izvēles modifikatoru klasēm vai pielāgotajiem stiliem. Visi tabulu stili netiek mantoti programmā Bootstrap, kas nozīmē, ka visas ligzdotās tabulas var veidot neatkarīgi no vecākām.

Izmantojot visvienkāršāko tabulu marķējumu, šeit ir norādīts, kā .tableprogrammā Bootstrap izskatās tabulas.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Varianti

Izmantojiet kontekstuālās klases, lai krāsotu tabulas, tabulas rindas vai atsevišķas šūnas.

Klase Virsraksts Virsraksts
Noklusējums Šūna Šūna
Primārs Šūna Šūna
Sekundārais Šūna Šūna
Panākumi Šūna Šūna
Briesmas Šūna Šūna
Brīdinājums Šūna Šūna
Informācija Šūna Šūna
Gaisma Šūna Šūna
Tumšs Šūna Šūna
<!-- 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>
Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .visually-hiddenklasi paslēptu papildu tekstu.

Tabulas ar akcentiem

Svītrainas rindas

Izmantojiet .table-striped, lai pievienotu zebras svītras jebkurai tabulas rindai <tbody>.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-striped">
  ...
</table>

Šīs klases var pievienot arī tabulas variantiem:

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-success table-striped">
  ...
</table>

Pārvietojamas rindas

Pievienot .table-hover, lai iespējotu kursora novietošanu tabulas rindās <tbody>.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-hover">
  ...
</table>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-dark table-hover">
  ...
</table>

Šīs paceļamās rindas var kombinēt arī ar svītraino variantu:

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-striped table-hover">
  ...
</table>

Aktīvās tabulas

Iezīmējiet tabulas rindu vai šūnu, pievienojot .table-activeklasi.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Kā darbojas varianti un diakritiskās tabulas?

Tabulām ar akcentiem ( svītrainām rindām , paceļamām rindām un aktīvajām tabulām ) mēs izmantojām dažus paņēmienus, lai šie efekti darbotos visos mūsu tabulu variantos .

  • Mēs sākam, iestatot tabulas šūnas fonu ar --bs-table-bgpielāgoto rekvizītu. Pēc tam visi tabulas varianti iestata šo pielāgoto rekvizītu, lai krāsotu tabulas šūnas. Tādā veidā mēs nesaņemam problēmas, ja kā galda fonu tiek izmantotas daļēji caurspīdīgas krāsas.
  • Pēc tam tabulas šūnām pievienojam ieliktņa lodziņa ēnu ar box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);slāni virs jebkura norādītā background-color. Tā kā mēs izmantojam milzīgu izkliedi un bez izplūšanas, krāsa būs monotona. Tā kā --bs-table-accent-bgpēc noklusējuma ir atiestatīts, mums nav noklusējuma lodziņa ēnas.
  • Ja tiek pievienotas vai nu klases, .table-stripedtiek iestatīta daļēji caurspīdīga krāsa, lai krāsotu fonu..table-hover.table-active--bs-table-accent-bg
  • Katram tabulas variantam mēs ģenerējam --bs-table-accent-bgkrāsu ar vislielāko kontrastu atkarībā no šīs krāsas. Piemēram, akcenta krāsa .table-primaryir tumšāka, bet .table-darktai ir gaišāka akcenta krāsa.
  • Teksta un apmales krāsas tiek ģenerētas tādā pašā veidā, un to krāsas tiek mantotas pēc noklusējuma.

Aizkulisēs tas izskatās šādi:

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

Tabulas apmales

Galdi ar apmali

Pievienojiet .table-borderedapmalēm visās tabulas un šūnu pusēs.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-bordered">
  ...
</table>

Lai mainītu krāsas, var pievienot apmales krāsu utilītas :

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Tabulas bez apmalēm

Pievienojiet .table-borderlesstabulai bez apmalēm.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-borderless">
  ...
</table>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Mazie galdi

Pievienojiet .table-sm, lai padarītu to .tablekompaktāku, pārgriežot visu šūnu paddinguz pusēm.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-sm">
  ...
</table>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-dark table-sm">
  ...
</table>

Vertikālā izlīdzināšana

Tabulas šūnas <thead>vienmēr ir vertikāli līdzinātas apakšā. Tabulas šūnas <tbody>manto to līdzinājumu no <table>un pēc noklusējuma tiek līdzinātas augšpusē. Izmantojiet vertikālās līdzināšanas klases, lai vajadzības gadījumā atkārtoti līdzinātu.

1. virsraksts 2. virsraksts 3. virsraksts 4. virsraksts
Šī šūna tiek mantota vertical-align: middle;no tabulas Šī šūna tiek mantota vertical-align: middle;no tabulas Šī šūna tiek mantota vertical-align: middle;no tabulas Šis ir viettura teksts, kas paredzēts, lai aizņemtu diezgan daudz vertikālas vietas, lai parādītu, kā vertikālais līdzinājums darbojas iepriekšējās šūnās.
Šī šūna tiek mantota vertical-align: bottom;no tabulas rindas Šī šūna tiek mantota vertical-align: bottom;no tabulas rindas Šī šūna tiek mantota vertical-align: bottom;no tabulas rindas Šis ir viettura teksts, kas paredzēts, lai aizņemtu diezgan daudz vertikālas vietas, lai parādītu, kā vertikālais līdzinājums darbojas iepriekšējās šūnās.
Šī šūna tiek mantota vertical-align: middle;no tabulas Šī šūna tiek mantota vertical-align: middle;no tabulas Šī šūna ir līdzināta augšpusē. Šis ir viettura teksts, kas paredzēts, lai aizņemtu diezgan daudz vertikālas vietas, lai parādītu, kā vertikālais līdzinājums darbojas iepriekšējās šūnās.
<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>

Ligzdošana

Apmales stilus, aktīvos stilus un tabulu variantus ligzdotās tabulas nepārmanto.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
Virsraksts Virsraksts Virsraksts
A Pirmkārt Pēdējais
B Pirmkārt Pēdējais
C Pirmkārt Pēdējais
3 Lerijs putns @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kā darbojas ligzdošana

Lai novērstu stilu noplūdi ligzdotajās tabulās, mēs izmantojam bērnu kombinatora ( )> atlasītāju mūsu CSS. Tā kā mums ir jāatlasa visi tds un ths kategorijās thead, tbody, un tfoot, mūsu atlasītājs bez tā izskatītos diezgan garš. Tādējādi mēs izmantojam diezgan dīvaina izskata .table > :not(caption) > * > *atlasītāju, lai atlasītu visas tds un ths no .table, bet nevienas no iespējamām ligzdotajām tabulām.

Ņemiet vērā, ka, ja pievienosit <tr>s kā tiešos tabulas atvasinājumus, tie pēc noklusējuma <tr>tiks ietīti a <tbody>, tādējādi mūsu atlasītāji darbosies kā paredzēts.

Anatomija

Galda galva

Līdzīgi kā tabulās un tumšās tabulās, izmantojiet modifikatoru klases .table-lightvai .table-dark, lai tie būtu <thead>gaiši vai tumši pelēki.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Galda pēda

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter
Kājene Kājene Kājene Kājene
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Paraksti

Funkcijas <caption>kā tabulas virsraksts. Tas palīdz lietotājiem ar ekrāna lasītājiem atrast tabulu un saprast, par ko tā ir, un izlemt, vai viņi vēlas to lasīt.

Lietotāju saraksts
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Varat arī novietot <caption>uz galda augšdaļas ar .caption-top.

Lietotāju saraksts
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Atsaucīgas tabulas

Adaptīvās tabulas ļauj viegli ritināt tabulas horizontāli. Padariet jebkuru tabulu adaptīvu visos skata portos, aptinot a .tablear .table-responsive. Vai arī izvēlieties maksimālo pārtraukuma punktu, ar kuru izveidot adaptīvu tabulu, izmantojot .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikālā apgriešana/saīsināšana

Adaptīvajās tabulās tiek izmantots overflow-y: hidden, kas nogriež visu saturu, kas pārsniedz tabulas apakšējo vai augšējo malu. Tas jo īpaši var izgriezt nolaižamās izvēlnes un citus trešo pušu logrīkus.

Vienmēr atsaucīgs

Visiem pārtraukuma punktiem izmantojiet .table-responsivetabulu horizontālai ritināšanai.

# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Konkrēts pārtraukuma punkts

Izmantojiet .table-responsive{-sm|-md|-lg|-xl|-xxl}pēc vajadzības, lai izveidotu adaptīvas tabulas līdz noteiktam pārtraukuma punktam. Sākot no šī pārtraukuma punkta un uz augšu, tabula darbosies normāli un netiks ritināta horizontāli.

Šīs tabulas var izskatīties bojātas, līdz to adaptīvie stili tiek piemēroti noteiktam skata loga platumam.

# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
<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

Mainīgie lielumi

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

Cilpa

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

Pielāgošana

  • Faktoru mainīgie ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) tiek izmantoti, lai noteiktu kontrastu tabulu variantos.
  • Izņemot gaišo un tumšo galdu variantus, motīvu krāsas izgaismo $table-bg-levelmainīgais.