Source

Mize

Dokumentacija in primeri za opt-in oblikovanje tabel (glede na njihovo prevladujočo uporabo v vtičnikih JavaScript) z Bootstrapom.

Primeri

Zaradi široke uporabe tabel v pripomočkih tretjih oseb, kot so koledarji in izbirniki datumov, smo svoje tabele zasnovali tako, da jih je mogoče privoliti . Preprosto dodajte osnovni razred .tablekateremu koli <table>, nato razširite s slogi po meri ali našimi različnimi vključenimi razredi modifikatorjev.

Z uporabo najosnovnejšega označevanja tabel je prikazano, kako so .tabletabele na osnovi v Bootstrapu videti. Vsi slogi tabel so podedovani v Bootstrap 4 , kar pomeni, da bodo vse ugnezdene tabele oblikovane na enak način kot nadrejene.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

Barve lahko tudi obrnete – s svetlim besedilom na temnem ozadju – z .table-dark.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

Možnosti glave mize

Podobno kot pri tabelah in temnih tabelah uporabite modifikatorske razrede .thead-lightali .thead-dark, da naredite <thead>svetlo ali temno sivo.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

Črtaste vrstice

Uporabite .table-stripedza dodajanje zebrastih črt v katero koli vrstico tabele znotraj <tbody>.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

Obrobljena miza

Dodajte .table-borderedza robove na vseh straneh tabele in celic.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

Lebdeče vrstice

Dodajte .table-hover, da omogočite stanje lebdenja nad vrsticami tabele znotraj <tbody>.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

Majhna miza

Dodajte .table-sm, da naredite mize bolj kompaktne, tako da prepolovite oblazinjenje celic.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica 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>

Kontekstualni razredi

Uporabite kontekstualne razrede za barvanje vrstic tabele ali posameznih celic.

Razred	Naslov	Naslov
Aktiven	Celica	Celica
Privzeto	Celica	Celica
Primarni	Celica	Celica
Sekundarno	Celica	Celica
Uspeh	Celica	Celica
Nevarnost	Celica	Celica
Opozorilo	Celica	Celica
Informacije	Celica	Celica
Svetloba	Celica	Celica
Temno	Celica	Celica

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

Običajne različice ozadja tabele niso na voljo s temno tabelo, vendar lahko uporabite pripomočke za besedilo ali ozadje , da dosežete podobne sloge.

#	Naslov	Naslov
1	Celica	Celica
2	Celica	Celica
3	Celica	Celica
4	Celica	Celica
5	Celica	Celica
6	Celica	Celica
7	Celica	Celica
8	Celica	Celica
9	Celica	Celica

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

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Ustvarite odzivne tabele tako, da katero koli ovijete .tablez .table-responsive{-sm|-md|-lg|-xl}, tako da se tabela pomika vodoravno na vsaki max-widthprelomni točki do (vendar ne vključno) 576px, 768px, 992px oziroma 1120px.

Upoštevajte, da ker brskalniki trenutno ne podpirajo kontekstnih poizvedb obsega , omejitve min-in max-predpone ter vidna okna zaobidemo z delnimi širinami (ki se na primer lahko pojavijo pod določenimi pogoji na napravah z visoko dpi), tako da za te primerjave uporabimo vrednosti z večjo natančnostjo .

Napisi

A <caption>deluje kot naslov za tabelo. Uporabnikom z bralniki zaslona pomaga najti tabelo in razumeti, za kaj gre, ter se odločiti, ali jo želijo prebrati.

Seznam uporabnikov
#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
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>

Odzivne mize

Odzivne tabele omogočajo enostavno vodoravno pomikanje po tabelah. Poskrbite, da bo katera koli tabela odzivna v vseh pogledih, tako da ovijete a .tablez .table-responsive. Ali pa z uporabo izberite največjo prekinitveno točko, do katere želite imeti odzivno tabelo .table-responsive{-sm|-md|-lg|-xl}.

Navpično striženje/prirezovanje

Odzivne mize uporabljajo overflow-y: hiddenfunkcijo , ki izreže vso vsebino, ki presega spodnji ali zgornji rob tabele. To lahko zlasti izloči spustne menije in druge pripomočke tretjih oseb.

Vedno odziven

Čez vsako prelomno točko uporabite .table-responsiveza vodoravno pomikanje tabel.

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

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

Specifična prelomna točka

Po potrebi uporabite .table-responsive{-sm|-md|-lg|-xl}za ustvarjanje odzivnih tabel do določene prekinitvene točke. Od te prelomne točke naprej se bo tabela obnašala normalno in se ne bo pomikala vodoravno.

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica

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