Source

Tablas

Documentación chaymanta ejemplokuna opt-in estilo tablakuna kaqpaq (JavaScript plugins kaqpi prevalente llamk'aynin qusqa) Bootstrap kaqwan.

Ejemplos

Tablakuna mast'arisqa llamk'achisqanrayku kimsa kaq widgetkunantinpi calendariokuna chaymanta p'unchaw akllaqkuna hina, tablakunayku ruwasqayku opt-in kananpaq . Yanapakuylla base clase .tablemayqin kaqmanpas <table>, chaymanta mast'ariy sapanchasqa estilokunawan utaq imaymana yapasqa tikraq claseykuwan.

Aswan sapaq tabla markachayta llamk'achispa, kaypi imayna .table-sapanchasqa tablakuna Bootstrap kaqpi rikukunku. Llapan tabla estilokuna Bootstrap 4 kaqpi herenciasqa kanku , niyta munan mayqin anidado tablakuna tayta mama hina estilochasqa kanqa.

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

Chaymantapas colorkunatan tikrawaq —yana fondokunapi k’anchariq qelqakunawan— .table-dark.

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

Mesa uma akllanakuna

Tablakunaman chaymanta yana tablakunaman rikch'akuq, tikraq clasekunata llamk'achiy utaq .thead-lights llimp'i utaq yana gris rikhurinanpaq..thead-dark<thead>

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

Rayayuq filakuna

.table-stripedIma tabla filamanpas zebra-rayado nisqa yapanapaq llamk'achiy <tbody>.

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

Mesa bordeada

.table-borderedTablapa tukuy ladunpi, celdakunapipas fronterakunapaq yapay .

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

Hoverable nisqa filakuna

Huk . .table-hover_<tbody>

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

Uchuy mesa

.table-smMesakuna aswan compacta kananpaq yapay , celda acolchadota kuskanman kuchuspa.

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

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

Clases contextuales nisqa

Contextual clasekunata llamk'achiy tabla filakunata utaq sapa celdakunata llimp'inaykipaq.

Yachakuna	Uma	Uma
Kawsaq	Pukullu	Pukullu
Ñawpaqchasqa	Pukullu	Pukullu
Qallariq	Pukullu	Pukullu
Secundaria	Pukullu	Pukullu
Allinmi	Pukullu	Pukullu
Manchay	Pukullu	Pukullu
Manchachiy	Pukullu	Pukullu
Info	Pukullu	Pukullu
Kanchi	Pukullu	Pukullu
Tutayasqa	Pukullu	Pukullu

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

Sapa kuti tabla qhipa variantes mana yana tablawan kanchu, chaywanpas, qillqa utaq qhipa yanapakuykunata llamk'achiy atikunki rikch'aq estilokuna aypanaykipaq.

# .	Uma	Uma
1.	Pukullu	Pukullu
2.	Pukullu	Pukullu
3.	Pukullu	Pukullu
4.	Pukullu	Pukullu
5.	Pukullu	Pukullu
6.	Pukullu	Pukullu
7.	Pukullu	Pukullu
8.	Pukullu	Pukullu
9. 9.1	Pukullu	Pukullu

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .sr-onlyclasewan pakasqa.

Kutichiq tablakunata ruway mayqintapas .table,wan p'istuykuspa .table-responsive{-sm|-md|-lg|-xl}, tablata sapa p'akiypi horizontalta kuyuchiyta ruwaspa max-width576px, 768px, 992px chaymanta 1120px kaqkama (ichaqa mana churaspachu), chaymanta.

Reparay chaymanta maskaqkuna mana kunan yanapankuchu rango contexto tapuykunata , llamk'ayku muyuriqninpi limitaciones kaqmanta min-chaymanta max-prefijos kaqmanta chaymanta qhaway punkukuna fraccional anchos kaqwan (mayqinkuna wakin condicionkunapi ruwakunman alto-dpi dispositivokunapi, kayhina) chanikuna aswan precisión kaqwan kay tupachiykunapaq llamk'achispa .

Capciones nisqakuna

A <caption>nisqaqa huk tablapaq umalliq hinam llamkan. Yanapakun pantalla ñawiriqkunawan llamk'aqkunata huk tabla tarinankupaq chaymanta entiendenankupaq imamanta chaymanta tanteanankupaq sichus ñawiriyta munanku.

Lista de usuarios
# .	Ñawpaq	Qipa	Hapina
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

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

Tablas respuestas

Tablakuna kutichiqmi tablakunata mana sasachakuspalla horizontalta kuyuchiyta atin. Ima tablatapas llapa qhawanakunapi kutichiq ruway .tablehukwan p'istuykuspa .table-responsive. Utaq, huk hatun ruphay puntota akllay mayqinwanchus huk kutichiq tablayuq kanki chaykama llamk'achispa .table-responsive{-sm|-md|-lg|-xl}.

Recorte/truncación vertical nisqa

Tablakuna kutichiq ruwanku llamk'achiyta overflow-y: hidden, mayqinchus ima contenidotapas tabla urapi utaq pata kantukunamanta aswan karuman riqmanta k'utun. Aswanta, kayqa urayk'aq menúkuna chaymanta wak kimsa kaq widgetkuna k'utuyta atin.

Sapa kuti kutichiq

Sapa pakiy chimpapi, .table-responsivetablakuna horizontalta kuyuchinapaq llamk'achiy.

# .	Uma	Uma	Uma	Uma	Uma	Uma	Uma	Uma	Uma
1.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
2.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
3.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu

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

Punto de ruptura específico nisqa

.table-responsive{-sm|-md|-lg|-xl}Huk rakinakama kutichiq tablakuna ruwanapaq necesitasqanmanhina llamk'achiy . Chay pakiymanta chaymanta wichayman, tabla normalta comportakunqa manataq horizontalta kuyuchinqachu.

# .	Uma	Uma	Uma	Uma	Uma
1.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
2.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
3.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu

# .	Uma	Uma	Uma	Uma	Uma
1.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
2.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
3.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu

# .	Uma	Uma	Uma	Uma	Uma
1.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
2.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
3.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu

# .	Uma	Uma	Uma	Uma	Uma
1.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
2.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu
3.	Pukullu	Pukullu	Pukullu	Pukullu	Pukullu

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