Documenta et exempla pro opt-in stylis tabularum (praevalentibus usu in JavaScript plugins datis) apud Bootstrap.
In hac pagina
Overview
Ob diffusum <table>elementorum usum per tertiam factionem contentorum quasi calendarii et temporis fraudatores, tabulae Bootstrap sunt in opt-in . Classem basim cuivis adde .table, <table>cum nostris stylis ad libitum determinativis classibus vel consuetudinibus extende. Omnes styli mensae in Bootstrap hereditari non possunt, significationes quaslibet mensas nestas independentes a parente dici possunt.
Mensa principalissima markup utens, hic est quomodo .tabletabulae fundatae in Bootstrap spectant.
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Avis Larry
@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>
Variantes
Classes contextuales utere ad tabulas colorandas, ordines mensas vel ad singulas cellulas.
Classis
Venantius Fortunatus
Venantius Fortunatus
Default
Cellula
Cellula
Primarium
Cellula
Cellula
secundarium
Cellula
Cellula
Success
Cellula
Cellula
Periculum
Cellula
Cellula
Monitum
Cellula
Cellula
Info
Cellula
Cellula
lux
Cellula
Cellula
Dark
Cellula
Cellula
<!-- 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>
Deferre significatio technologiae adiuvandae
Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hiddengenere.
Tabulae acuta
Striata ordines
Addere .table-stripedadhibenda est zebra-striata ad quemlibet ordinem tabulae intra <tbody>.
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Avis Larry
@twitter
<tableclass="table table-striped">
...
</table>
Hae classes etiam variantibus tabulae addi possunt;
Exaggerare mensam ordinis seu cellam addito .table-activegenere.
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Avis Larry
@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>
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Avis Larry
@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>
Quomodo tabulae variantes et accentuatae operantur?
Pro tabulis acuiis ( ordinibus striatis , ordinibus mobilibus , et actuosis tabulis ) , usi sumus technicis quibusdam artificiis ad hos effectus operandos ad omnes tabulas nostras variantes :
Incipimus collocando curriculum mensae cellae cum --bs-table-bgproprietate consuetudinis. Omnes tabulae variantes tunc pone proprietatem illam consuetudinem ut cellas mensae colorant. Hoc modo non moleste venimus si colores semi-perlucentes utantur mensae in subiectis.
Deinde addimus umbram cistae incisam super cellulis mensae cum box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);tabulato super quodvis determinatum background-color. Quia vasto utimur et nullo labes, color monotonus erit. Cum --bs-table-accent-bgper defaltam instatur, defaltam umbram non habemus.
Ubi aut .table-stripedaut .table-hoverclasses .table-activeadduntur, --bs-table-accent-bgcolori semitransparent ad colorandum subiectum positum est.
Pro unaquaque tabula variante, generamus --bs-table-accent-bgcolorem summa antithesi pendentia ab illo colore. Verbi gratia, color .table-primaryaccentuum est obscurior, dum .table-darkhabet leviorem accentum colorem.
Colores colorum et fimbriarum generantur eodem modo, et eorum colores per defaltam hereditantur.
Mensae cellae <thead>semper ad imum verticalem perpenduntur. Tabulae cellae in <tbody>hereditate suae noctis ab <table>et ad summum per defaltam perpenduntur. Utere perpendiculi align classes ad re-align ubi opus fuerit.
Petere 1
Petere 2
Petere 3
Petere 4
Haec cellula hæredit vertical-align: middle;a mensa
Haec cellula hæredit vertical-align: middle;a mensa
Haec cellula hæredit vertical-align: middle;a mensa
Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.
Haec cellula hereditat vertical-align: bottom;a mensa row
Haec cellula hereditat vertical-align: bottom;a mensa row
Haec cellula hereditat vertical-align: bottom;a mensa row
Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.
Haec cellula hæredit vertical-align: middle;a mensa
Haec cellula hæredit vertical-align: middle;a mensa
Haec cellula ad cacumen varius est.
Hic textus quidam locus possessoris est, qui aliquid spatii verticalis assumere intendit, ut demonstraret quomodo dam verticalem in cellulis praecedentibus operatur.
<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>
Nidificans
Termini styli, styli activorum, et variantes mensae a tabulis nidificatis non possidentur.
Ad tabulas nidificandas ne stili quidlibet emissae, puero combinatore utimur ( >) electore nostro in CSS. Cum opus sit ut omnia tds et ths in thead, tbodyet tfoot, selector noster sine ea satis diu inspiciat . .table > :not(caption) > * > *Ut tales, selectorem magis inparem intuenti utimur ad omnes tds et ths ipsius oppugnandum.table , nullae autem ullius tabulae potentialis nestrae.
Nota quod si addas <tr>filios directos mensae, illi <tr>involventur <tbody>per defaltam, ita selectores nostros ut institutum operantur.
Anatomia
Mensa caput
Similia tabulae et tabulae obscurae, utere classibus determinativis, .table-lightvel .table-darkut <thead>appareant lux vel grisea.
Munera <caption>sicut petere mensam. Utentes adiuvat legentibus in screen ut mensam inveniat et quid suus 'intelligat' et si eam legere voluerint, decernunt.
Index users
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Avis Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Potes etiam <caption>mensam cum superpositam ponere .caption-top.
Index users
#
Primis
Last
Capulus
1
Mark
Otto
@mdo
2
Iacobus
Thornton
@fat
3
Larry
Avis
@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>
Responsivum tabulae
Mensae responsales permittunt tabulas facile transversas in volumine. Fac quamlibet mensam responsivam per omnes prospectus per involutionem .tablecum .table-responsive. Vel elige punctum maximum quo ad mensam responsivam habere utendo .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertical clipping / truncation
Mensae responsoriae utuntur overflow-y: hidden, quae res aliquas rescindunt quae super imum vel summum tabulae margines excedunt. Praesertim hoc menus dropdown et aliae tertiae factionis contenta circumplecti possunt.
Semper responsive
Per omne punctum, utere .table-responsivead tabulas horizontaliter scrolling.
Utere .table-responsive{-sm|-md|-lg|-xl|-xxl}ut opus est ad mensas responsivas creandas usque ad punctum particulare fracturae. Ab illo puncto et sursum, mensa regulariter se geret et non horizontaliter librum.
Hae tabulae fractae videri possunt donec styli responsivas eorum in latitudines certas prospectus applicant.