Kuinka luoda Bootstrap 5 -taulukot?

Bootstrapin avulla voit luoda kauniita taulukoita CSS -kehyksen avulla. Versiossa 4 on joitain uusia luokkia taulukon värin kääntämiseksi ja taulukon reagoimiseksi. Voit myös eri tyyppisiä taulukoita helposti uusimman version 5 avulla. Tässä opetusohjelmassa keskustelemme eri mahdollisuuksista luoda taulukoita Bootstrap 5: llä. Voit ladata tässä opetusohjelmassa käytetyt tiedostot täältä.

tunnisteita. Esimerkissämme luodaan yksinkertainen taulukkomuotoinen taulukko, jossa on neljä oppilaan nimeä (riveillä) ja viisi aihetta keskimääräisellä prosenttiosuudella (sarakkeissa). Alla on Bootstrap -oletustaulukon koodi.

Oletuksena ainoa Bootstrap -taulukon luomiseen tarvittava CSS -luokka on "table" -luokka, jota käytetään suoraan HTML -taulukkoelementtiin. Sinun ei tarvitse luoda

tagi taulukkojen lisäämiseksi Bootstrapiin. Oletustunniste tuottaa seuraavan tuloksen:

Pöydän värien kääntäminen

Bootstrap 4: n avulla voit kääntää pöydän värin lisäämällä taulukkoon käänteisen

tag. Se kääntää taustan tummaksi ja tekstin vaaleiksi. Koodin pitäisi näyttää tältä:

<table class="table table-inverse">
All content remains same here similar to default table.
<table>

Käänteisessä taulukossa on erittäin tumma ja houkutteleva tausta, kuten alla on esitetty:

Käänteinen otsikkotaulukko

Aiemmassa tapauksessa taulukon käänteisluokkaa sovellettiin koko taulukkoon. Bootstrap 4 mahdollistaa myös ylätunnisteen taustan ja tekstin värien kääntämisen. Jos haluat kääntää otsikon käänteiseksi, lisää vain thead-inverse-luokka

tag.

<table class="table">
<thead class="thead-inverse">
</thead>
</table>

Merkkiarkki -taulukossamme on musta otsikkorivi, kuten alla:

Ei siinä kaikki!!! Bootstrapilla on monia muita vaihtoehtoja. Luodaan lisää muunnelmia.

Raidallinen käynnistysnauha 4 Taulukko

Raidallisen taulukon avulla voit luoda riveille vaihtoehtoisia värejä. Lisää vain "pöytä-raidallinen" olemassa olevaan "taulukko" -luokkaan, ja taulukossa on raidallinen kuvio. Vaaleanharmaa taustaväri käytetään kaikissa parittomissa riveissä ensimmäisestä rivistä alkaen.

<table class="table table-striped">
</table>

Raidallinen taulukko on useimmiten edullinen rivien erottamiseksi ja sisällön esittämiseksi vierailijoille.

Bootstrap -reunapöytä

Tämä lisää yksinkertaisesti reunuksen oletustaulukkoon. Tarvitset vain "taulukkorajaisen" luokan liittämisen olemassa olevaan "taulukko" -luokkaan.

<table class="table table-bordered">
</table>

Merkintätaulukkomme, jossa on reunus, pitäisi näyttää tältä:

Voit myös helposti luoda reunapöydän, jossa on raitoja riveillä.

<table class="table table-striped table-bordered">
</table>

Taulukko, jossa on hiiren vaikutuksia riveihin

Mitä jos lisäät pöytään tehosteet? Pöytälevitys-luokka tekee sen puolestasi. Vie hiiri taulukon päälle, niin näet vastaavan rivin korostettuna vaaleanharmaalla taustavärillä.

<table class="table table-hover">
</table>

Alla on taulukon ulkoasu, kun siirrät hiirtä toiselle riville.

Responsiivinen Bootstrap -pöytä pienemmille kuin 768 pikselin laitteille

Reagoivan taulukon luominen Bootstrap 4: ssä on hyvin yksinkertaista. Sinun ei tarvitse lisätä ylimääräistä

reagointikyvyn lisäämiseksi. Lisää vain taulukkoon reagoiva luokka, vaakasuora vierityspalkki lisätään taulukkoon automaattisesti, kun sitä tarkastellaan selaimessa alle 768 pikselin näytön koon.

<table class="table table-responsive">
</table>

Tältä reagoiva pöytämme näyttää. Muista, että vaakasuuntainen vierityspalkki tulee näkyviin vain, kun taulukkoa katsotaan pienemmällä kuin 768 pikselin näytöllä. Muuten et löydä eroa tavalliseen Bootstrap -pöytään.

Bootstrap -taulukko pakatulla tekstillä

Joskus on pakattava pöydän korkeus pienentääkseen varattua tilaa. Bootstrap mahdollistaa tämän lisäämällä "table-sm" -luokan olemassa olevaan "table" -luokkaan alla olevan kuvan mukaisesti:

<table class="table table-sm">
</table>

Tämä poistaa pehmusteen ja tekee pöydän korkeudesta kompaktin.

Bootstrap -taulukon luominen taustavärillä

Tästä lähtien olemme keskustelleet yksinkertaisen taulukon luomisesta tai vaaleilla harmaalla taustalla olevalle riville. Bootstrap mahdollistaa myös taulukon solujen ja rivien värittämisen, jotta niistä tulee kauniita. Voit korostaa taulukon rivejä tai soluja viidellä eri värillä. On olemassa kaksi CSS -luokkien sarjaa, jotka auttavat sinua lisäämään taustavärejä – toinen on kontekstuaalinen luokka ja toinen tausta -apuohjelma. Alla oleva taulukko selittää eri vaihtoehdot:

Muista, että näitä luokkia voidaan soveltaa Bootstrap -taulukon yksittäisille riveille ja soluille missä tahansa yhdistelmässä.

Värilliset rivit kontekstuaalisilla luokilla

Käytämme asiayhteysluokkia merkkaustaulukossamme nähdäksemme ne toiminnassa. Alla oleva koodi käyttää taulukon aktiivista luokkaa taulukon ensimmäiselle riville, jotta taustaväri muuttuu vaalean harmaaksi.

<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Alla on, miltä koko taulukko näyttää, kun käytät "taulukko-menestys", "pöytävaroitus" ja "pöydän vaara" luokkia toiselle, kolmannelle ja neljännelle

taulukon elementtejä.

Värilliset rivit taustavärillä

Taulukon asiayhteysluokkien tapaan voit käyttää taustavärejä riveille taustakontekstiluokkien avulla.

<table class="table">
<tr class="bg-success">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Alla on katseenvangitsijataulukko, jossa on "bg-menestys", "bg-riski", "bg-varoitus", "bg-info" ja muut taustatyökaluluokat, joita sovelletaan riveihin.

Värilliset solut kontekstuaalisilla luokilla

Bootstrap -taulukon jokaista solua voidaan käyttää jollakin asiayhteysluokalla sen korostamiseksi muista soluista. Tästä on todella hyötyä, kun sinulla on suurempi pöytä ja haluat korostaa vain muutamia soluja. Alla oleva koodi näyttää "table-active" asiayhteysluokan soveltamisen taulukon soluun.

<table class="table">
<tr>
<td>Thomas</td>
<td class="table-active">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Alla olevassa taulukossa on neljä solua, joita käytetään satunnaisesti eri taustavärillä.

Värilliset rivit ja solut taustavärillä ja asiayhteysluokilla

Lopuksi voit käyttää taulukon asiayhteysluokkaa ja taustan asiayhteysluokkaa missä tahansa yhdistelmässä, jotta voit luoda eri taustavärit riveille ja soluille.

<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td class="table-info">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td class="bg-success">79</td>
</tr> <tr>
</table>

Esimerkkitaulukko näyttää tältä, kun eri värejä käytetään riveille ja soluille.

Opi Bootstrap 5 (hakemisto )