Dokumentasi dan contoh untuk penggayaan mengikut serta jadual (memandangkan penggunaan lazimnya dalam pemalam JavaScript) dengan Bootstrap.
Pada halaman ini
Gambaran keseluruhan
Disebabkan oleh penggunaan meluas <table>elemen merentas widget pihak ketiga seperti kalendar dan pemilih tarikh, jadual Bootstrap adalah ikut serta . Tambahkan kelas asas .tablekepada mana -mana <table>, kemudian lanjutkan dengan kelas pengubah suai pilihan kami atau gaya tersuai. Semua gaya jadual tidak diwarisi dalam Bootstrap, bermakna mana-mana jadual bersarang boleh digayakan bebas daripada induk.
Menggunakan penanda jadual yang paling asas, berikut ialah cara .tablejadual berasaskan kelihatan dalam Bootstrap.
#
Pertama
Terakhir
pegang
1
Tandakan
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry the Bird
@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>
Varian
Gunakan kelas kontekstual untuk mewarnai jadual, baris jadual atau sel individu.
Kelas
Tajuk
Tajuk
Lalai
sel
sel
utama
sel
sel
Menengah
sel
sel
Kejayaan
sel
sel
bahaya
sel
sel
Amaran
sel
sel
info
sel
sel
Cahaya
sel
sel
Gelap
sel
sel
<!-- 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>
Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.
Meja beraksen
Barisan berjalur
Gunakan .table-stripeduntuk menambah jalur zebra pada mana-mana baris jadual dalam <tbody>.
#
Pertama
Terakhir
pegang
1
Tandakan
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry the Bird
@twitter
<tableclass="table table-striped">
...
</table>
Kelas ini juga boleh ditambahkan pada varian jadual:
Kita mulakan dengan menetapkan latar belakang sel jadual dengan sifat --bs-table-bgtersuai. Semua varian jadual kemudian menetapkan sifat tersuai itu untuk mewarnakan sel jadual. Dengan cara ini, kita tidak akan menghadapi masalah jika warna separa lutsinar digunakan sebagai latar belakang meja.
Kemudian kami menambah bayangan kotak inset pada sel jadual dengan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ke lapisan di atas mana-mana yang ditentukan background-color. Kerana kami menggunakan hamparan yang besar dan tiada kabur, warna akan menjadi monoton. Oleh kerana --bs-table-accent-bgtidak ditetapkan secara lalai, kami tidak mempunyai bayangan kotak lalai.
Apabila sama ada .table-striped, .table-hoveratau .table-activekelas ditambah, --bs-table-accent-bgia ditetapkan kepada warna separa telus untuk mewarnakan latar belakang.
Untuk setiap varian jadual, kami menjana --bs-table-accent-bgwarna dengan kontras tertinggi bergantung pada warna tersebut. Contohnya, warna loghat untuk .table-primarylebih gelap manakala .table-darkwarna loghat lebih terang.
Warna teks dan sempadan dijana dengan cara yang sama, dan warnanya diwarisi secara lalai.
Sel jadual <thead>sentiasa dijajar menegak ke bahagian bawah. Sel jadual dalam <tbody>mewarisi penjajarannya daripada <table>dan dijajarkan ke bahagian atas secara lalai. Gunakan kelas penjajaran menegak untuk menjajarkan semula jika perlu.
Tajuk 1
Tajuk 2
Tajuk 3
Tajuk 4
Sel ini mewarisi vertical-align: middle;daripada jadual
Sel ini mewarisi vertical-align: middle;daripada jadual
Sel ini mewarisi vertical-align: middle;daripada jadual
Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya.
Sel ini mewarisi vertical-align: bottom;daripada baris jadual
Sel ini mewarisi vertical-align: bottom;daripada baris jadual
Sel ini mewarisi vertical-align: bottom;daripada baris jadual
Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya.
Sel ini mewarisi vertical-align: middle;daripada jadual
Sel ini mewarisi vertical-align: middle;daripada jadual
Sel ini dijajarkan ke bahagian atas.
Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya.
<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>
Bersarang
Gaya sempadan, gaya aktif dan varian jadual tidak diwarisi oleh jadual bersarang.
Untuk mengelakkan sebarang gaya daripada bocor ke jadual bersarang, kami menggunakan >pemilih child combinator ( ) dalam CSS kami. Memandangkan kita perlu menyasarkan semua tds dan ths dalam thead, tbody, dan tfoot, pemilih kami akan kelihatan agak lama tanpanya. Oleh itu, kami menggunakan pemilih yang kelihatan agak ganjil .table > :not(caption) > * > *untuk menyasarkan semua tds dan ths daripada.table , tetapi tiada satu pun jadual bersarang yang berpotensi.
Ambil perhatian bahawa jika anda menambah <tr>s sebagai anak langsung jadual, <tr>ia akan dibalut secara <tbody>lalai, sekali gus menjadikan pemilih kami berfungsi seperti yang dimaksudkan.
Anatomi
Kepala meja
Sama seperti jadual dan jadual gelap, gunakan kelas pengubah suai .table-lightatau .table-darkuntuk menjadikan <thead>s kelihatan kelabu terang atau gelap.
A <caption>berfungsi seperti tajuk untuk jadual. Ia membantu pengguna dengan pembaca skrin untuk mencari jadual dan memahami perkara itu dan memutuskan sama ada mereka mahu membacanya.
Senarai pengguna
#
Pertama
Terakhir
pegang
1
Tandakan
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry the Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Anda juga boleh meletakkan <caption>di bahagian atas meja dengan .caption-top.
Senarai pengguna
#
Pertama
Terakhir
pegang
1
Tandakan
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@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>
Jadual responsif
Jadual responsif membolehkan jadual ditatal secara mendatar dengan mudah. Jadikan mana-mana jadual responsif merentas semua viewport dengan membalut a .tabledengan .table-responsive. Atau, pilih titik putus maksimum untuk mempunyai jadual responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Keratan menegak/pemangkasan
Jadual responsif menggunakan overflow-y: hidden, yang memotong mana-mana kandungan yang melampaui tepi bawah atau atas jadual. Khususnya, ini boleh memotong menu lungsur turun dan widget pihak ketiga yang lain.
Sentiasa responsif
Merentasi setiap titik putus, gunakan .table-responsiveuntuk menatal jadual secara mendatar.
Gunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}seperti yang diperlukan untuk membuat jadual responsif sehingga titik putus tertentu. Dari titik putus itu dan ke atas, jadual akan berkelakuan seperti biasa dan tidak menatal secara mendatar.
Jadual ini mungkin kelihatan rosak sehingga gaya responsifnya digunakan pada lebar port pandang tertentu.
Pembolehubah faktor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) digunakan untuk menentukan kontras dalam varian jadual.
Selain daripada varian meja terang & gelap, warna tema dicerahkan oleh $table-bg-levelpembolehubah.