Bootstrap-ekin taulen estiloa aukeratzeko dokumentazioa eta adibideak (JavaScript pluginetan duten erabilera nagusia kontuan hartuta).
Orrialde honetan
Ikuspegi orokorra
<table>Hirugarrenen widgetetan elementuak oso hedatuta daudenez, egutegiak eta data-hautatzaileak, esaterako, Bootstrap-en taulak aukera ematen du . Gehitu oinarrizko klasea .tableedozein <table>, gero zabaldu gure aukerako modifikatzaile klaseekin edo estilo pertsonalizatuekin. Taula-estilo guztiak ez dira Bootstrap-en heredatzen, hau da, habiaratutako edozein taula gurasoengandik independentea izan daiteke.
Taulen markaketa oinarrizkoena erabiliz, hona hemen .tableBootstrap-en oinarritutako taulak nola ikusten diren.
#
Lehenengoa
Azkena
Heldulekua
1
Markatu
Otto
@mdo
2
Jakob
Thornton
@potolo
3
Larry Txoria
@twitter
<tableclass="table"><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>
Aldaerak
Erabili testuinguru-klaseak taulak, taulen errenkadak edo gelaxka indibidualak koloreztatzeko.
Klasea
Goiburua
Goiburua
Lehenetsia
Zelula
Zelula
Lehen mailakoa
Zelula
Zelula
Bigarren mailakoa
Zelula
Zelula
Arrakasta
Zelula
Zelula
Arriskua
Zelula
Zelula
Abisua
Zelula
Zelula
Info
Zelula
Zelula
Argia
Zelula
Zelula
Iluna
Zelula
Zelula
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><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-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>
Laguntza-teknologiei esanahia ematea
Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.
Azentudun mahaiak
Ilara marradunak
Erabili .table-stripedzebra marra gehitzeko <tbody>.
Taularen gelaxka baten atzeko planoa --bs-table-bgpropietate pertsonalizatuarekin ezartzen hasten gara. Taula-aldaera guztiek ezarri dute propietate pertsonalizatu hori taulako gelaxkak koloreztatzeko. Horrela, ez dugu arazorik izango kolore erdi gardenak mahaiaren atzeko plano gisa erabiltzen badira.
Ondoren, txertatutako koadroaren itzala gehitzen dugu taulako gelaxketan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);geruza batekin zehaztutako edozeinen gainean background-color. Hedapen handia erabiltzen dugulako eta lausorik gabe, kolorea monotonoa izango da. Lehenespenez ezarri gabe dagoenez --bs-table-accent-bg, ez dugu kutxaren itzal lehenetsirik.
Biak edo klaseak gehitzen direnean, .table-stripedkolore erdi gardena ezartzen da atzeko planoa koloreztatzeko..table-hover.table-active--bs-table-accent-bg
Taula-aldaera bakoitzeko, --bs-table-accent-bgkolore horren arabera kontraste handiena duen kolorea sortzen dugu. Adibidez, azentu kolorea .table-primaryilunagoa da eta .table-darkazentu kolore argiagoa du.
Testuaren eta ertzaren koloreak modu berean sortzen dira, eta haien koloreak berez heredatzen dira.
Taularen gelaxkak <thead>beti behealdean lerrokatuta daude bertikalak. Taula-gelaxkek <tbody>beren lerrokadura heredatzen dute <table>eta goialdera lerrokatzen dira lehenespenez. Erabili lerrokatze bertikaleko klaseak behar den lekuan berriro lerrokatzeko.
1. goiburua
2. goiburua
3. goiburua
4. goiburua
vertical-align: middle;Gelaxka honek taulatik heredatzen du
vertical-align: middle;Gelaxka honek taulatik heredatzen du
vertical-align: middle;Gelaxka honek taulatik heredatzen du
Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.
Gelaxka honek vertical-align: bottom;taulako errenkadatik heredatzen du
Gelaxka honek vertical-align: bottom;taulako errenkadatik heredatzen du
Gelaxka honek vertical-align: bottom;taulako errenkadatik heredatzen du
Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.
vertical-align: middle;Gelaxka honek taulatik heredatzen du
vertical-align: middle;Gelaxka honek taulatik heredatzen du
Gelaxka hau goiko aldera lerrokatuta dago.
Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Habia egitea
Ertz-estiloak, estilo aktiboak eta taula-aldaerak ez dituzte habiaratutako taulek heredatzen.
Estiloak habiaratuta dauden tauletara isurtzea saihesteko , haurren konbinatzaile ( >) hautatzailea erabiltzen dugu gure CSSn. , , eta s-en tds eta s guztiak bideratu behar ditugunez , gure hautatzaileak nahiko luzea izango litzateke hura gabe. Horrenbestez, itxura arraro samarreko hautatzailea erabiltzen dugu s eta s guztiak bideratzeko , baina habiaratutako taula potentzialetako bat ere ez.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>Kontuan izan s taula baten seme-alaba zuzen gisa gehitzen baduzu , horiek lehenespenez <tr>bilduta egongo direla , horrela gure hautatzaileak nahi bezala funtzionatuko duela.<tbody>
Anatomia
Mahaiburua
Taulen eta taula ilunen antzera, erabili modifikatzaile klaseak .table-lightedo s gris argia edo iluna agertzeko .table-dark.<thead>
A <caption>taula baten goiburu gisa funtzionatzen du. Pantaila-irakurgailuak dituzten erabiltzaileei taula bat aurkitzen eta zertaz ari den ulertzen eta irakurri nahi duten erabakitzen laguntzen die.
Erabiltzaileen zerrenda
#
Lehenengoa
Azkena
Heldulekua
1
Markatu
Otto
@mdo
2
Jakob
Thornton
@potolo
3
Larry Txoria
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>Mahaiaren goialdean ere jar dezakezu .caption-top.
Erabiltzaileen zerrenda
#
Lehenengoa
Azkena
Heldulekua
1
Markatu
Otto
@mdo
2
Jakob
Thornton
@potolo
3
Larry
txoria
@twitter
<tableclass="table caption-top"><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>
Taulen erantzunak
Taulak erantzuteko aukera ematen du taulak horizontalki erraz mugitzeko. Egin ezazu edozein mahai erantzuteko ikuspegi .tableguztietan .table-responsive. Edo, hautatu gehienezko eten-puntua eta horrekin taula erantzunkorra izan dezan .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Mozketa/mozketa bertikala
Taulen erantzunak erabiltzen dituzte overflow-y: hidden, eta horrek taularen beheko edo goiko ertzetatik haratago doan edukia mozten du. Bereziki, goitibeherako menuak eta hirugarrenen beste widget batzuk moztu ditzake.
Beti erantzuten
Eten puntu guztietan, erabili .table-responsivehorizontalki mugitzeko taulak egiteko.
Erabili .table-responsive{-sm|-md|-lg|-xl|-xxl}behar den moduan eten-puntu jakin batera arte erantzuteko taulak sortzeko. Eten-puntu horretatik aurrera, mahaiak normal portatuko du eta ez da horizontalki mugituko.
Taula hauek hautsita ager daitezke beren estilo sentikorrak bista-zabalera zehatzetan aplikatzen diren arte.