Documentació i exemples per a l'estil d'activació de les taules (donat el seu ús predominant als connectors de JavaScript) amb Bootstrap.
En aquesta pàgina
Visió general
A causa de l'ús generalitzat d' <table>elements en ginys de tercers com ara calendaris i selectors de dates, les taules de Bootstrap estan activades . Afegiu la classe base .tablea qualsevol <table>i, a continuació, amplieu-lo amb les nostres classes modificadores opcionals o estils personalitzats. Tots els estils de taula no s'hereten a Bootstrap, és a dir, qualsevol taula imbricada pot tenir un estil independent del pare.
Utilitzant l'etiquetatge de taules més bàsic, aquí teniu el .tableaspecte de les taules basades en Bootstrap.
#
Primer
Darrer
Gestionar
1
senyal
Otto
@mdo
2
Jacob
Thornton
@greix
3
Larry l'ocell
@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>
Variants
Utilitzeu classes contextuals per pintar taules, files de taules o cel·les individuals.
Classe
Encapçalament
Encapçalament
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 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>
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 .visually-hiddenclasse.
Taules amb accent
Files de ratlles
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
@twitter
<tableclass="table table-striped">
...
</table>
Aquestes classes també es poden afegir a les variants de la taula:
Ressalteu una fila o cel·la de taula afegint una .table-activeclasse.
#
Primer
Darrer
Gestionar
1
senyal
Otto
@mdo
2
Jacob
Thornton
@greix
3
Larry l'ocell
@twitter
<tableclass="table"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">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
@twitter
<tableclass="table table-dark"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Com funcionen les variants i les taules accentuades?
Per a les taules accentuades ( files amb ratlles , files flotants i taules actives ), hem utilitzat algunes tècniques per fer que aquests efectes funcionin per a totes les nostres variants de taula :
Comencem establint el fons d'una cel·la de taula amb la --bs-table-bgpropietat personalitzada. Totes les variants de la taula estableixen aquesta propietat personalitzada per acolorir les cel·les de la taula. D'aquesta manera, no ens fiquem problemes si s'utilitzen colors semitransparents com a fons de taula.
A continuació, afegim una ombra de quadre inserit a les cel·les de la taula amb box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);la capa a sobre de qualsevol especificada background-color. Com que fem servir una gran difusió i sense desenfocament, el color serà monòton. Com --bs-table-accent-bgque no està configurat per defecte, no tenim una ombra de quadre predeterminada.
Quan s'afegeixen , .table-stripedo .table-hoverclasses , s'estableix en un color semitransparent per acolorir el fons..table-active--bs-table-accent-bg
Per a cada variant de taula, generem un --bs-table-accent-bgcolor amb el contrast més alt en funció d'aquest color. Per exemple, el color d'accent .table-primaryés més fosc mentre que .table-darkté un color d'accent més clar.
Els colors del text i de la vora es generen de la mateixa manera, i els seus colors s'hereten per defecte.
Les cel·les de la taula <thead>sempre estan alineades verticalment a la part inferior. Les cel·les de la taula <tbody>hereten la seva alineació <table>i s'alineen a la part superior de manera predeterminada. Utilitzeu les classes d' alineació vertical per tornar a alinear quan calgui.
Títol 1
Títol 2
Títol 3
Títol 4
Aquesta cel·la hereta vertical-align: middle;de la taula
Aquesta cel·la hereta vertical-align: middle;de la taula
Aquesta cel·la hereta vertical-align: middle;de la taula
Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula
Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula
Aquesta cel·la hereta vertical-align: bottom;de la fila de la taula
Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
Aquesta cel·la hereta vertical-align: middle;de la taula
Aquesta cel·la hereta vertical-align: middle;de la taula
Aquesta cel·la està alineada a la part superior.
Aquest és un text de marcador de posició, destinat a ocupar una mica d'espai vertical, per demostrar com funciona l'alineació vertical a les cel·les anteriors.
<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>
Nidificació
Els estils de vora, els estils actius i les variants de taula no són heretats per les taules imbricades.
Per evitar que cap estil es filtri a les taules imbricades, utilitzem el >selector del combinador fill ( ) al nostre CSS. Com que hem d'orientar totes les tds i ths a thead, tbody, i tfoot, el nostre selector es veuria bastant llarg sense ell. Com a tal, utilitzem el .table > :not(caption) > * > *selector d'aspecte força estrany per orientar totes les tds i ths del .table, però cap de les possibles taules imbricades.
Tingueu en compte que si afegiu <tr>s com a fills directes d'una taula, aquests <tr>s'embolicaran de <tbody>manera predeterminada, fent que els nostres selectors funcionin com cal.
Anatomia
Cap de taula
De manera semblant a les taules i les taules fosques, utilitzeu les classes modificadores .table-lighto .table-darkper fer que <thead>s apareguin de color gris clar o fosc.
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.
Llista d'usuaris
#
Primer
Darrer
Gestionar
1
senyal
Otto
@mdo
2
Jacob
Thornton
@greix
3
Larry l'ocell
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
També podeu posar el <caption>damunt de la taula amb .caption-top.
Llista d'usuaris
#
Primer
Darrer
Gestionar
1
senyal
Otto
@mdo
2
Jacob
Thornton
@greix
3
Larry
l'ocell
@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>
Taules responsives
Les taules responsives permeten desplaçar-se horitzontalment amb facilitat. Fes que qualsevol taula respongui a totes les finestres visualitzades embolicant un .tableamb .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|-xxl}.
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.
Sempre sensible
A cada punt d'interrupció, utilitzeu -lo .table-responsiveper a taules de desplaçament horitzontal.
Utilitzeu .table-responsive{-sm|-md|-lg|-xl|-xxl}-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.
Les variables del factor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) s'utilitzen per determinar el contrast en les variants de la taula.
A part de les variants de la taula clara i fosca, els colors del tema s'il·luminen amb la $table-bg-levelvariable.