Dokumentasi lan conto kanggo milih gaya tabel (diwenehi panggunaan umum ing plugin JavaScript) nganggo Bootstrap.
Tuladha
Amarga panggunaan tabel sing nyebar ing widget pihak katelu kaya tanggalan lan pemilih tanggal, kita wis ngrancang tabel supaya bisa milih . Cukup tambahake kelas dasar .tablemenyang sembarang <table>, banjur tambah karo gaya khusus utawa macem-macem kelas modifier sing kalebu.
Nggunakake markup tabel paling dhasar, kene carane .tabletabel basis katon ing Bootstrap. Kabeh gaya tabel diwarisake ing Bootstrap 4 , tegese tabel sing disusun bakal ditata kanthi cara sing padha karo wong tuwa.
Tambah .table-borderedkanggo wates ing kabeh pinggir meja lan sel.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
Tabel tanpa wates
Tambah .table-borderlesskanggo meja tanpa wates.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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-borderlessuga bisa digunakake ing meja peteng.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
Larik sing bisa dilebokake
Tambah .table-hoverkanggo ngaktifake status hover ing baris tabel ing a <tbody>.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
Meja cilik
Tambah .table-smkanggo nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry Manuk
@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>
Kelas kontekstual
Gunakake kelas kontekstual kanggo warna baris tabel utawa sel individu.
kelas
judhul
judhul
Aktif
sel
sel
Default
sel
sel
utami
sel
sel
Sekunder
sel
sel
Sukses
sel
sel
bebaya
sel
sel
Pènget
sel
sel
Info
sel
sel
cahya
sel
sel
peteng
sel
sel
<!-- 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>
Varian latar mburi meja reguler ora kasedhiya karo meja peteng, nanging sampeyan bisa nggunakake utilitas teks utawa latar mburi kanggo entuk gaya sing padha.
#
judhul
judhul
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
<!-- 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>
Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
Nggawe tabel responsif kanthi mbungkus sembarang .tablekaro .table-responsive{-sm|-md|-lg|-xl}, nggawe tabel gulung horisontal ing saben max-widthbreakpoint nganti (nanging ora kalebu) 576px, 768px, 992px, lan 1120px, mungguh.
Elinga, amarga browser saiki ora ndhukung
pitakon konteks jangkoan , kita bisa ngatasi watesan
min-lan max-prefiks lan viewport kanthi jembar pecahan (sing bisa kedadeyan ing kahanan tartamtu ing piranti dpi dhuwur, umpamane) kanthi nggunakake nilai kanthi presisi sing luwih dhuwur kanggo mbandhingake. .
Caption
A <caption>fungsi kaya judhul kanggo tabel. Iku mbantu pangguna karo layar maca kanggo nemokake tabel lan ngerti apa iku bab lan mutusaké apa padha arep maca.
Dhaptar pangguna
#
Pisanan
Pungkasan
nangani
1
Tandhani
Otto
@mdo
2
Yakub
Thornton
@lemak
3
Larry
si Manuk
@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>
Tabel responsif
Tabel responsif ngidini tabel bisa digulung kanthi horisontal kanthi gampang. Nggawe tabel responsif ing kabeh viewports kanthi mbungkus .tablekaro .table-responsive. Utawa, pilih breakpoint maksimum kanggo meja responsif kanthi nggunakake .table-responsive{-sm|-md|-lg|-xl}.
Kliping / pemotongan vertikal
Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.
Tansah responsif
Ing saben breakpoint, gunakake .table-responsivekanggo nggulung tabel horisontal.
Gunakake .table-responsive{-sm|-md|-lg|-xl}yen perlu kanggo nggawe tabel responsif nganti breakpoint tartamtu. Saka breakpoint lan munggah, tabel bakal tumindak normal lan ora nggulung horisontal.
Tabel iki bisa uga katon rusak nganti gaya responsif ditrapake ing jembar viewport tartamtu.