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.
Kuten taulukoissa ja tummissa taulukoissa, käytä muokkausluokkia .thead-lighttai .thead-darksaadaksesi ne <thead>näyttämään vaalealta tai tummanharmaalta.
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
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-bordered table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-borderless table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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 --><trclass="table-active">...</tr><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="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 --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
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
<tableclass="table"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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.
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ä.