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>