Source

Dëscher

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

Beispiller

Wéinst der verbreeter Notzung vun Dëscher iwwer Drëtt-Partei Widgets wéi Kalenneren an Datum Picker, hu mir eis Dëscher entworf fir opt-in ze sinn . Füügt einfach d'Basisklass .tableun all <table>, verlängert dann mat personaliséierte Stiler oder eis verschidde abegraff Modifizéierungsklassen.

Mat der Basis Table Markup, hei ass wéi .table-baséiert Dëscher am Bootstrap kucken. All Dëschstiler ginn am Bootstrap 4 ierflecher , dat heescht datt all nestéiert Dëscher op déiselwecht Manéier wéi d'Elteren styléiert ginn.

#	É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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Dir kënnt d'Faarwen och ëmdréinen - mat liichtem Text op donkelen Hannergrënn - mat .table-dark.

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

<table class="table table-dark">
  <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>

Dësch Kapp Optiounen

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

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

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

<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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

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

<table class="table table-striped table-dark">
  <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>

Border Dësch

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

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

<table class="table table-bordered table-dark">
  <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>

Hoverable Reihen

Füügt .table-hoverfir en Hover-Status op Tabellereihen an engem <tbody>.

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

<table class="table table-hover">
  <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>

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

<table class="table table-hover table-dark">
  <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>

Klengen Dësch

Füügt .table-smfir Dëscher méi kompakt ze maachen andeems d'Zellpolsterung an der Halschent geschnidden ass.

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

<table class="table table-sm">
  <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>

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

<table class="table table-sm table-dark">
  <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>

Kontextuell Klassen

Benotzt kontextuell Klassen fir Dësch Reihen oder eenzel Zellen ze faarwen.

Klass	Rubrik	Rubrik
Aktiv	Zell	Zell
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Regelméisseg Dëschhannergrondvarianten sinn net mat dem donkelen Dësch verfügbar, awer Dir kënnt Text- oder Background-Utilities benotzen fir ähnlech Stiler z'erreechen.

#	Rubrik	Rubrik
1	Zell	Zell
2	Zell	Zell
3	Zell	Zell
4	Zell	Zell
5	Zell	Zell
6	Zell	Zell
7	Zell	Zell
8	Zell	Zell
9	Zell	Zell

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 Assistenztechnologien vermëttelt gëtt - sou wéi Écran 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 Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Erstellt reaktiounsfäeger Dëscher andeems Dir iergendeng .tablemat wéckelt .table-responsive{-sm|-md|-lg|-xl}, sou datt den Dësch horizontal op all max-widthBreakpunkt vu bis zu (awer net abegraff) 576px, 768px, 992px, respektiv 1120px scrollt.

Bedenkt datt well Browser de Moment keng Range Kontext Ufroen ënnerstëtzen , schaffe mir ronderëm d'Limitatiounen vun min-a max-Präfixe a Viewporte mat Fraktiounsbreeten (wat ënner bestëmmte Bedéngungen op High-dpi Apparater zum Beispill optriede kann) andeems mir Wäerter mat méi héijer Präzisioun fir dës Vergläicher benotzen .

Ënnerschrëften

A <caption>funktionné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">
  <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}.

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}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 normal behuelen an net horizontal scrollen.

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

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

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

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

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