in English

Dëscher

Dokumentatioun an Beispiller fir Opt-in Styling vun Dëscher (gëtt hir heefeg Notzung a JavaScript Plugins) mat Bootstrap.

Op dëser Säit

Iwwersiicht

Wéinst der verbreeter Notzung vun <table>Elementer iwwer Drëtt-Partei Widgets wéi Kalenneren an Datum Picker, Bootstrap Dëscher sinn opt-in . Füügt d'Basisklass .tableun all <table>, verlängert dann mat eisen optionalen Modifizéierungsklassen oder personaliséierte Stiler. All Dëschstiler ginn net am Bootstrap ierflecher, dat heescht datt all nestet Dëscher onofhängeg vum Elterendeel stylesch kënne ginn.

Mat der Basis Table Markup, hei ass wéi .table-baséiert Dëscher am Bootstrap kucken.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@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>

Varianten

Benotzt kontextuell Klassen fir Dëscher, Tabellereien oder eenzel Zellen ze faarwen.

Klass	Rubrik	Rubrik
Default	Zell	Zell
Primär	Zell	Zell
Secondaire	Zell	Zell
Erfolleg	Zell	Zell
Gefor	Zell	Zell
Warnung	Zell	Zell
Info	Zell	Zell
Liicht	Zell	Zell
Däischter	Zell	Zell

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

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Hëllefstechnologien vermëttelt gëtt - wéi Bildschirm Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Moyenen abegraff ass, wéi zum Beispill zousätzlech Text verstoppt mat der .visually-hiddenKlass.

Akzenter Dëscher

Gestreift Reihen

Benotzt .table-stripedfir Zebrastreifen op all Tabellerei bannent der <tbody>.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-striped">
  ...
</table>

Dës Klassen kënnen och zu Tabellvarianten bäigefüügt ginn:

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-success table-striped">
  ...
</table>

Hoverable Reihen

Füügt .table-hoverfir en Hover-Staat op Tabellereien bannent engem <tbody>.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-hover">
  ...
</table>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Dës hoverable Reihen kënnen och mat der gestreifter Variant kombinéiert ginn:

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Aktiv Dëscher

Highlight eng Tabellerei oder Zell andeems Dir eng .table-activeKlass bäidréit.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@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>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@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>

Wéi funktionnéieren d'Varianten an den Akzenttabellen?

Fir déi accentéiert Dëscher ( gestreift Reihen , hoverable Reihen an aktiv Dëscher ), hu mir e puer Technike benotzt fir dës Effekter fir all eis Tabellvarianten ze maachen :

Mir fänken un mam Hannergrond vun enger Tabellzelle mat der --bs-table-bgpersonaliséierter Eegeschaft ze setzen. All Tabellvarianten setzen dann déi personaliséiert Eegeschafte fir d'Tabellenzellen ze faarwen. Esou komme mir net an de Schwieregkeeten, wann semi-transparent Faarwen als Dëschhannergrënn benotzt ginn.
Da füüge mir en Insetbox Schatten op den Dëschzellen mat box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);enger Schicht uewen op all spezifizéierter background-color. Well mir eng rieseg Verbreedung benotzen a kee Blur, wäert d'Faarf monoton sinn. Well --bs-table-accent-bget als Standard net agesat ass, hu mir kee Standardbox Schatten.
Wann entweder .table-striped, .table-hoveroder .table-activeKlassen bäigefüügt ginn, --bs-table-accent-bggëtt de op eng semitransparent Faarf gesat fir den Hannergrond ze faarwen.
Fir all Tabellvariant generéiere mir eng --bs-table-accent-bgFaarf mat dem héchste Kontrast jee no där Faarf. Zum Beispill ass d'Akzentfaarf fir .table-primaryméi däischter wärend .table-darkeng méi hell Akzentfaarf huet.
Text- a Grenzfaarwen ginn op déiselwecht Manéier generéiert, an hir Faarwen ginn als Standard ierflecher.

Hannert de Kulissen gesäit et esou aus:

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

Dësch Grenzen

Grenzen Dëscher

Füügt .table-borderedfir Grenzen op all Säit vum Dësch an Zellen.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-bordered">
  ...
</table>

Grenz Faarf Utilities kënne bäigefüügt ginn fir Faarwen z'änneren:

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Dëscher ouni Grenzen

Dobäizemaachen .table-borderlessfir en Dësch ouni Grenzen.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-borderless">
  ...
</table>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Kleng Dëscher

Füügt .table-smfir .tableméi kompakt ze maachen andeems Dir all Zell paddingan der Halschent schneiden.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-sm">
  ...
</table>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Vertikal Ausrichtung

Dësch Zellen vun <thead>sinn ëmmer vertikal op ënnen ausgeriicht. Tabellzellen <tbody>ierwen hir Ausrichtung aus <table>a si standardiséiert op d'Spëtzt ausgeriicht. Benotzt d' Vertikal Ausrichtung Klassen fir nei ze alignéieren wou néideg.

Rubrik 1	Rubrik 2	Rubrik 3	Rubrik 4
Dës Zell ierft `vertical-align: middle;`vum Dësch	Dës Zell ierft `vertical-align: middle;`vum Dësch	Dës Zell ierft `vertical-align: middle;`vum Dësch	Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.
Dës Zell ierft `vertical-align: bottom;`vun der Tabellerei	Dës Zell ierft `vertical-align: bottom;`vun der Tabellerei	Dës Zell ierft `vertical-align: bottom;`vun der Tabellerei	Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.
Dës Zell ierft `vertical-align: middle;`vum Dësch	Dës Zell ierft `vertical-align: middle;`vum Dësch	Dës Zell ass no uewen ausgeriicht.	Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.

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

Nesting

Grenzstiler, aktive Stiler an Tabellvarianten ginn net vun nestet Dëscher ierflecher.

Éischten

Lescht

Grëff

Mark

Otto

@mdo

Header	Header	Header
A	Éischten	Lescht
B	Éischten	Lescht
C	Éischten	Lescht

Larry

de Vugel

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Wéi Nesting funktionnéiert

Fir ze verhënneren datt all Stiler op nestet Dëscher auslafen, benotze mir de Kannerkombinator ( >) Selektor an eiser CSS. Well mir mussen all tds an ths an der Zil- thead, tbody, an tfoot, eise selector géif ouni et flott laang kucken. Als solch benotze mir den zimlech ongewéinleche .table > :not(caption) > * > *Selektor fir all tds an ths vun der ze zielen .table, awer keng vun all potenziell nestet Dëscher.

Bedenkt datt wann Dir <tr>s als direkt Kanner vun engem Dësch bäidréit, <tr>déi an engem <tbody>Standard gewéckelt ginn, sou datt eis Selektorer funktionnéieren wéi virgesinn.

Anatomie

Dësch Kapp

Ähnlech wéi Dëscher an donkel Dëscher, benotzt d'Modifikateur Klassen .table-lightoder .table-darkfir <thead>s hell oder donkelgro ze maachen.

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Dësch Fouss

#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter
Fousszeilen	Fousszeilen	Fousszeilen	Fousszeilen

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Ënnerschrëften

A <caption>funktionéiert wéi eng Rubrik fir en Dësch. Et hëlleft Benotzer mat Écran Lieser engem Dësch ze fannen a verstoen ëm wat et geet an entscheeden ob se et liesen wëllen.

Lëscht vun de Benotzer
#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Dir kënnt och den <caption>op der Spëtzt vum Dësch setzen mat .caption-top.

Lëscht vun de Benotzer
#	Éischten	Lescht	Grëff
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@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>

Reaktiounsfäeger Dëscher

Reaktiounsfäeger Dëscher erlaben Dëscher horizontal mat Liichtegkeet ze scrollen. Maacht all Dësch reaktiounsfäeger iwwer all Viewports andeems Dir e .tablemat wéckelt .table-responsive. Oder, wielt e Maximum Breakpoint mat deem Dir e reaktiounsfäeger Dësch mat .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikal Ausschnëtt / Ofkierzung

Reaktiounsfäeger Dëscher benotzen overflow-y: hidden, déi all Inhalt ofschneiden deen iwwer déi ënnescht oder iewescht Kante vum Dësch geet. Besonnesch dëst kann Dropdown-Menüen an aner Drëtt-Partei Widgets ofschneiden.

Ëmmer reaktiounsfäeger

Iwwer all Breakpoint benotzt .table-responsivefir horizontal Scrollen Dëscher.

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

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

Breakpoint spezifesch

Benotzt .table-responsive{-sm|-md|-lg|-xl|-xxl}wéi néideg fir reaktiounsfäeger Dëscher bis zu engem bestëmmte Breakpoint ze kreéieren. Vun deem Breakpoint an erop, wäert den Dësch sech normal behuelen an net horizontal scrollen.

Dës Dëscher kënnen gebrach schéngen bis hir reaktiounsfäeger Stiler op spezifesch Viewport Breet gëllen.

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
2	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell
3	Zell	Zell	Zell	Zell	Zell	Zell	Zell	Zell

<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

Variablen

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

Loop

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

Personnalisatioun

D'Faktorvariablen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) gi benotzt fir de Kontrast an Tabellvarianten ze bestëmmen.
Nieft den hellen an donkelen Dëschvarianten ginn d'Themafaarwe vun der $table-bg-levelVariabel erliichtert.