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>

Borderless Dësch

Dobäi .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">
  <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>

.table-borderlesskann och op donkel Dëscher benotzt ginn.

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

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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>