Source

Tabulas

Dokumentācija un piemēri tabulu izvēlei (ņemot vērā to izplatīto izmantošanu JavaScript spraudņos) ar Bootstrap.

Piemēri

Tā kā tabulas tiek plaši izmantotas trešo pušu logrīkos, piemēram, kalendāros un datumu atlasītājos, mēs esam izstrādājuši savas tabulas tā, lai tās varētu izvēlēties . Vienkārši pievienojiet bāzes klasi .tablejebkurai <table>, pēc tam paplašiniet ar pielāgotiem stiliem vai mūsu dažādajām iekļautajām modifikatoru klasēm.

Izmantojot visvienkāršāko tabulu marķējumu, šeit ir norādīts, kā .tableprogrammā Bootstrap izskatās tabulas. Visi tabulu stili tiek mantoti programmā Bootstrap 4 , kas nozīmē, ka visas ligzdotās tabulas tiks veidotas tādā pašā veidā kā vecāktabulas.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Varat arī apgriezt krāsas — ar gaišu tekstu uz tumša fona — ar .table-dark.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Galda galvas iespējas

Līdzīgi kā tabulās un tumšās tabulās, izmantojiet modifikatoru klases .thead-lightvai .thead-dark, lai tie būtu <thead>gaiši vai tumši pelēki.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Svītrainas rindas

Izmantojiet .table-striped, lai pievienotu zebras svītras jebkurai tabulas rindai <tbody>.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Galds ar malām

Pievienojiet .table-borderedapmalēm visās tabulas un šūnu pusēs.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Galds bez malām

Pievienojiet .table-borderlesstabulai bez apmalēm.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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-borderlessvar izmantot arī uz tumšiem galdiem.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Pārvietojamas rindas

Pievienot .table-hover, lai iespējotu kursora novietošanu tabulas rindās <tbody>.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Mazs galds

Pievienojiet .table-sm, lai padarītu tabulas kompaktākas, pārgriežot šūnu polsterējumu uz pusēm.

# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @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>

Kontekstuālās klases

Izmantojiet kontekstuālās klases, lai krāsotu tabulas rindas vai atsevišķas šūnas.

Klase Virsraksts Virsraksts
Aktīvs Šūna Šūna
Noklusējums Šūna Šūna
Primārs Šūna Šūna
Sekundārais Šūna Šūna
Panākumi Šūna Šūna
Briesmas Šūna Šūna
Brīdinājums Šūna Šūna
Informācija Šūna Šūna
Gaisma Šūna Šūna
Tumšs Šūna Šūna 
<!-- 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>

Parastie tabulas fona varianti nav pieejami ar tumšo tabulu, tomēr varat izmantot teksta vai fona utilītas , lai iegūtu līdzīgus stilus.

# Virsraksts Virsraksts
1 Šūna Šūna
2 Šūna Šūna
3 Šūna Šūna
4 Šūna Šūna
5 Šūna Šūna
6 Šūna Šūna
7 Šūna Šūna
8 Šūna Šūna
9 Šūna Šūna 
<!-- 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>
Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-onlyklasi paslēptu papildu tekstu.

Izveidojiet adaptīvas tabulas, aptinot jebkuru .tablear .table-responsive{-sm|-md|-lg|-xl}, liekot tabulai ritināt horizontāli katrā max-widthpārtraukuma punktā līdz (bet neieskaitot) attiecīgi līdz 576 pikseļiem, 768 pikseļiem, 992 pikseļiem un 1120 pikseļiem.

Ņemiet vērā: tā kā pārlūkprogrammas pašlaik neatbalsta diapazona konteksta vaicājumus , mēs apstrādājam ierobežojumus, min-prefiksus max-un skatu logus ar daļveida platumu (kas var rasties noteiktos apstākļos, piemēram, augstas izšķirtspējas ierīcēs), izmantojot šiem salīdzinājumiem vērtības ar lielāku precizitāti. .

Paraksti

Funkcijas <caption>kā tabulas virsraksts. Tas palīdz lietotājiem ar ekrāna lasītājiem atrast tabulu un saprast, par ko tā ir, un izlemt, vai viņi vēlas to lasīt.

Lietotāju saraksts
# Pirmkārt Pēdējais Rokturis
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @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>

Atsaucīgas tabulas

Adaptīvās tabulas ļauj viegli ritināt tabulas horizontāli. Padariet jebkuru tabulu adaptīvu visos skata portos, aptinot a .tablear .table-responsive. Vai arī izvēlieties maksimālo pārtraukuma punktu, ar kuru izveidot adaptīvu tabulu, izmantojot .table-responsive{-sm|-md|-lg|-xl}.

Vertikālā apgriešana/saīsināšana

Adaptīvajās tabulās tiek izmantots overflow-y: hidden, kas nogriež visu saturu, kas pārsniedz tabulas apakšējo vai augšējo malu. Tas jo īpaši var izgriezt nolaižamās izvēlnes un citus trešo pušu logrīkus.

Vienmēr atsaucīgs

Visiem pārtraukuma punktiem izmantojiet .table-responsivetabulu horizontālai ritināšanai.

# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Konkrēts pārtraukuma punkts

Izmantojiet .table-responsive{-sm|-md|-lg|-xl}pēc vajadzības, lai izveidotu adaptīvas tabulas līdz noteiktam pārtraukuma punktam. Sākot no šī pārtraukuma punkta un uz augšu, tabula darbosies normāli un netiks ritināta horizontāli.

Šīs tabulas var izskatīties bojātas, līdz to adaptīvie stili tiek piemēroti noteiktam skata loga platumam.

# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts Virsraksts
1 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
2 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna
3 Šūna Šūna Šūna Šūna Šūna Šūna Šūna Šūna 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>