Dokumentasie en voorbeelde vir intekening-stilering van tabelle (gegewe hul algemene gebruik in JavaScript-inproppe) met Bootstrap.
Voorbeelde
As gevolg van die wydverspreide gebruik van tabelle oor derdeparty-legstukke soos kalenders en datumkiesers, het ons ons tabelle ontwerp om in te teken . Voeg net die basisklas .tableby enige <table>, en brei dan uit met gepasmaakte style of ons verskillende ingesluit wysigerklasse.
Deur die mees basiese tabelopmaak te gebruik, is hier hoe .tablegebaseerde tabelle in Bootstrap lyk. Alle tabelstyle word in Bootstrap 4 geërf , wat beteken dat enige geneste tabelle op dieselfde manier as die ouer gestileer sal word.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
Jy kan ook die kleure omkeer—met ligte teks op donker agtergronde—met .table-dark.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
Tafelkop opsies
Soortgelyk aan tabelle en donker tabelle, gebruik die wysigerklasse .thead-lightof .thead-darkom <thead>s lig of donkergrys te laat lyk.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
Gestreepte rye
Gebruik .table-stripedom sebrastrepe by enige tabelry binne die <tbody>.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
Borderige tafel
Voeg by .table-borderedvir grense aan alle kante van die tabel en selle.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
Borderlose tafel
Voeg by .table-borderlessvir 'n tafel sonder grense.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
.table-borderlesskan ook op donker tafels gebruik word.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
Beweegbare rye
Voeg .table-hoverby om 'n sweeftoestand op tabelrye binne 'n <tbody>.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
Klein tafeltjie
Voeg .table-smby om tafels meer kompak te maak deur selvulling in die helfte te sny.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
Kontekstuele klasse
Gebruik kontekstuele klasse om tabelrye of individuele selle in te kleur.
Klas
Opskrif
Opskrif
Aktief
Sel
Sel
Verstek
Sel
Sel
Primêr
Sel
Sel
Sekondêr
Sel
Sel
Sukses
Sel
Sel
Gevaar
Sel
Sel
Waarskuwing
Sel
Sel
Inligting
Sel
Sel
Lig
Sel
Sel
Donker
Sel
Sel
Gereelde tafelagtergrondvariante is nie met die donker tafel beskikbaar nie, maar jy kan teks- of agtergrondhulpmiddels gebruik om soortgelyke style te bereik.
#
Opskrif
Opskrif
1
Sel
Sel
2
Sel
Sel
3
Sel
Sel
4
Sel
Sel
5
Sel
Sel
6
Sel
Sel
7
Sel
Sel
8
Sel
Sel
9
Sel
Sel
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.
Skep responsiewe tabelle deur enige .tablemet toe te draai .table-responsive{-sm|-md|-lg|-xl}, sodat die tabel horisontaal by elke max-widthbreekpunt van tot (maar nie ingesluit nie) 576px, 768px, 992px en 1120px onderskeidelik laat blaai.
Let daarop dat aangesien blaaiers tans nie reekskonteksnavrae ondersteun nie , werk ons om die beperkings van min-en max-voorvoegsels en kykvensters met fraksionele breedtes (wat byvoorbeeld onder sekere toestande op hoë-dpi-toestelle kan voorkom) deur waardes met hoër akkuraatheid vir hierdie vergelykings te gebruik .
Onderskrifte
A <caption>funksioneer soos 'n opskrif vir 'n tabel. Dit help gebruikers met skermlesers om 'n tabel te vind en te verstaan waaroor dit gaan en te besluit of hulle dit wil lees.
Lys van gebruikers
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@twitter
Responsiewe tabelle
Responsiewe tabelle laat tabelle toe om met gemak horisontaal te blaai. Maak enige tabel responsief oor alle kykpoorte deur 'n .tablemet .table-responsive. Of kies 'n maksimum breekpunt waarmee jy 'n responsiewe tabel moet hê deur .table-responsive{-sm|-md|-lg|-xl}.
Vertikale knip/afkapping
Responsiewe tabelle maak gebruik van overflow-y: hidden, wat enige inhoud afknip wat verder gaan as die onderste of boonste rande van die tabel. Dit kan veral aftrekkieslyste en ander derdeparty-legstukke afknip.
Altyd responsief
Oor elke breekpunt, gebruik .table-responsiveom tabelle horisontaal te blaai.
#
Opskrif
Opskrif
Opskrif
Opskrif
Opskrif
Opskrif
Opskrif
Opskrif
Opskrif
1
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
2
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
3
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Sel
Breekpunt spesifiek
Gebruik .table-responsive{-sm|-md|-lg|-xl}soos nodig om responsiewe tabelle tot by 'n spesifieke breekpunt te skep. Vanaf daardie breekpunt en hoër sal die tabel normaal optree en nie horisontaal blaai nie.
Hierdie tabelle kan dalk gebroke lyk totdat hul responsiewe style op spesifieke kykpoortwydtes van toepassing is.