Dokumentatioun an Beispiller fir Opt-in Styling vun Dëscher (gëtt hir heefeg Notzung a JavaScript Plugins) mat Bootstrap.
Op dëser Säit
Iwwersiicht
Wéinst der verbreeter Notzung vun <table>Elementer iwwer Drëtt-Partei Widgets wéi Kalenneren an Datum Picker, Bootstrap Dëscher sinn opt-in . Füügt d'Basisklass .tableun all <table>, verlängert dann mat eisen optionalen Modifizéierungsklassen oder personaliséierte Stiler. All Dëschstiler ginn net am Bootstrap ierflecher, dat heescht datt all nestet Dëscher onofhängeg vum Elterendeel stylesch kënne ginn.
Mat der Basis Table Markup, hei ass wéi .table-baséiert Dëscher am Bootstrap kucken.
#
Éischten
Lescht
Grëff
1
Mark
Otto
@mdo
2
Jakob
Thornton
@fett
3
Larry de Vugel
@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>
Varianten
Benotzt kontextuell Klassen fir Dëscher, Tabellereien oder eenzel Zellen ze faarwen.
Klass
Rubrik
Rubrik
Default
Zell
Zell
Primär
Zell
Zell
Secondaire
Zell
Zell
Erfolleg
Zell
Zell
Gefor
Zell
Zell
Warnung
Zell
Zell
Info
Zell
Zell
Liicht
Zell
Zell
Däischter
Zell
Zell
<!-- 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>
Bedeitung vun Hëllefstechnologien
D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.
Akzenter Dëscher
Gestreift Reihen
Benotzt .table-stripedfir Zebrastreifen op all Tabellerei bannent der <tbody>.
#
Éischten
Lescht
Grëff
1
Mark
Otto
@mdo
2
Jakob
Thornton
@fett
3
Larry de Vugel
@twitter
<tableclass="table table-striped">
...
</table>
Dës Klassen kënnen och zu Tabellvarianten bäigefüügt ginn:
Mir fänken un mam Hannergrond vun enger Tabellzelle mat der --bs-table-bgpersonaliséierter Eegeschaft ze setzen. All Tabellvarianten setzen dann déi personaliséiert Eegeschafte fir d'Tabellenzellen ze faarwen. Esou komme mir net an de Schwieregkeeten, wann semi-transparent Faarwen als Dëschhannergrënn benotzt ginn.
Da füüge mir en Insetbox Schatten op den Dëschzellen mat box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);enger Schicht uewen op all spezifizéierter background-color. Well mir eng rieseg Verbreedung benotzen a kee Blur, wäert d'Faarf monoton sinn. Well --bs-table-accent-bget als Standard net agesat ass, hu mir kee Standardbox Schatten.
Wann entweder .table-striped, .table-hoveroder .table-activeKlassen bäigefüügt ginn, --bs-table-accent-bggëtt de op eng semitransparent Faarf gesat fir den Hannergrond ze faarwen.
Fir all Tabellvariant generéiere mir eng --bs-table-accent-bgFaarf mat dem héchste Kontrast jee no där Faarf. Zum Beispill ass d'Akzentfaarf fir .table-primaryméi däischter wärend .table-darkeng méi hell Akzentfaarf huet.
Text- a Grenzfaarwen ginn op déiselwecht Manéier generéiert, an hir Faarwen ginn als Standard ierflecher.
Dësch Zellen vun <thead>sinn ëmmer vertikal op ënnen ausgeriicht. Tabellzellen <tbody>ierwen hir Ausrichtung aus <table>a si standardiséiert op d'Spëtzt ausgeriicht. Benotzt d' Vertikal Ausrichtung Klassen fir nei ze alignéieren wou néideg.
Rubrik 1
Rubrik 2
Rubrik 3
Rubrik 4
Dës Zell ierft vertical-align: middle;vum Dësch
Dës Zell ierft vertical-align: middle;vum Dësch
Dës Zell ierft vertical-align: middle;vum Dësch
Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.
Dës Zell ierft vertical-align: bottom;aus der Tabellerei
Dës Zell ierft vertical-align: bottom;aus der Tabellerei
Dës Zell ierft vertical-align: bottom;aus der Tabellerei
Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.
Dës Zell ierft vertical-align: middle;vum Dësch
Dës Zell ierft vertical-align: middle;vum Dësch
Dës Zell ass no uewen ausgeriicht.
Dëst ass e puer Plazhaltertext, geduecht fir e bësse vertikal Plaz opzehuelen, fir ze weisen wéi déi vertikal Ausrichtung an de viregte Zellen funktionnéiert.
<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>
Nesting
Grenzstiler, aktive Stiler an Tabellvarianten ginn net vun nestet Dëscher ierflecher.
Fir ze verhënneren datt all Stiler op nestet Dëscher auslafen, benotze mir de Kannerkombinator ( >) Selektor an eiser CSS. Well mir mussen all tds an ths an der Zil- thead, tbody, an tfoot, eise selector géif ouni et flott laang kucken. Als solch benotze mir den zimlech ongewéinleche .table > :not(caption) > * > *Selektor fir all tds an ths vun der ze zielen .table, awer keng vun all potenziell nestet Dëscher.
Bedenkt datt wann Dir <tr>s als direkt Kanner vun engem Dësch bäidréit, <tr>déi an engem <tbody>Standard gewéckelt ginn, sou datt eis Selektorer funktionnéieren wéi virgesinn.
Anatomie
Dësch Kapp
Ähnlech wéi Dëscher an donkel Dëscher, benotzt d'Modifikateur Klassen .table-lightoder .table-darkfir datt <thead>s hell oder donkelgro schéngen.
A <caption>funktionnéiert wéi eng Rubrik fir en Dësch. Et hëlleft Benotzer mat Écran Lieser engem Dësch ze fannen a verstoen ëm wat et geet an entscheeden ob se et liesen wëllen.
Lëscht vun de Benotzer
#
Éischten
Lescht
Grëff
1
Mark
Otto
@mdo
2
Jakob
Thornton
@fett
3
Larry de Vugel
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Dir kënnt och den <caption>op der Spëtzt vum Dësch mat .caption-top.
Lëscht vun de Benotzer
#
Éischten
Lescht
Grëff
1
Mark
Otto
@mdo
2
Jakob
Thornton
@fett
3
Larry
de Vugel
@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>
Reaktiounsfäeger Dëscher
Reaktiounsfäeger Dëscher erlaben Dëscher horizontal mat Liichtegkeet ze scrollen. Maacht all Dësch reaktiounsfäeger iwwer all Viewports andeems Dir e .tablemat wéckelt .table-responsive. Oder wielt e Maximum Breakpoint mat deem Dir e reaktiounsfäeger Dësch mat .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikal Ausschnëtt / Ofkierzung
Reaktiounsfäeger Dëscher benotzen overflow-y: hidden, déi all Inhalt ofschneiden deen iwwer déi ënnescht oder iewescht Kante vum Dësch geet. Besonnesch dëst kann Dropdown-Menüen an aner Drëtt-Partei Widgets ofschneiden.
Ëmmer reaktiounsfäeger
Iwwer all Breakpoint benotzt .table-responsivefir horizontal Scrollen Dëscher.
Benotzt .table-responsive{-sm|-md|-lg|-xl|-xxl}wéi néideg fir reaktiounsfäeger Dëscher bis zu engem bestëmmte Breakpoint ze kreéieren. Vun deem Breakpoint an erop, wäert den Dësch normal behuelen an net horizontal scrollen.
Dës Dëscher kënnen gebrach schéngen bis hir reaktiounsfäeger Stiler op spezifesch Viewport Breet gëllen.
D'Faktorvariablen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) gi benotzt fir de Kontrast an Tabellvarianten ze bestëmmen.
Nieft den hellen an donkelen Dëschvarianten ginn d'Themafaarwe vun der $table-bg-levelVariabel erliichtert.