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>

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

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

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