Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih

Dokumentacija in primeri za izbirno oblikovanje tabel (glede na njihovo prevladujočo uporabo v vtičnikih JavaScript) z Bootstrapom.

Pregled

Zaradi široke uporabe <table>elementov v pripomočkih tretjih oseb, kot so koledarji in izbirniki datumov, so tabele Bootstrap opt-in . Dodajte osnovni razred .tablekateremu koli <table>, nato razširite z našimi izbirnimi modifikatorskimi razredi ali slogi po meri. Vsi slogi tabel niso podedovani v Bootstrapu, kar pomeni, da je mogoče katero koli ugnezdeno tabelo oblikovati neodvisno od nadrejene.

Z uporabo najosnovnejšega označevanja tabel je prikazano, kako so .tabletabele na osnovi v Bootstrapu videti.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @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>

Različice

Uporabite kontekstualne razrede za barvanje tabel, vrstic tabel ali posameznih celic.

Razred Naslov Naslov
Privzeto Celica Celica
Primarni Celica Celica
Sekundarno Celica Celica
Uspeh Celica Celica
Nevarnost Celica Celica
Opozorilo Celica Celica
Informacije Celica Celica
Svetloba Celica Celica
Temno Celica Celica
<!-- 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>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Naglašene mize

Črtaste vrstice

Uporabite .table-stripedza dodajanje zebrastih črt v katero koli vrstico tabele znotraj <tbody>.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-striped">
  ...
</table>

Te razrede je mogoče dodati tudi različicam tabel:

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-dark table-striped">
  ...
</table>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-success table-striped">
  ...
</table>

Lebdeče vrstice

Dodajte .table-hover, da omogočite stanje lebdenja nad vrsticami tabele znotraj <tbody>.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-hover">
  ...
</table>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-dark table-hover">
  ...
</table>

Te lebdeče vrstice lahko kombinirate tudi s črtasto različico:

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-striped table-hover">
  ...
</table>

Aktivne mize

Označite vrstico ali celico tabele z dodajanjem .table-activerazreda.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @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>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @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>

Kako delujejo različice in naglašene tabele?

Za naglašene tabele ( črtaste vrstice , lebdeče vrstice in aktivne tabele ) smo uporabili nekaj tehnik, da bi ti učinki delovali za vse naše različice tabel :

  • Začnemo z nastavitvijo ozadja celice tabele z --bs-table-bglastnostjo po meri. Vse različice tabele nato nastavijo to lastnost po meri za barvanje celic tabele. Tako ne zaidemo v težave, če za ozadje mize uporabimo polprosojne barve.
  • Nato dodamo senco vstavljenega polja na celice tabele s box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);plastjo na vrhu katerega koli podanega background-color. Ker uporabljamo velik razmik in brez zamegljenosti, bo barva monotona. Ker --bs-table-accent-bgni privzeto nastavljen, nimamo privzete sence polja.
  • Ko dodate razrede ali .table-striped, je nastavljen na polprosojno barvo za barvanje ozadja..table-hover.table-active--bs-table-accent-bg
  • Za vsako različico tabele ustvarimo --bs-table-accent-bgbarvo z največjim kontrastom glede na to barvo. Na primer, poudarjena barva za .table-primaryje temnejša, medtem ko .table-darkima poudarjeno svetlejšo barvo.
  • Barve besedila in obrob so ustvarjene na enak način, njihove barve pa so privzeto podedovane.

V zakulisju je videti takole:

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

Obrobe tabele

Obrobljene mize

Dodajte .table-borderedza robove na vseh straneh tabele in celic.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-bordered">
  ...
</table>

Za spreminjanje barv je mogoče dodati pripomočke za barvo obrob :

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Tabele brez robov

Dodaj .table-borderlessza mizo brez robov.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-borderless">
  ...
</table>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Majhne mize

.table-smČe želite .tablebolj kompaktno, dodajte vse celice paddingna pol.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-sm">
  ...
</table>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-dark table-sm">
  ...
</table>

Navpična poravnava

Celice tabele <thead>so vedno navpično poravnane na dno. Celice tabele <tbody>podedujejo svojo poravnavo <table>in so privzeto poravnane na vrh. Uporabite razrede navpične poravnave za ponovno poravnavo, kjer je to potrebno.

Naslov 1 Naslov 2 Naslov 3 Naslov 4
Ta celica deduje vertical-align: middle;iz tabele Ta celica deduje vertical-align: middle;iz tabele Ta celica deduje vertical-align: middle;iz tabele Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje vertical-align: bottom;iz vrstice tabele Ta celica deduje vertical-align: bottom;iz vrstice tabele Ta celica deduje vertical-align: bottom;iz vrstice tabele Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje vertical-align: middle;iz tabele Ta celica deduje vertical-align: middle;iz tabele Ta celica je poravnana na vrh. Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
<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>

Gnezdenje

Slogov obrob, aktivnih slogov in različic tabel ne podedujejo ugnezdene tabele.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
Glava Glava Glava
A najprej Zadnji
B najprej Zadnji
C najprej Zadnji
3 Larry ptica @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kako deluje gnezdenje

Da bi preprečili uhajanje kakršnih koli slogov v ugnezdene tabele, uporabljamo >izbirnik podrejenega kombinatorja ( ) v našem CSS. Ker moramo ciljati na vse tds in ths v thead, tbodyin tfoot, bi bil naš izbirnik videti precej dolg brez njega. Kot tak uporabljamo .table > :not(caption) > * > *izbirnik precej nenavadnega videza za ciljanje na vse tds in ths v .table, vendar na nobeno morebitno ugnezdeno tabelo.

Upoštevajte, da če dodate <tr>s kot neposredne podrejene tabele, bodo ti privzeto <tr>zaviti v a , tako da naši izbirniki delujejo, kot je predvideno.<tbody>

Anatomija

Glava mize

Podobno kot pri tabelah in temnih tabelah uporabite modifikatorske razrede .table-lightali .table-dark, da <thead>so videti svetlo ali temno sive.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Noga za mizo

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter
Noga Noga Noga Noga
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Napisi

A <caption>deluje kot naslov za tabelo. Uporabnikom z bralniki zaslona pomaga najti tabelo in razumeti, za kaj gre, ter se odločiti, ali jo želijo prebrati.

Seznam uporabnikov
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Lahko tudi postavite <caption>na vrh tabele z .caption-top.

Seznam uporabnikov
# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @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>

Odzivne mize

Odzivne tabele omogočajo enostavno vodoravno pomikanje po tabelah. Poskrbite, da bo katera koli tabela odzivna v vseh pogledih, tako da ovijete a .tablez .table-responsive. Ali pa z uporabo izberite največjo prekinitveno točko, do katere želite imeti odzivno tabelo .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Navpično striženje/prirezovanje

Odzivne mize uporabljajo overflow-y: hiddenfunkcijo , ki izreže vso vsebino, ki presega spodnji ali zgornji rob tabele. To lahko zlasti izloči spustne menije in druge pripomočke tretjih oseb.

Vedno odziven

Čez vsako prelomno točko uporabite .table-responsiveza vodoravno pomikanje tabel.

# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica Celica
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Specifična prelomna točka

Po potrebi uporabite .table-responsive{-sm|-md|-lg|-xl|-xxl}za ustvarjanje odzivnih tabel do določene prekinitvene točke. Od te prelomne točke naprej se bo tabela obnašala normalno in se ne bo pomikala vodoravno.

Te tabele so lahko videti zlomljene, dokler njihovi odzivni slogi ne veljajo za določene širine vidnega polja.

# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Celica Celica Celica Celica Celica Celica Celica Celica
2 Celica Celica Celica Celica Celica Celica Celica Celica
3 Celica Celica Celica Celica Celica Celica Celica Celica
<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

Spremenljivke

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

Zanka

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

Prilagajanje

  • Faktorske spremenljivke ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) se uporabljajo za določanje kontrasta v variantah tabele.
  • Poleg svetlih in temnih različic mize so barve teme posvetljene s $table-bg-levelspremenljivko.