Taules
Documentació i exemples per a l'estil d'activació de les taules (donat el seu ús predominant als connectors de JavaScript) amb Bootstrap.
A causa de l'ús generalitzat de taules en ginys de tercers, com ara calendaris i selectors de dates, hem dissenyat les nostres taules perquè estiguin activades . Només heu d'afegir la classe base .table
a qualsevol <table>
i, a continuació, ampliar-lo amb estils personalitzats o amb les nostres diferents classes modificadores incloses.
Utilitzant l'etiquetatge de taules més bàsic, aquí teniu el .table
aspecte de les taules basades en Bootstrap. Tots els estils de taula s'hereten a Bootstrap 4 , és a dir, les taules imbricades tindran l'estil de la mateixa manera que el pare.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
També podeu invertir els colors, amb text clar sobre fons fosc, amb .table-dark
.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
De manera semblant a les taules i les taules fosques, utilitzeu les classes modificadores .thead-light
o .thead-dark
per fer que <thead>
s apareguin de color gris clar o fosc.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
Utilitzeu .table-striped
-lo per afegir ratlles de zebra a qualsevol fila de la taula dins del fitxer <tbody>
.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
Afegiu .table-bordered
les vores a tots els costats de la taula i cel·les.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
Afegiu .table-borderless
per a una taula sense vores.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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-borderless
també es pot utilitzar en taules fosques.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
Afegeix .table-hover
per habilitar l'estat de flotació a les files de la taula dins d'un fitxer <tbody>
.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
Afegiu .table-sm
-hi per fer les taules més compactes tallant el farciment cel·lular per la meitat.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry l'ocell |
<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>
Utilitzeu classes contextuals per acolorir files de taules o cel·les individuals.
Classe | Encapçalament | Encapçalament |
---|---|---|
Actiu | Cèl·lula | Cèl·lula |
Per defecte | Cèl·lula | Cèl·lula |
primària | Cèl·lula | Cèl·lula |
Secundària | Cèl·lula | Cèl·lula |
Èxit | Cèl·lula | Cèl·lula |
Perill | Cèl·lula | Cèl·lula |
Avís | Cèl·lula | Cèl·lula |
Informació | Cèl·lula | Cèl·lula |
Llum | Cèl·lula | Cèl·lula |
Fosc | Cèl·lula | Cèl·lula |
<!-- 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>
Les variants de fons de taula normals no estan disponibles amb la taula fosca, però, podeu utilitzar utilitats de text o fons per aconseguir estils similars.
# | Encapçalament | Encapçalament |
---|---|---|
1 | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula |
4 | Cèl·lula | Cèl·lula |
5 | Cèl·lula | Cèl·lula |
6 | Cèl·lula | Cèl·lula |
7 | Cèl·lula | Cèl·lula |
8 | Cèl·lula | Cèl·lula |
9 | Cèl·lula | Cèl·lula |
<!-- 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>
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-only
classe.
Creeu taules responsives embolicant-ne qualsevol .table
amb .table-responsive{-sm|-md|-lg|-xl}
, fent que la taula es desplaci horitzontalment a cada max-width
punt d'interrupció de fins a (però sense incloure) 576 px, 768 px, 992 px i 1120 px, respectivament.
Tingueu en compte que, com que actualment els navegadors no admeten consultes de context d'interval , treballem amb les limitacions min-
i max-
els prefixos i les finestres amb amplades fraccionades (que es poden produir en determinades condicions en dispositius d'alt ppp, per exemple) mitjançant l'ús de valors amb més precisió per a aquestes comparacions. .
A <caption>
funciona com l'encapçalament d'una taula. Ajuda els usuaris amb lectors de pantalla a trobar una taula i entendre de què es tracta i decidir si la volen llegir.
# | Primer | Darrer | Gestionar |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
Les taules responsives permeten desplaçar-se horitzontalment amb facilitat. Fes que qualsevol taula respongui a totes les finestres visualitzades embolicant un .table
amb .table-responsive
. O, escolliu un punt d'interrupció màxim amb el qual voleu tenir una taula responsiva amb .table-responsive{-sm|-md|-lg|-xl}
.
Retall/truncament vertical
Les taules responsives fan servir overflow-y: hidden
, que retalla qualsevol contingut que va més enllà de les vores inferior o superior de la taula. En particular, això pot retallar menús desplegables i altres ginys de tercers.
A cada punt d'interrupció, utilitzeu -lo .table-responsive
per a taules de desplaçament horitzontal.
# | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament |
---|---|---|---|---|---|---|---|---|---|
1 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Utilitzeu .table-responsive{-sm|-md|-lg|-xl}
-lo segons sigui necessari per crear taules responsives fins a un punt d'interrupció concret. A partir d'aquest punt d'interrupció, la taula es comportarà amb normalitat i no es desplaçarà horitzontalment.
Aquestes taules poden semblar trencades fins que els seus estils responsius s'apliquen a amplades específiques de la finestra gràfica.
# | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament |
---|---|---|---|---|---|---|---|---|
1 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament |
---|---|---|---|---|---|---|---|---|
1 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament |
---|---|---|---|---|---|---|---|---|
1 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament | Encapçalament |
---|---|---|---|---|---|---|---|---|
1 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
2 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
3 | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula | Cèl·lula |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>