Dokumentatsioon ja näited tabelite stiili valimiseks (arvestades nende levinud kasutamist JavaScripti pistikprogrammides) Bootstrapiga.
Näited
Tabelite laialdase kasutamise tõttu kolmandate osapoolte vidinates, nagu kalendrid ja kuupäevavalijad, oleme kujundanud oma tabelid nii, et need oleksid lubatud . Lihtsalt lisage põhiklass .tablesuvalisele <table>, seejärel laiendage kohandatud stiilide või meie erinevate kaasatud modifikaatoriklassidega.
Kasutades kõige elementaarsemat tabelimärgistust, .tablenäeme Bootstrapis välja -põhised tabelid. Kõik tabelistiilid on Bootstrap 4-s päritud , mis tähendab, et kõik pesastatud tabelid kujundatakse samamoodi nagu ülem.
.table-borderedTabeli ja lahtrite kõikide külgede ääriste lisamine .
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-bordered"><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>
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-bordered table-dark"><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>
Ääristeta laud
Lisa .table-borderlessääristeta tabeli jaoks.
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-borderless"><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>
.table-borderlesssaab kasutada ka tumedatel laudadel.
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-borderless table-dark"><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>
Hõljutavad read
Lisa .table-hover, et lubada hõljutusoleku tabeliridadel <tbody>.
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-hover"><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>
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-hover table-dark"><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>
Väike laud
Lisage .table-sm, et muuta lauad kompaktsemaks, lõigates lahtri polsterduse pooleks.
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-sm"><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>
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Lind Larry
@twitter
<tableclass="table table-sm table-dark"><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>
Kontekstuaalsed klassid
Kasutage tabeli ridade või üksikute lahtrite värvimiseks kontekstuaalseid klasse.
Klass
Pealkiri
Pealkiri
Aktiivne
Kamber
Kamber
Vaikimisi
Kamber
Kamber
Esmane
Kamber
Kamber
Teisene
Kamber
Kamber
Edu
Kamber
Kamber
Oht
Kamber
Kamber
Hoiatus
Kamber
Kamber
Info
Kamber
Kamber
Valgus
Kamber
Kamber
Tume
Kamber
Kamber
<!-- On rows --><trclass="table-active">...</tr><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-active">...</td><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>
Tavalised tabeli taustavariandid pole tumeda tabeli puhul saadaval, kuid sarnaste stiilide saavutamiseks võite kasutada teksti- või taustautiliite.
#
Pealkiri
Pealkiri
1
Kamber
Kamber
2
Kamber
Kamber
3
Kamber
Kamber
4
Kamber
Kamber
5
Kamber
Kamber
6
Kamber
Kamber
7
Kamber
Kamber
8
Kamber
Kamber
9
Kamber
Kamber
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Looge automaatselt kohanduvad tabelid, mähkides kõik .tabletähega .table-responsive{-sm|-md|-lg|-xl}, pannes tabeli horisontaalselt kerima igas katkestuspunktis (kuid mitte kaasa arvatud) vastavalt 576 pikslit, 768 pikslit, 992 pikslit ja 1120 pikslit.max-width
Pange tähele, et kuna brauserid ei toeta praegu
vahemiku kontekstipäringuid , töötame ümber
murdosa laiusega eesliidete min-jamax- vaateavade piirangute (mis võivad teatud tingimustel esineda näiteks suure eraldusvõimega seadmetes), kasutades nende võrdluste jaoks suurema täpsusega väärtusi. .
Subtiitrid
Funktsioon <caption>toimib nagu tabeli pealkiri. See aitab ekraanilugejatega kasutajatel tabelit leida ja aru saada, millest see räägib, ning otsustada, kas nad soovivad seda lugeda.
Kasutajate loend
#
Esiteks
Viimane
Käepide
1
Mark
Otto
@mdo
2
Jacob
Thornton
@paks
3
Larry
lind
@twitter
<tableclass="table"><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>
Vastuvõtlikud tabelid
Tundlikud tabelid võimaldavad tabeleid hõlpsalt horisontaalselt kerida. Muutke mis tahes tabel kõigis vaateavades tundlikuks, mähkides .tabletähega .table-responsive. Või valige maksimaalne katkestuspunkt, millega kohanemisvõimeline tabel saavutada, kasutades .table-responsive{-sm|-md|-lg|-xl}.
Vertikaalne lõikamine/kärpimine
Tundlikud tabelid kasutavad funktsiooni overflow-y: hidden, mis lõikab ära igasuguse sisu, mis ulatub tabeli alumisest või ülemisest servast kaugemale. Eelkõige võib see välja lõigata rippmenüüd ja muud kolmanda osapoole vidinad.
Alati vastutulelik
.table-responsiveKasutage horisontaalselt kerivate tabelite jaoks igal murdepunktil .
Kasutage .table-responsive{-sm|-md|-lg|-xl}vastavalt vajadusele tundlike tabelite loomiseks kuni konkreetse katkestuspunktini. Alates sellest katkestuspunktist ja ülespoole hakkab tabel käituma tavapäraselt ja ei keri horisontaalselt.
Need tabelid võivad tunduda katkised, kuni nende reageerivad stiilid rakenduvad teatud vaateava laiustele.