Source

Taulak

Bootstrap-ekin taulen estiloa aukeratzeko dokumentazioa eta adibideak (JavaScript pluginetan duten erabilera nagusia kontuan hartuta).

Adibideak

Hirugarrenen widgetetan taulak oso hedatuta daudenez, hala nola egutegiak eta data-hautatzaileak, gure taulak aukeratzeko diseinatu ditugu . Gehitu oinarrizko klasea .tableedozeinetara <table>, gero hedatu estilo pertsonalizatuekin edo barnean ditugun aldatzaile klase ezberdinekin.

Taulen markaketa oinarrizkoena erabiliz, hona hemen .tableBootstrap-en oinarritutako taulak nola ikusten diren. Taula-estilo guztiak Bootstrap 4-n heredatzen dira , hau da, habiatutako taulak gurasoaren estilo berean izango dira.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

Koloreak ere alderantzika ditzakezu (testu argiarekin atzeko plano ilunetan) .table-dark.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

Mahaiburuaren aukerak

Taulen eta taula ilunen antzera, erabili modifikatzaile klaseak .thead-lightedo s gris argia edo iluna agertzeko .thead-dark.<thead>

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

Ilara marradunak

Erabili .table-stripedzebra marra gehitzeko <tbody>.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

Mugadun mahaia

Gehitu .table-borderedtaularen eta gelaxken alde guztietan ertzak.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Erran daitezkeen errenkadak

Gehitu .table-hoverpasatzeko egoera bat gaitzeko <tbody>.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Mahai txikia

Gehitu .table-smmahaiak trinkoagoak izateko zelulen betegarria erditik moztuta.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Testuinguruko klaseak

Erabili testuinguru-klaseak taulen errenkadak edo gelaxka indibidualak koloreztatzeko.

Klasea	Goiburua	Goiburua
Aktiboa	Zelula	Zelula
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 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>

Taularen atzeko planoko ohiko aldaerak ez daude eskuragarri taula ilunarekin, hala ere, testua edo atzeko planoko utilitateak erabil ditzakezu antzeko estiloak lortzeko.

#	Goiburua	Goiburua
1	Zelula	Zelula
2	Zelula	Zelula
3	Zelula	Zelula
4	Zelula	Zelula
5	Zelula	Zelula
6	Zelula	Zelula
7	Zelula	Zelula
8	Zelula	Zelula
9	Zelula	Zelula

<!-- 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>

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 .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.

Sortu erantzunak diren taulak edozein itzulbiratuz .table, .table-responsive{-sm|-md|-lg|-xl}eta taula horizontalki max-widthkorrituz 576 px, 768 px, 992 px eta 1120 px arteko (baina barne) puntu bakoitzean, hurrenez hurren.

Kontuan izan arakatzaileek gaur egun barruti-testuinguruko kontsultak onartzen ez dituztenez, zatiki-zabalera duten aurrizki eta bistaratzeen mugak min-eta max-aurrizkiak (baldintza jakin batzuetan gerta daitezkeela, adibidez, ppp handiko gailuetan) konparazio hauetarako zehaztasun handiagoko balioak erabiliz. .

Epigrafeak

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

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

Taulak erantzuleak

Taulak erantzuteko aukera ematen du taulak horizontalki erraz mugitzeko. Egin ezazu edozein mahai erantzuteko ikuspegi .tableguztietan .table-responsive. Edo, aukeratu gehienezko eten-puntua eta horrekin taula erantzunkorra edukitzeko .table-responsive{-sm|-md|-lg|-xl}.

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.

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

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

Eten puntu zehatza

Erabili .table-responsive{-sm|-md|-lg|-xl}behar den moduan eten-puntu jakin batera arte erantzuteko taulak sortzeko. Eten-puntu horretatik aurrera, mahaiak normal portatuko du eta ez da horizontalki mugituko.

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>