Source

Tabuľky

Dokumentácia a príklady voliteľného štýlu tabuliek (vzhľadom na ich rozšírené použitie v doplnkoch JavaScriptu) pomocou Bootstrapu.

Príklady

Vzhľadom na rozšírené používanie tabuliek v miniaplikáciách tretích strán, ako sú kalendáre a nástroje na výber dátumu, sme naše tabuľky navrhli tak, aby boli voliteľné . Stačí pridať základnú triedu .tabledo ľubovoľnej triedy <table>a potom ju rozšíriť o vlastné štýly alebo naše rôzne zahrnuté triedy modifikátorov.

Pomocou najzákladnejšieho označenia tabuliek tu je návod, ako .tablevyzerajú tabuľky založené na systéme Bootstrap. Všetky štýly tabuliek sú zdedené v Bootstrap 4 , čo znamená, že všetky vnorené tabuľky budú štylizované rovnakým spôsobom ako nadradené.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Môžete tiež invertovať farby – so svetlým textom na tmavom pozadí – pomocou .table-dark.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Možnosti stolovej hlavy

Podobne ako pri tabuľkách a tmavých tabuľkách použite triedy modifikátorov .thead-lightalebo .thead-dark, aby sa <thead>s javilo ako svetlosivé alebo tmavosivé.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Pruhované riadky

Použite .table-stripedna pridanie zebrovaného pruhu do ľubovoľného riadku tabuľky v rámci <tbody>.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Ohraničený stôl

Pridajte .table-borderedokraje na všetkých stranách tabuľky a buniek.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

Vznášateľné riadky

Pridať .table-hover, ak chcete povoliť stav prechodu na riadky tabuľky v rámci súboru <tbody>.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

Malý stôl

Ak chcete, aby boli stoly kompaktnejšie, pridajte .table-smvýplň buniek na polovicu.

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Vtáčik Larry		@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>

Kontextové triedy

Použite kontextové triedy na zafarbenie riadkov tabuľky alebo jednotlivých buniek.

Trieda	Smerovanie	Smerovanie
Aktívne	Bunka	Bunka
Predvolené	Bunka	Bunka
Primárny	Bunka	Bunka
Sekundárne	Bunka	Bunka
Úspech	Bunka	Bunka
Nebezpečenstvo	Bunka	Bunka
POZOR	Bunka	Bunka
Info	Bunka	Bunka
Svetlo	Bunka	Bunka
Tmavý	Bunka	Bunka

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

Bežné varianty pozadia tabuľky nie sú k dispozícii s tmavou tabuľkou, na dosiahnutie podobných štýlov však môžete použiť textové alebo pozadia .

#	Smerovanie	Smerovanie
1	Bunka	Bunka
2	Bunka	Bunka
3	Bunka	Bunka
4	Bunka	Bunka
5	Bunka	Bunka
6	Bunka	Bunka
7	Bunka	Bunka
8	Bunka	Bunka
9	Bunka	Bunka

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

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .sr-onlytriedou.

Vytvorte responzívne tabuľky tak, že ľubovoľné zabalíte .tabledo .table-responsive{-sm|-md|-lg|-xl}, čím sa tabuľka posunie vodorovne pri každom max-widthbode prerušenia až do (okrem iného) 576 pixelov, 768 pixelov, 992 pixelov a 1 120 pixelov.

Upozorňujeme, že keďže prehliadače v súčasnosti nepodporujú rozsahové kontextové dopyty , obchádzame obmedzenia min-a max-predpony a výrezy so zlomkovou šírkou (ktoré sa môžu vyskytnúť za určitých podmienok napríklad na zariadeniach s vysokým rozlíšením) pomocou hodnôt s vyššou presnosťou na tieto porovnania. .

Titulky

Funkcia <caption>funguje ako hlavička tabuľky. Pomáha používateľom s čítačkami obrazovky nájsť tabuľku a pochopiť, o čom je, a rozhodnúť sa, či si ju chcú prečítať.

Zoznam používateľov
#	najprv	Posledný	Rukoväť
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@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>

Responzívne tabuľky

Responzívne tabuľky umožňujú jednoduché horizontálne posúvanie tabuliek. Urobte akúkoľvek tabuľku tak, aby reagovala na všetky výrezy tak, že zabalíte a .tables .table-responsive. Alebo vyberte maximálny bod prerušenia, s ktorým chcete mať responzívnu tabuľku až do, pomocou .table-responsive{-sm|-md|-lg|-xl}.

Vertikálne orezanie / skrátenie

Responzívne tabuľky využívajú overflow-y: hidden, ktorý orezáva akýkoľvek obsah, ktorý presahuje spodný alebo horný okraj tabuľky. Najmä to môže orezať rozbaľovacie ponuky a ďalšie miniaplikácie tretích strán.

Vždy reagovať

V každom bode prerušenia použite .table-responsivena horizontálne rolovanie tabuliek.

#	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie
1	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka
2	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka
3	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka	Bunka

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

Špecifické pre bod zlomu

Použite .table-responsive{-sm|-md|-lg|-xl}podľa potreby na vytvorenie responzívnych tabuliek až po konkrétny bod prerušenia. Od tohto bodu prerušenia a vyššie sa tabuľka bude správať normálne a nebude sa posúvať vodorovne.

#	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie
1	Bunka	Bunka	Bunka	Bunka	Bunka
2	Bunka	Bunka	Bunka	Bunka	Bunka
3	Bunka	Bunka	Bunka	Bunka	Bunka

#	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie
1	Bunka	Bunka	Bunka	Bunka	Bunka
2	Bunka	Bunka	Bunka	Bunka	Bunka
3	Bunka	Bunka	Bunka	Bunka	Bunka

#	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie
1	Bunka	Bunka	Bunka	Bunka	Bunka
2	Bunka	Bunka	Bunka	Bunka	Bunka
3	Bunka	Bunka	Bunka	Bunka	Bunka

#	Smerovanie	Smerovanie	Smerovanie	Smerovanie	Smerovanie
1	Bunka	Bunka	Bunka	Bunka	Bunka
2	Bunka	Bunka	Bunka	Bunka	Bunka
3	Bunka	Bunka	Bunka	Bunka	Bunka

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