Source

Táblázatok

Dokumentáció és példák a táblázatok Bootstrap alkalmazással történő opt-in stílusához (a JavaScript beépülő modulokban való elterjedt használatuk miatt).

Példák

Mivel a táblázatok széles körben elterjedtek a harmadik felek moduljaiban, például a naptárak és a dátumválasztók között, táblázatainkat úgy alakítottuk ki, hogy azok feliratkozásra alkalmasak legyenek . Csak adja hozzá az alaposztályt .tablebármelyikhez <table>, majd bővítse ki egyéni stílusokkal vagy különféle módosító osztályainkkal.

A legalapvetőbb táblajelölést használva a következőképpen .tablenéznek ki a -alapú táblák a Bootstrapben. Minden táblázatstílus öröklődik a Bootstrap 4 -ben, ami azt jelenti, hogy minden beágyazott tábla stílusa megegyezik a szülővel.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

A színeket meg is fordíthatja – világos szöveggel sötét háttéren – a gombbal .table-dark.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Asztalfej opciók

A táblázatokhoz és a sötét táblázatokhoz hasonlóan használja a vagy módosító osztályokat .thead-light, .thead-darkhogy <thead>világos- vagy sötétszürkének tűnjön.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Csíkos sorok

Használja .table-stripeda zebracsíkok hozzáadásához a táblázat bármely sorához a <tbody>.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 J��kób Thornton @zsír
3 Larry a madár @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>

Szegélyezett asztal

Adja hozzá .table-bordereda szegélyekhez a táblázat és a cellák minden oldalán.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Lebegő sorok

Hozzáadás .table-hovera lebegtetési állapot engedélyezéséhez a táblázaton belüli sorokon <tbody>.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Kis asztal

Hozzáadása .table-smaz asztalok kompaktabbá tételéhez a cellapárnázás felére vágásával.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Kontextuális osztályok

Használjon környezetfüggő osztályokat a táblázat sorainak vagy egyes celláinak színezéséhez.

Osztály Cím Cím
Aktív Sejt Sejt
Alapértelmezett Sejt Sejt
Elsődleges Sejt Sejt
Másodlagos Sejt Sejt
Siker Sejt Sejt
Veszély Sejt Sejt
Figyelem Sejt Sejt
Info Sejt Sejt
Könnyű Sejt Sejt
Sötét Sejt Sejt
<!-- 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>

A sötét táblával nem érhetők el normál táblázatháttér-változatok, azonban használhat szöveges vagy háttér-segédprogramokat hasonló stílusok eléréséhez.

# Cím Cím
1 Sejt Sejt
2 Sejt Sejt
3 Sejt Sejt
4 Sejt Sejt
5 Sejt Sejt
6 Sejt Sejt
7 Sejt Sejt
8 Sejt Sejt
9 Sejt Sejt
<!-- 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>
Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Hozzon létre adaptív táblázatokat úgy, hogy bármelyiket körbezárja .tablea jellel .table-responsive{-sm|-md|-lg|-xl}, így a táblázat vízszintesen görgethető minden max-widthtörésponton (de nem beleértve) 576 képpontig, 768 képpontig, 992 képpontig, illetve 1120 képpontig.

Vegye figyelembe, hogy mivel a böngészők jelenleg nem támogatják a tartománykontextus-lekérdezéseket , megkerüljük a töredékszélességű előtagok min-ésmax- nézetablak korlátait (amelyek bizonyos körülmények között előfordulhatnak például nagy dpi-s eszközökön) úgy, hogy nagyobb pontosságú értékeket használunk ezekhez az összehasonlításokhoz. .

Feliratok

A <caption>függvény úgy működik, mint egy táblázat fejléce. Segít a képernyőolvasóval rendelkező felhasználóknak megtalálni a táblázatot, megérteni, miről szól, és eldönteni, hogy el akarják-e olvasni.

Felhasználók listája
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Reszponzív táblázatok

A reszponzív táblázatok lehetővé teszik a táblázatok vízszintes görgetését. Tegye bármelyik táblázatot érzékeny az összes nézetablakban úgy, hogy egy karaktert a karakterrel .tabletördel .table-responsive. Vagy válasszon egy maximális töréspontot, amelyhez a reszponzív táblázatot a használatával kívánja elérni .table-responsive{-sm|-md|-lg|-xl}.

Függőleges vágás/csonkítás

A reszponzív táblázatok a lehetőséget használják overflow-y: hidden, amely levág minden olyan tartalmat, amely túlmutat a táblázat alsó vagy felső szélén. Ez különösen levághatja a legördülő menüket és más, harmadik féltől származó widgeteket.

Mindig reagáló

Minden törésponton használja .table-responsivevízszintesen görgető táblázatokhoz.

# Cím Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Töréspont specifikus

Szükség szerint használja .table-responsive{-sm|-md|-lg|-xl}a reszponzív táblázatok létrehozásához egy adott töréspontig. Ettől a törésponttól kezdve a táblázat normálisan fog viselkedni, és nem gördül vízszintesen.

# Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt
# Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt
# Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt
# Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt
<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>