Tabulas

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

Šajā lapā

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

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

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.