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>