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>

Reunaton pöytä

Lisää .table-borderlesstaulukkoon ilman reunuksia.

# Ensimmäinen Kestää Kahva
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
<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-borderlessvoidaan käyttää myös tummilla pöydillä.

# Ensimmäinen Kestää Kahva
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
<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>

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-etuliitteitä max-ja näkymäportteja murto-osien leveyksillä (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.

Nämä taulukot voivat näyttää rikkinäisiltä, ​​kunnes niiden responsiiviset tyylit ovat käytössä tietyillä näkymän leveyksillä.

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