Source

Stolovi

Dokumentacija i primjeri za opt-in stiliziranje tablica (s obzirom na njihovu prevladavajuću upotrebu u JavaScript dodacima) s Bootstrapom.

Primjeri

Zbog široko rasprostranjene upotrebe tablica u widgetima trećih strana kao što su kalendari i alati za odabir datuma, dizajnirali smo naše tablice da se mogu uključiti . Samo dodajte osnovnu klasu .tableu bilo koji <table>, a zatim je proširite prilagođenim stilovima ili našim raznim uključenim modifikatorskim klasama.

Koristeći najosnovnije označavanje tablice, evo kako .tabletablice temeljene na bazi izgledaju u Bootstrapu. Svi stilovi tablica naslijeđeni su u Bootstrapu 4 , što znači da će sve ugniježđene tablice biti stilizirane na isti način kao roditelj.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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 obrnuti boje—sa svijetlim tekstom na tamnoj pozadini—sa .table-dark.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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 glave stola

Slično tablicama i tamnim tablicama, upotrijebite klase modifikatora .thead-lightili .thead-darkkako bi <thead>izgledale svijetlo ili tamnosive.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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 bilo kojem retku tablice unutar <tbody>.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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>
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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>

Obrubljeni stol

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

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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>
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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 rubova

Dodati .table-borderlessza stol bez obruba.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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 recima tablice unutar <tbody>.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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>
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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 stol

Dodajte .table-smkako biste stolove učinili kompaktnijima rezanjem podloge na pola.

# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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>
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut 
<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 nastave

Koristite kontekstualne klase za bojanje redaka tablice ili pojedinačnih ćelija.

Klasa Naslov Naslov
Aktivan Ćelija Ćelija
Zadano Ćelija Ćelija
Primarni Ćelija Ćelija
Sekundarna Ćelija Ćelija
Uspjeh Ćelija Ćelija
Opasnost Ćelija Ćelija
Upozorenje Ćelija Ćelija
Info Ćelija Ćelija
Svjetlo Ćelija Ćelija
tamno Ćelija Ćelija 
<!-- 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 pomoćne programe za tekst ili pozadinu za postizanje sličnih stilova.

# Naslov Naslov
1 Ćelija Ćelija
2 Ćelija Ćelija
3 Ćelija Ćelija
4 Ćelija Ćelija
5 Ćelija Ćelija
6 Ćelija Ćelija
7 Ćelija Ćelija
8 Ćelija Ćelija
9 Ćelija Ćelija 
<!-- 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 daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom.

Stvorite responzivne tablice omotavanjem bilo koje .tables .table-responsive{-sm|-md|-lg|-xl}, čineći da se tablica pomiče vodoravno na svakoj max-widthprijelomnoj točki do (ali ne uključujući) 576px, 768px, 992px odnosno 1120px.

Imajte na umu da budući da preglednici trenutačno ne podržavaju upite konteksta raspona , zaobilazimo ograničenja min-i max-prefikse i okvire za prikaz s frakcijskim širinama (što se može dogoditi pod određenim uvjetima na uređajima s visokim dpi, na primjer) korištenjem vrijednosti s većom preciznošću za ove usporedbe .

Opisi

A <caption>funkcionira kao naslov za tablicu. Pomaže korisnicima s čitačima zaslona da pronađu tablicu i razumiju o čemu se radi te odluče žele li je pročitati.

Popis korisnika
# Prvi Posljednji Ručka
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut 
<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>

Responzivni stolovi

Responzivne tablice omogućuju lako vodoravno pomicanje tablica. Učinite bilo koju tablicu osjetljivom na sve okvire za prikaz omotavanjem .tables .table-responsive. Ili odaberite maksimalnu prijelomnu točku s kojom želite imati responzivnu tablicu pomoću .table-responsive{-sm|-md|-lg|-xl}.

Okomito rezanje/skraćivanje

Responzivni stolovi koriste overflow-y: hidden, koji izrezuje svaki sadržaj koji nadilazi donji ili gornji rub stola. Konkretno, ovo može isključiti padajuće izbornike i druge widgete trećih strana.

Uvijek odgovarajući

Preko svake prijelomne točke koristite .table-responsiveza vodoravno pomicanje tablica.

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

Specifična prijelomna točka

Koristite .table-responsive{-sm|-md|-lg|-xl}prema potrebi za izradu odgovarajućih tablica do određene prijelomne točke. Od te prijelomne točke pa naviše, tablica će se ponašati normalno i neće se pomicati vodoravno.

Ove tablice mogu izgledati neispravne sve dok se njihovi responzivni stilovi ne primijene na određenim širinama okvira za prikaz.

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