TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -taulukot?

1

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:

Kuinka luoda Bootstrap 5 -taulukot?

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:

Kuinka luoda Bootstrap 5 -taulukot?

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:

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?

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

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?

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:

Taulukon asiayhteysluokat
pöytä aktiivinen Vaaleanharmaa leijuva väri
pöytä-menestys Vaaleanvihreä menestys tai positiivinen toiminta
taulukko-tiedot Vaaleansininen ilmoitusviesti
pöytä-varoitus Vaaleankeltainen varoitus
pöytä-vaara Vaalea punainen merkitsee vaaraa
taulukko-ensisijainen Vaaleansininen ilmaisee päävärin Bootstrapissa
taulukko-toissijainen Vaalea punainen merkitsee vaaraa
pöytävalaisin Vaaleanharmaa ilmaisee väriä
pöytäpimeä Vaalean musta osoittaa pimeää
Taustatyökalu / asiayhteysluokat
bg-ensisijainen Keskivärinen sininen päävärinä
bg-menestys Metsä vihreä menestykseen
bg-varoitus

Vapaa puhe vihreä  varoitus

bg-info Vaalea merenvihreä tiedoksi
bg-vaara Punainen (Cinnabar) vaarassa
bg-valo Yksinäisyys valolle
bg-pimeä Miragen väri tummaan
bg-toissijainen Alumiiniväri toissijaiseksi

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

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?

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

Kuinka luoda Bootstrap 5 -taulukot?

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.

Kuinka luoda Bootstrap 5 -taulukot?


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja