Bootstrap yordamida jadvallarni (JavaScript plaginlarida keng qo'llanilishini hisobga olgan holda) sozlash uchun hujjatlar va misollar.
Ushbu sahifada
Umumiy koʻrinish
<table>Kalendarlar va sana tanlagichlar kabi uchinchi tomon vidjetlarida elementlarning keng qoʻllanilishi tufayli Bootstrap jadvallari roʻyxatga olinadi . Asosiy sinfni .tableistalgan ga qo'shing <table>, so'ngra ixtiyoriy modifikator sinflarimiz yoki maxsus uslublarimiz bilan kengaytiring. Barcha jadval uslublari Bootstrap-da meros qilib olinmaydi, ya'ni har qanday ichki o'rnatilgan jadvallar ota-onadan mustaqil ravishda tuzilishi mumkin.
Eng oddiy jadval belgilaridan foydalanib, .tableBootstrap-da asoslangan jadvallar qanday ko'rinishga ega.
#
Birinchidan
Oxirgi
Tutqich
1
Mark
Otto
@mdo
2
Yoqub
Tornton
@yog'
3
Qush Larri
@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>
Variantlar
Jadvallarni, jadval qatorlarini yoki alohida kataklarni ranglash uchun kontekstli sinflardan foydalaning.
Sinf
Sarlavha
Sarlavha
Standart
Hujayra
Hujayra
Asosiy
Hujayra
Hujayra
Ikkilamchi
Hujayra
Hujayra
Muvaffaqiyat
Hujayra
Hujayra
Xavfli
Hujayra
Hujayra
Ogohlantirish
Hujayra
Hujayra
Ma'lumot
Hujayra
Hujayra
Nur
Hujayra
Hujayra
Qorong'i
Hujayra
Hujayra
<!-- 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>
Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
Urg'uli jadvallar
Chiziqli qatorlar
.table-stripedichidagi istalgan jadval qatoriga zebra-chiziq qo'shish uchun foydalaning <tbody>.
#
Birinchidan
Oxirgi
Tutqich
1
Mark
Otto
@mdo
2
Yoqub
Tornton
@yog'
3
Qush Larri
@twitter
<tableclass="table table-striped">
...
</table>
Ushbu sinflar jadval variantlariga ham qo'shilishi mumkin:
--bs-table-bgBiz shaxsiy xususiyatga ega bo'lgan jadval katakchasi fonini o'rnatishdan boshlaymiz . Keyin barcha jadval variantlari jadval katakchalarini ranglash uchun ushbu maxsus xususiyatni o'rnatadi. Shunday qilib, agar yarim shaffof ranglar stol foni sifatida ishlatilsa, muammoga duch kelmaymiz.
So'ngra jadval katakchalariga box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);har qanday ko'rsatilgan qatlam ustiga qo'shilgan soyani qo'shamiz background-color. Biz katta yoyilgan va xiralashmaganimiz sababli rang monoton bo'ladi. Sukut boʻyicha oʻrnatilmaganligi sababli --bs-table-accent-bgbizda birlamchi quti soyasi yoʻq.
.table-striped, yoki .table-hoversinflar .table-activeqo'shilsa, --bs-table-accent-bgfonni ranglash uchun yarim shaffof rangga o'rnatiladi.
Har bir jadval varianti uchun biz --bs-table-accent-bgushbu rangga qarab eng yuqori kontrastli rang hosil qilamiz. Misol uchun, uchun urg'u rangi .table-primaryquyuqroq bo'lsa .table-dark, engil aksent rangga ega.
Matn va chegara ranglari bir xil tarzda yaratiladi va ularning ranglari sukut bo'yicha meros qilib olinadi.
Jadval xujayralari <thead>har doim vertikal ravishda pastga qarab tekislanadi. Jadvaldagi katakchalar <tbody>o'zlarining hizalanishini meros qilib oladi <table>va sukut bo'yicha yuqoriga tekislanadi. Zarur bo'lganda qayta tekislash uchun vertikal tekislash sinflaridan foydalaning.
Sarlavha 1
Sarlavha 2
Sarlavha 3
Sarlavha 4
Bu hujayra vertical-align: middle;jadvaldan meros oladi
Bu hujayra vertical-align: middle;jadvaldan meros oladi
Bu hujayra vertical-align: middle;jadvaldan meros oladi
Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
vertical-align: bottom;Bu katak jadval qatoridan meros oladi
vertical-align: bottom;Bu katak jadval qatoridan meros oladi
vertical-align: bottom;Bu katak jadval qatoridan meros oladi
Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
Bu hujayra vertical-align: middle;jadvaldan meros oladi
Bu hujayra vertical-align: middle;jadvaldan meros oladi
Bu katak tepaga tekislangan.
Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
<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>
Uy qurish
Chegara uslublari, faol uslublar va jadval variantlari ichki o'rnatilgan jadvallar tomonidan meros qilib olinmaydi.
Har qanday uslublar ichki o'rnatilgan jadvallarga o'tib ketishining oldini olish uchun >biz CSS-da bolalar birlashtiruvchi ( ) selektoridan foydalanamiz . Biz , va dagi barcha tds va ths ni nishonga olishimiz kerakligi sababli , bizning selektorimiz unsiz uzoq vaqt ko'rinadi. Shunday qilib, biz barcha s va s ni nishonga olish uchun juda g'alati ko'rinishdagi selektordan foydalanamiz , lekin hech qanday potentsial ichki o'rnatilgan jadvallarning hech biri.theadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>E'tibor bering, agar siz jadvalning to'g'ridan-to'g'ri bolalari sifatida s qo'shsangiz , ular sukut <tr>bo'yicha a ichiga o'raladi va shu bilan bizning selektorlarimiz mo'ljallangan tarzda ishlaydi.<tbody>
Anatomiya
Stol boshi
Jadvallar va quyuq jadvallarga o'xshab, o'zgartiruvchi sinflardan foydalaning yoki .table-lights ochiq yoki to'q kulrang ko'rinishga ega bo'lsin..table-dark<thead>
<caption>Jadval sarlavhasi kabi funktsiyalarni bajaradi . Bu ekranni o'qish dasturlari bo'lgan foydalanuvchilarga jadvalni topishga va u nima haqida ekanligini tushunishga va uni o'qishni xohlash yoki xohlamasliklarini hal qilishga yordam beradi.
Foydalanuvchilar ro'yxati
#
Birinchidan
Oxirgi
Tutqich
1
Mark
Otto
@mdo
2
Yoqub
Tornton
@yog'
3
Qush Larri
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Bundan tashqari, <caption>bilan stolning yuqori qismiga qo'yishingiz mumkin .caption-top.
Foydalanuvchilar ro'yxati
#
Birinchidan
Oxirgi
Tutqich
1
Mark
Otto
@mdo
2
Yoqub
Tornton
@yog'
3
Larri
qush
@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>
Javob beruvchi jadvallar
Javob beruvchi jadvallar jadvallarni gorizontal ravishda osongina aylantirish imkonini beradi. .tablebilan oʻrash orqali har qanday jadvalni barcha koʻrish oynalarida sezgir qiling .table-responsive. Yoki dan foydalanib, javob beruvchi jadvalga ega bo'ladigan maksimal to'xtash nuqtasini tanlang .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikal kesish/kesish
Javob beruvchi jadvallar jadvalning overflow-y: hiddenpastki yoki yuqori chetlaridan tashqariga chiqadigan har qanday tarkibni o'chirib qo'yadigan dan foydalanadi. Xususan, bu ochiladigan menyular va boshqa uchinchi tomon vidjetlarini kesib tashlashi mumkin.
Har doim sezgir
Har bir to'xtash nuqtasi bo'ylab, .table-responsivegorizontal aylantiruvchi jadvallar uchun foydalaning.
.table-responsive{-sm|-md|-lg|-xl|-xxl}Muayyan to'xtash nuqtasigacha javob beradigan jadvallarni yaratish uchun kerak bo'lganda foydalaning . Ushbu to'xtash nuqtasidan va undan yuqoriga qarab, jadval odatdagidek ishlaydi va gorizontal ravishda aylanmaydi.
Ushbu jadvallar ma'lum ko'rish maydoni kengliklarida sezgir uslublar qo'llanilmaguncha buzilgan ko'rinishi mumkin.
Faktor o'zgaruvchilari ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) jadval variantlaridagi kontrastni aniqlash uchun ishlatiladi.
Yorug'lik va quyuq stol variantlaridan tashqari, mavzu ranglari $table-bg-levelo'zgaruvchi tomonidan ochiladi.