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>

Mugarik gabeko mahaia

Gehitu .table-borderlessertzarik gabeko mahai baterako.

# Lehenengoa Azkena Heldulekua
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter 
<table class="table table-borderless">
  <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>

.table-borderlessmahai ilunetan ere erabil daiteke.

# Lehenengoa Azkena Heldulekua
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter 
<table class="table table-borderless 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>

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

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.

Taula hauek hautsita ager daitezke beren estilo sentikorrak bista-zabalera zehatzetan aplikatzen diren arte.

# Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua
1 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
2 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
3 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua
1 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
2 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
3 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua
1 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
2 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
3 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua Goiburua
1 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
2 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula
3 Zelula Zelula Zelula Zelula Zelula Zelula Zelula Zelula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>