Source

Mize

Dokumentacija in primeri za izbirno 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 <thead>so videti svetlo ali temno sive.

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

Brezroba miza

Dodaj .table-borderlessza mizo brez robov.

# najprej Zadnji Ročaj
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @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-borderlesslahko se uporablja tudi na temnih mizah.

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

Te tabele so lahko videti zlomljene, dokler njihovi odzivni slogi ne veljajo za določene širine vidnega polja.

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