Dokumentasi dan contoh untuk gaya tabel opt-in (mengingat penggunaannya yang lazim di plugin JavaScript) dengan Bootstrap.
Contoh
Karena meluasnya penggunaan tabel di widget pihak ketiga seperti kalender dan pemilih tanggal, kami telah merancang tabel kami untuk ikut serta . Cukup tambahkan kelas dasar .tableke any <table>, lalu perluas dengan gaya khusus atau berbagai kelas pengubah yang disertakan.
Menggunakan markup tabel paling dasar, inilah .tabletampilan tabel berbasis di Bootstrap. Semua gaya tabel diwarisi dalam Bootstrap 4 , artinya setiap tabel bersarang akan ditata dengan cara yang sama seperti induknya.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
Anda juga dapat membalikkan warna—dengan teks terang di latar belakang gelap—dengan .table-dark.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
Opsi kepala meja
Mirip dengan tabel dan tabel gelap, gunakan kelas pengubah .thead-lightatau .thead-darkuntuk membuat <thead>s tampak abu-abu terang atau gelap.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
Baris bergaris
Gunakan .table-stripeduntuk menambahkan zebra-striping ke baris tabel mana pun dalam file <tbody>.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
Meja berbatas
Tambahkan .table-bordereduntuk batas di semua sisi tabel dan sel.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
Meja tanpa batas
Tambahkan .table-borderlessuntuk tabel tanpa batas.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
.table-borderlessjuga dapat digunakan pada meja gelap.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
Baris yang dapat dilayangkan
Tambahkan .table-hoveruntuk mengaktifkan status hover pada baris tabel dalam file <tbody>.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
Meja kecil
Tambahkan .table-smuntuk membuat tabel lebih ringkas dengan memotong bantalan sel menjadi dua.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
Kelas kontekstual
Gunakan kelas kontekstual untuk mewarnai baris tabel atau sel individual.
Kelas
Menuju
Menuju
Aktif
Sel
Sel
Bawaan
Sel
Sel
Utama
Sel
Sel
Sekunder
Sel
Sel
Kesuksesan
Sel
Sel
Bahaya
Sel
Sel
Peringatan
Sel
Sel
Info
Sel
Sel
Lampu
Sel
Sel
Gelap
Sel
Sel
Varian latar belakang tabel biasa tidak tersedia dengan tabel gelap, namun, Anda dapat menggunakan utilitas teks atau latar belakang untuk mendapatkan gaya yang serupa.
#
Menuju
Menuju
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
Menyampaikan makna pada teknologi bantu
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Captions
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
List of users
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Tabel ini mungkin tampak rusak hingga gaya responsifnya diterapkan pada lebar area pandang tertentu.