Source

Taulukot

Dokumentaatio ja esimerkkejä taulukoiden valinnaisesta tyylistä (koska niitä käytetään yleisesti JavaScript-laajennuksissa) Bootstrapin avulla.

Esimerkkejä

Koska taulukot ovat laajalti käytössä kolmannen osapuolen widgeteissä, kuten kalentereissa ja päivämäärävalitsimissa, olemme suunnitelleet taulukot niin, että ne ovat valittavissa . Lisää vain perusluokka .tablemihin tahansa <table>, ja laajenna sitten mukautetuilla tyyleillä tai erilaisilla sisällytetyillä muokkausluokilla.

Kun käytät yksinkertaisinta taulukkomerkintää, näin .table-pohjaiset taulukot näyttävät Bootstrapissa. Kaikki taulukkotyylit periytyvät Bootstrap 4:ssä , mikä tarkoittaa, että kaikki sisäkkäiset taulukot tyylitetään samalla tavalla kuin ylätason taulukot.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Voit myös kääntää värit – vaalealla tekstillä tummalla taustalla – painikkeella .table-dark.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Pöydän päävaihtoehdot

Kuten taulukoissa ja tummissa taulukoissa, käytä muokkausluokkia .thead-lighttai .thead-darksaadaksesi ne <thead>näyttämään vaalealta tai tummanharmaalta.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Raidalliset rivit

Käytä .table-stripedlisätäksesi seepraraidan mille tahansa taulukon riville <tbody>.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Reunattu pöytä

Lisää .table-borderedreunuksia varten taulukon ja solujen kaikilla puolilla.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

Liikkuvat rivit

Lisää .table-hoverottaaksesi hiiritilan käyttöön taulukon riveillä <tbody>.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

Pieni pöytä

Lisää .table-smtehdäksesi pöydistä tiiviimpiä leikkaamalla solupehmuste puoliksi.

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry lintu		@viserrys

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

Kontekstuaaliset luokat

Käytä kontekstuaalisia luokkia taulukon rivien tai yksittäisten solujen värittämiseen.

Luokka	Otsikko	Otsikko
Aktiivinen	Cell	Cell
Oletus	Cell	Cell
Ensisijainen	Cell	Cell
Toissijainen	Cell	Cell
Menestys	Cell	Cell
Vaara	Cell	Cell
Varoitus	Cell	Cell
Tiedot	Cell	Cell
Kevyt	Cell	Cell
Tumma	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>

Tavalliset taulukon taustaversiot eivät ole saatavilla tumman taulukon kanssa, mutta voit käyttää tekstiä tai taustaapuohjelmia samanlaisten tyylien saavuttamiseen.

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

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettu lisäteksti.

Luo responsiivisia taulukoita käärimällä mikä tahansa .tablemerkillä .table-responsive{-sm|-md|-lg|-xl}, jolloin taulukko vierii vaakasuunnassa kussakin max-widthkeskeytyspisteessä 576 pikseliin, 768 pikseliin, 992 pikseliin ja 1 120 pikseliin (ei mukaan lukien).

Huomaa, että koska selaimet eivät tällä hetkellä tue aluekontekstikyselyitä , kiertämme rajoituksia min-sekä max-etuliitteitä ja näkymäportteja murto-osien leveydellä (joita voi esiintyä tietyissä olosuhteissa esimerkiksi korkean dpi:n laitteissa) käyttämällä tarkempia arvoja näihin vertailuihin. .

Kuvatekstit

Toimii <caption>kuten taulukon otsikko. Se auttaa näytönlukuohjelmia käyttäviä käyttäjiä löytämään taulukon ja ymmärtämään, mistä siinä on kyse, ja päättämään, haluavatko he lukea sen.

Lista käyttäjistä
#	Ensimmäinen	Kestää	Kahva
1	Mark	Otto	@mdo
2	Jacob	Thornton	@rasva
3	Larry	lintu	@viserrys

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

Responsiiviset taulukot

Responsiivisten taulukoiden avulla taulukoita voi vierittää vaakasuunnassa helposti. Tee mistä tahansa taulukosta responsiivinen kaikissa näkymäporteissa rivittämällä a .table-merkillä .table-responsive. Tai valitse maksimi keskeytyskohta, johon haluat saada reagoivan taulukon, käyttämällä .table-responsive{-sm|-md|-lg|-xl}.

Pystyleikkaus/leikkaus

Responsiivisissa taulukoissa käytetään overflow-y: hidden, joka leikkaa pois kaiken sisällön, joka ylittää taulukon ala- tai yläreunan. Tämä voi erityisesti leikata pois avattavat valikot ja muut kolmannen osapuolen widgetit.

Aina reagoiva

Käytä jokaisessa keskeytyskohdassa .table-responsivevaakasuoraan vierittäviin taulukoihin.

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

Katkopistekohtainen

Käytä .table-responsive{-sm|-md|-lg|-xl}tarvittaessa responsiivisten taulukoiden luomiseen tiettyyn keskeytyskohtaan asti. Tästä keskeytyskohdasta alkaen taulukko toimii normaalisti eikä vieritä vaakasuunnassa.

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Otsikko	Otsikko	Otsikko	Otsikko	Otsikko
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

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