Source

Stolovi

Dokumentacija i primjeri za opt-in stilizovanje tabela (s obzirom na njihovu preovlađujuću upotrebu u JavaScript dodacima) sa Bootstrapom.

Primjeri

Zbog široko rasprostranjene upotrebe tabela u widgetima trećih strana kao što su kalendari i birači datuma, dizajnirali smo naše tabele tako da se mogu uključiti . Samo dodajte osnovnu klasu .tablebilo kojoj <table>, a zatim proširite prilagođenim stilovima ili našim različitim uključenim klasama modifikatora.

Koristeći najosnovnije oznake tablice, evo kako .tableizgledaju tablice zasnovane na Bootstrapu. Svi stilovi tablica su naslijeđeni u Bootstrap 4 , što znači da će sve ugniježđene tablice biti stilizovane na isti način kao i roditelj.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>

Također možete invertirati boje—sa svijetlim tekstom na tamnoj pozadini—sa .table-dark.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>

Opcije za glavu stola

Slično tablicama i tamnim tabelama, koristite modifikatorske klase .thead-lightili .thead-darkda bi <thead>s izgledali svijetlo ili tamno sivo.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @twitter
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>

Prugasti redovi

Koristite .table-stripedza dodavanje zebrastih pruga u bilo koji red tabele unutar <tbody>.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>

Bordered table

Dodajte .table-borderedza granice na svim stranama tablice i ćelija.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>

Stol bez ivica

Dodajte .table-borderlessza tabelu bez granica.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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-borderlessmože se koristiti i na tamnim stolovima.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>

Lebdeći redovi

Dodajte .table-hoverda omogućite stanje lebdenja na redovima tabele unutar <tbody>.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>

Mali sto

Dodajte .table-smda stolovi budu kompaktniji tako što ćete prepoloviti punjenje ćelija.

# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @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>

Kontekstualne klase

Koristite kontekstualne klase za bojenje redova tablice ili pojedinačnih ćelija.

Klasa Naslov Naslov
Aktivan Cell Cell
Default Cell Cell
Primarni Cell Cell
Sekundarni Cell Cell
Uspjeh Cell Cell
Opasnost Cell Cell
Upozorenje Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<!-- 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>

Uobičajene varijante pozadine tablice nisu dostupne s tamnom tablicom, međutim, možete koristiti tekstualne ili pozadinske uslužne programe da biste postigli slične stilove.

# Naslov Naslov
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- 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>
Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-onlyklasom.

Kreirajte responzivne tabele premotavanjem bilo koje .tablesa .table-responsive{-sm|-md|-lg|-xl}, čineći da se tabela pomera horizontalno na svakoj max-widthtački prekida do (ali ne uključujući) 576px, 768px, 992px i 1120px, respektivno.

Imajte na umu da, budući da pretraživači trenutno ne podržavaju upite konteksta raspona , zaobilazimo ograničenja min-i max-prefikse i okvire za prikaz s razlomkom širine (što se može dogoditi pod određenim uvjetima na uređajima s visokim dpi, na primjer) koristeći vrijednosti s većom preciznošću za ova poređenja .

Naslovi

Funkcioniše <caption>kao naslov za tabelu. Pomaže korisnicima sa čitačima ekrana da pronađu tabelu i razumiju o čemu se radi i odluče žele li je pročitati.

Spisak korisnika
# Prvo Last Drška
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @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>

Responsive tables

Prilagodljive tabele omogućavaju horizontalno pomeranje tabela sa lakoćom. Učinite bilo koju tabelu prilagodljivom u svim okvirima za prikaz tako što ćete omotati a .tablesa .table-responsive. Ili odaberite maksimalnu tačku prekida s kojom ćete imati prilagodljivu tablicu koristeći .table-responsive{-sm|-md|-lg|-xl}.

Vertikalno odsecanje/skraćenje

Responzivne tabele koriste overflow-y: hidden, koji odseca svaki sadržaj koji ide dalje od donje ili gornje ivice tabele. Konkretno, ovo može ukloniti padajuće menije i druge vidžete trećih strana.

Uvijek odgovara

U svakoj tački prekida koristite .table-responsiveza vodoravno pomicanje tablica.

# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Specifična tačka prekida

Koristite .table-responsive{-sm|-md|-lg|-xl}po potrebi za kreiranje responzivnih tabela do određene tačke prekida. Od te tačke prekida i naviše, tabela će se ponašati normalno i neće se pomerati horizontalno.

Ove tabele mogu izgledati pokvarene sve dok se njihovi stilovi odziva ne primenjuju na određene širine prozora za prikaz.

# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Naslov Naslov Naslov Naslov Naslov Naslov Naslov Naslov
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>